All Prompts
All Prompts
herolandingcarouselctastatsresponsiveinteractivetailwind
Quantum Product Hero with Image Carousel
Полноэкранный Hero-блок с каруселью изображений, CTA и вращающимися характеристиками. Идеально для лендингов продукта или SaaS.
Prompt
<body class="antialiased overflow-x-hidden selection:text-black min-h-screen flex flex-col selection:bg-[#00E5FF]"
data-element-locator="html > body:nth-of-type(1)">
<!-- Header Navigation -->
<header class="fixed top-0 left-0 right-0 z-50 bg-[#050505]/80 backdrop-blur-md">
<div class="w-full px-6 py-5 lg:px-12 flex justify-between items-center relative">
<!-- Bottom Beam Border -->
<div class="beam-border-h"></div>
<!-- Logo Section -->
<div class="flex items-center gap-12">
<a href="#" class="flex items-center gap-3 group">
<!-- Abstract Logo (Canvas Style) -->
<svg class="w-[24px] h-[24px] drop-shadow-[0_0_8px_rgba(0,229,255,0.8)]" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-icon-replaced="true" style="color: rgb(0, 229, 255); width: 24px; height: 24px">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path>
<path d="M2 12h20" class=""></path>
</svg>
<span class="font-display font-medium text-lg tracking-tight text-white transition-colors group-hover:text-[#00E5FF]">
Nexus
</span>
</a>
<div class="hidden md:block h-5 w-[1px] bg-neutral-800"></div>
<!-- Center Navigation (Desktop) -->
<nav class="hidden lg:flex items-center gap-8">
<a href="#" class="text-sm font-medium text-neutral-500 hover:text-white transition-colors tracking-wide">
Products
</a>
<a href="#" class="text-sm font-medium text-neutral-500 hover:text-white transition-colors tracking-wide">
Solutions
</a>
<a href="#" class="text-sm font-medium text-neutral-500 hover:text-white transition-colors tracking-wide">
Enterprise
</a>
<a href="#" class="text-sm font-medium text-neutral-500 hover:text-white transition-colors tracking-wide">
Pricing
</a>
</nav>
</div>
<!-- Right Actions -->
<div class="flex items-center gap-6">
<span class="text-[10px] font-medium tracking-[0.2em] uppercase hidden sm:block text-neutral-600">
System V2.0
</span>
<button class="group p-1 hover:bg-white/5 rounded-full transition-colors">
<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="search" class="lucide lucide-search w-5 h-5 text-neutral-400 transition-colors group-hover:text-[#00E5FF]"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
</button>
<button class="group p-1 hover:bg-white/5 rounded-full transition-colors">
<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="menu" class="lucide lucide-menu w-6 h-6 text-neutral-400 group-hover:text-[#00e5ff] transition-colors"><path d="M4 5h16" class=""></path><path d="M4 12h16" class=""></path><path d="M4 19h16" class=""></path></svg>
</button>
</div>
</div>
</header>
<!-- Main Hero Section -->
<main class="relative w-full h-screen flex flex-col items-center justify-center overflow-hidden bg-[#050505]">
<!-- Background Grid -->
<div class="absolute inset-0 grid-bg pointer-events-none z-10"></div>
<!-- Ambient Glow -->
<div
class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[60vh] bg-[#00E5FF]/10 blur-[120px] rounded-full pointer-events-none z-0 mix-blend-screen">
</div>
<!-- Image Carousel -->
<div class="absolute inset-0 z-0 w-full h-full bg-black">
<!-- Slide 1 -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1d62b373-cc7d-4f73-b0bd-e8a8ec3e260a_800w.webp?w=800&q=80" alt="Hero 1" class="slide slide-active absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-60">
<!-- Slide 2 -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3d002ce2-4c90-42cd-95d5-e6347f89ef02_3840w.webp" alt="Hero 2" class="slide slide-hidden absolute inset-0 w-full h-full object-cover mix-blend-screen grayscale opacity-40">
<!-- Slide 3 -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/601532d2-8dea-45f6-bbf2-f1dd1947354f_3840w.webp" alt="Hero 3" class="slide slide-hidden absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-50">
<!-- Slide 4 -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/bdeb92f4-50d3-453d-ae19-bf6c64d5afe8_3840w.webp" alt="Hero 4" class="slide slide-hidden absolute inset-0 w-full h-full object-cover mix-blend-screen grayscale opacity-40">
<!-- Slide 5 -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/47f323b4-9880-45f4-aa62-4a5134475d97_3840w.webp" alt="Hero 5" class="slide slide-hidden absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-50">
<!-- Dark Overlay for Text Contrast -->
<div
class="bg-gradient-to-b from-[#050505]/80 via-[#050505]/40 to-[#050505]/90 absolute top-0 right-0 bottom-0 left-0">
</div>
</div>
<!-- Navigation Arrows -->
<button id="prevBtn" class="absolute left-4 lg:left-12 top-1/2 -translate-y-1/2 z-30 group p-4 hover:scale-110 transition-transform">
<div class="w-12 h-12 rounded-full border border-white/10 bg-black/20 backdrop-blur-sm flex items-center justify-center group-hover:border-[#00E5FF]/50 group-hover:bg-[#00E5FF]/10 transition-all shadow-[0_0_0_1px_rgba(255,255,255,0.05)] group-hover:shadow-[0_0_15px_rgba(0,229,255,0.3)]">
<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="arrow-left" class="lucide lucide-arrow-left w-5 h-5 text-white group-hover:text-[#00E5FF] transition-colors"><path d="m12 19-7-7 7-7" class=""></path><path d="M19 12H5" class=""></path></svg>
</div>
</button>
<button id="nextBtn" class="absolute right-4 lg:right-12 top-1/2 -translate-y-1/2 z-30 group p-4 hover:scale-110 transition-transform">
<div class="w-12 h-12 rounded-full border border-white/10 bg-black/20 backdrop-blur-sm flex items-center justify-center group-hover:border-[#00E5FF]/50 group-hover:bg-[#00E5FF]/10 transition-all shadow-[0_0_0_1px_rgba(255,255,255,0.05)] group-hover:shadow-[0_0_15px_rgba(0,229,255,0.3)]">
<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="arrow-right" class="lucide lucide-arrow-right w-5 h-5 text-white group-hover:text-[#00E5FF] transition-colors"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</div>
</button>
<!-- Hero Content -->
<div class="relative z-20 flex flex-col items-center text-center px-4 max-w-6xl mx-auto mt-20">
<div class="z-20 flex flex-col text-center max-w-5xl mt-20 mr-auto ml-auto pr-4 pl-4 relative items-center">
<div class="inline-flex items-center gap-2 px-3 py-1 border border-white/10 bg-white/5 backdrop-blur-sm mb-8">
<div class="w-1.5 h-1.5 animate-pulse bg-[#00e5ff]"></div>
<span class="text-[10px] font-mono uppercase tracking-widest text-neutral-400">
Quantum Engine V2.0
</span>
</div>
<h1
class="font-display text-5xl md:text-7xl lg:text-[7.5rem] leading-[0.9] font-medium text-white tracking-tighter uppercase mb-8 drop-shadow-2xl">
Nexus
<span class="text-neutral-600">Core</span>
X1
</h1>
<p
class="text-base md:text-xl text-neutral-400 font-light tracking-wide mb-12 max-w-2xl mx-auto leading-relaxed">
The new standard in quantum processing power and neural efficiency.
Construct reality with parametric precision.
</p>
<div class="flex flex-col items-center gap-8">
<!-- Custom Button Component from Canvas -->
<a href="#"
class="btn-wrapper group relative inline-flex justify-center items-center p-4 border border-neutral-800 hover:border-[#00e5ff] transition-colors duration-300 w-64">
<div
class="absolute inset-0 opacity-0 group-hover:opacity-100 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjQ5LCAxMTUsIDIyLCAwLjIpIi8+PC9zdmc+')] transition-opacity duration-300">
</div>
<!-- Corner accents -->
<div
class="absolute top-0 left-0 w-2 h-2 border-t border-l border-[#00e5ff] opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-1 -translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0">
</div>
<div
class="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-[#00e5ff] opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0">
</div>
<button class="btn flex items-center justify-center gap-3 bg-transparent text-white font-medium uppercase tracking-widest text-xs relative z-10 w-full">
Pre-Order Now
<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>
</a>
<!-- Dot Indicators -->
<div class="flex items-center gap-3 mt-2">
<button class="dot h-1 rounded-full cursor-pointer hover:bg-[#F97316]" onclick="goToSlide(0)"></button>
<button class="dot h-1 rounded-full cursor-pointer hover:bg-[#F97316]" onclick="goToSlide(1)"></button>
<button class="dot h-1 rounded-full cursor-pointer hover:bg-[#F97316]" onclick="goToSlide(2)"></button>
<button class="dot w-1 h-1 rounded-full bg-neutral-700 cursor-pointer hover:bg-[#F97316]" onclick="goToSlide(3)"></button>
<button class="dot w-1 h-1 rounded-full bg-neutral-700 cursor-pointer hover:bg-[#F97316]" onclick="goToSlide(4)"></button>
</div>
</div>
</div>
</div>
<!-- Tech Specs Strip (Canvas Stats Style) -->
<div class="absolute bottom-0 right-0 hidden lg:flex border-l border-white/5 bg-black/40 backdrop-blur-xl">
<!-- Stat Slide 1 -->
<div class="stat-slide flex animate-in fade-in duration-500">
<div class="px-8 py-6 border-r border-white/5 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
128
<span class="text-sm align-top text-neutral-500">TB</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Throughput
</span>
</div>
<div class="px-8 py-6 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
0.01
<span class="text-sm align-top text-neutral-500">MS</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Latency
</span>
</div>
</div>
<!-- Stat Slide 2 -->
<div class="stat-slide flex hidden animate-in fade-in duration-500">
<div class="px-8 py-6 border-r border-white/5 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
10
<span class="text-sm align-top text-neutral-500">K</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Qubits
</span>
</div>
<div class="px-8 py-6 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
99.9
<span class="text-sm align-top text-neutral-500">%</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Fidelity
</span>
</div>
</div>
<!-- Stat Slide 3 -->
<div class="stat-slide flex hidden animate-in fade-in duration-500">
<div class="px-8 py-6 border-r border-white/5 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
-270
<span class="text-sm align-top text-neutral-500">°C</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Cooling
</span>
</div>
<div class="px-8 py-6 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
500
<span class="text-sm align-top text-neutral-500">L/h</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Flow Rate
</span>
</div>
</div>
<!-- Stat Slide 4 -->
<div class="stat-slide flex hidden animate-in fade-in duration-500">
<div class="px-8 py-6 border-r border-white/5 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
2048
<span class="text-sm align-top text-neutral-500">bit</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Encryption
</span>
</div>
<div class="px-8 py-6 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
0
<span class="text-sm align-top text-neutral-500">Day</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Vuln Exposure
</span>
</div>
</div>
<!-- Stat Slide 5 -->
<div class="stat-slide flex hidden animate-in fade-in duration-500">
<div class="px-8 py-6 border-r border-white/5 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
∞
<span class="text-sm align-top text-neutral-500">PB</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Capacity
</span>
</div>
<div class="px-8 py-6 group cursor-pointer hover:bg-white/5 transition-colors">
<span class="block text-3xl font-display font-light text-white group-hover:text-[#00E5FF] transition-colors drop-shadow-[0_0_8px_rgba(0,229,255,0.3)]">
500
<span class="text-sm align-top text-neutral-500">YR</span>
</span>
<span class="text-[10px] text-neutral-500 uppercase tracking-widest mt-1 block">
Retention
</span>
</div>
</div>
</div>
</main>
<script>
lucide.createIcons();
const slides = document.querySelectorAll('.slide');
const textSlides = document.querySelectorAll('.text-slide');
const statSlides = document.querySelectorAll('.stat-slide');
const dots = document.querySelectorAll('.dot');
let currentSlide = 0;
const totalSlides = slides.length;
function updateSlides() {
slides.forEach((slide, index) => {
if (index === currentSlide) {
slide.classList.remove('slide-hidden');
slide.classList.add('slide-active');
} else {
slide.classList.add('slide-hidden');
slide.classList.remove('slide-active');
}
});
textSlides.forEach((slide, index) => {
if (index === currentSlide) {
slide.classList.remove('opacity-0', 'translate-y-8', 'blur-sm', 'pointer-events-none');
slide.classList.add('opacity-100', 'translate-y-0', 'blur-0', 'pointer-events-auto');
} else {
slide.classList.remove('opacity-100', 'translate-y-0', 'blur-0', 'pointer-events-auto');
slide.classList.add('opacity-0', 'translate-y-8', 'blur-sm', 'pointer-events-none');
}
});
statSlides.forEach((slide, index) => {
if (index === currentSlide) {
slide.classList.remove('hidden');
slide.classList.add('flex');
} else {
slide.classList.add('hidden');
slide.classList.remove('flex');
}
});
dots.forEach((dot, index) => {
if (index === currentSlide) {
dot.classList.add('dot-active', 'bg-[#00E5FF]', 'w-6', 'shadow-[0_0_10px_rgba(0,229,255,0.5)]');
dot.classList.remove('bg-neutral-700', 'w-1');
} else {
dot.classList.remove('dot-active', 'bg-[#00E5FF]', 'w-6', 'shadow-[0_0_10px_rgba(0,229,255,0.5)]');
dot.classList.add('bg-neutral-700', 'w-1');
}
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlides();
}
function prevSlide() {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlides();
}
function goToSlide(index) {
currentSlide = index;
updateSlides();
}
document.getElementById('nextBtn').addEventListener('click', nextSlide);
document.getElementById('prevBtn').addEventListener('click', prevSlide);
</script>
<div class="edit-mode-label" data-edit-label="true" style="left: 0px; top: 0px;">
<span class="edit-mode-label-text">body</span><button class="edit-mode-move-btn">↑</button><button class="edit-mode-move-btn" disabled="">↓</button>
</div>
<button class="edit-mode-bottom-btn add-new" data-edit-label="true" title="Add content after element" style="left: 0px; top: 949px;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M12 5v14" class=""></path><path d="M5 12h14" class=""></path></svg></button><button class="edit-mode-bottom-btn replace" data-edit-label="true" title="Replace element with component" style="left: 30px; top: 949px;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-repeat"><polyline points="17 1 21 5 17 9" class=""></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14" class=""></path><polyline points="7 23 3 19 7 15" class=""></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3" class=""></path></svg></button><button class="edit-mode-bottom-btn menu" data-edit-label="true" title="Open context menu" style="left: 60px; top: 949px;"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-horizontal"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg></button>
</body>