All Prompts
All Prompts
processtabsdashboardmoderndarkanimatedresponsivegradient
Multi-Step Development Process Section
Интерактивная секция с вкладками, показывающая 3-этапный процесс разработки. Анимация, графики, детальная информация. Автопрокрутка и ручное управление.
Prompt
<div class="relative overflow-hidden text-neutral-100">
<style>.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style>
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
<div class="absolute -top-40 left-1/2 h-[40rem] w-[40rem] -translate-x-1/2 rounded-full bg-gradient-to-b from-indigo-500/10 via-purple-500/5 to-transparent blur-3xl"></div>
</div>
<div class="max-w-5xl sm:px-6 lg:px-8 md:py-28 mr-auto ml-auto pt-20 pr-4 pb-20 pl-4">
<div class="mb-6 flex items-center justify-center">
<span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-neutral-300 backdrop-blur">
PROCESS
<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 text-neutral-300" style="stroke-width: 1.5;">
<rect width="8" height="8" x="3" y="3" rx="2"></rect>
<path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
<rect width="8" height="8" x="13" y="13" rx="2"></rect>
</svg>
</span>
</div>
<div class="text-center">
<h1 class="md:text-5xl text-4xl text-white tracking-tight">
Our Streamlined
<span class="font-normal italic text-neutral-300 font-instrument-serif">Development Process</span>
</h1>
<p class="mt-4 max-w-2xl mx-auto text-sm md:text-base text-neutral-400 font-normal">
From initial consultation to product launch—our proven methodology delivers results through three focused phases.
</p>
</div>
<div class="mt-10 md:mt-14 rounded-3xl border border-white/10 bg-gradient-to-b from-white/[0.02] to-transparent p-4 sm:p-6 md:p-8 relative">
<div class="grid grid-cols-1 md:grid-cols-3 gap-3" id="stepTabs">
<button type="button" class="step-tab relative h-12 rounded-xl border border-indigo-400/20 bg-indigo-500/[0.08] px-4 text-left text-xs md:text-sm text-indigo-200 font-medium ring-1 ring-inset ring-indigo-500/20 active" data-step="0">
<div class="flex items-center gap-2 h-full">
<span class="tracking-tight">STEP 1</span>
<span class="ml-auto text-[10px] text-indigo-300/80">Discover</span>
</div>
<span class="pointer-events-none absolute inset-0 rounded-xl shadow-[0_0_0_1px_rgba(99,102,241,0.15),0_10px_30px_-12px_rgba(99,102,241,0.45)]"></span>
</button>
<button type="button" class="step-tab group h-12 rounded-xl border border-white/10 bg-white/[0.02] px-4 text-left text-xs md:text-sm text-neutral-400 font-medium hover:border-white/20 hover:bg-white/[0.04] transition" data-step="1">
<div class="flex items-center gap-2 h-full">
<span class="tracking-tight">STEP 2</span>
<span class="ml-auto text-[10px] text-neutral-500 group-hover:text-neutral-400">Build</span>
</div>
</button>
<button type="button" class="step-tab group h-12 rounded-xl border border-white/10 bg-white/[0.02] px-4 text-left text-xs md:text-sm text-neutral-400 font-medium hover:border-white/20 hover:bg-white/[0.04] transition" data-step="2">
<div class="flex items-center gap-2 h-full">
<span class="tracking-tight">STEP 3</span>
<span class="ml-auto text-[10px] text-neutral-500 group-hover:text-neutral-400">Deploy</span>
</div>
</button>
</div>
<div class="relative mt-8 md:mt-10 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12" id="stepContent">
<div class="relative">
<div class="step-visual relative w-full max-w-sm md:max-w-md rounded-2xl border border-white/10 bg-neutral-900/60 p-4 backdrop-blur h-96" data-step="0">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-1 text-[10px] font-medium text-neutral-300">Research</span>
</div>
<div class="text-[11px] text-neutral-400">Phase 1</div>
</div>
<div class="mt-6 space-y-4">
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<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-4 w-4 text-blue-400" style="stroke-width: 1.5;">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
<div class="text-xs text-neutral-400">User Interviews</div>
</div>
<div class="mt-2 text-xl font-semibold tracking-tight">24 Sessions</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<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-4 w-4 text-emerald-400" style="stroke-width: 1.5;">
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="6"></circle>
<circle cx="12" cy="12" r="2"></circle>
</svg>
<div class="text-xs text-neutral-400">Market Analysis</div>
</div>
<div class="mt-2 text-xl font-semibold tracking-tight">Complete</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<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-4 w-4 text-amber-400" style="stroke-width: 1.5;">
<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
<path d="M9 18h6"></path>
<path d="M10 22h4"></path>
</svg>
<div class="text-xs text-neutral-400">Key Insights</div>
</div>
<div class="mt-2 text-xl font-semibold tracking-tight">47 Findings</div>
</div>
</div>
</div>
<div class="step-visual relative w-full max-w-sm md:max-w-md rounded-2xl border border-white/10 bg-neutral-900/60 p-4 backdrop-blur h-96" data-step="1" style="display: none;">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-1 text-[10px] font-medium text-neutral-300">Development</span>
</div>
<div class="text-[11px] text-neutral-400">Phase 2</div>
</div>
<div class="mt-4">
<div class="relative h-20">
<canvas id="activityChart" class="absolute inset-0" width="828" height="160" style="display: block; box-sizing: border-box; height: 80px; width: 414px;"></canvas>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-3">
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-3">
<div class="text-xs text-neutral-400">Progress</div>
<div class="flex gap-1 mt-1 items-baseline">
<span class="text-xl font-semibold tracking-tight">85%</span>
<span class="text-xs text-emerald-400 inline-flex items-center gap-1">
<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 w-3" style="stroke-width: 1.5;">
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path>
</svg>
</span>
</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-3">
<div class="text-xs text-neutral-400">Tests</div>
<div class="mt-1 flex items-baseline gap-1">
<span class="text-xl font-semibold tracking-tight">234</span>
<span class="text-xs text-emerald-400 inline-flex items-center gap-1">
<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 w-3" style="stroke-width: 1.5;">
<path d="M21.801 10A10 10 0 1 1 17 3.335"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="mt-4 rounded-xl border border-white/10 bg-white/[0.02] p-3">
<div class="text-xs text-neutral-400">Sprint Performance</div>
<div class="mt-2 flex items-center justify-between text-sm">
<span class="text-neutral-200">Velocity</span>
<span class="text-neutral-200 font-medium">42 pts</span>
</div>
<div class="mt-1 flex items-center justify-between text-sm">
<span class="text-neutral-200">Burndown</span>
<span class="text-emerald-400 font-medium">On track</span>
</div>
</div>
</div>
<div class="step-visual relative w-full max-w-sm md:max-w-md rounded-2xl border border-white/10 bg-neutral-900/60 p-4 backdrop-blur h-96" data-step="2" style="display: none;">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-1 text-[10px] font-medium text-neutral-300">Production</span>
</div>
<div class="text-[11px] text-neutral-400">Phase 3</div>
</div>
<div class="mt-6 space-y-4">
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<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-4 w-4 text-violet-400" style="stroke-width: 1.5;">
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
</svg>
<div class="text-xs text-neutral-400">Deployment Status</div>
</div>
<div class="mt-2 text-xl font-semibold tracking-tight text-emerald-400">Live</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<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-4 w-4 text-amber-400" style="stroke-width: 1.5;">
<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
</svg>
<div class="text-xs text-neutral-400">Performance</div>
</div>
<div class="mt-2 text-xl font-semibold tracking-tight">99.9% Uptime</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<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-4 w-4 text-indigo-400" style="stroke-width: 1.5;">
<path d="m12 14 4-4"></path>
<path d="M3.34 19a10 10 0 1 1 17.32 0"></path>
</svg>
<div class="text-xs text-neutral-400">Load Time</div>
</div>
<div class="mt-2 text-xl font-semibold tracking-tight">0.8s</div>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="mx-auto lg:mx-0 max-w-xl">
<div class="step-info" data-step="0">
<div class="text-sm text-neutral-500">01</div>
<h2 class="mt-2 text-2xl md:text-3xl tracking-tight text-white">Discovery & Strategy</h2>
<p class="mt-3 text-sm md:text-base text-neutral-400 font-normal">
We start by understanding your vision, analyzing user needs, and mapping out technical requirements.
Through workshops and research, we create a solid foundation for your project.
</p>
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-200">User Research</span>
</div>
<p class="mt-2 text-xs text-neutral-400">Deep dive into user behavior and needs.</p>
</div>
<div class="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-200">Technical Scope</span>
</div>
<p class="mt-2 text-xs text-neutral-400">Define architecture and technology stack.</p>
</div>
</div>
<div class="mt-6 flex items-center gap-3">
<button class="inline-flex items-center gap-2 rounded-xl bg-white text-neutral-900 px-4 py-2.5 text-sm font-medium hover:bg-neutral-100 transition">
Start Discovery
<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-4 w-4" style="stroke-width: 1.5;">
<path d="m21 21-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</svg>
</button>
<button class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.02] px-4 py-2.5 text-sm font-medium text-neutral-200 hover:bg-white/[0.04] transition">
Process Guide
<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-4 w-4" style="stroke-width: 1.5;">
<path d="M12 7v14"></path>
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path>
</svg>
</button>
</div>
</div>
<div class="step-info" data-step="1" style="display: none;">
<div class="text-sm text-neutral-500">02</div>
<h2 class="mt-2 text-2xl md:text-3xl tracking-tight text-white">Build & Test</h2>
<p class="mt-3 text-sm md:text-base text-neutral-400 font-normal">
Our development team builds your solution using modern frameworks and best practices.
We maintain quality through continuous testing and iterative feedback loops.
</p>
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-200">Agile Development</span>
</div>
<p class="mt-2 text-xs text-neutral-400">Sprint-based development with regular reviews.</p>
</div>
<div class="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-200">Quality Assurance</span>
</div>
<p class="mt-2 text-xs text-neutral-400">Automated testing and manual validation.</p>
</div>
</div>
<div class="mt-6 flex items-center gap-3">
<button class="inline-flex items-center gap-2 rounded-xl bg-white text-neutral-900 px-4 py-2.5 text-sm font-medium hover:bg-neutral-100 transition">
View Progress
<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-4 w-4" style="stroke-width: 1.5;">
<path d="m16 18 6-6-6-6"></path>
<path d="m8 6-6 6 6 6"></path>
</svg>
</button>
<button class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.02] px-4 py-2.5 text-sm font-medium text-neutral-200 hover:bg-white/[0.04] transition">
Repository
<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-4 w-4" style="stroke-width: 1.5;">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</button>
</div>
</div>
<div class="step-info" data-step="2" style="display: none;">
<div class="text-sm text-neutral-500">03</div>
<h2 class="mt-2 text-2xl md:text-3xl tracking-tight text-white">Deploy & Scale</h2>
<p class="mt-3 text-sm md:text-base text-neutral-400 font-normal">
We handle the complete deployment process, from staging to production. Post-launch, we provide
ongoing monitoring, optimization, and support to ensure your solution performs at its best.
</p>
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-200">Cloud Infrastructure</span>
</div>
<p class="mt-2 text-xs text-neutral-400">Scalable hosting with automated deployment.</p>
</div>
<div class="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-neutral-200">Performance Monitor</span>
</div>
<p class="mt-2 text-xs text-neutral-400">Real-time monitoring and alerting systems.</p>
</div>
</div>
<div class="mt-6 flex items-center gap-3">
<button class="inline-flex items-center gap-2 rounded-xl bg-white text-neutral-900 px-4 py-2.5 text-sm font-medium hover:bg-neutral-100 transition">
Go Live
<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-4 w-4" style="stroke-width: 1.5;">
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
</svg>
</button>
<button class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.02] px-4 py-2.5 text-sm font-medium text-neutral-200 hover:bg-white/[0.04] transition">
Analytics
<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-4 w-4" style="stroke-width: 1.5;">
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
<path d="M18 17V9"></path>
<path d="M13 17V5"></path>
<path d="M8 17v-3"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 -bottom-px h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js setup
const ctx = document.getElementById('activityChart');
let chart;
if (ctx) {
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Week 1','Week 2','Week 3','Week 4','Week 5','Week 6'],
datasets: [{
label: 'Progress',
data: [15, 35, 50, 68, 75, 85],
backgroundColor: 'rgba(129, 140, 248, 0.55)',
borderRadius: 4,
borderSkipped: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 0 },
transitions: { active: { animation: { duration: 0 } } },
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(0,0,0,0.8)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1,
padding: 8,
titleColor: '#e5e7eb',
bodyColor: '#d1d5db',
displayColors: false
}
},
scales: {
y: {
grid: { color: 'rgba(255,255,255,0.06)', drawBorder: false },
ticks: { color: '#9ca3af', font: { size: 9 } },
suggestedMax: 100
},
x: {
grid: { display: false, drawBorder: false },
ticks: { color: '#9ca3af', font: { size: 9 } }
}
}
}
});
}
// Step switching functionality
let currentStep = 0;
let autoAdvanceInterval;
let restartTimeout;
const totalSteps = 3;
function updateTabStyling(activeIndex) {
document.querySelectorAll('.step-tab').forEach((tab, index) => {
const existingShadow = tab.querySelector('.pointer-events-none');
if (existingShadow) existingShadow.remove();
if (index === activeIndex) {
tab.className = 'step-tab relative h-12 rounded-xl border border-indigo-400/20 bg-indigo-500/[0.08] px-4 text-left text-xs md:text-sm text-indigo-200 font-medium ring-1 ring-inset ring-indigo-500/20 active';
const shadowSpan = document.createElement('span');
shadowSpan.className = 'pointer-events-none absolute inset-0 rounded-xl shadow-[0_0_0_1px_rgba(99,102,241,0.15),0_10px_30px_-12px_rgba(99,102,241,0.45)]';
tab.appendChild(shadowSpan);
} else {
tab.className = 'step-tab group h-12 rounded-xl border border-white/10 bg-white/[0.02] px-4 text-left text-xs md:text-sm text-neutral-400 font-medium hover:border-white/20 hover:bg-white/[0.04] transition';
}
});
}
function switchToStep(step) {
currentStep = step;
updateTabStyling(step);
document.querySelectorAll('.step-info').forEach((info, index) => {
info.style.display = index === step ? 'block' : 'none';
});
document.querySelectorAll('.step-visual').forEach((visual, index) => {
visual.style.display = index === step ? 'block' : 'none';
});
}
function autoAdvance() {
currentStep = (currentStep + 1) % totalSteps;
switchToStep(currentStep);
}
function startAutoAdvance() {
if (autoAdvanceInterval) clearInterval(autoAdvanceInterval);
autoAdvanceInterval = setInterval(autoAdvance, 4000);
}
document.querySelectorAll('.step-tab').forEach((tab, index) => {
tab.addEventListener('click', () => {
if (autoAdvanceInterval) clearInterval(autoAdvanceInterval);
if (restartTimeout) clearTimeout(restartTimeout);
switchToStep(index);
restartTimeout = setTimeout(startAutoAdvance, 8000);
});
});
startAutoAdvance();
</script>
</div>