Brickgrid
Category: Carousels
<section id="showcase" class="md:mt-28 mt-20">
<div class="mx-auto max-w-7xl px-6 md:px-8">
<div class="grid lg:grid-cols-2 gap-10 items-center">
<div class="">
<h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-50">Delightful by default</h2>
<p class="mt-3 text-slate-400 max-w-xl">Crafted details and practical defaults help you deliver premium product
quality without the overhead.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-md bg-emerald-400/15 text-emerald-300 ring-1 ring-emerald-400/20 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-slate-200">Accessible components</div>
<div class="text-sm text-slate-400">Keyboard navigation, ARIA roles, color contrast — done for you.</div>
</div>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-md bg-sky-400/15 text-sky-300 ring-1 ring-sky-400/20 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sliders-horizontal" class="lucide lucide-sliders-horizontal w-3.5 h-3.5"><line x1="21" x2="14" y1="4" y2="4" class=""></line><line x1="10" x2="3" y1="4" y2="4" class=""></line><line x1="21" x2="12" y1="12" y2="12" class=""></line><line x1="8" x2="3" y1="12" y2="12" class=""></line><line x1="21" x2="16" y1="20" y2="20" class=""></line><line x1="12" x2="3" y1="20" y2="20" class=""></line><line x1="14" x2="14" y1="2" y2="6" class=""></line><line x1="8" x2="8" y1="10" y2="14" class=""></line><line x1="16" x2="16" y1="18" y2="22" class=""></line></svg>
</span>
<div>
<div class="text-sm font-medium text-slate-200">Configurable primitives</div>
<div class="text-sm text-slate-400">Compose anything with clean APIs and typed building blocks.</div>
</div>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-md bg-amber-400/15 text-amber-300 ring-1 ring-amber-400/20 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe w-3.5 h-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
</span>
<div>
<div class="text-sm font-medium text-slate-200">Global by design</div>
<div class="text-sm text-slate-400">Edge routing, i18n, and multi-region scaling when you need it.</div>
</div>
</li>
</ul>
<div class="mt-6 flex gap-3">
<a href="#"
class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm bg-white/5 hover:bg-white/10 ring-1 ring-white/10 hover:ring-white/20 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="download" class="lucide lucide-download w-4 h-4">
<path d="M12 15V3" class=""></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<path d="m7 10 5 5 5-5" class=""></path>
</svg>
Download SDK
</a>
<a href="#"
class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm text-slate-200 hover:text-white hover:bg-white/[0.04] ring-1 ring-white/10 hover:ring-white/20 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="file-code" class="lucide lucide-file-code w-4 h-4">
<path d="M10 12.5 8 15l2 2.5" class=""></path>
<path d="m14 12.5 2 2.5-2 2.5" class=""></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" class=""></path>
</svg>
Read docs
</a>
</div>
</div>
<div class="relative">
<div
class="absolute -inset-2 rounded-2xl bg-gradient-to-tr from-violet-500/20 via-sky-500/10 to-fuchsia-500/20 blur-xl">
</div>
<div class="relative rounded-2xl border border-white/10 bg-white/[0.03] p-2 ring-1 ring-black/10">
<div class="rounded-xl overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2bbd6136-d2d5-4bca-8931-b02430b70123_1600w.jpg" alt="Showcase" class="w-full h-[360px] sm:h-[420px] object-cover" style="">
</div>
<div class="grid grid-cols-3 gap-2 mt-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8d8ff092-132d-4cec-88a1-ac20bce98b33_800w.jpg" alt="Gallery 1" class="h-28 w-full object-cover rounded-lg border border-white/10" style="">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/23dc40ab-67bd-4b22-8023-4e4d69b1f770_800w.jpg" alt="Gallery 2" class="h-28 w-full object-cover rounded-lg border border-white/10">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/98116cee-99ac-4356-a273-8f3b0bbcee95_800w.jpg" alt="Gallery 3" class="h-28 w-full object-cover rounded-lg border border-white/10">
</div>
</div>
</div>
</div>
</div>
</section>
create a canvas to display a feature component. we want the feature component to be centered and the space around it to be flexible empty.
reproduce this feature component, change the content
Created by: LandingHero
