All Prompts
All Prompts
herolanding pagetailwindresponsiveanimatedgridagencystats
Creative Agency Hero Section with Grid Cards
Адаптивный Hero-блок для лендингов креативных агентств. Анимация, сетка карточек с проектами, командой и услугами. CTA. Tailwind CSS.
Prompt
<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pt-12 pr-4 pb-12 pl-4">
<!-- Main Headlines -->
<div class="text-center space-y-4 mb-16 scroll-element fade-in-up animate-in">
<h1 class="text-4xl sm:text-6xl lg:text-8xl font-light tracking-tighter leading-none">
<span class="flex items-center justify-center gap-4">
CREATIVE
<span class="inline-flex bg-coral-50 rounded-full p-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="arrow-big-right" class="lucide lucide-arrow-big-right w-6 h-6 text-coral-500"><path d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" class=""></path></svg>
</span>
DESIGN
</span>
</h1>
<h1 class="text-4xl sm:text-6xl lg:text-8xl font-light tracking-tighter leading-none">
<span class="flex items-center justify-center gap-4">
VISUAL
<span class="inline-flex bg-coral-50 rounded-full p-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="arrow-big-right" class="lucide lucide-arrow-big-right w-6 h-6 text-coral-500"><path d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" class=""></path></svg>
</span>
<span class="flex items-center justify-center gap-4">STUDIO</span>
</span>
</h1>
</div>
<!-- Hero Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 space-x-8">
<!-- Left Card -->
<div class="lg:col-span-1 scroll-element fade-in-left animate-in">
<div
class="lg:min-h-[520px] flex flex-col ring-1 ring-gray-200 bg-gradient-to-br from-gray-50 to-white rounded-3xl pt-6 pr-6 pb-6 pl-6">
<div class="flex items-baseline gap-2">
<span class="sm:text-6xl text-5xl font-light text-gray-900 tracking-tighter">200+</span>
<span class="text-gray-600">projects</span>
</div>
<p class="text-gray-700 mt-3">We craft visual experiences that inspire, engage, and leave lasting impressions.
</p>
<p class="mt-4 italic text-gray-500">Design. Create. Inspire.</p>
<div class="mt-6 overflow-hidden rounded-2xl ring-1 ring-gray-300">
<div class="relative w-full h-44 sm:h-56 bg-gradient-to-br from-white to-gray-100">
<!-- Subtle glow and vignette -->
<div class="absolute inset-0 pointer-events-none"
style="background: radial-gradient(1200px 300px at -10% -10%, rgba(0,0,0,0.08), transparent 60%), radial-gradient(600px 200px at 110% 0%, rgba(0,0,0,0.04), transparent 55%);">
</div>
<!-- Content -->
<div class="relative h-full w-full sm:p-5 flex flex-col pt-4 pr-4 pb-4 pl-4">
<!-- Header -->
<div class="flex items-center justify-between pb-3 sm:pb-4 border-b border-gray-200">
<div class="flex items-center gap-3">
<div
class="h-9 w-9 sm:h-10 sm:w-10 rounded-full bg-gray-800 text-white flex items-center justify-center text-sm font-medium ring-1 ring-gray-300 shadow-sm">
BG</div>
<div class="flex flex-col">
<span class="text-gray-900 text-sm sm:text-base font-medium">Bryan Gill</span>
<span class="text-[11px] text-gray-500">Active</span>
</div>
</div>
<span class="text-sm text-gray-600">UI Designers</span>
</div>
<!-- Rows -->
<div class="mt-3 sm:mt-4 space-y-3 sm:space-y-3.5">
<!-- Row 1 -->
<div class="flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-gray-200 ring-1 ring-gray-300 flex items-center justify-center text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-square" class="lucide lucide-check-square w-4.5 h-4.5">
<path d="M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344" class=""></path>
<path d="m9 11 3 3L22 4" class=""></path>
</svg>
</div>
<div class="flex-1">
<div class="h-2.5 rounded-full bg-gray-300"></div>
<div class="mt-2 h-2.5 w-2/5 rounded-full bg-gray-200"></div>
</div>
</div>
<!-- Row 2 -->
<div class="flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-gray-200 ring-1 ring-gray-300 flex items-center justify-center text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="calendar-check-2" class="lucide lucide-calendar-check-2 w-4.5 h-4.5">
<path d="M8 2v4" class=""></path>
<path d="M16 2v4" class=""></path>
<path d="M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" class=""></path>
<path d="M3 10h18" class=""></path>
<path d="m16 20 2 2 4-4" class=""></path>
</svg>
</div>
<div class="flex-1">
<div class="h-2.5 rounded-full bg-gray-300"></div>
<div class="mt-2 h-2.5 w-3/5 rounded-full bg-gray-200"></div>
</div>
</div>
<!-- Row 3 -->
<div class="flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-gray-200 ring-1 ring-gray-300 flex items-center justify-center text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="clock" class="lucide lucide-clock w-4.5 h-4.5">
<path d="M12 6v6l4 2" class=""></path>
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
</div>
<div class="flex-1">
<div class="h-2.5 rounded-full bg-gray-300"></div>
<div class="mt-2 h-2.5 w-1/2 rounded-full bg-gray-200"></div>
</div>
</div>
</div>
<!-- Footer pill -->
<div class="mt-auto">
<div class="mt-4 h-8 w-full rounded-xl bg-gray-300 ring-1 ring-gray-400"></div>
</div>
</div>
<!-- Card outline for depth -->
<div class="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-gray-300"></div>
</div>
</div>
<div class="mt-5">
<button class="inline-flex gap-2 hover:bg-black transition-colors ring-1 ring-gray-300 text-sm font-medium text-white bg-gray-900 rounded-full pt-2.5 pr-4 pb-2.5 pl-4 shadow-sm items-center">
Start Project
<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"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
</div>
</div>
<!-- Middle Column -->
<div class="lg:col-span-1 lg:min-h-[520px] flex flex-col scroll-element fade-in-up animate-in">
<!-- Subtitle + CTA -->
<div class="text-center space-y-6 mb-8">
<p class="sm:text-xl text-lg text-gray-700">Where creativity meets strategy. We transform brands through
compelling visual storytelling and innovative design solutions.</p>
<div class="flex flex-wrap gap-3 items-center justify-center">
<button class="inline-flex gap-2 hover:bg-gray-800 transition-colors text-sm font-medium text-white bg-black rounded-full pt-2.5 pr-4 pb-2.5 pl-4 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="zap" class="lucide lucide-zap w-4 h-4"><path d="M4.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
Get Started
</button>
<button class="inline-flex gap-2 hover:bg-gray-100 transition-colors text-sm font-medium text-black bg-white rounded-full pt-2.5 pr-4 pb-2.5 pl-4 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="phone" class="lucide lucide-phone w-4 h-4"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
Call Us
</button>
</div>
</div>
<!-- Bottom Card -->
<div class="ring text-white bg-gray-900 rounded-3xl mt-auto pt-6 pr-6 pb-6 pl-6 space-y-4">
<div class="mb-4 space-y-6">
<div class="relative h-40 sm:h-48">
<!-- Back left -->
<div
class="absolute -left-2 top-2 sm:-left-1 sm:top-0 w-28 h-24 sm:w-32 sm:h-28 ring-1 ring-gray-200 bg-white rounded-2xl pt-1 pr-1 pb-1 pl-1 shadow-xl rotate-[-12deg]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc935cb1-ef8c-4e13-8bce-c3fd8e402f63_320w.jpg" alt="Team portrait" class="w-full h-full object-cover rounded-xl" style="">
</div>
<!-- Back right -->
<div
class="absolute -right-1 top-4 sm:right-0 sm:top-2 w-28 h-24 sm:w-32 sm:h-28 ring-1 ring-gray-200 bg-white rounded-2xl pt-1 pr-1 pb-1 pl-1 shadow-xl rotate-[12deg]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/202914e3-8b47-46de-95d5-7de1f0a0aa79_320w.jpg" alt="Team portrait" class="w-full h-full object-cover rounded-xl" style="">
</div>
<!-- Bottom left -->
<div
class="absolute left-2 bottom-0 w-28 h-24 sm:w-32 sm:h-28 ring-1 ring-gray-200 bg-white rounded-2xl pt-1 pr-1 pb-1 pl-1 shadow-xl rotate-[10deg]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/80aff1f9-dccb-4b5d-8dc6-89e37c211930_320w.jpg" ="team="" portrait"="" class="w-full h-full object-cover rounded-xl" style="">
</div>
<!-- Bottom right -->
<div
class="absolute right-1 bottom-1 w-28 h-24 sm:w-32 sm:h-28 ring-1 ring-gray-200 bg-white rounded-2xl pt-1 pr-1 pb-1 pl-1 shadow-xl rotate-[-8deg]">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0e60f1bd-bde0-4ec4-8c23-24383a8b650a_320w.jpg" alt="Team portrait" class="w-full h-full object-cover rounded-xl" style="">
</div>
<!-- Center card -->
<div
class="absolute inset-0 w-40 h-32 sm:w-48 sm:h-36 ring-1 ring-gray-200 z-10 bg-white rounded-2xl mt-auto mr-auto mb-auto ml-auto pt-1 pr-1 pb-1 pl-1 shadow-xl">
<img src="https://cdn.midjourney.com/57ea9136-4c5d-4313-8748-67d826cbe22d/0_3.png?w=800&q=80" alt="Lead creative" class="w-full h-full object-cover rounded-xl" style="">
</div>
</div>
<p class="text-gray-300 mt-4">
<span class="sm:text-6xl text-5xl font-light text-gray-50 tracking-tighter">25+</span> creatives</p>
</div>
<p class="text-sm text-gray-400">Our passionate team pushes creative boundaries to deliver exceptional results
that exceed expectations.</p>
</div>
</div>
<!-- Right Card -->
<div class="lg:col-span-1 scroll-element fade-in-right animate-in">
<div
class="lg:min-h-[520px] flex flex-col ring-1 ring-gray-200 bg-gradient-to-br from-gray-50 to-white rounded-3xl pt-6 pr-6 pb-6 pl-6">
<h3 class="text-lg font-semibold mb-2 text-gray-900">Creative Services</h3>
<p class="text-gray-700 mt-3 mb-8">From concept to completion, we deliver creative solutions that make an
impact.</p>
<div class="flex-1 relative">
<div
class="relative overflow-hidden rounded-2xl ring-1 ring-gray-200 bg-gradient-to-br from-white to-gray-50 h-full">
<!-- Subtle background pattern -->
<div class="absolute inset-0 pointer-events-none"
style="background: radial-gradient(800px 400px at 50% 0%, rgba(17,24,39,0.03), transparent 70%);"></div>
<!-- Main content -->
<div class="relative h-full flex flex-col pt-4 pr-4 pb-4 pl-4">
<!-- Header with "We Create" -->
<div class="mb-0">
<div class="inline-flex items-center gap-3 mb-4">
<h4 class="text-2xl font-light tracking-tight text-gray-900">We Create</h4>
</div>
</div>
<!-- Service cards in grid -->
<div class="grid grid-cols-2 gap-3 mb-6">
<div
class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-100 to-gray-50 p-4 ring-1 ring-gray-200 hover:ring-gray-300 transition-all hover:scale-[1.02]">
<div class="flex gap-2 mb-2 items-center">
<span class="text-sm font-medium text-gray-900">Brand Identity</span>
</div>
<div class="space-y-1">
<div class="h-1.5 rounded-full bg-gray-300 w-full"></div>
<div class="h-1.5 rounded-full bg-gray-200 w-2/3"></div>
</div>
</div>
<div
class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-100 to-gray-50 p-4 ring-1 ring-gray-200 hover:ring-gray-300 transition-all hover:scale-[1.02]">
<div class="flex items-center gap-2 mb-2">
<span class="text-sm font-medium text-gray-900">UI/UX Design</span>
</div>
<div class="space-y-1">
<div class="h-1.5 rounded-full bg-gray-300 w-4/5"></div>
<div class="h-1.5 rounded-full bg-gray-200 w-full"></div>
</div>
</div>
<div
class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-100 to-gray-50 p-4 ring-1 ring-gray-200 hover:ring-gray-300 transition-all hover:scale-[1.02]">
<div class="flex items-center gap-2 mb-2">
<div class="h-6 w-6center"></div>
<span class="text-sm font-medium text-gray-900">Animation</span>
</div>
<div class="space-y-1">
<div class="h-1.5 rounded-full bg-gray-300 w-3/4"></div>
<div class="h-1.5 rounded-full bg-gray-200 w-1/2"></div>
</div>
</div>
<div
class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-100 to-gray-50 p-4 ring-1 ring-gray-200 hover:ring-gray-300 transition-all hover:scale-[1.02]">
<div class="flex items-center gap-2 mb-2">
<span class="text-sm font-medium text-gray-900">Art Direction</span>
</div>
<div class="space-y-1">
<div class="h-1.5 rounded-full bg-gray-300 w-5/6"></div>
<div class="h-1.5 rounded-full bg-gray-200 w-3/4"></div>
</div>
</div>
</div>
<!-- Bottom visual element with progress indicator -->
<div class="mt-auto">
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-medium text-gray-600 uppercase tracking-wide">Creative Process</span>
<span class="text-xs text-gray-500">75% Complete</span>
</div>
<div class="flex items-center gap-3">
<div class="flex-1">
<p class="text-xs text-gray-600">Brand identity development in progress</p>
</div>
<button class="h-8 w-8 hover:bg-gray-700 flex transition-colors bg-gray-900 rounded-full items-center justify-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" class="w-3.5 h-3.5 text-white">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>