All Prompts
All Prompts
herosectionuitailwindresponsiveinteractive
AI Writing App Hero with 3D Dashboard UI
Hero-секция для AI-писателя: заголовок с эффектом печати, CTA, соц. доказательства, 3D-дашборд. Tailwind UI.
Prompt
<section class="lg:pt-40 lg:pb-32 overflow-hidden z-10 pt-32 pb-20 relative">
<div class="lg:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6">
<div class="flex flex-col lg:flex-row gap-16 gap-x-16 gap-y-16 items-center">
<!-- Hero Content -->
<div class="flex-1 max-w-2xl">
<div
class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-orange-500/20 bg-orange-500/5 text-orange-300 text-xs font-medium mb-8 reveal active">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
</span>
<span class="">Lexora 2.0 · New drafting engine</span>
</div>
<!-- Typing title -->
<div class="min-h-[7rem] sm:min-h-[8rem] lg:min-h-[9rem]">
<h1
class="text-5xl sm:text-6xl lg:text-7xl font-serif tracking-tight leading-[1.1] text-white mb-8 font-normal reveal delay-100 active">
Write
<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-neutral-200 via-neutral-400 to-neutral-600">
<span id="hero-typing-word" class="inline-block border-r border-orange-400 pr-1 mr-1 min-w-[5ch]">smarte</span>
with Lexora.
</span>
</h1>
</div>
<p class="text-lg text-neutral-400 mb-10 max-w-lg leading-relaxed reveal delay-200 active">
Turn rough ideas into polished copy in seconds. Lexora understands
your brand voice, keeps context across drafts, and helps you
publish on schedule instead of staring at a blank page.
</p>
<div class="flex flex-wrap items-center gap-4 reveal delay-300 active">
<button class="group shadow-orange-500/30 hover:shadow-orange-500/50 transition-all duration-300 overflow-hidden font-medium text-orange-900 bg-gradient-to-r from-[#FFEBB1] to-[#FFC438] rounded-xl pt-4 pr-8 pb-4 pl-8 relative shadow-lg" style="box-shadow:0 15px 33px -12px rgba(255,162,42,0.9), inset 0 4px 6.3px rgba(252,220,134,1), inset 0 -5px 6.3px rgba(255,162,38,1); border-radius:9999px">
<div class="group-hover:translate-y-0 transition-transform duration-300 bg-white/20 absolute top-0 right-0 bottom-0 left-0 translate-y-full"></div>
<span class="relative flex items-center gap-2">
Start Free Trial
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
</span>
</button>
<button class="h-12 px-8 rounded-full border border-white/10 bg-white/5 text-white font-medium hover:bg-white/10 transition-all flex items-center gap-2 backdrop-blur-sm">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
Watch demo
</button>
</div>
<div class="mt-12 flex items-center gap-4 text-sm text-neutral-500 reveal delay-500 active">
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ec73f0-6fd3-4d0c-922c-fcc592c983df_320w.webp" alt="" class="w-8 h-8 rounded-full border-2 border-black grayscale opacity-70 object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2dbcdf02-39a2-4c13-95f7-3118cc995fa0_320w.webp" alt="" class="w-8 h-8 rounded-full border-2 border-black grayscale opacity-70 object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black grayscale opacity-70 object-cover" style="">
</div>
<p class="">Trusted by 10,000+ content teams</p>
</div>
</div>
<!-- Hero Visual -->
<div class="flex-1 delay-200 w-full relative perspective-1000 reveal delay-300 active">
<!-- Main dashboard card -->
<div
class="relative z-10 glass-panel rounded-2xl p-1 shadow-2xl transform rotate-y-12 rotate-x-6 hover:rotate-0 transition-transform duration-700 ease-out">
<div class="bg-neutral-900 rounded-xl overflow-hidden border border-white/5 flex flex-col h-[480px]">
<!-- Editor Header -->
<div
class="flex bg-black/50 h-10 border-white/5 border-b pr-4 pl-4 items-center justify-between shrink-0 z-20 relative">
<div class="flex gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-red-500/20 border border-red-500/50"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500/20 border border-green-500/50"></div>
</div>
<div class="text-xs font-mono text-neutral-500">
newsletter_weekly.md
</div>
<div class="flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]"></div>
<span class="text-[10px] text-neutral-600 uppercase tracking-widest font-semibold">
Saved
</span>
</div>
</div>
<!-- Editor Body -->
<div class="p-8 overflow-y-auto font-mono text-sm leading-loose relative h-full scroll-smooth">
<div class="absolute top-0 right-0 bottom-0 left-0 pointer-events-none"></div>
<p class="text-neutral-500 mb-4"># Launching Lexora 2.0</p>
<p class="text-neutral-300 mb-8">
Great writing doesn’t start from scratch. With Lexora, your
past campaigns, tone, and structure all live in one
intelligent workspace. Every new piece of content feels
consistent, on-brand, and ready to ship.
</p>
<p class="text-neutral-500 mb-4">## The Problem</p>
<p class="text-neutral-300 mb-8">
Content teams are drowning in Google Docs, Slack threads,
and endless revision cycles. We realized that the tool
shouldn't just be a blank page—it should be a partner that
knows your context. When you write "Our mission," Lexora
knows exactly what that means.
</p>
<!-- AI Suggestion Popover (Attached to content) -->
<div
class="float-right ml-4 mb-4 w-64 glass-panel rounded-lg p-4 border border-orange-500/30 shadow-lg shadow-orange-900/20 relative z-10 bg-neutral-900/90 backdrop-blur-md">
<div class="flex items-center gap-2 mb-2 text-orange-300 text-xs font-medium uppercase tracking-wider">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path
d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
</path>
</svg>
Suggestion
</div>
<p class="text-xs text-neutral-300 mb-3">
Want a sharper hook? Try:
</p>
<p class="text-xs text-white bg-white/5 p-2 rounded border border-white/10 mb-3 leading-relaxed">
“Your next campaign shouldn’t start from a blank page—it
should start from everything that already works.”
</p>
<div class="flex gap-2">
<button class="flex-1 h-6 rounded bg-orange-500 text-black text-[10px] font-bold hover:bg-orange-400 transition-colors">
Accept
</button>
<button class="flex-1 h-6 rounded bg-white/5 text-white text-[10px] hover:bg-white/10 transition-colors">
Dismiss
</button>
</div>
</div>
<p class="text-neutral-500 mb-4">## Core Capabilities</p>
<ul class="text-neutral-300 mb-8 list-none pl-0 space-y-3">
<li class="flex gap-2">
<span class="text-orange-500 font-bold">-</span>
<span class="">
Instantly references your last 50 campaigns to maintain
continuity.
</span>
</li>
<li class="flex gap-2">
<span class="text-orange-500 font-bold">-</span>
<span class="">
Automatically flags language that drifts from your
established style guide.
</span>
</li>
<li class="flex gap-2">
<span class="text-orange-500 font-bold">-</span>
<span class="">
Edit with your team and AI agents simultaneously in the
same doc.
</span>
</li>
</ul>
<p class="text-neutral-500 mb-4">## Q4 Roadmap</p>
<p class="text-neutral-300">
We are just getting started. Upcoming releases:
<span class="text-neutral-500 text-xs mt-2 block font-mono">
[ ] Enterprise API Access [ ] Mobile App (iOS/Android) [ ]
Slack Integration [ ] Custom AI Agents
</span>
<span class="inline-block w-2 h-4 bg-orange-500 ml-1 animate-pulse align-middle mt-2"></span>
</p>
<div class="h-12"></div>
<!-- Spacer for scroll -->
</div>
</div>
</div>
<!-- Floating cards OUTSIDE the dashboard -->
<!-- Top-left floating status -->
<div
class="-left-10 -top-4 glass-panel shadow-black/60 sm:-left-16 sm:top-4 sm:w-48 [--fx-filter:blur(10px)_liquid-glass(0,10)_saturate(1.25)_noise(0.5,1,0)] bg-black/30 w-40 z-20 pointer-events-none border-white/10 border rounded-xl px-4 py-3 absolute shadow-lg backdrop-blur-md">
<p class="text-[10px] uppercase tracking-[0.18em] text-neutral-400 mb-1">
Live workspace
</p>
<p class="text-xs text-neutral-100 mb-1">Blog calendar · Q2</p>
<p class="text-[11px] text-orange-300 flex items-center gap-1">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
</span>
3 teammates editing
</p>
</div>
<!-- Bottom-right floating metric -->
<div
class="-right-10 glass-panel shadow-orange-900/40 sm:-right-16 sm:bottom-6 sm:w-48 bg-black/30 w-40 z-20 pointer-events-none border-orange-500/30 border rounded-xl px-4 py-3 absolute bottom-4 shadow-lg">
<p class="text-[10px] uppercase tracking-[0.18em] text-orange-400 mb-1">
This week
</p>
<p class="text-xl font-semibold text-white leading-tight">27</p>
<p class="text-[11px] text-neutral-400">
publish-ready pieces shipped with Lexora.
</p>
</div>
<!-- Decorative glow behind -->
<div
class="absolute -inset-4 bg-gradient-to-r from-orange-500 to-purple-600 opacity-20 blur-3xl -z-10 rounded-full">
</div>
</div>
</div>
</div>
</section>
<!-- Typing animation script -->
<script class="">
(function () {
const el = document.getElementById('hero-typing-word');
if (!el) return;
const words = ['smarter', 'faster', 'clearer', 'on-brand'];
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
function type() {
const word = words[wordIndex % words.length];
if (isDeleting) {
charIndex--;
} else {
charIndex++;
}
el.textContent = word.substring(0, charIndex);
let delay = isDeleting ? 60 : 110;
if (!isDeleting && charIndex === word.length) {
// pause at full word
delay = 1400;
isDeleting = true;
} else if (isDeleting && charIndex === 0) {
// move to next word
isDeleting = false;
wordIndex++;
delay = 400;
}
setTimeout(type, delay);
}
// start with empty text so it types in
el.textContent = '';
type();
})();
</script>