Загрузка...
Адаптивный hero-блок для лендинга курса макияжа. CTA, отзывы, рейтинг, анимация. Tailwind CSS.
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="">
<div class="flex items-center bg-slate-700/50 rounded-full pl-4 pr-6 py-2 w-max mb-8 animate-slide-up">
<div class="flex -space-x-3">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/bef2689e-e470-4338-a2b1-c79d0e74c93b_320w.jpg" class="w-8 h-8 rounded-full border-2 border-slate-600 object-cover" alt="Student" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/10b82f02-0664-4276-be7d-8b63b0623907_800w.jpg" class="w-8 h-8 rounded-full border-2 border-slate-600 object-cover" alt="Student" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3f997297-bf7a-497b-a750-c13916f1f09f_320w.jpg" class="w-8 h-8 rounded-full border-2 border-slate-600 object-cover" alt="Student" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e09a753d-0238-4af6-9202-bcf58fe9612a_320w.jpg" class="w-8 h-8 rounded-full border-2 border-slate-600 object-cover" alt="Student" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3b6ce97d-da3b-45dd-8a18-724502cc135d_320w.jpg" class="w-8 h-8 rounded-full border-2 border-slate-600 object-cover" alt="Student" style="">
</div>
<span class="ml-4 text-sm font-medium">
<span class="font-semibold">8.3k</span> certified makeup artists
</span>
</div>
<h1
class="text-4xl sm:text-5xl lg:text-7xl font-medium tracking-tight leading-tight animate-slide-up animate-delay-200 mt-2 mb-2">
Professional Makeup<br class="hidden sm:block"> Mastery
</h1>
<p class="sm:text-lg max-w-xl animate-slide-up animate-delay-400 text-base text-slate-300 mt-6">
From basic techniques to advanced artistry, master the art of makeup with our comprehensive courses. Join
thousands who've launched successful beauty careers.
</p>
<div class="flex flex-col sm:flex-row gap-4 animate-slide-up animate-delay-600 mt-10">
<a href="#"
class="inline-flex items-center justify-center gap-2 transition-all hover:scale-105 hover:shadow-lg font-medium text-white bg-gradient-to-r from-cyan-600 to-green-600 rounded-full pt-4 pr-8 pb-4 pl-8">
<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="play-circle" class="lucide lucide-play-circle w-5 h-5" style="stroke-width: 1.5;">
<path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
Start Learning Free
<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" style="stroke-width: 1.5;">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
<a href="#"
class="inline-flex items-center justify-center gap-2 font-medium px-8 py-4 rounded-full border border-slate-600 transition-all hover:border-slate-500 bg-slate-800/50 hover:bg-slate-700/50">
<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-4 h-4" style="stroke-width: 1.5;">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
Meet Instructors
</a>
</div>
<div class="mt-12 flex items-center gap-8 animate-slide-up animate-delay-800">
<div class="flex items-center gap-2">
<div class="flex text-yellow-400">
<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="star"
class="lucide lucide-star w-4 h-4 fill-current" style="stroke-width: 1.5;">
<path
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
</path>
</svg>
<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="star"
class="lucide lucide-star w-4 h-4 fill-current" style="stroke-width: 1.5;">
<path
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
</path>
</svg>
<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="star"
class="lucide lucide-star w-4 h-4 fill-current" style="stroke-width: 1.5;">
<path
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
</path>
</svg>
<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="star"
class="lucide lucide-star w-4 h-4 fill-current" style="stroke-width: 1.5;">
<path
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
</path>
</svg>
<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="star"
class="lucide lucide-star w-4 h-4 fill-current" style="stroke-width: 1.5;">
<path
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
</path>
</svg>
</div>
<span class="text-sm font-medium">4.9/5 Rating</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="award"
class="lucide lucide-award w-4 h-4 text-pink-500" style="stroke-width: 1.5;">
<path
d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
</path>
<circle cx="12" cy="8" r="6"></circle>
</svg>
<span class="text-sm font-medium">Pro Certified</span>
</div>
</div>
</div>
<div class="relative animate-slide-up animate-delay-400">
<div class="relative overflow-hidden h-80 sm:h-[28rem] rounded-3xl shadow-2xl">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e7d4e0c8-6cbc-422f-8809-0149d668ea21_1600w.jpg" alt="Makeup tutorial" class="absolute inset-0 w-full h-full object-cover" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<div class="absolute top-4 left-4 text-white">
<div class="flex items-center gap-2 mb-2">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fecad264-1bfe-4743-9fe4-87afaf69f19b_320w.jpg" class="w-6 h-6 rounded-full border-2 border-white object-cover" alt="Instructor" style="">
<span class="text-xs font-medium">Maya Rodriguez, Master Artist</span>
</div>
<p class="text-xs leading-4 max-w-[200px] backdrop-blur-sm rounded-lg p-2 bg-black/20">
"Transform your passion into profession. Learn industry secrets from award-winning artists!"
</p>
</div>
<div class="absolute top-4 right-4 flex gap-2">
<button class="backdrop-blur-sm rounded-full p-2 transition-colors bg-white/20 hover:bg-white/30">
<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="play" class="lucide lucide-play w-4 h-4 text-white" style="stroke-width: 1.5;"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
</button>
<button class="backdrop-blur-sm rounded-full p-2 transition-colors bg-white/20 hover:bg-white/30">
<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="bookmark" class="lucide lucide-bookmark w-4 h-4 text-white" style="stroke-width: 1.5;"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path></svg>
</button>
</div>
<div class="absolute bottom-4 left-4 right-4">
<div class="backdrop-blur-sm rounded-lg p-3 bg-white/10">
<div class="flex items-center justify-between text-sm text-white">
<span class="">Current Module: Contouring Mastery</span>
<span class="flex items-center gap-1">
<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="clock" class="lucide lucide-clock w-3 h-3" style="stroke-width: 1.5;"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
32 min
</span>
</div>
<div class="mt-2 rounded-full h-1 bg-white/20">
<div class="rounded-full h-1 w-3/4 bg-gradient-to-r from-cyan-500 to-green-500"></div>
</div>
</div>
</div>
</div>
<div
class="absolute -bottom-4 -right-4 bg-white/10 border-white/20 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-lg">
<div class="flex items-center gap-3">
<div
class="w-10 h-10 rounded-full flex items-center justify-center bg-cyan-500/30 backdrop-blur-sm border border-cyan-400/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="trending-up" class="lucide lucide-trending-up w-5 h-5 text-pink-400"
style="stroke-width: 1.5;">
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path>
</svg>
</div>
<div class="">
<p class="text-sm font-semibold text-white/90">Career Growth</p>
<p class="text-xs text-white/60">92% job placement rate</p>
</div>
</div>
</div>
</div>
</div>