51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T20e8,"use client"; import * as React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button, buttonVariants } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Check, Info } from "lucide-react"; import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, } from "@/components/ui/tooltip"; import { Tagline } from "@/components/pro-blocks/landing-page/tagline"; import { VariantProps } from "class-variance-authority"; const pricingData = { plans: [ { name: "Basic", description: "Perfect for individuals and small projects", features: [ { name: "Up to 5 team members", tooltip: "Collaborate with up to 5 team members on unlimited projects", }, { name: "10GB storage space", tooltip: "Secure cloud storage for all your project files and assets", }, { name: "Basic analytics", tooltip: "Access to essential metrics and performance tracking", }, ], pricing: { monthly: 29, annually: 290, }, variant: "secondary", }, { name: "Standard", description: "Ideal for growing teams and businesses", badge: "Most popular", features: [ { name: "Up to 20 team members", tooltip: "Scale your team with expanded collaboration capabilities", }, { name: "50GB storage space", tooltip: "More storage for larger projects and asset libraries", }, { name: "Advanced analytics", tooltip: "Detailed insights with custom reporting and dashboards", }, { name: "Priority support", tooltip: "Get help within 24 hours from our dedicated support team", }, ], pricing: { monthly: 49, annually: 490, }, variant: "default", highlighted: true, }, { name: "Premium", description: "For large enterprises and advanced needs", features: [ { name: "Unlimited team members", tooltip: "No limits on team size or collaboration", }, { name: "250GB storage space", tooltip: "Enterprise-grade storage with advanced security", }, { name: "Custom analytics", tooltip: "Tailored analytics solutions with API access", }, { name: "24/7 premium support", tooltip: "Round-the-clock dedicated support with 4-hour response time", }, { name: "White-labeling", tooltip: "Custom branding and white-label solutions", }, ], pricing: { monthly: 99, annually: 990, }, variant: "secondary", }, ], }; export function PricingSection1() { const [billingPeriod, setBillingPeriod] = React.useState("monthly"); return (

Pricing section

Choose your plan

Add a concise value statement that addresses price sensitivity and showcases plan flexibility while keeping it under two lines.

Monthly Annually Save 20%

{pricingData.plans.map((plan, index) => (

{plan.badge && ( {plan.badge} )}

{plan.name}

{plan.description}

$ { plan.pricing[ billingPeriod as keyof typeof plan.pricing ] } /{billingPeriod === "monthly" ? "month" : "year"}

{index === 0 ? "What's included:" : `Everything in ${pricingData.plans[index - 1].name}, plus:`}

{plan.features.map((feature, i) => (

{feature.name}

{feature.tooltip}

))}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@shadcndesign","registryDependencies":["card","button","badge","tabs","tooltip","https://shadcndesign-free.vercel.app/r/styles.json","https://shadcndesign-free.vercel.app/r/tagline.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/pro-blocks/landing-page/pricing-sections/pricing-section-1.tsx","content":"$53","type":"registry:component","target":"components/pro-blocks/landing-page/pricing-sections/pricing-section-1.tsx"}],"className":"h-[70svh] min-h-80"}]]}]