chore(web): move site under packages

packages/web/components/landing/hero-stats.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Star, Bot, Download, GitBranch } from "lucide-react"
+import { useLiveStats } from "./live-stats"
+
+interface HeroStatsProps {
+  initialStats: {
+    stars: string
+    totalDownloads: string
+    monthlyDownloads: string
+    weeklyDownloads: string
+  }
+  labels: {
+    githubStars: string
+    specializedAgents: string
+    totalDownloads: string
+    monthlyDownloads: string
+    lifecycleHooks: string
+  }
+}
+
+export function HeroStats({ initialStats, labels }: HeroStatsProps): ReactNode {
+  const stats = useLiveStats(initialStats)
+
+  return (
+    <div className="flex flex-wrap justify-center gap-4 text-sm text-zinc-300 md:gap-8 md:text-base">
+      <div className="flex items-center gap-2">
+        <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
+        <span>{labels.githubStars.replace("{count}", stats.stars)}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Bot className="h-5 w-5 text-cyan-400" />
+        <span>{labels.specializedAgents}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Download className="h-5 w-5 text-green-400" />
+        <span>{labels.totalDownloads.replace("{count}", stats.totalDownloads)}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Download className="h-5 w-5 text-emerald-400" />
+        <span>{labels.monthlyDownloads.replace("{count}", stats.monthlyDownloads)}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <GitBranch className="h-5 w-5 text-purple-400" />
+        <span>{labels.lifecycleHooks}</span>
+      </div>
+    </div>
+  )
+}

packages/web/components/landing/install-command.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useState } from "react"
+import { Copy, Check } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export function InstallCommand({ command }: { command: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const copyCommand = async () => {
+    try {
+      await navigator.clipboard.writeText(command)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.warn("Failed to copy install command", err)
+    }
+  }
+
+  return (
+    <div className="relative rounded-lg border border-zinc-800 bg-black/50 p-4 font-mono text-sm text-zinc-300 shadow-2xl shadow-cyan-500/10 backdrop-blur-sm">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-cyan-500">$</span>
+          <span>{command}</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-zinc-400 hover:text-white"
+          onClick={copyCommand}
+          aria-label="Copy install command"
+        >
+          {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+        </Button>
+      </div>
+    </div>
+  )
+}

packages/web/components/landing/live-stats.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+interface StatsData {
+  stars: string
+  totalDownloads: string
+  monthlyDownloads: string
+  weeklyDownloads: string
+}
+
+export function useLiveStats(initial: StatsData): StatsData {
+  const [stats, setStats] = useState<StatsData>(initial)
+
+  useEffect(() => {
+    let cancelled = false
+    async function refresh() {
+      try {
+        const res = await fetch("/api/stats")
+        if (!res.ok || cancelled) return
+        const data = await res.json()
+        if (cancelled) return
+        setStats({
+          stars: data.stars ?? initial.stars,
+          totalDownloads: data.totalDownloads ?? initial.totalDownloads,
+          monthlyDownloads: data.monthlyDownloads ?? initial.monthlyDownloads,
+          weeklyDownloads: data.weeklyDownloads ?? initial.weeklyDownloads,
+        })
+      } catch {
+        // keep SSG values on error
+      }
+    }
+    refresh()
+    return () => {
+      cancelled = true
+    }
+  }, [initial.stars, initial.totalDownloads, initial.monthlyDownloads, initial.weeklyDownloads])
+
+  return stats
+}

packages/web/components/landing/motion-wrappers.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { useRef, useEffect, useState } from "react"
+
+interface TerminalTypewriterProps {
+  text: string
+}
+
+export function TerminalTypewriter({ text }: TerminalTypewriterProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [isInView, setIsInView] = useState(false)
+  const [displayed, setDisplayed] = useState("")
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element || isInView) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return
+        setIsInView(true)
+        observer.disconnect()
+      },
+      { threshold: 0.1 },
+    )
+
+    observer.observe(element)
+
+    return () => observer.disconnect()
+  }, [isInView])
+
+  useEffect(() => {
+    if (!isInView) return
+    let i = 0
+    const interval = setInterval(() => {
+      if (i <= text.length) {
+        setDisplayed(text.slice(0, i))
+        i++
+      } else {
+        clearInterval(interval)
+      }
+    }, 40)
+    return () => clearInterval(interval)
+  }, [isInView, text])
+
+  return (
+    <span ref={ref} className="text-zinc-300">
+      {displayed}
+      {displayed.length < text.length && <span className="animate-pulse">_</span>}
+    </span>
+  )
+}