content-two

1<script>
2	import Zap from "@lucide/svelte/icons/zap";
3	import Cpu from "@lucide/svelte/icons/cpu";
4</script>
5 
6<section class="py-16 md:py-32">
7	<div class="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
8		<h2 class="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
9			The Lyra ecosystem brings together our models.
10		</h2>
11		<div class="relative">
12			<div class="relative z-10 space-y-4 md:w-1/2">
13				<p class="text-body">
14					Lyra is evolving to be more than just the models. <span
15						class="text-title font-medium">It supports an entire ecosystem</span
16					> — from products innovate.
17				</p>
18				<p>
19					It supports an entire ecosystem — from products to the APIs and platforms
20					helping developers and businesses innovate
21				</p>
22 
23				<div class="grid grid-cols-2 gap-3 pt-6 sm:gap-4">
24					<div class="space-y-3">
25						<div class="flex items-center gap-2">
26							<Zap class="size-4" />
27							<h3 class="text-sm font-medium">Faaast</h3>
28						</div>
29						<p class="text-sm text-muted-foreground">
30							It supports an entire helping developers and innovate.
31						</p>
32					</div>
33					<div class="space-y-2">
34						<div class="flex items-center gap-2">
35							<Cpu class="size-4" />
36							<h3 class="text-sm font-medium">Powerful</h3>
37						</div>
38						<p class="text-sm text-muted-foreground">
39							It supports an entire helping developers and businesses.
40						</p>
41					</div>
42				</div>
43			</div>
44			<div class="mt-12 h-fit md:absolute md:inset-x-0 md:-inset-y-12 md:mt-0">
45				<div
46					class="absolute inset-0 z-1 hidden bg-linear-to-l from-transparent to-background to-55% md:block"
47				></div>
48				<div class="relative rounded-2xl border border-dotted border-border/50 p-2">
49					<img
50						src="/charts.png"
51						class="hidden rounded-[12px] dark:block"
52						alt="payments illustration dark"
53						width={1207}
54						height={929}
55					/>
56					<img
57						src="/charts-light.png"
58						class="rounded-[12px] shadow dark:hidden"
59						alt="payments illustration light"
60						width={1207}
61						height={929}
62					/>
63				</div>
64			</div>
65		</div>
66	</div>
67</section>