랜딩 페이지: D3RO 브랜드 프로모션 사이트 + GitHub Pages 배포

- Vite + React 19 + Tailwind CSS
- 4가지 디자인 레퍼런스 통합 (CRT 스크린, 크로스헤어, 노이즈, 인스트루먼트)
- 섹션 9개: Hero, Features, HowItWorks, Privacy, Pricing, FAQ, CTA, Header, Footer
- 재사용 컴포넌트 8개 (Badge, Container, InstrumentCard, GlowButton 등)
- i18n 10개 국어 (en/ko/ja/zh/es/fr/de/pt/ru/vi)
- GitHub Pages 자동 배포 워크플로우

site/src/sections/HowItWorks.tsx

@@ -0,0 +1,112 @@
+import { SectionHeader } from '../components/SectionHeader'
+import { Crosshair } from '../components/Crosshair'
+import { Container } from '../components/Container'
+import { Led } from '../components/Led'
+import { WaveBars } from '../components/WaveBars'
+import { useI18n } from '../i18n'
+
+export function HowItWorks() {
+  const { t } = useI18n()
+
+  return (
+    <section id="pipeline" className="relative py-24 md:py-32">
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-surface-800/40 to-transparent pointer-events-none" />
+
+      <Container className="relative">
+        <SectionHeader
+          index={t.pipeline.index}
+          title={t.pipeline.title}
+          subtitle={t.pipeline.subtitle}
+        />
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
+          {/* Left: visual panel */}
+          <Crosshair className="order-2 lg:order-1">
+            <div className="crt-screen rounded-card p-6 md:p-8 aspect-[4/3] flex flex-col justify-between">
+              <div className="relative z-10 flex items-center justify-between mb-6">
+                <span className="font-mono text-nano uppercase tracking-widest text-brand-amber/60">
+                  {t.pipeline.panelTitle}
+                </span>
+                <div className="flex items-center gap-2">
+                  <Led color="green" />
+                  <span className="font-mono text-nano uppercase tracking-widest text-neutral-500">{t.pipeline.panelActive}</span>
+                </div>
+              </div>
+
+              <div className="relative z-10 flex-1 flex flex-col justify-center space-y-4">
+                {/* Simulated terminal output */}
+                <div className="font-mono text-xs text-neutral-500 leading-relaxed space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Led color="green" size="sm" />
+                    <span className="text-emerald-400/70">{t.pipeline.sttReady}</span>
+                    <span className="text-neutral-600">faster-whisper base</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Led color="green" size="sm" />
+                    <span className="text-emerald-400/70">{t.pipeline.llmConnected}</span>
+                    <span className="text-neutral-600">qwen3:4b @ localhost:11434</span>
+                  </div>
+                  <div className="h-px bg-white/[0.04] my-3" />
+                  <div className="flex items-start gap-2">
+                    <Led color="amber" size="sm" pulse className="mt-1" />
+                    <div>
+                      <span className="text-brand-amber/50 block mb-1">{t.pipeline.transcription}</span>
+                      <span className="text-neutral-300">&quot;{t.pipeline.sampleInput}&quot;</span>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <Led color="green" size="sm" className="mt-1" />
+                    <div>
+                      <span className="text-emerald-400/50 block mb-1">{t.pipeline.aiPolish}</span>
+                      <span className="text-neutral-300">&quot;{t.pipeline.sampleOutput}&quot;</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="relative z-10 flex items-center justify-between pt-4 border-t border-white/[0.04]">
+                <WaveBars className="h-6" />
+                <span className="font-mono text-nano text-neutral-600">{t.pipeline.panelLatency}</span>
+              </div>
+            </div>
+          </Crosshair>
+
+          {/* Right: numbered steps */}
+          <div className="order-1 lg:order-2 space-y-1">
+            {t.pipeline.steps.map((step, i) => (
+              <div
+                key={i}
+                className="group relative flex gap-5 p-5 rounded-card border border-transparent hover:border-white/[0.04] hover:bg-surface-700/30 transition-all"
+              >
+                {/* Number */}
+                <div className="flex-shrink-0 w-12 h-12 rounded-card bg-surface-600 border border-white/[0.06] flex items-center justify-center">
+                  <span className="font-mono text-lg font-bold text-brand-amber">{String(i + 1).padStart(2, '0')}</span>
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <span className="font-mono text-nano uppercase tracking-widest text-brand-amber/60 block mb-1">
+                    {step.label}
+                  </span>
+                  <h3 className="font-display text-lg font-semibold text-neutral-100 mb-1.5">
+                    {step.title}
+                  </h3>
+                  <p className="text-sm text-neutral-400 leading-relaxed mb-2">
+                    {step.description}
+                  </p>
+                  <span className="inline-block font-mono text-nano text-neutral-600 bg-surface-600/60 px-2.5 py-1 rounded-sm border border-white/[0.03]">
+                    {step.detail}
+                  </span>
+                </div>
+
+                {/* Connector */}
+                {i < t.pipeline.steps.length - 1 && (
+                  <div className="absolute left-[42px] top-[72px] w-px h-5 bg-gradient-to-b from-surface-300 to-transparent hidden lg:block" />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}