Loading...
Loading...
> Pricing tables with plan comparison, feature lists, and Stripe checkout integration.
1import { PricingSection } from "@/components/marketing/pricing-section";23export default function LandingPage() {4 return (5 <main>6 <HeroSection />7 <FeaturesSection />8 <PricingSection />9 {/* Other sections */}10 </main>11 );12}
1<Card className="border-primary">2 <CardHeader>3 <Badge>RECOMMENDED</Badge>4 <CardTitle>LIFETIME</CardTitle>5 <div className="text-4xl font-semibold">$299</div>6 </CardHeader>7 <CardContent>8 <ul className="space-y-2">9 <li><Check /> Full source code</li>10 <li><Check /> Lifetime updates</li>11 </ul>12 <Button className="w-full">> GET ACCESS</Button>13 </CardContent>14</Card>
1const [yearly, setYearly] = useState(false);23<div className="flex items-center gap-2">4 <Button5 variant={!yearly ? "default" : "ghost"}6 onClick={() => setYearly(false)}7 >8 > MONTHLY9 </Button>10 <Button11 variant={yearly ? "default" : "ghost"}12 onClick={() => setYearly(true)}13 >14 > YEARLY15 </Button>16 {yearly && <Badge>Save 20%</Badge>}17</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | { name: string; price: string; features: string[]; popular?: boolean }[] | - | Array of pricing plans to display |
| showToggle | boolean | true | Show monthly/yearly toggle |