Загрузка...
Секция "Hero" для лендинга SaaS или агентства. Двухколоночный дизайн с заголовком, подзаголовком, кнопками CTA, списком преимуществ, демо продукта и отзывами. Tailwind CSS, адаптивный.
<section class="relative overflow-hidden rounded-3xl mt-4 mr-6 mb-4 ml-6 border border-black/10">
<div class="absolute inset-0 -z-10 bg-gradient-to-br from-emerald-100 to-lime-100"></div>
<div class="max-w-7xl md:py-20 mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
<div class="grid md:grid-cols-2 gap-10 items-center">
<div class="">
<h1 class="sm:text-5xl md:text-6xl text-4xl font-medium text-neutral-900 tracking-tight" style="">Turn bold ideas into products — <span class="font-normal italic font-instrument-serif" style="">growth without the noise</span></h1>
<p class="mt-5 text-neutral-700 leading-relaxed font-sans">
We partner with ambitious teams to craft delightful interfaces, validate quickly, and scale with data-backed decisions.
</p>
<div class="mt-8 flex items-center gap-3">
<a href="#" class="inline-flex items-center gap-2 hover:bg-black transition text-sm font-medium text-white bg-neutral-900 rounded-full pt-3 pr-6 pb-3 pl-6">
Get started
</a>
<a href="#" class="inline-flex items-center gap-2 hover:bg-white/60 transition text-sm font-medium border-black/10 border rounded-full pt-3 pr-6 pb-3 pl-6">
See our work
</a>
</div><div class="mt-8 space-y-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600">
<polyline points="20 6 9 17 5 11"></polyline>
</svg>
</div>
<div class="">
<h4 class="text-base font-semibold text-neutral-900 mb-1">Design-First Approach</h4>
<p class="text-sm text-neutral-600 leading-relaxed">We start with deep user research and strategic thinking before touching any pixels. Every interface decision is backed by data and user insights.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
<div class="">
<h4 class="text-base font-semibold text-neutral-900 mb-1">Growth-Driven Results</h4>
<p class="text-sm text-neutral-600 leading-relaxed">Our designs don't just look beautiful—they convert. We optimize for key metrics like user engagement, retention, and revenue growth.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
</svg>
</div>
<div class="">
<h4 class="text-base font-semibold text-neutral-900 mb-1">Lightning-Fast Delivery</h4>
<p class="text-sm text-neutral-600 leading-relaxed">Ship features in days, not months. Our streamlined process and experienced team means you get professional results without the typical agency overhead.</p>
</div>
</div>
</div>
<!-- Client love -->
</div>
<!-- Product demo card -->
<div class="relative">
<article class="group relative overflow-hidden transition-shadow hover:shadow-md shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-neutral-900 border-neutral-800 border rounded-3xl">
<div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
<div class="relative h-56 sm:h-64 rounded-2xl bg-neutral-900 ring-1 ring-inset ring-white/5 overflow-hidden">
<svg class="absolute inset-0 h-full w-full text-neutral-800" aria-hidden="true">
<defs>
<pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M24 0H0V24" fill="none" stroke="currentColor" stroke-width="1"></path>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" class=""></rect>
</svg>
<span class="absolute left-6 top-4 h-0.5 w-10 rounded bg-sky-500"></span>
<div class="absolute right-6 top-8 sm:right-10 sm:top-10 w-[78%] rounded-2xl border border-neutral-800 bg-neutral-900 shadow-lg">
<div class="flex items-center gap-2 px-4 py-3 border-b border-neutral-800">
<span class="h-2.5 w-2.5 rounded-full bg-neutral-800"></span>
<span class="h-2.5 w-2.5 rounded-full bg-neutral-800"></span>
<span class="h-2.5 w-2.5 rounded-full bg-neutral-800"></span>
<div class="ml-3 h-2 w-24 rounded bg-neutral-800"></div>
</div>
<div class="grid grid-cols-3 gap-3 p-4">
<div class="col-span-2 rounded-lg border border-neutral-800 overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ca446c1b-d6e1-4316-9864-4d6306b13cf4_800w.jpg" alt="Minimal 3D render" class="h-28 w-full object-cover">
</div>
<div class="rounded-lg border border-neutral-800 overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7e430a8d-376b-4aba-8993-1350529e5946_800w.jpg" alt="Mountain landscape" class="h-28 w-full object-cover">
</div>
<div class="rounded-lg border border-neutral-800 bg-neutral-900 h-24"></div>
<div class="rounded-lg border border-neutral-800 bg-neutral-900 h-24"></div>
<div class="rounded-lg border border-neutral-800 bg-neutral-900 h-24"></div>
</div>
</div>
</div>
<div class="sm:mt-8 mt-6">
<div class="flex items-center gap-3">
<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" class="h-5 w-5 text-neutral-400">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path>
<circle cx="12" cy="12" r="4"></circle>
</svg>
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-neutral-100">Data-Driven Growth Engine</h3>
</div>
<p class="mt-3 text-neutral-400 text-sm">Transform your product metrics with our proven design systems and growth optimization framework that scales with ambitious teams.</p>
<div class="mt-4">
<a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300">
See growth results
<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" class="h-4 w-4">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</article>
<!-- Sub card -->
<div class="relative w-full max-w-xl mt-8">
<div class="absolute -top-5 left-1/2 -translate-x-1/2 w-[calc(100%-3rem)] h-9 shadow-[0_6px_20px_rgba(16,185,129,0.25)] bg-emerald-900/10 rounded-2xl"></div>
<article class="relative overflow-hidden ring-1 ring-white/15 text-white bg-gradient-to-r from-emerald-600 to-green-600 rounded-2xl shadow-2xl">
<div class="pointer-events-none absolute inset-x-0 -top-10 h-24 bg-gradient-to-b from-white/40 to-transparent"></div>
<div class="sm:p-5 pt-4 pr-4 pb-4 pl-4">
<div class="flex items-start gap-3">
<div class="shrink-0 rounded-xl bg-gradient-to-b from-slate-900 to-slate-800 p-2.5 ring-1 ring-white/10 shadow-md">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" class=""></path>
</svg>
</div>
<div class="min-w-0 flex-1">
<div class="flex items-start justify-between gap-3">
<h3 class="text-[15px] sm:text-base font-semibold tracking-tight truncate">Growth Opportunity: Sustainability Focus</h3>
<span class="text-xs sm:text-sm text-white/85 shrink-0">2m ago</span>
</div>
<p class="mt-1 text-sm leading-6 text-white/90">
Consider highlighting your eco-friendly practices and sustainable approach. This resonates strongly with modern consumers and builds trust.
</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- Logo strip -->
<div class="border-black/10 border-t mt-12 pt-8">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 place-items-center text-neutral-500">
<div class="flex gap-2 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="asterisk" class="lucide lucide-asterisk h-4 w-4"><path d="M12 6v12"></path><path d="M17.196 9 6.804 15"></path><path d="m6.804 9 10.392 6"></path></svg><span class="text-sm font-medium font-sans">Lumen</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-4 w-4"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><span class="text-sm font-medium font-sans">Oxide</span>
</div>
<div class="flex gap-2 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="orbit" class="lucide lucide-orbit w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(115, 115, 115);"><path d="M20.341 6.484A10 10 0 0 1 10.266 21.85"></path><path d="M3.659 17.516A10 10 0 0 1 13.74 2.152"></path><circle cx="12" cy="12" r="3"></circle><circle cx="19" cy="5" r="2"></circle><circle cx="5" cy="19" r="2"></circle></svg><span class="text-sm font-medium font-sans">Orbit</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="blocks" class="lucide lucide-blocks h-4 w-4"><path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"></path><rect x="14" y="2" width="8" height="8" rx="1"></rect></svg><span class="text-sm font-medium font-sans">Miloove</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="beaker" class="lucide lucide-beaker h-4 w-4"><path d="M4.5 3h15"></path><path d="M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3"></path><path d="M6 14h12"></path></svg><span class="text-sm font-medium font-sans">Labify</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="box" class="lucide lucide-box h-4 w-4"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.3 7 8.7 5 8.7-5"></path><path d="M12 22V12"></path></svg><span class="text-sm font-medium font-sans">Pallet</span>
</div>
</div>
</div>
</div>
</section>