All Prompts
All Prompts
herotailwindmarketingaboutstatsctaresponsive
About Studio Hero Section with Stats & CTA
Секция Hero для студии: заголовок, текст, фон, статистика и CTA. Адаптивный дизайн с Tailwind CSS и Glassmorphism.
Prompt
<div class="flex flex-col gap-8 z-10 w-full max-w-screen-2xl relative shadow-[0_20px_60px_-15px_rgba(0,0,0,0.7)] gap-x-8 gap-y-8">
<!-- Main Card Background Wrapper -->
<div class="absolute inset-0 bg-slate-900/40 backdrop-blur-xl rounded-[2.5rem] border border-white/5"></div>
<!-- Content Wrapper -->
<div class="lg:p-10 flex flex-col overflow-hidden border-gradient z-10 rounded-[2.5rem] pt-6 pr-6 pb-6 pl-6 relative gap-x-12 gap-y-12" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 2.5rem">
<!-- Header Section -->
<header class="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-10">
<div class="max-w-3xl">
<!-- Badge (Clarity Style) -->
<div class="inline-flex items-center gap-2 rounded-full bg-slate-900/80 ring-1 ring-slate-700/50 px-3 py-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.5)] mb-8 border-gradient" style="--border-gradient: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));">
<span class="inline-flex items-center justify-center bg-slate-800/50 w-6 h-6 rounded-full text-sky-200">
<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 w-3.5 h-3.5"><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" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
</span>
<span class="text-xs font-medium tracking-[0.18em] uppercase text-sky-100 font-geist pr-1">
About our studio
</span>
</div>
<h1 class="text-5xl md:text-7xl font-semibold tracking-tight leading-[0.95] text-slate-50 font-jakarta">
The design studio built for
<span class="serif-font italic text-slate-400/80 font-light">
visionaries.
</span>
</h1>
</div>
<div class="max-w-lg pb-2">
<p class="text-lg text-sky-100/70 leading-relaxed font-normal font-geist">
We founded Chroma to help brands escape the ordinary. We listen
deeply, design with intent, and craft visual systems that
resonate.
</p>
</div>
</header>
<!-- Hero / Stats Section -->
<section class="relative w-full rounded-[2rem] overflow-hidden min-h-[520px] flex items-end p-8 md:p-10 shadow-2xl group border-gradient border-gradient-card" style="--border-gradient: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));">
<!-- Background Image with Dark Overlay -->
<div class="absolute inset-0 z-0">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4fac64e5-35a2-44c2-92b4-e9bbe960ba2a_3840w.webp" alt="Abstract Dark Texture" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 opacity-60" style="">
<div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-900/60 to-slate-900/20 mix-blend-multiply"></div>
<!-- Radial shine overlay -->
<div class="absolute top-0 right-0 w-full h-full bg-[radial-gradient(ellipse_at_top_right,_rgba(56,189,248,0.15),_transparent_70%)]"></div>
</div>
<!-- Stats Cards Container -->
<div class="relative z-10 w-full grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="transition-all duration-300 hover:-translate-y-1 border-gradient border-gradient-card overflow-hidden bg-slate-900/80 rounded-3xl pt-6 pr-6 pb-6 pl-6 relative shadow-[0_20px_40px_-10px_rgba(0,0,0,0.5)] backdrop-blur-md" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-white/5 rounded-full border border-white/10 text-sky-200">
<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="globe" class="lucide lucide-globe w-5 h-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>
</div>
<span class="text-xs font-medium uppercase tracking-widest text-slate-400 font-geist">
Global Reach
</span>
</div>
<div class="flex items-baseline gap-1">
<span class="text-5xl font-semibold text-slate-50 tracking-tight font-jakarta">
240
</span>
<span class="text-2xl text-slate-500 font-medium">+</span>
</div>
<p class="text-sky-100/60 text-sm mt-2 font-medium">
Brand identities launched
</p>
</div>
<!-- Card 2 -->
<div class="transition-all duration-300 hover:-translate-y-1 border-gradient border-gradient-card overflow-hidden bg-slate-900/80 rounded-3xl pt-6 pr-6 pb-6 pl-6 relative shadow-[0_20px_40px_-10px_rgba(0,0,0,0.5)] backdrop-blur-md" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-white/5 rounded-full border border-white/10 text-sky-200">
<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="users" class="lucide lucide-users w-5 h-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
</div>
<span class="text-xs font-medium uppercase tracking-widest text-slate-400 font-geist">
Retention
</span>
</div>
<div class="flex items-baseline gap-1">
<span class="text-5xl font-semibold text-slate-50 tracking-tight font-jakarta">
98
</span>
<span class="text-2xl text-slate-500 font-medium">%</span>
</div>
<p class="text-sky-100/60 text-sm mt-2 font-medium">
Client retention rate
</p>
<div class="mt-4 h-1 w-full bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-sky-400 shadow-[0_0_10px_rgba(56,189,248,0.5)] rounded-full w-[98%]"></div>
</div>
</div>
<!-- Card 3 -->
<div class="transition-all duration-300 hover:-translate-y-1 border-gradient border-gradient-card overflow-hidden bg-slate-900/80 rounded-3xl pt-6 pr-6 pb-6 pl-6 relative shadow-[0_20px_40px_-10px_rgba(0,0,0,0.5)] backdrop-blur-md" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-white/5 rounded-full border border-white/10 text-sky-200">
<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="trending-up" class="lucide lucide-trending-up w-5 h-5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
</div>
<span class="text-xs font-medium uppercase tracking-widest text-slate-400 font-geist">
Engagement
</span>
</div>
<div class="flex items-baseline gap-1">
<span class="text-5xl font-semibold text-slate-50 tracking-tight font-jakarta">
4x
</span>
</div>
<p class="text-sky-100/60 text-sm mt-2 font-medium">
Increase in user metrics
</p>
<div class="flex items-center gap-2 mt-3 text-emerald-400 text-xs font-bold bg-emerald-500/10 w-fit px-2.5 py-1 rounded-md border border-emerald-500/20">
<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="arrow-up" class="lucide lucide-arrow-up w-3 h-3"><path d="m5 12 7-7 7 7" class=""></path><path d="M12 19V5" class=""></path></svg>
34% vs industry avg
</div>
</div>
</div>
</section>
<!-- Footer / CTA Section -->
<section class="relative bg-slate-900/50 rounded-[2rem] p-8 md:p-10 border-gradient border-gradient-card flex flex-col lg:flex-row justify-between items-center gap-8" style="--border-gradient: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));">
<div class="flex flex-col gap-4 w-full lg:w-auto">
<div class="flex flex-wrap items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-sky-500/20 to-sky-500/0 border border-white/10 flex items-center justify-center text-sky-200">
<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="briefcase" class="lucide lucide-briefcase w-5 h-5"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path><rect width="20" height="14" x="2" y="6" rx="2" class=""></rect></svg>
</div>
<h3 class="text-2xl font-semibold tracking-tight text-slate-50 font-jakarta">
Ready to shape the future?
</h3>
</div>
<p class="text-sky-100/70 text-base font-normal max-w-xl pl-1">
We’re always looking for talented designers who want to help
businesses cut through the noise and build brands that endure.
</p>
</div>
<div class="flex flex-col sm:flex-row gap-6 w-full lg:w-auto items-center">
<div class="flex -space-x-3">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/73001852-28a8-40f8-be88-65ea8bb585ce_320w.webp" class="w-10 h-10 rounded-full border-2 border-slate-900 ring-1 ring-white/10 object-cover" alt="Team member">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/9e66151d-ff65-4ff7-8bb0-084c3f363d3f_320w.webp" class="w-10 h-10 rounded-full border-2 border-slate-900 ring-1 ring-white/10 object-cover" alt="Team member">
<div class="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-xs font-bold text-slate-300 ring-1 ring-white/10">
+2
</div>
</div>
<!-- Clarity Style Button -->
<a href="#" class="group inline-flex items-center gap-3 transition-colors duration-300 hover:text-white focus:outline-none text-white/90 bg-gradient-to-b from-white/10 via-white/0 to-white/10 w-full sm:w-auto rounded-full pt-1 pr-1 pb-1 pl-1 relative border-gradient" style="--border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); border-radius: 9999px;">
<span class="pointer-events-none absolute -inset-1 rounded-full opacity-0 blur-xl transition duration-500 group-hover:opacity-100" style="background: radial-gradient(60% 60% at 50% 50%, rgba(56,189,248,0.4), rgba(56,189,248,0) 70%);"></span>
<span class="isolate inline-flex items-center gap-3 bg-gradient-to-br from-sky-500/10 via-sky-500/5 to-sky-500/0 rounded-full py-3 px-8 relative overflow-hidden">
<span class="pointer-events-none absolute inset-0 rounded-full opacity-50 shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_-2px_10px_rgba(0,0,0,0.2)]"></span>
<!-- Sparkles -->
<span class="sparkle left-4 top-2" style="animation-delay: 0s;"></span>
<span class="sparkle right-4 top-5" style="animation-delay: 1.2s;"></span>
<span class="relative z-10 font-semibold tracking-tight font-geist text-sm">
View Openings
</span>
<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="arrow-right" class="lucide lucide-arrow-right w-4 h-4 relative z-10 transition-transform group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</span>
</a>
</div>
</section>
</div>
</div>