import * as React from "react"; import { TabNavPricingFour } from "@/registry/tab-nav-pricing-four/tab-nav-pricing-four"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef; type PricingPlan = ComponentProps["plans"][number]; const DEMO_PLANS: PricingPlan[] = [ { id: "starter", name: "Starter", description: "Perfect for individuals and small teams", monthlyPrice: 29, annualPrice: 290, features: [ "Up to 10 team members", "5 GB storage", "Basic analytics", "Email support", "API access", ], cta: { label: "Start Free Trial", variant: "outline", }, }, { id: "professional", name: "Professional", description: "For growing businesses with advanced needs", monthlyPrice: 99, annualPrice: 990, highlighted: true, features: [ "Up to 50 team members", "50 GB storage", "Advanced analytics & reporting", "Priority support", "Advanced API access", "Custom integrations", "SSO authentication", ], cta: { label: "Start Free Trial", }, }, { id: "enterprise", name: "Enterprise", description: "Tailored solutions for large organizations", monthlyPrice: 299, annualPrice: 2990, features: [ "Unlimited team members", "Unlimited storage", "Enterprise analytics", "24/7 dedicated support", "Custom API limits", "White-label options", "Advanced security & compliance", "Dedicated account manager", "Custom SLA", ], cta: { label: "Contact Sales", variant: "outline", }, }, ]; export function TabNavPricingFourDemo() { const handlePlanSelect = (planId: string, cadence: string) => { console.log("Selected plan:", planId, "Cadence:", cadence); }; return (

Choose Your Plan

Flexible pricing that grows with your business. Switch between billing cycles to see your savings.

); } export default TabNavPricingFourDemo;

Simple