"use client" import { motion } from "framer-motion" import { Check } from 'lucide-react' import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" interface PricingTier { name: string price: string description: string features: string[] isPopular?: boolean } const tiers: PricingTier[] = [ { name: "Basic plan", price: "$12", description: "Perfect for small businesses and freelancers just getting started.", features: [ "Curabitur faucibus", "massa ut pretium maximus", "Sed posuere nisi", "Pellentesque eu nibh et neque", "Suspendisse a leo", "Praesent quis venenatis ipsum", "Duis non diam vel tortor", ], }, { name: "Startup", price: "$35", description: "Great for growing businesses that need more features and flexibility.", features: [ "Curabitur faucibus", "massa ut pretium maximus", "Sed posuere nisi", "Pellentesque eu nibh et neque", "Suspendisse a leo", "Praesent quis venenatis ipsum", "Duis non diam vel tortor", ], isPopular: true, }, { name: "Enterprise", price: "$60", description: "Advanced features and support for larger organizations.", features: [ "Curabitur faucibus", "massa ut pretium maximus", "Sed posuere nisi", "Pellentesque eu nibh et neque", "Suspendisse a leo", "Praesent quis venenatis ipsum", "Duis non diam vel tortor", ], }, ] export default function Pricing() { return (

Pricing for all sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur consequat nunc.

{tiers.map((tier, index) => ( {tier.isPopular && (

{tier.name}

{tier.price} /mo

{tier.description}

Features

{feature}

))}

) }