pricing-three

1<script>
2	import Button from "$COMPONENTS$/ui/button/button.svelte";
3	import {
4		Card,
5		CardContent,
6		CardDescription,
7		CardHeader,
8		CardTitle,
9	} from "$COMPONENTS$/ui/card";
10	import Check from "@lucide/svelte/icons/check";
11	let pricingList = {
12		free: ["Basic Analytics Dashboard", "5GB Cloud Storage", "Email and Chat Support"],
13		startup: ["Everything in Pro Plan", "5GB Cloud Storage", "Email and Chat Support"],
14		pro: [
15			"Everything in Free Plan",
16			"5GB Cloud Storage",
17			"Email and Chat Support",
18			"Access to Community Forum",
19			"Single User Access",
20			"Access to Basic Templates",
21			"Mobile App Access",
22			"1 Custom Report Per Month",
23			"Monthly Product Updates",
24			"Standard Security Features",
25		],
26	};
27</script>
28 
29<section class="py-16 md:py-32">
30	<div class="mx-auto max-w-6xl px-6">
31		<div class="mx-auto max-w-2xl space-y-6 text-center">
32			<h1 class="text-center text-4xl font-semibold lg:text-5xl">
33				Pricing that Scales with You
34			</h1>
35			<p>
36				Gemini is evolving to be more than just the models. It supports an entire to the
37				APIs and platforms helping developers and businesses innovate.
38			</p>
39		</div>
40 
41		<div class="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
42			<Card>
43				<CardHeader>
44					<CardTitle class="font-medium">Free</CardTitle>
45 
46					<span class="my-3 block text-2xl font-semibold">$0 / mo</span>
47 
48					<CardDescription class="text-sm">Per editor</CardDescription>
49					<Button href="/" variant="outline" class="mt-4 w-full">Get Started</Button>
50				</CardHeader>
51 
52				<CardContent class="space-y-4">
53					<hr class="border-dashed" />
54 
55					<ul class="list-outside space-y-3 text-sm">
56						{#each pricingList.free as item}
57							<li class="flex items-center gap-2">
58								<Check class="size-3" />
59								{item}
60							</li>
61						{/each}
62					</ul>
63				</CardContent>
64			</Card>
65 
66			<Card class="relative">
67				<span
68					class="absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full bg-linear-to-br/increasing from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-white/20 ring-offset-1 ring-offset-gray-950/5 ring-inset"
69					>Popular</span
70				>
71 
72				<CardHeader>
73					<CardTitle class="font-medium">Pro</CardTitle>
74 
75					<span class="my-3 block text-2xl font-semibold">$19 / mo</span>
76 
77					<CardDescription class="text-sm">Per editor</CardDescription>
78 
79					<Button href="/" class="mt-4 w-full">Get Started</Button>
80				</CardHeader>
81 
82				<CardContent class="space-y-4">
83// … truncated