All Prompts
All Prompts
herolandingtailwindanimatedresponsivestatsmarqueectagradient
Animated Hero Section with Stats & Client Logos
Адаптивный Hero-раздел для лендинга: анимированный заголовок, CTA, статистика, логотипы клиентов. Tailwind CSS. Идеально для сайтов агентств и портфолио.
Prompt
<div
class="bg-center md:pt-32 md:pb-20 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a72ca2f3-9dd1-4fe4-84ba-fe86468a5237_3840w.webp?w=800&q=80)] bg-cover pt-24 pb-12 relative"
style="mask-image: linear-gradient(180deg, transparent, black 0%, black 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 70%, transparent);">
<div class="lg:px-8 md:mt-20 md:mb-40 sm:px-6 max-w-7xl mt-12 mr-auto mb-20 ml-auto pr-4 pl-4">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
<!-- Left Content -->
<div class="lg:col-span-7 space-y-4 sm:space-y-6">
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll animate">
<div
class="border-gradient inline-flex before:rounded-full bg-white/5 rounded-full pt-2 pr-3 sm:pr-4 pb-2 pl-3 sm:pl-4 backdrop-blur-lg gap-x-2 sm:gap-x-3 gap-y-2 sm:gap-y-3 items-center">
<span class="text-[10px] sm:text-xs tracking-wider uppercase flex items-center gap-1.5 sm:gap-2 font-sans text-zinc-300">
Award-Winning Design
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="solar:star-bold-duotone" class="iconify text-white iconify--solar sm:w-4 sm:h-4"><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z" class=""></path><path fill="currentColor" d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408" opacity=".5" class=""></path></svg>
</span>
</div>
</div>
<h1
class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl leading-[0.9] [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll font-medium tracking-tighter font-manrope drop-shadow-lg animate"
style="mask-image: linear-gradient(150deg, transparent, black 0%, black 40%, transparent); -webkit-mask-image: linear-gradient(150deg, transparent, black 0%, black 40%, transparent);">
Crafting Digital<br>
<span class="bg-clip-text font-medium text-transparent tracking-tighter font-manrope bg-gradient-to-br from-white to-[#ffcd75] pr-1">Experiences</span><br>
That Matter
</h1>
<p
class="[animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll text-base sm:text-lg text-white/70 max-w-xl animate">
We design interfaces that combine beauty with functionality, creating seamless experiences that users love and
businesses thrive on.
</p>
<div
class="flex flex-col sm:flex-row gap-3 sm:gap-4 [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll animate">
<button class="group inline-flex transition-all duration-300 hover:shadow-lg hover:bg-zinc-200 text-sm font-medium text-zinc-900 bg-white rounded-full pt-3 sm:pt-4 pr-6 sm:pr-8 pb-3 sm:pb-4 pl-6 sm:pl-8 shadow-[5.7px_5.7px_8.6px_rgba(0,_0,_0,_0.07),_13.7px_13.7px_10.9px_rgba(0,_0,_0,_0.099),_25.7px_25.7px_20.5px_rgba(0,_0,_0,_0.123),_45.8px_45.8px_36.6px_rgba(0,_0,_0,_0.147),_85.8px_85.8px_68.5px_rgba(0,_0,_0,_0.176),_205px_205px_163.4px_rgba(0,_0,_0,_0.246)] gap-x-2 sm:gap-x-3 gap-y-2 sm:gap-y-3 items-center justify-center">
<span class="font-sans">View Portfolio</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:arrow-right-bold-duotone" class="iconify group-hover:translate-x-1 transition-transform iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z" class=""></path></svg>
</button>
<button class="group inline-flex hover:text-white transition-all duration-300 hover:border-white hover:bg-white/5 text-sm font-medium text-zinc-300 border-white/20 border rounded-full pt-3 sm:pt-4 pr-6 sm:pr-8 pb-3 sm:pb-4 pl-6 sm:pl-8 gap-x-2 sm:gap-x-3 gap-y-2 sm:gap-y-3 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:play-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M23 12c0-1.035-.53-2.07-1.591-2.647L8.597 2.385C6.534 1.264 4 2.724 4 5.033V12z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="m8.597 21.615l12.812-6.968A2.99 2.99 0 0 0 23 12H4v6.967c0 2.31 2.534 3.769 4.597 2.648" opacity=".5" class=""></path></svg>
<span class="font-sans">Watch Showreel</span>
</button>
</div>
</div>
<!-- Right Stats -->
<div class="lg:col-span-5 space-y-4 sm:space-y-6">
<div
class="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border-gradient before:rounded-3xl bg-gradient-to-br from-white/10 via-white/0 to-white/10 w-full h-fit rounded-2xl sm:rounded-3xl relative shadow-[2.8px_2.8px_2.2px_rgba(0,_0,_0,_0.034),_6.7px_6.7px_5.3px_rgba(0,_0,_0,_0.048),_12.5px_12.5px_10px_rgba(0,_0,_0,_0.06),_22.3px_22.3px_17.9px_rgba(0,_0,_0,_0.072),_41.8px_41.8px_33.4px_rgba(0,_0,_0,_0.086),_100px_100px_80px_rgba(0,_0,_0,_0.12)]"
style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)">
<div
class="[animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll pt-6 sm:pt-8 pr-6 sm:pr-8 pb-6 sm:pb-8 pl-6 sm:pl-8 relative animate">
<div class="flex items-center gap-2 sm:gap-3 mb-4 sm:mb-6">
<div
class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl sm:rounded-2xl ring-1 flex items-center justify-center bg-white/10 ring-white/20">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20"
viewBox="0 0 24 24" data-icon="solar:target-bold-duotone"
class="iconify text-white iconify--solar sm:w-6 sm:h-6">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10"
opacity=".5" class=""></path>
<path fill="currentColor"
d="M9.25 12a.75.75 0 0 1 .75-.75h1.25V10a.75.75 0 0 1 1.5 0v1.25H14a.75.75 0 0 1 0 1.5h-1.25V14a.75.75 0 0 1-1.5 0v-1.25H10a.75.75 0 0 1-.75-.75m-7.222.75a10 10 0 0 1 0-1.5H5a.75.75 0 0 1 0 1.5zm10.722 9.222a10 10 0 0 1-1.5 0V19a.75.75 0 0 1 1.5 0zm9.222-10.722a10 10 0 0 1 0 1.5H19a.75.75 0 0 1 0-1.5zM12.75 2.028V5a.75.75 0 0 1-1.5 0V2.028a10 10 0 0 1 1.5 0"
class=""></path>
</svg>
</div>
<div>
<div class="text-2xl sm:text-3xl tracking-tighter font-manrope font-medium">150+</div>
<div class="text-xs sm:text-sm text-white/70 font-sans">Projects Delivered</div>
</div>
</div>
<div class="space-y-3 sm:space-y-4 mb-4 sm:mb-6">
<div class="flex items-center justify-between">
<span class="text-xs sm:text-sm text-white/70 font-sans">Client Satisfaction</span>
<span class="text-xs sm:text-sm font-sans">98%</span>
</div>
<div class="h-1.5 sm:h-2 bg-zinc-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r rounded-full from-white to-white/70" style="width: 98%;"></div>
</div>
</div>
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/25 to-transparent my-3 sm:my-4"></div>
<div class="flex justify-between mb-3 sm:mb-4 gap-2">
<div
class="text-center px-1 sm:px-2 cursor-pointer transition-all duration-300 rounded-xl sm:rounded-2xl hover:bg-white/5 hover:-translate-y-0.5 flex-1">
<div
class="text-xl sm:text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium">
5+</div>
<div class="text-[10px] sm:text-xs opacity-70 uppercase tracking-wide font-sans">Years</div>
</div>
<div class="w-px h-10 sm:h-12 my-auto bg-gradient-to-b from-transparent via-white/40 to-transparent">
</div>
<div
class="text-center px-1 sm:px-2 cursor-pointer transition-all duration-300 rounded-xl sm:rounded-2xl hover:bg-white/5 hover:-translate-y-0.5 flex-1">
<div
class="text-xl sm:text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium">
24/7</div>
<div class="text-[10px] sm:text-xs opacity-70 uppercase tracking-wide font-sans">Support</div>
</div>
<div class="w-px h-10 sm:h-12 my-auto bg-gradient-to-b from-transparent via-white/40 to-transparent">
</div>
<div
class="text-center px-1 sm:px-2 cursor-pointer transition-all duration-300 rounded-xl sm:rounded-2xl hover:bg-white/5 hover:-translate-y-0.5 flex-1">
<div
class="text-xl sm:text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium">
100%</div>
<div class="text-[10px] sm:text-xs opacity-70 uppercase tracking-wide font-sans">Quality</div>
</div>
</div>
<div class="flex flex-wrap gap-1.5 sm:gap-2">
<span class="inline-flex items-center gap-1 text-[10px] sm:text-xs px-2 py-1 rounded-full bg-white/10 border border-white/20 text-zinc-300 cursor-pointer transition-all duration-300 hover:-translate-y-px font-sans">
<div class="w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-white animate-pulse"></div>
ACTIVE
</span>
<span class="inline-flex items-center gap-1 text-[10px] sm:text-xs px-2 py-1 rounded-full bg-white/10 border border-white/20 text-zinc-300 cursor-pointer transition-all duration-300 hover:-translate-y-px font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" class="iconify iconify--solar sm:w-3 sm:h-3"><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z" class=""></path><path fill="currentColor" d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408" opacity=".5" class=""></path></svg>
PREMIUM
</span>
</div>
</div>
</div>
<div
class="overflow-hidden transition-all duration-300 [animation:fadeSlideIn_0.8s_ease-out_0.7s_both] animate-on-scroll border-gradient before:rounded-3xl bg-gradient-to-br from-white/10 via-white/0 to-white/10 w-full h-fit rounded-2xl sm:rounded-3xl relative shadow-[4px_4px_6px_rgba(0,_0,_0,_0.049),_9.6px_9.6px_7.6px_rgba(0,_0,_0,_0.069),_18px_18px_14.3px_rgba(0,_0,_0,_0.086),_32px_32px_25.6px_rgba(0,_0,_0,_0.103),_60px_60px_47.8px_rgba(0,_0,_0,_0.123),_143px_143px_114.3px_rgba(0,_0,_0,_0.172)] animate"
style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)">
<div class="pt-6 sm:pt-8 pr-6 sm:pr-8 pb-6 sm:pb-8 pl-6 sm:pl-8 relative">
<h3 class="text-base sm:text-lg mb-3 sm:mb-4 font-sans">Featured Clients</h3>
<div class="overflow-hidden relative">
<style>
@keyframes marquee-logos {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
<div
style="mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);"
class="">
<div class="flex gap-4 sm:gap-6 will-change-transform"
style="animation: marquee-logos 30s linear infinite;">
<div class="flex gap-4 sm:gap-6 shrink-0">
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e5f2922d-4fb6-4f7c-8795-cd9ba63105a4_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92287bc0-bc70-4864-bf05-a89c1b99a218_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8284c62f-bfed-4d35-aaa2-956d0a8969b3_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3764a6eb-78e1-495f-9143-c85a648446c4_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dea31d52-7076-423f-bace-53eeec3014d3_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b16a9cf6-6be1-4d0d-bc63-07a471092998_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
</div>
<div class="flex gap-4 sm:gap-6 shrink-0">
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e5f2922d-4fb6-4f7c-8795-cd9ba63105a4_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92287bc0-bc70-4864-bf05-a89c1b99a218_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8284c62f-bfed-4d35-aaa2-956d0a8969b3_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3764a6eb-78e1-495f-9143-c85a648446c4_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/dea31d52-7076-423f-bace-53eeec3014d3_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
<a href="#"
class="inline-flex items-center justify-center bg-center mix-blend-screen w-[120px] sm:w-[150px] h-[32px] sm:h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b16a9cf6-6be1-4d0d-bc63-07a471092998_1600w.png)] bg-cover rounded-xl sm:rounded-2xl"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>