mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-07-29 15:43:48 +00:00
first commit
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,198 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { Database, Brain, Server, Search, RefreshCw, Globe, Github, FileJson, FolderOpen } from "lucide-react"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
|
||||
const sources = [
|
||||
{ icon: Github, label: "GitHub", color: "text-purple-400" },
|
||||
{ icon: Globe, label: "Web", color: "text-blue-400" },
|
||||
{ icon: FileJson, label: "OpenAPI", color: "text-green-400" },
|
||||
{ icon: FolderOpen, label: "Local", color: "text-orange-400" },
|
||||
]
|
||||
|
||||
export function Architecture() {
|
||||
return (
|
||||
<section id="architecture" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 grid-background opacity-30" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
System <GradientText>Architecture</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
A modular architecture designed for flexibility and scalability
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Architecture Diagram */}
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
{/* Central Flow */}
|
||||
<div className="relative rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 md:p-12">
|
||||
{/* Data Sources */}
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
{sources.map((source, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 + i * 0.1 }}
|
||||
className="flex flex-col items-center gap-2"
|
||||
>
|
||||
<div className={`p-3 rounded-lg bg-white/5 border border-white/10`}>
|
||||
<source.icon className={`w-5 h-5 ${source.color}`} />
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{source.label}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Arrow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<motion.div
|
||||
initial={{ scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
transition={{ delay: 0.5, duration: 0.3 }}
|
||||
className="w-px h-8 bg-gradient-to-b from-cyan-500 to-transparent origin-top"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Components Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||||
{/* Scraper */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="relative p-4 rounded-xl border border-purple-500/30 bg-purple-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-purple-500/20">
|
||||
<Globe className="w-4 h-4 text-purple-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Scraper</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Multi-source data extraction</p>
|
||||
<div className="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-purple-500 to-cyan-500" />
|
||||
</motion.div>
|
||||
|
||||
{/* Indexer */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="relative p-4 rounded-xl border border-cyan-500/30 bg-cyan-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-cyan-500/20">
|
||||
<Brain className="w-4 h-4 text-cyan-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Indexer</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">OpenAI embeddings generation</p>
|
||||
<div className="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-purple-500 to-cyan-500" />
|
||||
<div className="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-cyan-500 to-teal-500" />
|
||||
</motion.div>
|
||||
|
||||
{/* Storage */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="relative p-4 rounded-xl border border-teal-500/30 bg-teal-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-teal-500/20">
|
||||
<Database className="w-4 h-4 text-teal-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Storage</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Vector DB (chromem)</p>
|
||||
<div className="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-cyan-500 to-teal-500" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Arrow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<motion.div
|
||||
initial={{ scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
transition={{ delay: 0.7, duration: 0.3 }}
|
||||
className="w-px h-8 bg-gradient-to-b from-teal-500 to-transparent origin-top"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Server & Query */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Server */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="p-4 rounded-xl border border-green-500/30 bg-green-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-green-500/20">
|
||||
<Server className="w-4 h-4 text-green-400" />
|
||||
</div>
|
||||
<span className="font-semibold">MCP Server</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Local (stdio) or Remote (HTTP)</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Query */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="p-4 rounded-xl border border-blue-500/30 bg-blue-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-blue-500/20">
|
||||
<Search className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Query Engine</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Semantic similarity search</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Scheduler Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.9 }}
|
||||
className="absolute -bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full border border-orange-500/30 bg-orange-500/10 backdrop-blur-sm"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span className="text-xs font-medium text-orange-400">Auto-Update Scheduler</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Output */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="mt-12 text-center"
|
||||
>
|
||||
<div className="inline-flex items-center gap-3 px-6 py-3 rounded-xl border border-cyan-500/30 bg-cyan-500/5">
|
||||
<span className="text-sm text-muted-foreground">AI Response</span>
|
||||
<span className="text-cyan-400">→</span>
|
||||
<span className="text-sm font-medium">Context Chunks</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Data Flow Description */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="mt-16 text-center">
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
<span className="text-cyan-400 font-medium">Data Flow:</span> User Query → Devour Server →
|
||||
Embedding Generation → Vector Search → Top-K Relevant Docs → AI Response
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import { useState } from "react"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import { Copy, Check, Terminal } from "lucide-react"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const codeExamples = [
|
||||
{
|
||||
id: "get",
|
||||
title: "Quick Docs Fetch",
|
||||
description: "Instantly fetch documentation for popular languages",
|
||||
language: "bash",
|
||||
code: `# Fetch Go HTTP package docs
|
||||
devour get go http
|
||||
|
||||
# Fetch Python asyncio docs
|
||||
devour get python asyncio
|
||||
|
||||
# Fetch React hooks documentation
|
||||
devour get react hooks
|
||||
|
||||
# With markdown output
|
||||
devour get docker compose --format markdown`,
|
||||
},
|
||||
{
|
||||
id: "scrape",
|
||||
title: "Scrape Sources",
|
||||
description: "Scrape documentation from multiple sources",
|
||||
language: "bash",
|
||||
code: `# Scrape from a URL
|
||||
devour scrape https://docs.example.com
|
||||
|
||||
# Scrape a GitHub repo
|
||||
devour scrape https://github.com/org/repo
|
||||
|
||||
# Scrape local docs
|
||||
devour scrape ./docs
|
||||
|
||||
# Multiple sources
|
||||
devour scrape --sources sources.yaml`,
|
||||
},
|
||||
{
|
||||
id: "query",
|
||||
title: "Query Context",
|
||||
description: "Search indexed documentation with semantic search",
|
||||
language: "bash",
|
||||
code: `# Search indexed docs
|
||||
devour query "How do I authenticate with the API?"
|
||||
|
||||
# With options
|
||||
devour query "authentication" --limit 5 --format json
|
||||
|
||||
# With similarity threshold
|
||||
devour query "server setup" --threshold 0.7`,
|
||||
},
|
||||
{
|
||||
id: "serve",
|
||||
title: "Start Server",
|
||||
description: "Run as MCP server for AI integration",
|
||||
language: "bash",
|
||||
code: `# Local MCP server (stdio transport)
|
||||
devour serve
|
||||
|
||||
# Remote MCP server (HTTP)
|
||||
devour serve --remote --port 8080
|
||||
|
||||
# With custom config
|
||||
devour serve --config ./devour.yaml`,
|
||||
},
|
||||
]
|
||||
|
||||
export function CodeShowcase() {
|
||||
const [activeTab, setActiveTab] = useState("get")
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const activeExample = codeExamples.find((e) => e.id === activeTab)
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
if (activeExample) {
|
||||
await navigator.clipboard.writeText(activeExample.code)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="code" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/10 to-background" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-12">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Simple <GradientText>CLI</GradientText> Interface
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Powerful commands to manage your documentation context
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Tabs */}
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="flex flex-wrap gap-2 mb-6 justify-center">
|
||||
{codeExamples.map((example) => (
|
||||
<button
|
||||
key={example.id}
|
||||
onClick={() => setActiveTab(example.id)}
|
||||
className={cn(
|
||||
"px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200",
|
||||
activeTab === example.id
|
||||
? "bg-cyan-500/20 text-cyan-400 border border-cyan-500/30"
|
||||
: "bg-white/5 text-muted-foreground border border-white/10 hover:bg-white/10 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{example.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Code Block */}
|
||||
<FadeIn delay={0.3}>
|
||||
<div className="relative rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/80" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Terminal className="w-3.5 h-3.5" />
|
||||
<span>{activeExample?.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="flex items-center gap-1.5 px-2 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-3.5 h-3.5 text-green-400" />
|
||||
<span className="text-green-400">Copied!</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<span>Copy</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Code Content */}
|
||||
<div className="relative p-4 font-mono text-sm overflow-x-auto">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{activeExample?.code.split("\n").map((line, i) => (
|
||||
<div key={i} className="flex">
|
||||
<span className="select-none text-muted-foreground/30 w-8 text-right mr-4">
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
{line.startsWith("#") ? (
|
||||
<span className="text-muted-foreground">{line}</span>
|
||||
) : (
|
||||
<span>
|
||||
<span className="text-cyan-400">devour</span>
|
||||
{line.substring(7)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="px-4 py-3 border-t border-white/10 bg-white/5">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{activeExample?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent" />
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
import { motion } from "framer-motion"
|
||||
import {
|
||||
Github,
|
||||
FileJson,
|
||||
Globe,
|
||||
FolderOpen,
|
||||
Brain,
|
||||
Search,
|
||||
RefreshCw,
|
||||
Plug,
|
||||
Database,
|
||||
BarChart3,
|
||||
Zap,
|
||||
Shield,
|
||||
} from "lucide-react"
|
||||
import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Github,
|
||||
title: "GitHub Repositories",
|
||||
description: "Clone and parse repos, extract README, docs, and code structure automatically.",
|
||||
color: "text-purple-400",
|
||||
bgColor: "bg-purple-500/10",
|
||||
},
|
||||
{
|
||||
icon: FileJson,
|
||||
title: "OpenAPI/Swagger",
|
||||
description: "Parse Swagger specs into structured endpoints with full API documentation.",
|
||||
color: "text-green-400",
|
||||
bgColor: "bg-green-500/10",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Web Documentation",
|
||||
description: "Crawl documentation sites with Colly for comprehensive content extraction.",
|
||||
color: "text-blue-400",
|
||||
bgColor: "bg-blue-500/10",
|
||||
},
|
||||
{
|
||||
icon: FolderOpen,
|
||||
title: "Local Files",
|
||||
description: "Index your project's docs folder for local documentation management.",
|
||||
color: "text-orange-400",
|
||||
bgColor: "bg-orange-500/10",
|
||||
},
|
||||
{
|
||||
icon: Brain,
|
||||
title: "Vector Embeddings",
|
||||
description: "Semantic similarity search via OpenAI text-embedding-3-small/large models.",
|
||||
color: "text-cyan-400",
|
||||
bgColor: "bg-cyan-500/10",
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: "Intelligent Indexing",
|
||||
description: "Metadata tracking with source, timestamp, and file type information.",
|
||||
color: "text-teal-400",
|
||||
bgColor: "bg-teal-500/10",
|
||||
},
|
||||
{
|
||||
icon: RefreshCw,
|
||||
title: "Auto Updates",
|
||||
description: "Configurable scheduler with content hash comparison for change detection.",
|
||||
color: "text-pink-400",
|
||||
bgColor: "bg-pink-500/10",
|
||||
},
|
||||
{
|
||||
icon: Plug,
|
||||
title: "MCP Integration",
|
||||
description: "Local stdio transport or remote HTTP/SSE for flexible deployment.",
|
||||
color: "text-indigo-400",
|
||||
bgColor: "bg-indigo-500/10",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Flexible Storage",
|
||||
description: "Organized storage for docs, vector embeddings, and metadata tracking.",
|
||||
color: "text-yellow-400",
|
||||
bgColor: "bg-yellow-500/10",
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Quality Scorecard",
|
||||
description: "Built-in code quality analysis with severity-based scoring system.",
|
||||
color: "text-red-400",
|
||||
bgColor: "bg-red-500/10",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Fast & Efficient",
|
||||
description: "Parallel scraping workers with configurable concurrency and rate limiting.",
|
||||
color: "text-amber-400",
|
||||
bgColor: "bg-amber-500/10",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Two Modes",
|
||||
description: "Local mode for single developers, remote mode for teams and multi-project.",
|
||||
color: "text-emerald-400",
|
||||
bgColor: "bg-emerald-500/10",
|
||||
},
|
||||
]
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<section id="features" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background Elements */}
|
||||
<div className="absolute inset-0 grid-background opacity-50" />
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Powerful <GradientText>Features</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Everything you need to manage context for AI-powered development
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6" staggerDelay={0.05}>
|
||||
{features.map((feature, index) => (
|
||||
<StaggerItem key={index}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02, y: -4 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="group relative h-full p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
{/* Glow Effect on Hover */}
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500/0 via-cyan-500/5 to-teal-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
{/* Icon */}
|
||||
<div className={`relative inline-flex p-3 rounded-lg ${feature.bgColor} mb-4`}>
|
||||
<feature.icon className={`w-5 h-5 ${feature.color}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="relative text-lg font-semibold mb-2 group-hover:text-cyan-400 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="relative text-sm text-muted-foreground leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{/* Bottom Gradient Line */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/0 to-transparent group-hover:via-cyan-500/50 transition-all duration-300" />
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="text-center mt-16">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Ready to supercharge your AI context?
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer group">
|
||||
<span>View all features</span>
|
||||
<motion.span
|
||||
initial={{ x: 0 }}
|
||||
whileHover={{ x: 4 }}
|
||||
className="inline-block"
|
||||
>
|
||||
→
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { Github, Twitter, Book, Heart } from "lucide-react"
|
||||
import { FadeIn } from "@/components/ui/magicui"
|
||||
|
||||
const links = {
|
||||
product: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Quick Start", href: "#quickstart" },
|
||||
{ label: "Languages", href: "#languages" },
|
||||
{ label: "Architecture", href: "#architecture" },
|
||||
],
|
||||
resources: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "API Reference", href: "#" },
|
||||
{ label: "Examples", href: "#" },
|
||||
{ label: "Changelog", href: "#" },
|
||||
],
|
||||
community: [
|
||||
{ label: "GitHub", href: "https://github.com/yourorg/devour" },
|
||||
{ label: "Discord", href: "#" },
|
||||
{ label: "Twitter", href: "#" },
|
||||
{ label: "Contributing", href: "#" },
|
||||
],
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="relative border-t border-white/10 bg-black/20">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 grid-background opacity-20" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6 py-12 md:py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
|
||||
{/* Brand */}
|
||||
<div className="lg:col-span-2">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<img
|
||||
src="/devour_logo.svg"
|
||||
alt="Devour Logo"
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
<span className="text-xl font-bold">Devour</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-6 max-w-xs">
|
||||
Context ingestion and management for AI. Feed structured, relevant
|
||||
context to AI models for generating accurate, fully working code.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="https://github.com/yourorg/devour"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
|
||||
>
|
||||
<Github className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
|
||||
>
|
||||
<Twitter className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
|
||||
>
|
||||
<Book className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Product Links */}
|
||||
<div>
|
||||
<FadeIn delay={0.1}>
|
||||
<h4 className="font-semibold mb-4 text-cyan-400">Product</h4>
|
||||
<ul className="space-y-3">
|
||||
{links.product.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Resources Links */}
|
||||
<div>
|
||||
<FadeIn delay={0.2}>
|
||||
<h4 className="font-semibold mb-4 text-cyan-400">Resources</h4>
|
||||
<ul className="space-y-3">
|
||||
{links.resources.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Community Links */}
|
||||
<div>
|
||||
<FadeIn delay={0.3}>
|
||||
<h4 className="font-semibold mb-4 text-cyan-400">Community</h4>
|
||||
<ul className="space-y-3">
|
||||
{links.community.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={link.href}
|
||||
target={link.href.startsWith("http") ? "_blank" : undefined}
|
||||
rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="mt-12 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
© {new Date().getFullYear()} Devour. MIT License.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground flex items-center gap-1">
|
||||
Built with <Heart className="w-4 h-4 text-red-400 fill-red-400" /> for better AI context
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Gradient Line */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { Github, Terminal, Sparkles, ArrowRight } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Gradient Orbs */}
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse" />
|
||||
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-teal-500/20 rounded-full blur-3xl animate-pulse delay-1000" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-cyan-500/10 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
<div className="flex flex-col items-center text-center space-y-8">
|
||||
{/* Badge */}
|
||||
<FadeIn delay={0.1}>
|
||||
<Badge variant="glow" className="px-4 py-1.5 text-sm">
|
||||
<Sparkles className="w-3.5 h-3.5 mr-1.5" />
|
||||
Context Ingestion for AI
|
||||
</Badge>
|
||||
</FadeIn>
|
||||
|
||||
{/* Logo */}
|
||||
<FadeIn delay={0.2}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute inset-0 bg-cyan-500/20 blur-2xl rounded-full scale-150" />
|
||||
<img
|
||||
src="/devour_logo.svg"
|
||||
alt="Devour Logo"
|
||||
className="relative w-32 h-32 md:w-40 md:h-40 drop-shadow-2xl"
|
||||
/>
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Title */}
|
||||
<FadeIn delay={0.3}>
|
||||
<h1 className="text-5xl md:text-7xl font-bold tracking-tight">
|
||||
<GradientText>Devour</GradientText>
|
||||
</h1>
|
||||
</FadeIn>
|
||||
|
||||
{/* Subtitle */}
|
||||
<FadeIn delay={0.4}>
|
||||
<p className="text-xl md:text-2xl text-muted-foreground max-w-2xl">
|
||||
Context Ingestion & Management for{" "}
|
||||
<span className="text-cyan-400">AI</span>
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
{/* Description */}
|
||||
<FadeIn delay={0.5}>
|
||||
<p className="text-base md:text-lg text-muted-foreground/80 max-w-3xl leading-relaxed">
|
||||
Scrape, index, and serve documentation from multiple sources.
|
||||
Feed structured, relevant context to AI models for generating
|
||||
accurate, fully working code.
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<FadeIn delay={0.6}>
|
||||
<div className="flex flex-col sm:flex-row gap-4 mt-4">
|
||||
<Button size="xl" variant="glow" className="group">
|
||||
<Terminal className="mr-2 h-4 w-4" />
|
||||
Get Started
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a
|
||||
href="https://github.com/yourorg/devour"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
View on GitHub
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<FadeIn delay={0.7}>
|
||||
<div className="flex flex-wrap justify-center gap-8 mt-8 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" />
|
||||
<span>Multi-Source Scraping</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-teal-500 animate-pulse" />
|
||||
<span>Vector Embeddings</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />
|
||||
<span>MCP Integration</span>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Terminal Preview */}
|
||||
<FadeIn delay={0.8}>
|
||||
<div className="w-full max-w-3xl mt-12">
|
||||
<div className="relative rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm overflow-hidden">
|
||||
{/* Terminal Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/80" />
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground ml-2">terminal</span>
|
||||
</div>
|
||||
{/* Terminal Content */}
|
||||
<div className="p-4 font-mono text-sm">
|
||||
<div className="text-muted-foreground">$ devour get go http</div>
|
||||
<div className="mt-2 text-cyan-400">
|
||||
<span className="text-green-400">✓</span> Fetching Go net/http documentation...
|
||||
</div>
|
||||
<div className="mt-1 text-muted-foreground/80">
|
||||
<span className="text-cyan-500">→</span> Indexing 47 documents
|
||||
</div>
|
||||
<div className="mt-1 text-muted-foreground/80">
|
||||
<span className="text-cyan-500">→</span> Creating vector embeddings
|
||||
</div>
|
||||
<div className="mt-2 text-green-400">
|
||||
Ready! Query with: devour query "How to create a server?"
|
||||
</div>
|
||||
</div>
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1.2, duration: 0.6 }}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="w-6 h-10 rounded-full border-2 border-muted-foreground/30 flex items-start justify-center p-1"
|
||||
>
|
||||
<div className="w-1.5 h-2.5 rounded-full bg-cyan-500" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"
|
||||
|
||||
const languages = [
|
||||
{
|
||||
name: "Go",
|
||||
alias: "golang",
|
||||
icon: "🐹",
|
||||
color: "from-cyan-400 to-cyan-600",
|
||||
docs: "pkg.go.dev",
|
||||
},
|
||||
{
|
||||
name: "Python",
|
||||
alias: "py",
|
||||
icon: "🐍",
|
||||
color: "from-yellow-400 to-green-500",
|
||||
docs: "docs.python.org",
|
||||
},
|
||||
{
|
||||
name: "Rust",
|
||||
alias: "rust",
|
||||
icon: "🦀",
|
||||
color: "from-orange-400 to-red-500",
|
||||
docs: "docs.rs",
|
||||
},
|
||||
{
|
||||
name: "TypeScript",
|
||||
alias: "ts",
|
||||
icon: "📘",
|
||||
color: "from-blue-400 to-blue-600",
|
||||
docs: "typescriptlang.org",
|
||||
},
|
||||
{
|
||||
name: "React",
|
||||
alias: "react",
|
||||
icon: "⚛️",
|
||||
color: "from-cyan-400 to-purple-500",
|
||||
docs: "react.dev",
|
||||
},
|
||||
{
|
||||
name: "Vue",
|
||||
alias: "vue",
|
||||
icon: "💚",
|
||||
color: "from-green-400 to-emerald-500",
|
||||
docs: "vuejs.org",
|
||||
},
|
||||
{
|
||||
name: "Nuxt",
|
||||
alias: "nuxt",
|
||||
icon: "💚",
|
||||
color: "from-green-400 to-teal-500",
|
||||
docs: "nuxt.com",
|
||||
},
|
||||
{
|
||||
name: "Docker",
|
||||
alias: "docker",
|
||||
icon: "🐳",
|
||||
color: "from-blue-400 to-cyan-500",
|
||||
docs: "docs.docker.com",
|
||||
},
|
||||
{
|
||||
name: "Java",
|
||||
alias: "java",
|
||||
icon: "☕",
|
||||
color: "from-red-400 to-orange-500",
|
||||
docs: "docs.oracle.com",
|
||||
},
|
||||
{
|
||||
name: "Spring",
|
||||
alias: "spring",
|
||||
icon: "🍃",
|
||||
color: "from-green-500 to-green-600",
|
||||
docs: "docs.spring.io",
|
||||
},
|
||||
{
|
||||
name: "Astro",
|
||||
alias: "astro",
|
||||
icon: "🚀",
|
||||
color: "from-purple-400 to-pink-500",
|
||||
docs: "docs.astro.build",
|
||||
},
|
||||
{
|
||||
name: "Cloudflare",
|
||||
alias: "cf",
|
||||
icon: "☁️",
|
||||
color: "from-orange-400 to-yellow-500",
|
||||
docs: "developers.cloudflare.com",
|
||||
},
|
||||
]
|
||||
|
||||
export function Languages() {
|
||||
return (
|
||||
<section id="languages" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/5 to-background" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Supported <GradientText>Languages</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Quick access to documentation for popular languages and frameworks
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Languages Grid */}
|
||||
<StaggerContainer
|
||||
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
|
||||
staggerDelay={0.05}
|
||||
>
|
||||
{languages.map((lang, index) => (
|
||||
<StaggerItem key={index}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05, y: -4 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="group relative p-4 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="text-3xl mb-3">{lang.icon}</div>
|
||||
|
||||
{/* Name */}
|
||||
<h3 className="font-semibold mb-1 group-hover:text-cyan-400 transition-colors">
|
||||
{lang.name}
|
||||
</h3>
|
||||
|
||||
{/* Alias */}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="font-mono bg-white/10 px-1.5 py-0.5 rounded">
|
||||
devour get {lang.alias.toLowerCase()}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
{/* Gradient Line on Hover */}
|
||||
<div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r ${lang.color} opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-b-xl`} />
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
|
||||
{/* Usage Example */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="mt-12 text-center">
|
||||
<div className="inline-flex flex-col items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm">
|
||||
<p className="text-sm text-muted-foreground">Quick usage example:</p>
|
||||
<div className="flex flex-wrap justify-center gap-2 font-mono text-sm">
|
||||
<span className="text-muted-foreground">$</span>
|
||||
<span className="text-cyan-400">devour</span>
|
||||
<span className="text-white">get</span>
|
||||
<span className="text-green-400">go</span>
|
||||
<span className="text-white">http</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Fetches Go net/http package documentation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* More Info */}
|
||||
<FadeIn delay={0.5}>
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
More languages and frameworks are being added regularly.
|
||||
<br />
|
||||
<span className="text-cyan-400">Request a new source</span> on GitHub.
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { Download, Terminal, Copy, Check, ArrowRight } from "lucide-react"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useState } from "react"
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "Install",
|
||||
description: "Install Devour using Go",
|
||||
command: "go install github.com/yourorg/devour/cmd/devour@latest",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Initialize",
|
||||
description: "Create a configuration file",
|
||||
command: "devour init",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Get Docs",
|
||||
description: "Fetch documentation",
|
||||
command: "devour get go http",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
title: "Query",
|
||||
description: "Search your documentation",
|
||||
command: 'devour query "How to create a server?"',
|
||||
},
|
||||
]
|
||||
|
||||
export function QuickStart() {
|
||||
const [copiedStep, setCopiedStep] = useState<number | null>(null)
|
||||
|
||||
const copyToClipboard = async (text: string, stepIndex: number) => {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setCopiedStep(stepIndex)
|
||||
setTimeout(() => setCopiedStep(null), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="quickstart" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 grid-background opacity-30" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Quick <GradientText>Start</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Get up and running in minutes with just a few commands
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid gap-6">
|
||||
{steps.map((step, index) => (
|
||||
<FadeIn key={index} delay={0.1 + index * 0.1}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
className="group relative flex flex-col md:flex-row md:items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
{/* Step Number */}
|
||||
<div className="flex-shrink-0 w-16 h-16 flex items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 border border-cyan-500/30">
|
||||
<span className="text-2xl font-bold text-cyan-400">{step.number}</span>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold mb-1 group-hover:text-cyan-400 transition-colors">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
{step.description}
|
||||
</p>
|
||||
|
||||
{/* Command */}
|
||||
<div className="relative flex items-center gap-2 p-3 rounded-lg bg-black/40 border border-white/10 font-mono text-sm">
|
||||
<Terminal className="w-4 h-4 text-cyan-400 flex-shrink-0" />
|
||||
<code className="flex-1 text-muted-foreground overflow-x-auto">
|
||||
<span className="text-green-400">$</span> {step.command}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyToClipboard(step.command, index)}
|
||||
className="flex-shrink-0 p-1.5 rounded hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{copiedStep === index ? (
|
||||
<Check className="w-4 h-4 text-green-400" />
|
||||
) : (
|
||||
<Copy className="w-4 h-4 text-muted-foreground hover:text-foreground" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow (except last) */}
|
||||
{index < steps.length - 1 && (
|
||||
<div className="hidden md:flex absolute -bottom-6 left-1/2 -translate-x-1/2 z-10">
|
||||
<ArrowRight className="w-4 h-4 text-cyan-500/50 rotate-90" />
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prerequisites */}
|
||||
<FadeIn delay={0.5}>
|
||||
<div className="mt-16 text-center">
|
||||
<div className="inline-flex flex-col items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm">
|
||||
<h4 className="font-semibold">Prerequisites</h4>
|
||||
<div className="flex flex-wrap justify-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-500" />
|
||||
<span>Go 1.22+</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-teal-500" />
|
||||
<span>OpenAI API key</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* CTA */}
|
||||
<FadeIn delay={0.6}>
|
||||
<div className="mt-12 text-center">
|
||||
<Button size="xl" variant="glow" className="group">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Install Devour
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
glow: "border-transparent bg-primary/20 text-primary border border-primary/30",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,58 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
glow: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
xl: "h-12 rounded-lg px-10 text-base",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,79 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-2xl font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardFooter.displayName = "CardFooter"
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
@@ -0,0 +1,399 @@
|
||||
import React, { useEffect, useRef, useState } from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
// Particle Background Component
|
||||
interface Particle {
|
||||
x: number
|
||||
y: number
|
||||
size: number
|
||||
speedX: number
|
||||
speedY: number
|
||||
opacity: number
|
||||
}
|
||||
|
||||
export function ParticleBackground({ className }: { className?: string }) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const particlesRef = useRef<Particle[]>([])
|
||||
const animationRef = useRef<number | undefined>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const ctx = canvas.getContext("2d")
|
||||
if (!ctx) return
|
||||
|
||||
const resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
}
|
||||
|
||||
resizeCanvas()
|
||||
window.addEventListener("resize", resizeCanvas)
|
||||
|
||||
// Initialize particles
|
||||
const particleCount = 80
|
||||
particlesRef.current = Array.from({ length: particleCount }, () => ({
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
size: Math.random() * 2 + 0.5,
|
||||
speedX: (Math.random() - 0.5) * 0.5,
|
||||
speedY: (Math.random() - 0.5) * 0.5,
|
||||
opacity: Math.random() * 0.5 + 0.2,
|
||||
}))
|
||||
|
||||
const animate = () => {
|
||||
if (!ctx || !canvas) return
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
particlesRef.current.forEach((particle) => {
|
||||
particle.x += particle.speedX
|
||||
particle.y += particle.speedY
|
||||
|
||||
if (particle.x < 0) particle.x = canvas.width
|
||||
if (particle.x > canvas.width) particle.x = 0
|
||||
if (particle.y < 0) particle.y = canvas.height
|
||||
if (particle.y > canvas.height) particle.y = 0
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
|
||||
ctx.fillStyle = `rgba(6, 182, 212, ${particle.opacity})`
|
||||
ctx.fill()
|
||||
})
|
||||
|
||||
// Draw connections
|
||||
particlesRef.current.forEach((particle, i) => {
|
||||
particlesRef.current.slice(i + 1).forEach((otherParticle) => {
|
||||
const dx = particle.x - otherParticle.x
|
||||
const dy = particle.y - otherParticle.y
|
||||
const distance = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
if (distance < 150) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(particle.x, particle.y)
|
||||
ctx.lineTo(otherParticle.x, otherParticle.y)
|
||||
ctx.strokeStyle = `rgba(6, 182, 212, ${0.1 * (1 - distance / 150)})`
|
||||
ctx.lineWidth = 0.5
|
||||
ctx.stroke()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
animate()
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", resizeCanvas)
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className={cn("fixed inset-0 pointer-events-none", className)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Shimmer Button Component
|
||||
export function ShimmerButton({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
"relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-r from-cyan-500 via-teal-500 to-cyan-500 p-[1px] font-medium transition-all hover:scale-105 active:scale-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="relative inline-flex items-center justify-center gap-2 rounded-lg bg-background px-6 py-3 font-medium">
|
||||
{children}
|
||||
</span>
|
||||
<span className="absolute inset-0 -z-10 bg-gradient-to-r from-cyan-500 via-teal-500 to-cyan-500 opacity-50 blur-xl transition-opacity group-hover:opacity-75" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// Animated Border Component
|
||||
export function AnimatedBorder({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("relative rounded-xl p-[1px]", className)}>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500 via-teal-500 to-cyan-500 animate-gradient-x" />
|
||||
<div className="relative rounded-xl bg-background">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Glow Card Component
|
||||
export function GlowCard({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 })
|
||||
const cardRef = React.useRef<HTMLDivElement>(null)
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!cardRef.current) return
|
||||
const rect = cardRef.current.getBoundingClientRect()
|
||||
setMousePosition({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={cardRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
className={cn(
|
||||
"relative overflow-hidden rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm transition-all hover:border-cyan-500/30",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(6, 182, 212, 0.1), transparent 40%)`,
|
||||
}}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Text Reveal Animation
|
||||
export function TextReveal({
|
||||
children,
|
||||
className,
|
||||
delay = 0,
|
||||
}: {
|
||||
children: string
|
||||
className?: string
|
||||
delay?: number
|
||||
}) {
|
||||
const words = children.split(" ")
|
||||
|
||||
return (
|
||||
<motion.div className={cn("flex flex-wrap gap-x-2", className)}>
|
||||
{words.map((word, i) => (
|
||||
<motion.span
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: delay + i * 0.1,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Fade In Animation Wrapper
|
||||
export function FadeIn({
|
||||
children,
|
||||
className,
|
||||
delay = 0,
|
||||
direction = "up",
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
delay?: number
|
||||
direction?: "up" | "down" | "left" | "right"
|
||||
}) {
|
||||
const directions = {
|
||||
up: { y: 40, x: 0 },
|
||||
down: { y: -40, x: 0 },
|
||||
left: { x: 40, y: 0 },
|
||||
right: { x: -40, y: 0 },
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, ...directions[direction] }}
|
||||
whileInView={{ opacity: 1, y: 0, x: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.6, delay, ease: "easeOut" }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Stagger Container
|
||||
export function StaggerContainer({
|
||||
children,
|
||||
className,
|
||||
staggerDelay = 0.1,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
staggerDelay?: number
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={{
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: staggerDelay,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Stagger Item
|
||||
export function StaggerItem({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
}}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Typewriter Effect
|
||||
export function Typewriter({
|
||||
text,
|
||||
className,
|
||||
speed = 50,
|
||||
}: {
|
||||
text: string
|
||||
className?: string
|
||||
speed?: number
|
||||
}) {
|
||||
const [displayText, setDisplayText] = useState("")
|
||||
const [currentIndex, setCurrentIndex] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (currentIndex < text.length) {
|
||||
const timeout = setTimeout(() => {
|
||||
setDisplayText((prev) => prev + text[currentIndex])
|
||||
setCurrentIndex((prev) => prev + 1)
|
||||
}, speed)
|
||||
return () => clearTimeout(timeout)
|
||||
}
|
||||
}, [currentIndex, text, speed])
|
||||
|
||||
return (
|
||||
<span className={className}>
|
||||
{displayText}
|
||||
<span className="animate-pulse">|</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Gradient Text
|
||||
export function GradientText({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"bg-gradient-to-r from-cyan-400 via-cyan-300 to-teal-400 bg-clip-text text-transparent",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Animated Counter
|
||||
export function AnimatedCounter({
|
||||
value,
|
||||
duration = 2,
|
||||
className,
|
||||
}: {
|
||||
value: number
|
||||
duration?: number
|
||||
className?: string
|
||||
}) {
|
||||
const [count, setCount] = useState(0)
|
||||
const nodeRef = useRef<HTMLSpanElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const node = nodeRef.current
|
||||
if (!node) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
let startTime: number
|
||||
const animate = (currentTime: number) => {
|
||||
if (!startTime) startTime = currentTime
|
||||
const progress = Math.min(
|
||||
(currentTime - startTime) / (duration * 1000),
|
||||
1
|
||||
)
|
||||
setCount(Math.floor(progress * value))
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate)
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate)
|
||||
observer.unobserve(node)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
)
|
||||
|
||||
observer.observe(node)
|
||||
return () => observer.disconnect()
|
||||
}, [value, duration])
|
||||
|
||||
return (
|
||||
<span ref={nodeRef} className={className}>
|
||||
{count}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user