skannr 0.1.1

package/tests/skeletonizer.test.ts

@@ -0,0 +1,142 @@
+/**
+ * Tests for skeleton generation
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import { buildSkeletonForFile } from '../src/skeletonizer';
+
+describe('buildSkeletonForFile', () => {
+  let tempDir: string;
+  let testFilePath: string;
+
+  beforeEach(() => {
+    // Create a temporary directory for test files
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skel-test-'));
+    testFilePath = path.join(tempDir, 'test.ts');
+  });
+
+  afterEach(() => {
+    // Clean up
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+
+  it('should generate skeleton for a simple class', () => {
+    const sourceCode = `
+export class Calculator {
+  /**
+   * Adds two numbers
+   */
+  add(a: number, b: number): number {
+    return a + b;
+  }
+
+  multiply(x: number, y: number): number {
+    const result = x * y;
+    return result;
+  }
+}
+    `;
+
+    fs.writeFileSync(testFilePath, sourceCode);
+    const skeleton = buildSkeletonForFile(testFilePath);
+
+    // Should contain class declaration
+    expect(skeleton).toContain('export class Calculator');
+    
+    // Should contain method signatures
+    expect(skeleton).toContain('add(a: number, b: number): number');
+    expect(skeleton).toContain('multiply(x: number, y: number): number');
+    
+    // Should not contain implementation details
+    expect(skeleton).toContain('/* trimmed */');
+    expect(skeleton).not.toContain('return a + b');
+    expect(skeleton).not.toContain('const result = x * y');
+  });
+
+  it('should keep interface definitions intact', () => {
+    const sourceCode = `
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+    `;
+
+    fs.writeFileSync(testFilePath, sourceCode);
+    const skeleton = buildSkeletonForFile(testFilePath);
+
+    expect(skeleton).toContain('export interface User');
+    expect(skeleton).toContain('id: string');
+    expect(skeleton).toContain('name: string');
+    expect(skeleton).toContain('email: string');
+  });
+
+  it('should keep import statements', () => {
+    const sourceCode = `
+import { Something } from './somewhere';
+import * as fs from 'fs';
+
+export function doWork(): void {
+  console.log('working');
+}
+    `;
+
+    fs.writeFileSync(testFilePath, sourceCode);
+    const skeleton = buildSkeletonForFile(testFilePath);
+
+    expect(skeleton).toContain("import { Something } from './somewhere'");
+    expect(skeleton).toContain("import * as fs from 'fs'");
+    expect(skeleton).toContain('export function doWork(): void');
+    expect(skeleton).not.toContain("console.log('working')");
+  });
+
+  it('should handle type aliases', () => {
+    const sourceCode = `
+export type Status = 'active' | 'inactive' | 'pending';
+export type UserId = string;
+    `;
+
+    fs.writeFileSync(testFilePath, sourceCode);
+    const skeleton = buildSkeletonForFile(testFilePath);
+
+    expect(skeleton).toContain("export type Status = 'active' | 'inactive' | 'pending'");
+    expect(skeleton).toContain('export type UserId = string');
+  });
+
+  it('should handle functions with JSDoc', () => {
+    const sourceCode = `
+/**
+ * Calculates the sum of an array
+ * @param numbers Array of numbers
+ * @returns The sum
+ */
+export function sum(numbers: number[]): number {
+  return numbers.reduce((a, b) => a + b, 0);
+}
+    `;
+
+    fs.writeFileSync(testFilePath, sourceCode);
+    const skeleton = buildSkeletonForFile(testFilePath);
+
+    expect(skeleton).toContain('Calculates the sum');
+    expect(skeleton).toContain('export function sum(numbers: number[]): number');
+    expect(skeleton).toContain('/* trimmed */');
+    expect(skeleton).not.toContain('reduce');
+  });
+
+  it('should handle malformed TypeScript gracefully', () => {
+    const sourceCode = 'export const x = {{{';
+
+    fs.writeFileSync(testFilePath, sourceCode);
+    const skeleton = buildSkeletonForFile(testFilePath);
+
+    // ts-morph is robust and may still parse partial content
+    // Just verify it returns some output without crashing
+    expect(skeleton).toBeDefined();
+    expect(skeleton.length).toBeGreaterThan(0);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node", "jest"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "tests"]
+}

package/uca-landing/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Universal Code Analyzer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@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>

package/uca-landing/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "uca-landing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.525.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.4.10"
+  }
+}

package/uca-landing/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/uca-landing/src/App.jsx

@@ -0,0 +1,43 @@
+import Navbar from './components/Navbar'
+import Hero from './components/Hero'
+import Problem from './components/Problem'
+import HowItWorks from './components/HowItWorks'
+import Features from './components/Features'
+import LanguageSupport from './components/LanguageSupport'
+import Install from './components/Install'
+import CliReference from './components/CliReference'
+import WorksWith from './components/WorksWith'
+import AgentMode from './components/AgentMode'
+import Footer from './components/Footer'
+
+export default function App() {
+  return (
+    <div className="relative min-h-screen overflow-x-hidden bg-bg text-white font-sans">
+      <div
+        className="pointer-events-none fixed inset-0 -z-10"
+        aria-hidden
+      >
+        <div
+          className="absolute -left-[20%] top-[10%] h-[520px] w-[520px] rounded-full bg-accent/[0.07] blur-[120px] motion-safe:animate-drift"
+        />
+        <div
+          className="absolute -right-[15%] top-[40%] h-[420px] w-[420px] rounded-full bg-purple/[0.08] blur-[100px] motion-safe:animate-drift motion-safe:[animation-delay:-7s] motion-safe:[animation-duration:28s]"
+        />
+        <div
+          className="absolute bottom-0 left-1/3 h-[380px] w-[380px] rounded-full bg-green/[0.05] blur-[90px] motion-safe:animate-drift motion-safe:[animation-delay:-12s] motion-safe:[animation-duration:26s]"
+        />
+      </div>
+      <Navbar />
+      <Hero />
+      <Problem />
+      <HowItWorks />
+      <Features />
+      <LanguageSupport />
+      <Install />
+      <CliReference />
+      <WorksWith />
+      <AgentMode />
+      <Footer />
+    </div>
+  )
+}

package/uca-landing/src/components/AgentMode.jsx

@@ -0,0 +1,45 @@
+import Reveal from './Reveal'
+
+export default function AgentMode() {
+  return (
+    <section className="py-24 px-5">
+      <div className="max-w-5xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">
+            Agent mode. For when you need to explore.
+          </h2>
+        </Reveal>
+
+        <Reveal delay={100} className="mt-12 block">
+          <div className="overflow-hidden rounded-xl border border-border bg-card transition-all duration-300 hover:border-white/10 hover:shadow-[0_0_40px_-12px_rgba(0,212,255,0.12)]">
+            <div className="flex items-center gap-2 border-b border-white/5 px-4 py-3">
+              <span className="h-3 w-3 rounded-full bg-[#ff5f57]" />
+              <span className="h-3 w-3 rounded-full bg-[#febc2e]" />
+              <span className="h-3 w-3 rounded-full bg-[#28c840]" />
+              <span className="ml-2 font-mono text-xs text-[#888]">bash</span>
+            </div>
+            <pre className="overflow-x-auto p-5 font-mono text-sm leading-7 text-[#e8e8e8]">
+            <span>$ uca-agent --root ./my-project</span>
+            {'\n\n'}
+            <span className="text-accent">{'>'}</span> <span>/help</span>
+            {'\n'}  <span className="text-white">/files</span>               List currently retrieved files
+            {'\n'}  <span className="text-white">/symbols &lt;query&gt;</span>     Search for symbols in the codebase
+            {'\n'}  <span className="text-white">/symbol &lt;id&gt;</span>         Get full implementation of a symbol
+            {'\n'}  <span className="text-white">/deps &lt;filePath&gt;</span>     Show imports and exports for a file
+            {'\n'}  <span className="text-white">/refresh</span>             Re-analyze project with new context
+            {'\n'}  <span className="text-white">/stats</span>               Show cache and mapping statistics
+            {'\n'}  <span className="text-white">/exit</span>                Quit
+            {'\n\n'}
+            <span className="text-accent">{'>'}</span> <span>/symbols auth</span>
+            {'\n'}  Found 4 symbols:
+            {'\n'}  <span className="text-accent">→</span> AuthManager (class)     <span className="text-[#888]">src/auth/AuthManager.ts:12</span>
+            {'\n'}  <span className="text-accent">→</span> validateToken (fn)      <span className="text-[#888]">src/auth/AuthManager.ts:24</span>
+            {'\n'}  <span className="text-accent">→</span> AuthMiddleware (class)  <span className="text-[#888]">src/middleware/auth.ts:8</span>
+            {'\n'}  <span className="text-accent">→</span> authRouter (const)      <span className="text-[#888]">src/routes/auth.ts:3</span>
+            </pre>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/components/CliReference.jsx

@@ -0,0 +1,49 @@
+import Reveal from './Reveal'
+
+const flags = [
+  ['--question', 'The question to answer (required)'],
+  ['--root', 'Path to repo (default: current directory)'],
+  ['--limit', 'Number of files to return (default: 10)'],
+  ['--modules', 'Comma-separated module names to focus on'],
+  ['--lang', 'Force language: typescript, python, auto'],
+  ['--with-mapping', 'Generate symbol-to-file mapping'],
+  ['--skip-cache', 'Bypass cache for this query'],
+  ['--cache-stats', 'Show cache statistics'],
+  ['--cache-clear', 'Clear the cache'],
+  ['--interactive', 'Start interactive agent mode'],
+]
+
+export default function CliReference() {
+  return (
+    <section className="py-24 px-5">
+      <div className="max-w-5xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">All CLI options.</h2>
+        </Reveal>
+        <Reveal delay={80}>
+          <div className="mt-12 overflow-hidden rounded-xl border border-border bg-card transition-colors duration-300 hover:border-white/10">
+            <table className="w-full text-left">
+              <thead className="border-b border-white/5">
+                <tr className="text-[#888] text-sm">
+                  <th className="px-6 py-4 font-medium">Flag</th>
+                  <th className="px-6 py-4 font-medium">Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                {flags.map(([flag, description]) => (
+                  <tr
+                    key={flag}
+                    className="border-b border-white/5 transition-colors duration-200 last:border-b-0 hover:bg-white/[0.03]"
+                  >
+                    <td className="px-6 py-4 font-mono text-accent">{flag}</td>
+                    <td className="px-6 py-4 text-[#d0d0d0]">{description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/components/Features.jsx

@@ -0,0 +1,63 @@
+import { Code2, Database, FileSearch, Network, Plug, Zap } from 'lucide-react'
+import Reveal from './Reveal'
+
+const features = [
+  {
+    icon: Network,
+    title: 'Hybrid Retrieval',
+    body: 'Lexical + structural + dependency-graph ranking. Finds architecturally central files, not just keyword matches.',
+  },
+  {
+    icon: Zap,
+    title: '96.5% Token Reduction',
+    body: 'Skeleton generation strips bodies while preserving signatures and types. Feed entire codebases to your AI without hitting limits.',
+  },
+  {
+    icon: Code2,
+    title: 'Auto Language Detection',
+    body: "Detects the repo's dominant language automatically. TypeScript, JavaScript, and Python supported. Generic fallback for everything else.",
+  },
+  {
+    icon: Database,
+    title: 'Smart Caching',
+    body: 'MD5-based file hashing detects changes automatically. Repeated queries run in milliseconds. 24-hour TTL with manual controls.',
+  },
+  {
+    icon: FileSearch,
+    title: 'Grounded Citations',
+    body: 'Every response includes an Evidence section listing the exact files and symbols used. Verify AI answers by tracing to source.',
+  },
+  {
+    icon: Plug,
+    title: 'MCP Server Built In',
+    body: 'Runs as a Model Context Protocol server. Plug into Gemini CLI, Claude Code, Cursor, or any MCP-compatible tool.',
+  },
+]
+
+export default function Features() {
+  return (
+    <section id="features" className="py-24 px-5">
+      <div className="max-w-6xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">
+            Everything you need. Nothing you don't.
+          </h2>
+        </Reveal>
+        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+          {features.map(({ icon: Icon, title, body }, i) => (
+            <Reveal key={title} delay={i * 70} className="h-full">
+              <article className="group h-full rounded-xl border border-border bg-card p-6 transition-all duration-300 hover:-translate-y-1 hover:border-accent/40 hover:bg-card-hover hover:shadow-[0_0_36px_rgba(0,212,255,0.12)]">
+                <Icon
+                  size={24}
+                  className="mb-4 text-accent transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"
+                />
+                <h3 className="mb-2 text-xl font-semibold">{title}</h3>
+                <p className="text-[#888]">{body}</p>
+              </article>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/components/Footer.jsx

@@ -0,0 +1,35 @@
+import Reveal from './Reveal'
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-white/5 py-12 px-5">
+      <Reveal>
+        <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-8 md:grid-cols-3">
+          <div>
+            <p className="font-mono text-lg">Skannr</p>
+            <p className="mt-1 text-[#888]">Open-source · MIT License</p>
+          </div>
+
+          <p className="text-[#888] md:text-center">
+            Built by Vignesh <span className="text-accent">♥</span>
+          </p>
+
+          <div className="flex gap-5 md:justify-self-end">
+            <a
+              href="https://github.com/7vignesh/code-analyzer"
+              className="text-[#888] transition-colors hover:text-accent"
+            >
+              GitHub
+            </a>
+            <a
+              href="https://npmjs.com/package/skannr"
+              className="text-[#888] transition-colors hover:text-accent"
+            >
+              npm
+            </a>
+          </div>
+        </div>
+      </Reveal>
+    </footer>
+  )
+}

package/uca-landing/src/components/Hero.jsx

@@ -0,0 +1,124 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTypewriter } from '../hooks/useTypewriter'
+
+function renderLine(line, showCursor) {
+  const baseClass = line.startsWith('✓')
+    ? 'text-green'
+    : line.startsWith('───') || line.startsWith('────────────────')
+      ? 'text-[#333]'
+      : line.startsWith('Evidence:')
+        ? 'text-accent'
+        : 'text-[#e8e8e8]'
+
+  const parts = line.split('{ ... }')
+
+  return (
+    <span className={baseClass}>
+      {parts.map((part, idx) => (
+        <span key={`${part}-${idx}`}>
+          {part}
+          {idx < parts.length - 1 && <span className="text-[#777]">{'{ ... }'}</span>}
+        </span>
+      ))}
+      {showCursor && <span className="animate-pulse text-white">|</span>}
+    </span>
+  )
+}
+
+export default function Hero() {
+  const [start, setStart] = useState(false)
+
+  const lines = useMemo(
+    () => [
+      '$ uca --question "how does authentication work?" --root ./my-project',
+      '',
+      '✓ Detected language: TypeScript',
+      '✓ Discovered modules: auth, api, middleware, db',
+      '✓ Scanning 1,847 files...',
+      '',
+      '  Ranked 8 relevant files in 1.1s',
+      '  Token reduction: 96.5% vs full scan',
+      '',
+      '─── src/auth/AuthManager.ts ──────────────────',
+      '  export class AuthManager {',
+      '    constructor(private db: Database) {}',
+      '    async validateToken(token: string): Promise<User | null> { ... }',
+      '    async createSession(userId: string): Promise<Session> { ... }',
+      '  }',
+      '──────────────────────────────────────────────',
+      '',
+      'Evidence: AuthManager.ts · SessionStore.ts · middleware/auth.ts',
+    ],
+    []
+  )
+
+  useEffect(() => {
+    const t = setTimeout(() => setStart(true), 800)
+    return () => clearTimeout(t)
+  }, [])
+
+  const { displayed, done } = useTypewriter(start ? lines : [], 30, 400)
+
+  return (
+    <section
+      className="relative px-5 pt-32 pb-24 min-h-screen flex flex-col items-center justify-center"
+      style={{
+        backgroundImage: 'radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)',
+        backgroundSize: '32px 32px',
+      }}
+    >
+      <div
+        className="inline-flex items-center gap-2 border border-white/10 rounded-full px-4 py-1 text-sm text-gray-400 mb-8 opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:0ms]"
+      >
+        <span className="w-2 h-2 rounded-full bg-green motion-safe:animate-pulse" />
+        CLI + MCP Server · Open Source
+      </div>
+
+      <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-center leading-tight opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:80ms]">
+        Any repo. Any question.
+        <br />
+        <span className="text-accent">Instantly understood.</span>
+      </h1>
+
+      <p className="mt-6 max-w-xl text-center text-lg text-[#888] opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:180ms]">
+        Universal Code Analyzer helps AI assistants understand entire codebases using structural
+        skeletons and hybrid ranking, so you can ask architectural questions without context limits.
+      </p>
+
+      <div className="flex flex-col sm:flex-row gap-4 mt-10 opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:280ms]">
+        <a
+          href="#install"
+          className="bg-accent text-black font-semibold px-6 py-3 rounded-lg shadow-[0_0_24px_-4px_rgba(0,212,255,0.5)] transition-all duration-300 hover:opacity-95 hover:shadow-[0_0_32px_-2px_rgba(0,212,255,0.65)] hover:-translate-y-0.5 active:translate-y-0"
+        >
+          Get started
+        </a>
+        <a
+          href="https://github.com/7vignesh/code-analyzer"
+          className="border border-white/20 px-6 py-3 rounded-lg transition-all duration-300 hover:border-accent/60 hover:text-accent hover:-translate-y-0.5 active:translate-y-0"
+        >
+          View on GitHub
+        </a>
+      </div>
+
+      <div className="w-full max-w-3xl mx-auto mt-16 rounded-xl border border-border bg-card overflow-hidden opacity-0 shadow-[0_0_40px_-16px_rgba(0,212,255,0.12)] motion-safe:animate-scale-in motion-safe:[animation-delay:420ms] motion-reduce:opacity-100 motion-reduce:translate-y-0 transition-[box-shadow,border-color] duration-500 hover:border-accent/25 hover:shadow-[0_0_48px_-12px_rgba(0,212,255,0.2)]">
+        <div className="flex items-center gap-2 px-4 py-3 border-b border-white/5">
+          <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
+          <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
+          <span className="w-3 h-3 rounded-full bg-[#28c840]" />
+          <span className="ml-2 text-xs font-mono text-[#888]">bash</span>
+        </div>
+        <pre className="p-5 overflow-x-auto font-mono text-sm leading-7">
+          {lines.map((_, idx) => {
+            const current = displayed[idx] ?? ''
+            const showCursor = !done && idx === displayed.length - 1
+            return (
+              <div key={`line-${idx}`} className="min-h-6">
+                {renderLine(current, showCursor)}
+              </div>
+            )
+          })}
+        </pre>
+      </div>
+    </section>
+  )
+}

package/uca-landing/src/components/HowItWorks.jsx

@@ -0,0 +1,60 @@
+import Reveal from './Reveal'
+
+const steps = [
+  {
+    title: 'Point it at any repo',
+    code: 'uca --question "..." --root /path/to/any/project',
+    desc: "No configuration needed. Works on repos you've never touched before. Auto-detects language and module structure from the folder layout.",
+  },
+  {
+    title: 'Modules discovered automatically',
+    desc: 'Reads the folder structure and identifies logical modules - src/auth, src/api, lib/db. No config file required, though one is supported for fine-tuned control.',
+  },
+  {
+    title: 'Hybrid ranking finds the right files',
+    desc: 'Three signals combined: lexical match (keyword relevance), structural analysis (export/import density), and dependency graph centrality. Finds architecturally important files - not just keyword matches.',
+  },
+  {
+    title: 'Skeletons compress without losing meaning',
+    desc: 'Function bodies stripped. Signatures, types, interfaces, and imports remain. The AI gets the full architectural picture at 3% of the token cost. Citations tell you exactly which files were used.',
+  },
+]
+
+export default function HowItWorks() {
+  return (
+    <section id="how-it-works" className="py-24 px-5">
+      <div className="max-w-5xl mx-auto">
+        <Reveal>
+          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">
+            Simple to use. Sophisticated underneath.
+          </h2>
+        </Reveal>
+
+        <div className="mt-14 overflow-hidden rounded-xl border border-border bg-card px-5 md:px-10">
+          {steps.map((step, idx) => (
+            <Reveal key={step.title} delay={idx * 100} className="w-full">
+              <div
+                className={`group grid gap-6 py-10 md:grid-cols-[120px,1fr] ${idx < steps.length - 1 ? 'border-b border-white/5' : ''}`}
+              >
+                <span className="font-mono text-7xl font-bold leading-none text-white/5 transition-colors duration-500 group-hover:text-accent/25">
+                  {String(idx + 1).padStart(2, '0')}
+                </span>
+                <div>
+                  <h3 className="text-2xl font-semibold transition-colors duration-300 group-hover:text-white">
+                    {step.title}
+                  </h3>
+                  {step.code && (
+                    <code className="mt-4 block w-fit rounded-lg border border-border px-3 py-2 font-mono text-sm text-accent transition-all duration-300 group-hover:border-accent/30 group-hover:shadow-[0_0_20px_-8px_rgba(0,212,255,0.35)]">
+                      {step.code}
+                    </code>
+                  )}
+                  <p className="mt-4 text-[#888]">{step.desc}</p>
+                </div>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}