content-three

1<script>
2	import Button from "$COMPONENTS$/ui/button/button.svelte";
3	import ChevronRight from "@lucide/svelte/icons/chevron-right";
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-12">
8		<img
9			class="rounded-(--radius) grayscale"
10			src="https://images.unsplash.com/photo-1530099486328-e021101a494a?q=80&w=2747&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
11			alt="team_image"
12			loading="lazy"
13		/>
14 
15		<div class="grid gap-6 md:grid-cols-2 md:gap-12">
16			<h2 class="text-4xl font-medium">
17				The Lyra ecosystem brings together our models, products and platforms.
18			</h2>
19			<div class="space-y-6">
20				<p>
21					Lyra is evolving to be more than just the models. It supports an entire
22					ecosystem — from products to the APIs and platforms helping developers and
23					businesses innovate.
24				</p>
25 
26				<Button href="/" variant="secondary" size="sm" class="gap-1 pr-1.5">
27					Learn More
28					<ChevronRight class="size-2" />
29				</Button>
30			</div>
31		</div>
32	</div>
33</section>