Pricing Section

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">&gt; GET ACCESS</Button>
13  </CardContent>
14</Card>

1const [yearly, setYearly] = useState(false);
2
3<div className="flex items-center gap-2">
4  <Button
5    variant={!yearly ? "default" : "ghost"}
6    onClick={() => setYearly(false)}
7  >
8    &gt; MONTHLY
9  </Button>
10  <Button
11    variant={yearly ? "default" : "ghost"}
12    onClick={() => setYearly(true)}
13  >
14    &gt; YEARLY
15  </Button>
16  {yearly && <Badge>Save 20%</Badge>}
17</div>