pricing-one

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