Spaces:

adiitya29
/

Multilingual-ASR

Running

App Files Files Community

adiitya29 commited on 3 days ago

Commit

d6e81a8

1 Parent(s): 4f241a2

feat: add React landing page

Browse files

Files changed (11) hide show

.gitignore +5 -0
landing page/index.html +15 -0
landing page/src/App.jsx +23 -0
landing page/src/components/Footer.jsx +10 -0
landing page/src/components/Hero.jsx +98 -0
landing page/src/components/HowItWorks.jsx +111 -0
landing page/src/components/Nav.jsx +37 -0
landing page/src/components/TechStack.jsx +85 -0
landing page/src/index.css +287 -0
landing page/src/main.jsx +10 -0
landing page/vite.config.js +6 -0

.gitignore CHANGED Viewed

@@ -178,3 +178,8 @@ models/*
 *.json
 *.csv
 !app/templates/*.json

 *.json
 *.csv
 !app/templates/*.json
+# React / Frontend
+landing page/node_modules/
+landing page/dist/
+.DS_Store

landing page/index.html ADDED Viewed

	@@ -0,0 +1,15 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Multilingual ASR — Speech to Text with Wav2Vec</title>
+    <meta name="description" content="An end-to-end Automatic Speech Recognition system powered by Meta's Wav2Vec 2.0 and Hugging Face. Upload audio, get text. Instantly." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

landing page/src/App.jsx ADDED Viewed

	@@ -0,0 +1,23 @@

+import Nav from './components/Nav'
+import Hero from './components/Hero'
+import HowItWorks from './components/HowItWorks'
+import TechStack from './components/TechStack'
+import Footer from './components/Footer'
+export default function App() {
+  return (
+    <>
+      {/* Background layers */}
+      <div className="bg-grid" />
+      <div className="orb orb-1" />
+      <div className="orb orb-2" />
+      {/* Page */}
+      <Nav />
+      <Hero />
+      <HowItWorks />
+      <TechStack />
+      <Footer />
+    </>
+  )
+}

landing page/src/components/Footer.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+export default function Footer() {
+  return (
+    <footer className="footer" id="footer">
+      <div className="footer-inner">
+        <p className="footer-name">Multilingual ASR</p>
+        <p className="footer-sub">Wav2Vec 2.0 · FastAPI · Gradio · Hugging Face</p>
+      </div>
+    </footer>
+  )
+}

landing page/src/components/Hero.jsx ADDED Viewed

	@@ -0,0 +1,98 @@

+import { useEffect, useRef } from 'react'
+const WAVES = [
+  { freq: 0.022, amp: 0.42, speed: 0.012, phase: 0.0,  color: '#4f6ef7' },
+  { freq: 0.018, amp: 0.28, speed: 0.009, phase: 1.2,  color: '#a855f7' },
+  { freq: 0.030, amp: 0.18, speed: 0.016, phase: 2.5,  color: '#06d6a0' },
+]
+function WaveformCanvas() {
+  const canvasRef = useRef(null)
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext('2d')
+    let animFrame
+    let t = 0
+    function resize() {
+      const dpr = window.devicePixelRatio || 1
+      const rect = canvas.getBoundingClientRect()
+      canvas.width = rect.width * dpr
+      canvas.height = rect.height * dpr
+      ctx.scale(dpr, dpr)
+    }
+    function draw() {
+      const w = canvas.getBoundingClientRect().width
+      const h = canvas.getBoundingClientRect().height
+      ctx.clearRect(0, 0, w, h)
+      WAVES.forEach(wave => {
+        ctx.beginPath()
+        const cx = w / 2, cy = h / 2
+        for (let x = 0; x <= w; x++) {
+          const envelope = 1 - Math.pow((x - cx) / cx, 2) * 0.9
+          const y = cy + Math.sin(x * wave.freq + t * wave.speed * 60 + wave.phase) * (h * wave.amp * envelope)
+          x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)
+        }
+        ctx.strokeStyle = wave.color
+        ctx.lineWidth = 1.8
+        ctx.globalAlpha = 0.65
+        ctx.stroke()
+      })
+      ctx.globalAlpha = 1
+      t++
+      animFrame = requestAnimationFrame(draw)
+    }
+    resize()
+    window.addEventListener('resize', resize, { passive: true })
+    draw()
+    return () => {
+      cancelAnimationFrame(animFrame)
+      window.removeEventListener('resize', resize)
+    }
+  }, [])
+  return (
+    <div className="waveform-container" aria-hidden="true">
+      <canvas ref={canvasRef} id="waveform-canvas" />
+    </div>
+  )
+}
+export default function Hero() {
+  return (
+    <section className="hero" id="hero">
+      <div className="hero-content">
+        <div className="badge">
+          <span className="badge-dot" />
+          Powered by Meta Wav2Vec 2.0
+        </div>
+        <h1 className="hero-title">
+          Speech to Text,<br />
+          <span className="gradient-text">Redefined.</span>
+        </h1>
+        <p className="hero-sub">
+          Upload any audio. Get accurate, instant transcriptions using one of the world's most capable
+          open-source acoustic models — no cloud API key, no per-request billing.
+        </p>
+        <div className="hero-actions">
+          <a
+            href="https://huggingface.co/spaces/adiitya29/Multilingual-ASR"
+            target="_blank"
+            rel="noreferrer"
+            className="btn btn-primary"
+            id="hero-launch-btn"
+          >
+            <span>Try the Live Demo</span>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M7 17L17 7M17 7H7M17 7v10"/>
+            </svg>
+          </a>
+        </div>
+      </div>
+      <WaveformCanvas />
+    </section>
+  )
+}

landing page/src/components/HowItWorks.jsx ADDED Viewed

	@@ -0,0 +1,111 @@

+import { useEffect, useRef } from 'react'
+const STEPS = [
+  {
+    num: '01',
+    title: 'Audio Preprocessing',
+    desc: <>Raw audio is loaded via <code>librosa</code> and resampled to exactly <strong>16kHz</strong> — the sampling rate the model was trained on.</>,
+    icon: (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <path d="M9 19V5l12-2v14M9 9l12-2"/>
+        <circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
+      </svg>
+    ),
+  },
+  {
+    num: '02',
+    title: 'Feature Extraction',
+    desc: <>The Wav2Vec2 <strong>Processor</strong> normalizes waveform values and converts them into padded PyTorch tensors ready for inference.</>,
+    icon: (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <rect x="2" y="3" width="20" height="14" rx="2"/>
+        <path d="M8 21h8M12 17v4"/>
+      </svg>
+    ),
+  },
+  {
+    num: '03',
+    title: 'Acoustic Model',
+    desc: <><code>Wav2Vec2ForCTC</code> (1.26GB, Large architecture) performs the forward pass using self-supervised learned speech representations.</>,
+    icon: (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <ellipse cx="12" cy="12" rx="10" ry="10"/>
+        <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>
+        <path d="M2 12h20"/>
+      </svg>
+    ),
+  },
+  {
+    num: '04',
+    title: 'CTC Decoding',
+    desc: 'Connectionist Temporal Classification (CTC) decodes raw logit tensors into the most probable character sequence, collapsing repeated tokens.',
+    icon: (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+      </svg>
+    ),
+  },
+  {
+    num: '05',
+    title: 'Output & History',
+    desc: <>The transcript is stored in a local JSON history, made available for download as <code>.txt</code>, and the full history is exportable as <code>.csv</code>.</>,
+    icon: (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+        <polyline points="14 2 14 8 20 8"/>
+        <line x1="16" y1="13" x2="8" y2="13"/>
+        <line x1="16" y1="17" x2="8" y2="17"/>
+      </svg>
+    ),
+  },
+]
+function PipelineStep({ step, index }) {
+  const ref = useRef(null)
+  useEffect(() => {
+    const el = ref.current
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => el.classList.add('visible'), index * 80)
+          observer.unobserve(el)
+        }
+      },
+      { threshold: 0.12 }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [index])
+  return (
+    <div ref={ref} className="pipeline-step">
+      <div className="step-icon">{step.icon}</div>
+      <div className="step-num">{step.num}</div>
+      <h3>{step.title}</h3>
+      <p>{step.desc}</p>
+    </div>
+  )
+}
+export default function HowItWorks() {
+  return (
+    <section className="section" id="how-it-works">
+      <div className="section-inner">
+        <div className="section-label">Under the Hood</div>
+        <h2 className="section-title">A Five-Stage Pipeline</h2>
+        <p className="section-sub">From raw audio bytes to structured text — every step is deliberate.</p>
+        <div className="pipeline">
+          {STEPS.map((step, i) => (
+            <>
+              <PipelineStep key={step.num} step={step} index={i} />
+              {i < STEPS.length - 1 && (
+                <div key={`conn-${i}`} className="pipeline-connector" aria-hidden="true" />
+              )}
+            </>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

landing page/src/components/Nav.jsx ADDED Viewed

	@@ -0,0 +1,37 @@

+import { useEffect, useState } from 'react'
+export default function Nav() {
+  const [scrolled, setScrolled] = useState(false)
+  useEffect(() => {
+    const handler = () => setScrolled(window.scrollY > 20)
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+  return (
+    <nav className={`nav${scrolled ? ' scrolled' : ''}`} id="nav">
+      <div className="nav-inner">
+        <a href="#" className="nav-logo">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M12 1v22M5 5.5l14 13M19 5.5L5 18.5M1 12h22"/>
+          </svg>
+          ASR
+        </a>
+        <div className="nav-links">
+          <a href="#how-it-works">How It Works</a>
+          <a href="#stack">Stack</a>
+          <a
+            href="https://huggingface.co/spaces/adiitya29/Multilingual-ASR"
+            target="_blank"
+            rel="noreferrer"
+            className="nav-cta"
+            id="nav-cta"
+          >
+            Launch App →
+          </a>
+        </div>
+      </div>
+    </nav>
+  )
+}

landing page/src/components/TechStack.jsx ADDED Viewed

	@@ -0,0 +1,85 @@

+import { useEffect, useRef } from 'react'
+const CARDS = [
+  {
+    id: 'pytorch',
+    tag: 'Deep Learning',
+    title: 'PyTorch',
+    desc: <>Tensor operations, gradient management, and CPU-forced model execution to bypass Apple Silicon MPS instability with CTC ops.</>,
+  },
+  {
+    id: 'hf',
+    tag: 'Model Hub',
+    title: 'Hugging Face Transformers',
+    desc: <><code>Wav2Vec2ForCTC</code> and <code>Wav2Vec2Processor</code> from <code>facebook/wav2vec2-large-960h-lv60-self</code>.</>,
+  },
+  {
+    id: 'fastapi',
+    tag: 'API',
+    title: 'FastAPI',
+    desc: <>Async REST endpoint at <code>/api/transcribe</code>. The Gradio UI is mounted directly onto the FastAPI app — one unified server process.</>,
+  },
+  {
+    id: 'gradio',
+    tag: 'UI',
+    title: 'Gradio',
+    desc: 'Tabbed Blocks UI with lazy file reveal, live history Dataframe, and CSV export — all driven by Python callbacks.',
+  },
+  {
+    id: 'cicd',
+    tag: 'CI / CD',
+    title: 'GitHub Actions → HF Spaces',
+    desc: <>Automated deploy pipeline via <code>sync_to_hub.yml</code>. Every push to <code>main</code> propagates to Hugging Face Spaces using a scoped token secret.</>,
+  },
+  {
+    id: 'librosa',
+    tag: 'DSP',
+    title: 'Librosa',
+    desc: 'Digital Signal Processing for audio file ingestion, arbitrary sample rate conversion, and mono-channel normalization.',
+  },
+]
+function StackCard({ card, index }) {
+  const ref = useRef(null)
+  useEffect(() => {
+    const el = ref.current
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => el.classList.add('visible'), index * 80)
+          observer.unobserve(el)
+        }
+      },
+      { threshold: 0.12 }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [index])
+  return (
+    <div ref={ref} className="stack-card" id={`stack-${card.id}`}>
+      <div className="stack-card-top">
+        <span className="stack-tag">{card.tag}</span>
+      </div>
+      <h3>{card.title}</h3>
+      <p>{card.desc}</p>
+    </div>
+  )
+}
+export default function TechStack() {
+  return (
+    <section className="section section-dark" id="stack">
+      <div className="section-inner">
+        <div className="section-label">Technology</div>
+        <h2 className="section-title">Built with Precision</h2>
+        <div className="stack-grid">
+          {CARDS.map((card, i) => (
+            <StackCard key={card.id} card={card} index={i} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

landing page/src/index.css ADDED Viewed

	@@ -0,0 +1,287 @@

+/* ─── Reset & Tokens ──────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg:            #07070f;
+  --bg-card:       rgba(255,255,255,0.035);
+  --bg-card-hover: rgba(255,255,255,0.065);
+  --border:        rgba(255,255,255,0.07);
+  --border-hover:  rgba(255,255,255,0.18);
+  --text-primary:  #f0f0f8;
+  --text-muted:    #7a7a9a;
+  --text-faint:    #44445a;
+  --accent-1:      #4f6ef7;
+  --accent-2:      #a855f7;
+  --accent-3:      #06d6a0;
+  --glow-1:        rgba(79, 110, 247, 0.35);
+  --glow-2:        rgba(168, 85, 247, 0.25);
+  --radius:        14px;
+  --radius-sm:     8px;
+  --font-sans:     'Inter', sans-serif;
+  --font-mono:     'JetBrains Mono', monospace;
+  --nav-h:         64px;
+  --transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+html { scroll-behavior: smooth; }
+body {
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.65;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+/* ─── Background ─────────────────────────────────────────── */
+.bg-grid {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 100%);
+}
+.orb {
+  position: fixed; z-index: 0; border-radius: 50%;
+  filter: blur(120px); pointer-events: none; opacity: 0.55;
+}
+.orb-1 {
+  width: 700px; height: 700px; top: -200px; left: -150px;
+  background: radial-gradient(circle, var(--accent-1), transparent 70%);
+  animation: orbFloat 18s ease-in-out infinite;
+}
+.orb-2 {
+  width: 600px; height: 600px; bottom: 10%; right: -150px;
+  background: radial-gradient(circle, var(--accent-2), transparent 70%);
+  animation: orbFloat 22s ease-in-out infinite reverse;
+}
+@keyframes orbFloat {
+  0%, 100% { transform: translate(0, 0); }
+  33%       { transform: translate(40px, -30px); }
+  66%       { transform: translate(-20px, 30px); }
+}
+/* ─── Nav ────────────────────────────────────────────────── */
+.nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  height: var(--nav-h);
+  border-bottom: 1px solid transparent;
+  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
+}
+.nav.scrolled {
+  background: rgba(7,7,15,0.75);
+  backdrop-filter: blur(20px);
+  border-bottom-color: var(--border);
+}
+.nav-inner {
+  max-width: 1100px; margin: 0 auto; padding: 0 28px;
+  height: 100%; display: flex; align-items: center; justify-content: space-between;
+}
+.nav-logo {
+  display: flex; align-items: center; gap: 9px;
+  font-weight: 600; font-size: 1rem; color: var(--text-primary);
+  text-decoration: none; letter-spacing: 0.02em;
+}
+.nav-logo svg { color: var(--accent-1); }
+.nav-links { display: flex; align-items: center; gap: 32px; }
+.nav-links a {
+  color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500;
+  transition: color var(--transition);
+}
+.nav-links a:hover { color: var(--text-primary); }
+.nav-cta {
+  padding: 8px 18px !important;
+  background: rgba(79, 110, 247, 0.12) !important;
+  border: 1px solid rgba(79, 110, 247, 0.35) !important;
+  border-radius: 8px !important;
+  color: var(--accent-1) !important;
+  transition: background var(--transition), box-shadow var(--transition) !important;
+}
+.nav-cta:hover {
+  background: rgba(79, 110, 247, 0.22) !important;
+  box-shadow: 0 0 18px var(--glow-1) !important;
+  color: #fff !important;
+}
+/* ─── Hero ───────────────────────────────────────────────── */
+.hero {
+  position: relative; z-index: 1;
+  min-height: 100vh;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  padding: calc(var(--nav-h) + 64px) 28px 80px;
+  text-align: center; overflow: hidden;
+}
+.hero-content { max-width: 760px; }
+.badge {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 6px 14px; border-radius: 100px;
+  border: 1px solid rgba(79,110,247,0.3);
+  background: rgba(79,110,247,0.08);
+  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
+  color: #818cf8; margin-bottom: 32px;
+  animation: fadeInUp 0.6s ease both;
+}
+.badge-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent-1);
+  box-shadow: 0 0 8px var(--accent-1);
+  animation: pulse 2s ease infinite;
+}
+@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
+.hero-title {
+  font-size: clamp(2.8rem, 7vw, 5.5rem);
+  font-weight: 700; letter-spacing: -0.03em; line-height: 1.08;
+  margin-bottom: 24px; animation: fadeInUp 0.7s 0.1s ease both;
+}
+.gradient-text {
+  background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.hero-sub {
+  font-size: 1.1rem; color: var(--text-muted); max-width: 560px; margin: 0 auto 40px;
+  font-weight: 400; animation: fadeInUp 0.8s 0.2s ease both;
+}
+.hero-actions {
+  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
+  animation: fadeInUp 0.9s 0.3s ease both;
+}
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 13px 26px; border-radius: var(--radius-sm);
+  font-size: 0.95rem; font-weight: 600; text-decoration: none;
+  transition: all var(--transition); cursor: pointer; border: none;
+}
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
+  color: #fff;
+  box-shadow: 0 4px 24px rgba(79,110,247,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
+}
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 36px rgba(79,110,247,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
+}
+.btn-ghost {
+  background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border);
+}
+.btn-ghost:hover {
+  background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-2px);
+}
+.waveform-container {
+  width: 100%; max-width: 900px; height: 100px; margin-top: 72px;
+  animation: fadeInUp 1s 0.5s ease both; opacity: 0.6;
+}
+#waveform-canvas { width: 100%; height: 100%; }
+/* ─── Sections ───────────────────────────────────────────── */
+.section { position: relative; z-index: 1; padding: 120px 28px; }
+.section-dark { background: rgba(0,0,0,0.3); }
+.section-inner { max-width: 1100px; margin: 0 auto; }
+.section-label {
+  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
+  text-transform: uppercase; color: var(--accent-1); margin-bottom: 14px;
+}
+.section-title {
+  font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700;
+  letter-spacing: -0.025em; margin-bottom: 14px;
+}
+.section-sub {
+  color: var(--text-muted); font-size: 1.05rem; max-width: 480px; margin-bottom: 72px;
+}
+/* ─── Pipeline ───────────────────────────────────────────── */
+.pipeline { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
+.pipeline-step {
+  flex: 1; min-width: 160px; max-width: 220px;
+  position: relative; padding: 28px 20px;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg-card); backdrop-filter: blur(12px);
+  transition: border-color var(--transition), background var(--transition), transform var(--transition), opacity 0.5s ease;
+  opacity: 0; transform: translateY(30px);
+}
+.pipeline-step.visible { opacity: 1; transform: translateY(0); }
+.pipeline-step:hover {
+  border-color: var(--border-hover); background: var(--bg-card-hover); transform: translateY(-4px);
+}
+.step-icon {
+  width: 40px; height: 40px; border-radius: 10px;
+  background: linear-gradient(135deg, rgba(79,110,247,0.15), rgba(168,85,247,0.15));
+  border: 1px solid rgba(79,110,247,0.25);
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 16px; color: var(--accent-1);
+}
+.step-num {
+  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
+  color: var(--accent-2); letter-spacing: 0.1em; margin-bottom: 10px;
+}
+.pipeline-step h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 10px; }
+.pipeline-step p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
+.pipeline-connector {
+  flex: 0 0 28px; height: 1px;
+  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
+  align-self: center; margin-top: -30px; opacity: 0.4;
+}
+/* ─── Stack Grid ─────────────────────────────────────────── */
+.stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
+.stack-card {
+  padding: 28px 28px 32px; border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg-card); backdrop-filter: blur(12px);
+  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition), opacity 0.5s ease;
+  opacity: 0; transform: translateY(24px); position: relative; overflow: hidden;
+}
+.stack-card::before {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(135deg, rgba(79,110,247,0.04), transparent 60%);
+  opacity: 0; transition: opacity var(--transition);
+}
+.stack-card:hover::before { opacity: 1; }
+.stack-card.visible { opacity: 1; transform: translateY(0); }
+.stack-card:hover {
+  border-color: rgba(79,110,247,0.35); background: var(--bg-card-hover);
+  transform: translateY(-3px); box-shadow: 0 8px 40px rgba(79,110,247,0.1);
+}
+.stack-card-top { margin-bottom: 14px; }
+.stack-tag {
+  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
+  color: var(--accent-3); letter-spacing: 0.08em; text-transform: uppercase;
+  padding: 3px 9px; border-radius: 4px;
+  background: rgba(6, 214, 160, 0.08); border: 1px solid rgba(6, 214, 160, 0.2);
+}
+.stack-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; }
+.stack-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }
+code {
+  font-family: var(--font-mono); font-size: 0.82em; color: #a5b4fc;
+  background: rgba(79,110,247,0.1); padding: 1px 6px; border-radius: 4px;
+}
+/* ─── Footer ─────────────────────────────────────────────── */
+.footer {
+  position: relative; z-index: 1;
+  border-top: 1px solid var(--border); padding: 52px 28px; text-align: center;
+}
+.footer-inner { max-width: 1100px; margin: 0 auto; }
+.footer-name { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
+.footer-sub {
+  font-size: 0.82rem; color: var(--text-faint); margin-bottom: 0;
+  font-family: var(--font-mono); letter-spacing: 0.04em;
+}
+/* ─── Animations ─────────────────────────────────────────── */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(28px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@media (max-width: 900px) {
+  .pipeline { flex-direction: column; gap: 2px; }
+  .pipeline-step { max-width: 100%; }
+  .pipeline-connector {
+    width: 1px; height: 24px; flex: 0 0 24px; align-self: flex-start; margin: 0 34px;
+    background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
+  }
+}

landing page/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

landing page/vite.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({
+  plugins: [react()],
+})