All Prompts
All Prompts
herofeaturescrolltailwindresponsiveinteractivelandingmarketing
Scroll-Activated Feature Showcase Section
Секция с демонстрацией функций, активируемых при прокрутке. Адаптивный UI-компонент для лендингов, с интерактивными элементами и плавной анимацией.
Prompt
<section class="sm:px-6 sm:mt-32 sm:pt-16 sm:pb-16 lg:px-8 lg:mt-60 max-w-7xl mt-24 mr-auto ml-auto pt-12 pr-4 pb-12 pl-4" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(2)">
<div class="relative overflow-visible">
<div class="pointer-events-none absolute inset-0 -z-10">
<div class="absolute -left-32 top-0 h-[28rem] w-[32rem] rounded-full bg-white/10 blur-[140px] opacity-20"></div>
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
<div class="w-[600px] sm:w-[900px] h-[600px] sm:h-[900px] rounded-full bg-[rgba(60,130,255,0.15)] blur-[120px] sm:blur-[180px]"></div>
</div>
<div class="absolute -right-24 bottom-0 h-[22rem] w-[22rem] rounded-full bg-white/10 blur-[120px] opacity-10"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-8 lg:gap-y-10 items-start">
<div class="space-y-6 sm:space-y-8 lg:sticky lg:top-32">
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight leading-tight sm:leading-none" data-animate="">
<span class="text-white xl:font-thin">Create</span>
<span class="xl:font-thin text-white/30"> stunning</span>
<span class="text-white/30 xl:font-thin">digital products with</span>
<span class="xl:font-thin text-white/30">tools you love</span>
</h1>
<div class="space-y-5 sm:space-y-7">
<div class="transition-opacity duration-500 cursor-pointer hover:opacity-100" data-section="1" data-animate="" data-animate-delay="100" style="opacity: 0.6;">
<div class="text-sm font-medium text-white/80 transition-opacity duration-500" data-heading="1">Library</div>
<div class="mt-2 h-px w-20 sm:w-24 bg-white/10"></div>
<p class="mt-2 max-w-[46ch] text-xs sm:text-sm lg:text-base text-white/70 transition-opacity duration-500" data-text="1">
A rich collection of adaptable components designed for flexibility and consistency, ensuring seamless integration across your entire product ecosystem.
</p>
</div>
<div class="transition-opacity duration-500 opacity-60 cursor-pointer hover:opacity-100" data-section="2" data-animate="" data-animate-delay="200" style="opacity: 1;">
<div class="text-sm font-medium transition-opacity duration-500" data-heading="2">Multiple visual styles</div>
<p class="mt-2 max-w-[46ch] text-xs sm:text-sm transition-opacity duration-500" data-text="2">
Switch between glass, outline, and solid variants to match your brand identity and design vision.
</p>
</div>
<div class="transition-opacity duration-500 opacity-60 cursor-pointer hover:opacity-100" data-section="3" data-animate="" data-animate-delay="300" style="opacity: 0.6;">
<div class="text-sm font-medium transition-opacity duration-500" data-heading="3">Ready‑made templates</div>
<p class="mt-2 max-w-[46ch] text-xs sm:text-sm transition-opacity duration-500" data-text="3">
Accelerate delivery with pre‑designed page layouts and sections that work beautifully right out of the box.
</p>
</div>
</div>
<button class="inline-flex gap-2 hover:bg-white/15 transition-all duration-200 bg-white/10 border-white/20 border rounded-xl mt-8 sm:mt-10 pt-2.5 pr-5 pb-2.5 pl-5 sm:pt-3 sm:pr-6 sm:pb-3 sm:pl-6 backdrop-blur gap-x-2 gap-y-2 items-center hover:border-white/30 hover:scale-[1.02] text-sm sm:text-base" data-animate="" data-animate-delay="400">
EXPLORE LIBRARY
<svg class="size-3.5 sm:size-4 transition-transform duration-200 group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" class=""></path>
</svg>
</button>
</div>
<div class="space-y-0">
<div class="min-h-[60vh] sm:min-h-[75vh] lg:min-h-[85vh] flex relative items-center" data-panel="1">
<div class="transition-all duration-700 bg-gradient-to-b from-white/10 to-white/5 w-full border-white/10 border ring-white/10 ring-1 rounded-xl sm:rounded-2xl shadow-[0_10px_50px_-10px_rgba(0,0,0,0.6)] backdrop-blur hover:border-white/20 hover:shadow-[0_15px_60px_-15px_rgba(0,0,0,0.7)]" data-content="1" data-animate="">
<div class="flex bg-black/30 border-white/10 rounded-t-xl sm:rounded-t-2xl border-b pt-3 pr-4 pb-3 pl-4 sm:pt-4 sm:pr-5 sm:pb-4 sm:pl-5 items-center justify-between flex-wrap gap-2">
<div class="inline-flex items-center gap-2 text-xs sm:text-sm text-white/80">
<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" class="h-3.5 w-3.5 sm:h-4 sm:w-4 opacity-80"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
Voyager
</div>
<div class="hidden sm:flex gap-2">
<span class="rounded-md bg-white/5 px-3 sm:px-4 py-1.5 sm:py-2 text-[10px] sm:text-xs text-white ring-1 ring-white/10 cursor-pointer hover:bg-white/10 hover:ring-white/20 transition-all duration-200">Trips</span>
<span class="rounded-md px-3 sm:px-4 py-1.5 sm:py-2 text-[10px] sm:text-xs text-white/70 ring-1 ring-white/10 cursor-pointer hover:bg-white/5 hover:text-white transition-all duration-200">Hotels</span>
<span class="rounded-md px-3 sm:px-4 py-1.5 sm:py-2 text-[10px] sm:text-xs text-white/70 ring-1 ring-white/10 cursor-pointer hover:bg-white/5 hover:text-white transition-all duration-200">Rentals</span>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 pt-4 pr-4 pb-4 pl-4 sm:pt-6 sm:pr-6 sm:pb-6 sm:pl-6 gap-x-3 gap-y-3 sm:gap-x-4 sm:gap-y-4">
<aside class="rounded-lg sm:rounded-xl border border-white/10 bg-white/5 p-4 sm:p-6 ring-1 ring-white/10 hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
<div class="mb-4 sm:mb-5 flex items-center justify-between">
<span class="text-xs sm:text-sm font-medium text-white/70">Refine Search</span>
<button class="text-[10px] sm:text-xs text-white/60 hover:text-white transition-colors duration-200">Clear</button>
</div>
<div class="space-y-4 sm:space-y-5">
<div class="">
<div class="mb-2 sm:mb-3 text-xs sm:text-sm font-medium text-white/60">Sort by</div>
<div class="flex items-center justify-between rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
<span class="text-xs sm:text-sm text-white/70">Duration</span>
<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" class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-white/60"><path d="m6 9 6 6 6-6" class=""></path></svg>
</div>
</div>
<div class="">
<div class="mb-2 sm:mb-3 text-xs sm:text-sm font-medium text-white/60">Stops</div>
<div class="space-y-2">
<label class="flex items-center gap-2 sm:gap-3 rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
<div class="bg-white/5 w-3.5 h-3.5 sm:w-4 sm:h-4 border-white/20 border rounded"></div>
<span class="text-xs sm:text-sm text-white/70">Direct flights only</span>
</label>
<label class="flex items-center gap-2 sm:gap-3 rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
<div class="h-3.5 w-3.5 sm:h-4 sm:w-4 rounded border border-white/20 bg-white/5"></div>
<span class="text-xs sm:text-sm text-white/70">1 stop maximum</span>
</label>
</div>
</div>
<div class="">
<div class="mb-2 sm:mb-3 text-xs sm:text-sm font-medium text-white/60">Price Range</div>
<div class="rounded-lg bg-black/20 px-3 sm:px-4 py-2.5 sm:py-3 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] sm:text-xs text-white/60">$0</span>
<span class="text-[10px] sm:text-xs text-white/60">$2000</span>
</div>
<div class="h-1 w-full rounded-full bg-white/10">
<div class="h-1 w-[60%] rounded-full bg-gradient-to-r from-indigo-400 to-fuchsia-400"></div>
</div>
</div>
</div>
</div>
</aside>
<div class="space-y-4 sm:space-y-5">
<div class="ring-1 ring-white/10 bg-white/5 border-white/10 border rounded-lg sm:rounded-xl pt-4 pr-4 pb-4 pl-4 sm:pt-6 sm:pr-6 sm:pb-6 sm:pl-6 hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
<div class="mb-4 sm:mb-5 flex flex-wrap items-center gap-2 text-xs text-white/70">
<span class="inline-flex items-center gap-1.5 sm:gap-2 rounded-md bg-white/10 px-2.5 sm:px-3 py-1.5 ring-1 ring-white/10 cursor-pointer hover:bg-white/15 transition-all duration-200">
<span class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-blue-400"></span> Round trip
</span>
<span class="inline-flex items-center gap-1.5 sm:gap-2 rounded-md bg-white/5 px-2.5 sm:px-3 py-1.5 ring-1 ring-white/10 cursor-pointer hover:bg-white/10 transition-all duration-200">
<span class="text-white/60 text-[10px] sm:text-xs">2 passengers</span>
</span>
<span class="inline-flex items-center gap-1.5 sm:gap-2 rounded-md bg-white/5 px-2.5 sm:px-3 py-1.5 ring-1 ring-white/10 cursor-pointer hover:bg-white/10 transition-all duration-200">
<span class="text-white/60 text-[10px] sm:text-xs">Economy</span>
</span>
</div>
<div class="mt-3 sm:mt-4 grid grid-cols-2 gap-3 sm:gap-4">
<div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
<div class="text-[10px] sm:text-xs text-white/60 mb-1.5 sm:mb-2">Departure</div>
<div class="text-xs sm:text-sm text-white/90">Dec 15, 2024</div>
</div>
<div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
<div class="text-[10px] sm:text-xs text-white/60 mb-1.5 sm:mb-2">Return</div>
<div class="text-xs sm:text-sm text-white/90">Dec 22, 2024</div>
</div>
</div>
<button class="w-full sm:w-auto inline-flex gap-2 hover:bg-white/15 transition-all duration-200 bg-white/10 border-white/20 border rounded-xl mt-6 sm:mt-10 pt-2.5 pr-6 pb-2.5 pl-6 sm:pt-3 sm:pr-10 sm:pb-3 sm:pl-10 backdrop-blur gap-x-2 gap-y-2 items-center justify-center hover:scale-[1.02] text-sm sm:text-base">
Search Flights
</button>
</div>
<div class="ring-1 ring-white/10 bg-white/5 border-white/10 border rounded-lg sm:rounded-xl pt-4 pr-4 pb-4 pl-4 sm:pt-5 sm:pr-5 sm:pb-5 sm:pl-5 hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
<div class="mb-3 sm:mb-4 flex items-center justify-between">
<span class="text-xs sm:text-sm font-medium text-white/70">Quick Stats</span>
</div>
<div class="grid grid-cols-2 gap-2.5 sm:gap-3">
<div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200">
<div class="text-xl sm:text-2xl font-semibold text-white mb-0.5 sm:mb-1">8h 45m</div>
<div class="text-[10px] sm:text-xs text-white/60">Avg. Flight Time</div>
</div>
<div class="rounded-lg bg-black/20 p-3 sm:p-4 ring-1 ring-white/10 cursor-pointer hover:bg-black/30 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200">
<div class="text-xl sm:text-2xl font-semibold text-emerald-400 mb-0.5 sm:mb-1">$842</div>
<div class="text-[10px] sm:text-xs text-white/60">Best Price</div>
<!-- Orb 98 overlay -->
<div class="pointer-events-none absolute left-0 top-1/2 -translate-x-[30%] -translate-y-[5%]">
<div class="relative flex h-24 w-24 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/10 backdrop-blur">
<div class="absolute inset-0 rounded-full bg-gradient-to-br from-white/10 to-transparent"></div>
<div class="absolute inset-2 rounded-full ring-1 ring-white/15"></div>
<span class="relative z-10 text-2xl font-semibold tracking-tight text-white">98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative min-h-[60vh] sm:min-h-[75vh] lg:min-h-screen flex items-center" data-panel="2">
<div class="w-full rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-b from-white/10 to-white/5 ring-1 ring-white/10 shadow-[0_10px_50px_-10px_rgba(0,0,0,0.6)] backdrop-blur p-6 sm:p-8 transition-all duration-700 hover:border-white/20 hover:shadow-[0_15px_60px_-15px_rgba(0,0,0,0.7)]" data-content="2" data-animate="">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-4 sm:mb-6">Visual Style Variants</h3>
<div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
<div class="rounded-lg sm:rounded-xl bg-white/10 backdrop-blur p-4 sm:p-6 ring-1 ring-white/10 hover:bg-white/15 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80 mb-2">Glass</div>
<div class="h-20 sm:h-24 rounded-lg bg-gradient-to-br from-white/20 to-white/5 backdrop-blur-xl"></div>
</div>
<div class="rounded-lg sm:rounded-xl border-2 border-white/20 p-4 sm:p-6 hover:border-white/30 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80 mb-2">Outline</div>
<div class="h-20 sm:h-24 rounded-lg border-2 border-white/30"></div>
</div>
<div class="rounded-lg sm:rounded-xl bg-white/95 p-4 sm:p-6 hover:bg-white hover:scale-[1.02] transition-all duration-300 cursor-pointer xs:col-span-2 sm:col-span-1">
<div class="text-xs sm:text-sm font-medium text-black/80 mb-2">Solid</div>
<div class="h-20 sm:h-24 rounded-lg bg-indigo-500"></div>
</div>
</div>
</div>
</div>
<div class="min-h-[60vh] sm:min-h-[75vh] lg:min-h-screen flex relative items-center" data-panel="3">
<div class="transition-all duration-700 bg-gradient-to-b from-white/10 to-white/5 w-full border-white/10 border ring-white/10 ring-1 rounded-xl sm:rounded-2xl pt-6 pr-6 pb-6 pl-6 sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 shadow-[0_10px_50px_-10px_rgba(0,0,0,0.6)] backdrop-blur hover:border-white/20 hover:shadow-[0_15px_60px_-15px_rgba(0,0,0,0.7)]" data-content="3" data-animate="">
<h3 class="text-xl sm:text-2xl font-semibold tracking-tight text-white mb-4 sm:mb-6">Ready-Made Templates</h3>
<div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 gap-3 sm:gap-4">
<div class="group aspect-video bg-gradient-to-br from-indigo-500/20 to-fuchsia-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ee938364-0ff1-4042-8d2d-824055b38b24_3840w.webp)] bg-cover ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">Dashboard</div>
</div>
<div class="group aspect-video bg-gradient-to-br from-emerald-500/20 to-sky-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f826149d-7e8d-4b68-a4fd-cc16fb762142_3840w.jpg)] bg-cover ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">Landing Page</div>
</div>
<div class="group aspect-video bg-gradient-to-br from-amber-500/20 to-rose-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/564dc5fb-0d4e-42cb-9136-c3b630185122_3840w.webp)] bg-cover ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">E-commerce</div>
</div>
<div class="group aspect-video ring-1 ring-white/10 bg-gradient-to-br from-purple-500/20 to-pink-500/20 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/78877756-9e45-410e-b630-78c3dfb8e94c_3840w.jpg)] bg-cover rounded-lg pt-3 pr-3 pb-3 pl-3 sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 hover:ring-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80 group-hover:text-white transition-colors duration-200">Portfolio</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
const sections = [
{ heading: '[data-heading="1"]', text: '[data-text="1"]', panel: '[data-panel="1"]', section: '[data-section="1"]' },
{ heading: '[data-heading="2"]', text: '[data-text="2"]', panel: '[data-panel="2"]', section: '[data-section="2"]' },
{ heading: '[data-heading="3"]', text: '[data-text="3"]', panel: '[data-panel="3"]', section: '[data-section="3"]' }
];
let currentIndex = 0;
let ticking = false;
function updateActiveSection() {
sections.forEach((sec, idx) => {
const panel = document.querySelector(sec.panel);
const section = document.querySelector(sec.section);
const heading = document.querySelector(sec.heading);
const text = document.querySelector(sec.text);
if (!panel || !section) return;
const rect = panel.getBoundingClientRect();
const windowHeight = window.innerHeight;
const isActive = rect.top < windowHeight * 0.5 && rect.bottom > windowHeight * 0.5;
if (isActive && idx !== currentIndex) {
currentIndex = idx;
sections.forEach((s, i) => {
const sectionEl = document.querySelector(s.section);
const headingEl = document.querySelector(s.heading);
const textEl = document.querySelector(s.text);
if (i === idx) {
sectionEl.style.opacity = '1';
if (headingEl) {
headingEl.classList.remove('text-white/60', 'text-white/80');
headingEl.classList.add('text-white');
}
if (textEl) {
textEl.classList.remove('text-white/60');
textEl.classList.add('text-white/90');
}
} else {
sectionEl.style.opacity = '0.6';
if (headingEl) {
headingEl.classList.remove('text-white');
headingEl.classList.add('text-white/60');
}
if (textEl) {
textEl.classList.remove('text-white/90');
textEl.classList.add('text-white/60');
}
}
});
}
});
}
function onScroll() {
if (!ticking) {
window.requestAnimationFrame(() => {
updateActiveSection();
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', onScroll, { passive: true });
updateActiveSection();
})();
</script>
</section>