All Prompts
All Prompts
heroeducationcoursemarketinglandingtailwindresponsivesection
Web3 Course Hero with Stats and Visual Card
Двухколоночный Web3-херо для курса: статистика, CTA, визуальная карточка с виджетом BTC и отзывами. Tailwind CSS.
Prompt
<div
class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 flex-grow z-10 lg:pb-0 pb-8 relative gap-x-12 gap-y-12 m-8 max-w-5xl my-20 mx-auto">
<!-- Left Column: Text Content -->
<div class="lg:col-span-7 flex flex-col pt-4 relative justify-center">
<!-- Social Proof Pill -->
<div class="inline-flex bg-white/60 w-max rounded-full mb-8 pt-1.5 pr-5 pb-1.5 pl-1.5 shadow-sm backdrop-blur-sm items-center"
style="position: relative; --border-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)); --border-radius-before: 9999px">
<div class="flex -space-x-2 mr-3">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/578a5bc5-2c9f-4285-8ae6-0d7dafefba84_320w.webp" alt="User" class="w-6 h-6 rounded-full border-2 border-white object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1a99aa12-9c50-44fe-bb7d-5dfef28b7d59_320w.webp" alt="User" class="w-6 h-6 rounded-full border-2 border-white object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2e91b8c7-be64-41b5-8bd8-75efab28bdbe_320w.webp" alt="User" class="w-6 h-6 rounded-full border-2 border-white object-cover">
<div
class="w-6 h-6 rounded-full border-2 border-white bg-zinc-900 text-white flex items-center justify-center text-[9px] font-bold tracking-tighter">
2k+
</div>
</div>
<span class="text-xs font-medium text-zinc-600 tracking-wide">
<span class="text-zinc-900">New Cohort</span> starts in 3 days
</span>
</div>
<!-- Headline -->
<h1 class="leading-[0.95] lg:text-[5rem] text-5xl font-medium text-zinc-900 tracking-tighter mb-8">
Web3 Finance
<span class="text-transparent bg-clip-text bg-gradient-to-r from-zinc-400 to-zinc-200 font-light">Mastery Lab</span>
</h1>
<!-- Subheadline -->
<p
class="text-sm text-zinc-500 font-medium max-w-md mb-10 leading-relaxed tracking-wide border-l-2 border-zinc-200 pl-6">
Unlock the potential of decentralized markets. A comprehensive curriculum designed meticulously for the
next generation of digital asset investors.
</p>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-3 lg:mb-24 mb-16 gap-x-3 gap-y-3">
<button class="hover:bg-black transition-all flex group shadow-zinc-900/10 hover:shadow-2xl hover:shadow-zinc-900/20 hover:-translate-y-0.5 text-sm font-medium text-zinc-900 rounded-full pt-3 pr-6 pb-3 pl-6 shadow-xl gap-x-3 gap-y-3 items-center justify-between" style="background: radial-gradient(circle at 10% 0%, #fed7aa 0%, #fb923c 100%); box-shadow: 0 15px 25px -10px rgba(248, 113, 22, 0.7), inset 0 4px 8px rgba(253, 230, 138, 0.9), inset 0 -4px 8px rgba(249, 115, 22, 0.9)">
<span class="text-sm font-medium tracking-tight text-zinc-900">
Start free trial
</span>
<span class="flex items-center justify-center rounded-full bg-black/10 px-3 py-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:translate-x-1 transition-transform" data-lucide="arrow-up-right" data-icon-set="lucide" data-icon-replaced="true" style="color: rgb(15, 23, 42);"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</button>
<button class="hover:bg-zinc-50 hover:text-zinc- transition-all flex text-sm font-medium text-zinc-600 bg-gradient-to-b from-black/10 via-black/20 to-black/10 rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] gap-x-2 gap-y-2 items-center" style="box-shadow: 0 18px 35px rgba(31, 41, 55, 0.25), 0 0 0 1px rgba(209, 213, 219, 0.3); color: #e5e7eb; position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.8)); --border-radius-before: 9999px">
<span class="text-sm font-medium text-black/60 tracking-tight">
Demo Lesson
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="" data-lucide="arrow-right" data-icon-set="lucide" data-icon-replaced="true" style="color: rgb(229, 231, 235);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
<!-- Footer Stats with Curved Lines -->
<div class="flex flex-wrap gap-2 md:gap-6 mt-auto gap-x-2 gap-y-2 items-center">
<!-- Stat 1 -->
<div class="flex items-center group cursor-default">
<div class="px-1 text-center">
<p
class="text-[10px] font-semibold text-zinc-400 uppercase tracking-widest mb-1 group-hover:text-zinc-600 transition-colors">
Duration</p>
<p class="text-sm text-zinc-900 font-medium">8 weeks</p>
</div>
<div class="curve-separator opacity-60 ml-4 md:ml-8"></div>
</div>
<!-- Stat 2 -->
<div class="flex items-center group cursor-default">
<div class="px-1 text-center">
<p
class="text-[10px] font-semibold text-zinc-400 uppercase tracking-widest mb-1 group-hover:text-zinc-600 transition-colors">
Level</p>
<p class="text-sm text-zinc-900 font-medium">Intermediate</p>
</div>
<div class="curve-separator md:ml-8 opacity-60 ml-4"></div>
</div>
<!-- Stat 3 -->
<div class="flex items-center group cursor-default">
<div class="px-1 text-center">
<p
class="text-[10px] font-semibold text-zinc-400 uppercase tracking-widest mb-1 group-hover:text-zinc-600 transition-colors">
Format</p>
<p class="text-sm text-zinc-900 font-medium">Hybrid</p>
</div>
</div>
</div>
</div>
<!-- Right Column: Visual Card -->
<div class="lg:col-span-5 h-full min-h-[400px] lg:min-h-0 relative group perspective-1000">
<div
class="absolute inset-0 rounded-[2rem] overflow-hidden shadow-2xl shadow-zinc-900/20 transition-all duration-700 ease-out border border-white/20">
<!-- Background Asset -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/96e3ccfa-3799-4c9c-9f2a-263c0ff6a449_1600w.webp" alt="Sci-fi landscape" class="transition-transform duration-[2s] ease-in-out group-hover:scale-110 filter saturate-[0.8] w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-zinc-900/90 via-zinc-900/20 to-zinc-900/10"></div>
<!-- Overlay Content Container -->
<div class="flex flex-col pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0 justify-between">
<!-- Top Row: Status Badges -->
<div class="flex items-start justify-between">
<div class="flex gap-2 bg-gradient-to-b from-white/10 to-white/0 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center"
style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
<span class="text-[10px] uppercase font-semibold text-white tracking-wide">Live Market</span>
</div>
<div class="flex hover:bg-white/20 transition-colors cursor-pointer text-white bg-gradient-to-b from-white/10 to-white/0 w-10 h-10 rounded-full items-center justify-center"
style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-bell">
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" class=""></path>
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" class=""></path>
</svg>
</div>
</div>
<!-- Middle: Floating Widget -->
<div class="self-end transform group-hover:translate-y-0 transition-transform duration-700 ease-out bg-gradient-to-b from-white/10 to-white/0 w-full max-w-[240px] rounded-xl mt-60 pt-4 pr-4 pb-4 pl-4 backdrop-blur translate-y-4"
style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 12px">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<div
class="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center text-white text-[10px] font-bold">
₿</div>
<span class="text-xs text-white font-medium">Bitcoin</span>
</div>
<span class="text-[10px] text-emerald-400 font-mono">+2.4%</span>
</div>
<div class="h-12 w-full mb-2 flex items-end gap-1">
<div class="w-1/5 bg-white/20 rounded-t-sm h-[40%]"></div>
<div class="w-1/5 bg-white/20 rounded-t-sm h-[70%]"></div>
<div class="w-1/5 bg-white/20 rounded-t-sm h-[50%]"></div>
<div class="w-1/5 bg-white/30 rounded-t-sm h-[85%]"></div>
<div class="w-1/5 bg-emerald-500 rounded-t-sm h-[95%] shadow-[0_0_10px_rgba(16,185,129,0.5)]">
</div>
</div>
<div class="flex justify-between items-end">
<div class="flex flex-col">
<span class="text-[9px] text-white/60 uppercase">Current Value</span>
<span class="text-sm text-white font-mono font-medium">$64,231</span>
</div>
</div>
</div>
<!-- Bottom: Animated Carousel -->
<div class="overflow-hidden w-full h-[100px] border-white/10 rounded-xl border-t mt-auto pt-4 relative">
<div class="carousel-track flex flex-col h-[300px]">
<!-- Item 1 -->
<div class="flex flex-col h-[100px] justify-start">
<div class="flex gap-3 mb-2 gap-x-3 gap-y-3 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7b1ee7e8-7554-433d-a435-029da35fee50_320w.webp" alt="Reviewer" class="w-8 h-8 rounded-full object-cover border border-white/20">
<div class="flex flex-col">
<span class="text-white text-xs font-semibold tracking-wide">Elena Stone</span>
<span class="text-white/50 text-[9px] uppercase tracking-wider">Portfolio Manager</span>
</div>
</div>
<p class="text-white/80 text-xs font-light leading-relaxed line-clamp-2">
"A complete ecosystem for mastering the digital economy. The interface is pristine
and the data is real-time."
</p>
</div>
<!-- Item 2 -->
<div class="h-[100px] flex flex-col justify-start">
<div class="flex items-center gap-3 mb-2">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b3f17582-5cb8-4efd-895a-b59c93e3ac02_320w.webp" alt="Reviewer" class="w-8 h-8 rounded-full object-cover border border-white/20">
<div class="flex flex-col">
<span class="text-white text-xs font-semibold tracking-wide">Marcus Chen</span>
<span class="text-white/50 text-[9px] uppercase tracking-wider">DeFi Analyst</span>
</div>
</div>
<p class="text-white/80 text-xs font-light leading-relaxed line-clamp-2">
"This lab provided the exact framework I needed to understand liquidity pools and
staking mechanisms."
</p>
</div>
<!-- Item 3 -->
<div class="h-[100px] flex flex-col justify-start">
<div class="flex items-center gap-3 mb-2">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/08cf0e21-ab10-49b1-b896-e0bfbcc58fdc_320w.webp" alt="Reviewer" class="w-8 h-8 rounded-full object-cover border border-white/20">
<div class="flex flex-col">
<span class="text-white text-xs font-semibold tracking-wide">Sarah Jenks</span>
<span class="text-white/50 text-[9px] uppercase tracking-wider">Crypto Trader</span>
</div>
</div>
<p class="text-white/80 text-xs font-light leading-relaxed line-clamp-2">
"The hybrid format is perfect. I could learn at my own pace while still getting
mentorship."
</p>
</div>
</div>
<!-- Fade overlay for smooth exit/entry visually -->
<div
class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-zinc-900/0 to-transparent pointer-events-none">
</div>
<div
class="absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-zinc-900/50 to-transparent pointer-events-none">
</div>
</div>
</div>
</div>
</div>
</div>