Загрузка...
Адаптивный UI-блок для сайта: секция с AI-генератором кода, анимациями, статистикой и CTA. Отлично подходит для маркетинга и демонстрации функций.
<section class="z-10 mt-20 mb-20 relative" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(2)">
<div class="max-w-7xl mx-auto px-6 py-16">
<div class="grid gap-12 lg:grid-cols-2">
<!-- Visual Demo -->
<div class="[animation:fadeSlideIn_0.5s_ease-out_0s_both] animate-on-scroll border-gradient before:rounded-[36px] bg-gradient-to-br from-indigo-500/5 via-fuchsia-500/5 to-amber-400/5 rounded-[36px] pt-5 pr-5 pb-5 pl-5 relative">
<article class="group relative overflow-hidden transition-shadow hover:shadow-md bg-neutral-900/70 border border-neutral-700 rounded-3xl shadow-xl backdrop-blur-xl border-gradient before:rounded-3xl" style="background: rgba(17, 17, 17, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(64, 64, 64, 0.35);">
<div class="sm:p-10 pt-6 pr-6 pb-6 pl-6">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 [animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll">
<h3 class="text-2xl tracking-tight text-white font-manrope font-semibold" style="">GPT-5 HTML Generation</h3>
<span class="inline-flex items-center gap-2 text-[10px] sm:text-xs text-neutral-300 bg-white/5 border border-white/10 rounded-full px-2.5 py-1 border-gradient before:rounded-full font-sans">
<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" data-lucide="wand-sparkles" class="lucide lucide-wand-sparkles text-fuchsia-400 w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(232, 121, 249); width: 16px; height: 16px;"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" class=""></path><path d="m14 7 3 3" class=""></path><path d="M5 6v4" class=""></path><path d="M19 14v4" class=""></path><path d="M10 2v2" class=""></path><path d="M7 8H3" class=""></path><path d="M21 16h-4" class=""></path><path d="M11 3H9" class=""></path></svg>
AI-Powered
</span>
</div>
<!-- Code Editor Illustration -->
<div class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-800 ring-1 ring-inset ring-white/5 mb-8 border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-out_0.2s_both] animate-on-scroll">
<!-- Code Editor Window -->
<div class="absolute right-3 sm:right-6 top-4 sm:top-6 w-[78%] h-[68%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm border-gradient before:rounded-2xl">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400 font-sans">index.html</span>
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-green-400"></span>
<span class="text-xs text-green-400 font-sans">Live</span>
</div>
</div>
<div class="p-2 font-mono text-[8px] sm:text-[10px] leading-relaxed">
<div class="text-purple-400 font-sans"><<span class="text-blue-400 font-sans">section</span> <span class="text-green-400 font-sans">class</span>=<span class="text-amber-300 font-sans">"hero"</span>></div>
<div class="text-neutral-500 pl-3 font-sans"><<span class="text-blue-400 font-sans">div</span> <span class="text-green-400 font-sans">class</span>=<span class="text-amber-300 font-sans">"container"</span>></div>
<div class="text-white pl-6 font-sans"><<span class="text-blue-400 font-sans">h1</span>>Welcome</<span class="text-blue-400 font-sans">h1</span>></div>
<div class="text-neutral-500 pl-3 font-sans"></<span class="text-blue-400 font-sans">div</span>></div>
<div class="text-purple-400 font-sans"></<span class="text-blue-400 font-sans">section</span>></div>
</div>
</div>
<!-- Tailwind Classes Panel -->
<div class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[62%] h-[52%] rounded-2xl bg-neutral-900/90 backdrop-blur border border-neutral-800 shadow-sm border-gradient before:rounded-2xl">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400 font-sans">TAILWIND</span>
</div>
<div class="p-2 space-y-1 font-mono text-[9px] sm:text-[10px]">
<div class="flex items-center justify-between">
<span class="text-blue-400 font-sans">flex items-center</span>
<span class="text-green-400 font-sans">✓</span>
</div>
<div class="flex items-center justify-between">
<span class="text-blue-400 font-sans">rounded-xl p-6</span>
<span class="text-green-400 font-sans">✓</span>
</div>
<div class="flex items-center justify-between">
<span class="text-blue-400 font-sans">bg-gradient-to-r</span>
<span class="text-green-400 font-sans">✓</span>
</div>
</div>
</div>
<!-- AI Process Indicator -->
<div class="sm:left-6 h-[44%] border-neutral-800 border rounded-2xl absolute top-6 left-3 shadow-sm backdrop-blur border-gradient before:rounded-2xl bg-neutral-900/90">
<div class="flex items-center justify-between px-3 py-2 border-b border-neutral-800/70">
<span class="text-[10px] sm:text-xs tracking-widest text-neutral-400 font-sans">PROCESS</span>
</div>
<div class="text-[9px] sm:text-[10px] pt-2 pr-2 pb-2 pl-2 space-y-1.5">
<div class="flex items-center gap-2">
<div class="h-1.5 w-1.5 rounded-full bg-green-400"></div>
<span class="text-neutral-300 font-sans">Parse request</span>
</div>
<div class="flex items-center gap-2">
<div class="h-1.5 w-1.5 rounded-full bg-green-400"></div>
<span class="text-neutral-300 font-sans">Generate HTML</span>
</div>
<div class="flex items-center gap-2">
<div class="h-1.5 w-1.5 rounded-full bg-fuchsia-400 animate-pulse"></div>
<span class="text-neutral-300 font-sans">Apply Tailwind</span>
</div>
</div>
</div>
</div>
<!-- Features grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 [animation:fadeSlideIn_0.5s_ease-out_0.3s_both] animate-on-scroll">
<div class="">
<h4 class="text-lg font-semibold tracking-tight text-white font-sans">Intelligent Styling</h4>
<p class="mt-2 text-sm text-neutral-400 font-sans">GPT-5 understands design intent and generates pixel-perfect Tailwind classes automatically.</p>
</div>
<div class="">
<h4 class="text-lg font-semibold tracking-tight text-white font-sans">Real-time Preview</h4>
<p class="mt-2 text-sm text-neutral-400 font-sans">See your changes instantly as GPT-5 generates and updates your HTML components.</p>
</div>
</div>
<!-- CTA -->
<div class="[animation:fadeSlideIn_0.5s_ease-out_0.4s_both] animate-on-scroll">
<a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-neutral-100 hover:text-neutral-300 border-gradient before:rounded-lg font-sans">
Try GPT-5 Editor
<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="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
</article>
</div>
<!-- Copy & stats -->
<div class="">
<div class="tech-content [animation:fadeSlideIn_0.5s_ease-out_0s_both] animate-on-scroll" id="technology">
<h3 class="text-4xl sm:text-5xl text-white tracking-tight font-manrope font-semibold" style="">
Next-generation AI web builder powered by GPT-5
</h3>
<!-- Additional technology details -->
<div class="mt-8 [animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll">
<div class="border-white/10 border-t pt-6">
<h4 class="text-lg font-semibold text-white mb-4 font-sans">Core AI Capabilities</h4>
<div class="space-y-4">
<div class="flex items-start gap-3 [animation:fadeSlideIn_0.5s_ease-out_0.2s_both] animate-on-scroll">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center mt-0.5 border-gradient before:rounded-full">
<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" data-lucide="eye" class="lucide lucide-eye text-indigo-400 w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(129, 140, 248); width: 16px; height: 16px;"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</div>
<div class="">
<h5 class="font-medium text-white font-sans">Context-Aware Generation</h5>
<p class="text-sm text-neutral-400 mt-1 font-sans">GPT-5 analyzes your site structure and maintains consistent design patterns throughout.</p>
</div>
</div>
<div class="flex items-start gap-3 [animation:fadeSlideIn_0.5s_ease-out_0.3s_both] animate-on-scroll">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-fuchsia-500/20 flex items-center justify-center mt-0.5 border-gradient before:rounded-full">
<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="text-fuchsia-400">
<path d="m7.5 4.27 9 5.15" class=""></path>
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path>
<path d="m3.3 7 8.7 5 8.7-5" class=""></path>
<path d="M12 22V12" class=""></path>
</svg>
</div>
<div class="">
<h5 class="font-medium text-white font-sans">Tailwind Optimization</h5>
<p class="text-sm text-neutral-400 mt-1 font-sans">Automatically selects optimal utility classes for responsive, accessible, and performant designs.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-white/10 border-t mt-8 pt-6 [animation:fadeSlideIn_0.5s_ease-out_0.4s_both] animate-on-scroll">
<div class="grid gap-6 sm:grid-cols-2">
<div class="flex gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer items-center">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight text-white font-manrope font-semibold" data-target="99" style="">99.9%</span>
<span class="text-sm text-neutral-400"></span>
</div>
<p class="text-xs text-neutral-400 font-sans">Code accuracy rate</p>
</div>
</div>
<div class="flex items-center gap-3 hover:scale-105 transition-transform duration-200 cursor-pointer">
<div class="">
<div class="flex items-baseline gap-2">
<span class="text-2xl tracking-tight text-white font-manrope font-semibold" data-target="10" style="">10x</span>
</div>
<p class="text-xs text-neutral-400 font-sans">Faster than manual coding</p>
</div>
</div>
</div>
</div>
<div class="border-white/10 border-t mt-8 pt-6 [animation:fadeSlideIn_0.5s_ease-out_0.5s_both] animate-on-scroll">
<a href="#" class="group inline-flex items-center gap-2 hover:opacity-90 transition-opacity border-gradient before:rounded-full text-sm font-medium text-black bg-gradient-to-r from-indigo-400 via-fuchsia-400 to-amber-400 rounded-full pt-2.5 pr-5 pb-2.5 pl-5 shadow-[0_8px_30px_rgba(129,140,248,0.25)]">Start Building With GPT-5<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-black/10 text-black">
<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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span></a>
</div>
</div>
</div>
</div>
</section>