Components
Loading preview...
Here is Content component
npx shadcn@latest add https://21st.dev/r/meschacirung/content-defaultimport { Cpu, Zap } from 'lucide-react'
import Image from 'next/image'
export default function ContentSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">The Lyra ecosystem brings together our models.</h2>
<div className="relative">
<div className="relative z-10 space-y-4 md:w-1/2">
<p className="text-body">
Lyra is evolving to be more than just the models. <span className="text-title font-medium">It supports an entire ecosystem</span> — from products innovate.
</p>
<p>It supports an entire ecosystem — from products to the APIs and platforms helping developers and businesses innovate</p>
<div className="grid grid-cols-2 gap-3 pt-6 sm:gap-4">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Zap className="size-4" />
<h3 className="text-sm font-medium">Faaast</h3>
</div>
<p className="text-muted-foreground text-sm">It supports an entire helping developers and innovate.</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Cpu className="size-4" />
<h3 className="text-sm font-medium">Powerful</h3>
</div>
<p className="text-muted-foreground text-sm">It supports an entire helping developers and businesses.</p>
</div>
</div>
</div>
<div className="mt-12 h-fit md:absolute md:-inset-y-12 md:inset-x-0 md:mt-0">
<div aria-hidden className="bg-linear-to-l z-1 to-background absolute inset-0 hidden from-transparent to-55% md:block"></div>
<div className="border-border/50 relative rounded-2xl border border-dotted p-2">
<Image src="https://tailark.com/_next/image?url=%2Fcharts.png&w=3840&q=75" className="hidden rounded-[12px] dark:block" alt="payments illustration dark" width={1207} height={929} />
<Image src="https://tailark.com/_next/image?url=%2Fcharts.png&w=3840&q=75" className="rounded-[12px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
</div>
</div>
</div>
</div>
</section>
)
}