// shadcn import { Button } from "@/components/ui/button" // third-party import { cn } from "cn" // assets import { Check } from "lucide-react" const plans = [ { recommended: false, title: "Basic plan", description: "Ideal for individuals and small businesses with basic data needs.", active: false, price: 19, features: [ "Access to basic feature", "Basic reporting & analytics", "Up to 10 individual users", "5 GB individual data users", "100 visitor", ], about: "*Get started with our Basic Plan for essential data needs. Perfect for individuals and small businesses looking for reliable data solutions.", exploreLink: "Best for individuals", }, { recommended: true, title: "Pro plan", description: "Designed for growing businesses and teams with moderate data requirements.", active: true, price: 49, features: [ "Access to basic feature", "Basic reporting & analytics", "Up to 100 individual users", "15 GB individual data users", "1,000 visitor", ], about: "*Great for teams and growing businesses. Get more features, higher limits, and priority support to help you do more, faster.", exploreLink: "Designed for growing businesses", }, { recommended: false, title: "Enterprise plan", description: "Tailored for large enterprise with high-volume data needs and specialized requirements.", active: false, price: 99, features: [ "Access to basic feature", "Basic reporting & analytics", "Up to 1k individual users", "40 GB individual data users", "10,000 visitor", ], about: "*For large enterprise with high-volume data needs and specialized requirements, our Enterprise Plan offers unlimited data usage and 24/7 dedicated support.", exploreLink: "Tailored for large enterprise", }, ] // constants const themes = { light: { section: "relative bg-slate-100 py-24 sm:py-32 dark:bg-slate-900", stack: "flex flex-col items-center gap-5 sm:gap-12", title: "text-lg font-medium text-slate-800 sm:text-3xl dark:text-slate-50", description: "max-w-150 text-slate-600 dark:text-slate-100", panel: "overflow-hidden rounded-lg bg-card shadow-[0_0_40px_8px_#8e998738]", planTitle: "text-slate-800 dark:text-slate-50", planMuted: "text-slate-600 dark:text-slate-400", priceMuted: "text-slate-600 dark:text-slate-400", price: "text-slate-800 dark:text-slate-50", checkActive: "bg-white text-cyan-500", checkIdle: "bg-cyan-500 text-white", planText: "text-slate-800 dark:text-slate-100", planButton: "w-full rounded-full border-0 border-b-2 shadow-[0_8px_10px_-2px_#8f8f8f6b] hover:translate-y-1 hover:opacity-90 ", planButtonIdle: "border-b-cyan-700 bg-cyan-500 text-white", planCard: "", planCardRecommended: "bg-cyan-500", planCardDefault: "bg-card", planBodyRecommended: "", }, dark: { section: "relative overflow-hidden bg-slate-100 py-24 sm:py-32 dark:bg-slate-800", stack: "flex flex-col items-center gap-5 sm:gap-16", title: "text-lg font-medium text-slate-900 sm:text-3xl dark:text-slate-100", description: "max-w-150 text-slate-700 dark:text-slate-300", panel: "rounded-2xl bg-slate-900 shadow-[0_0_40px_8px_#8e998738]", planTitle: "dark text-slate-100", planMuted: "text-slate-300", priceMuted: "text-slate-400", price: "text-slate-50", checkActive: "bg-white/10 text-white", checkIdle: "bg-pink-500/10 text-pink-500", planText: "text-slate-300", planButton: "w-full rounded-full border-0 border-b-2 hover:translate-y-1 hover:opacity-90 ", planButtonIdle: "border-b-pink-700 bg-pink-500 text-white", planCard: "rounded-2xl", planCardRecommended: "bg-pink-500 lg:-my-10", planCardDefault: "bg-slate-900", planBodyRecommended: "lg:py-20", }, } // types interface Pricing3Props { /** "light" = cyan accent on card surfaces, "dark" = pink accent on slate-900 cards with a raised recommended plan */ theme?: "light" | "dark" } // ------------------------------ | PRICING 3 | ------------------------------ // export default function Pricing3({ theme = "light" }: Pricing3Props) { const t = themes[theme] return (

Our pricing that’s simple with no hidden fees

Get started with affordable plans that include everything you need. No hidden fees, no complicated terms—just clear and honest pricing.

{plans.map((plan, idx) => (

{plan.title}

{plan.description}

${plan.price} /month

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

{feature}

))}

{plan.about}

))}

) }