feat: initial CodeBoard monorepo scaffold
Turborepo monorepo with npm workspaces: - apps/web: Next.js 14 frontend with Tailwind v4, SSE progress, doc viewer - apps/worker: BullMQ job processor (clone → parse → LLM generate) - packages/shared: TypeScript types - packages/parser: Babel-based AST parser (JS/TS) + regex (Python) - packages/llm: OpenAI/Anthropic provider abstraction + prompt pipeline - packages/diagrams: Mermaid architecture & dependency graph generators - packages/database: Prisma schema (PostgreSQL) - Docker multi-stage build (web + worker targets) All packages compile successfully with tsc and next build.
This commit is contained in:
Vectry
280
apps/web/src/app/page.tsx
Normal file
280
apps/web/src/app/page.tsx
Normal file
@@ -0,0 +1,280 @@
|
||||
import { RepoInput } from "@/components/repo-input";
|
||||
import {
|
||||
Link2,
|
||||
Code2,
|
||||
Sparkles,
|
||||
FileText,
|
||||
GitBranch,
|
||||
Boxes,
|
||||
Search,
|
||||
BookOpen,
|
||||
ArrowRight,
|
||||
Github
|
||||
} from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
icon: Link2,
|
||||
title: "Paste URL",
|
||||
description: "Enter any public GitHub repository URL",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
icon: Code2,
|
||||
title: "Clone & Analyze",
|
||||
description: "We clone and deeply analyze the codebase structure",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
icon: Sparkles,
|
||||
title: "AI Generation",
|
||||
description: "Our AI generates comprehensive documentation",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
icon: FileText,
|
||||
title: "Interactive Docs",
|
||||
description: "Explore architecture diagrams and module breakdowns",
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: GitBranch,
|
||||
title: "Architecture Diagrams",
|
||||
description:
|
||||
"Auto-generated Mermaid diagrams visualizing your codebase structure, dependencies, and data flow.",
|
||||
},
|
||||
{
|
||||
icon: Boxes,
|
||||
title: "Module Breakdowns",
|
||||
description:
|
||||
"Understand each part of the codebase with detailed summaries, key files, and public APIs.",
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: "Pattern Detection",
|
||||
description:
|
||||
"Coding conventions and design patterns automatically identified and documented for you.",
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "Getting Started Guide",
|
||||
description:
|
||||
"Actionable onboarding documentation to get new developers productive in minutes, not days.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8 animate-fade-in opacity-0">
|
||||
<Sparkles className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm text-zinc-300">Powered by AI</span>
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight mb-6 animate-slide-up opacity-0">
|
||||
<span className="gradient-text">Understand any codebase</span>
|
||||
<br />
|
||||
<span className="text-white">in 5 minutes</span>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 stagger-1">
|
||||
Paste a GitHub URL. Get interactive onboarding documentation with
|
||||
architecture diagrams, module breakdowns, and getting started guides.
|
||||
</p>
|
||||
|
||||
{/* Repo Input */}
|
||||
<div className="max-w-xl mx-auto mb-16 animate-slide-up opacity-0 stagger-2">
|
||||
<RepoInput />
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex flex-wrap justify-center gap-8 sm:gap-12 animate-fade-in opacity-0 stagger-3">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-white">5 min</div>
|
||||
<div className="text-sm text-zinc-500">Average generation time</div>
|
||||
</div>
|
||||
<div className="hidden sm:block w-px bg-zinc-800" />
|
||||
<div className="text-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-white">100%</div>
|
||||
<div className="text-sm text-zinc-500">Free for public repos</div>
|
||||
</div>
|
||||
<div className="hidden sm:block w-px bg-zinc-800" />
|
||||
<div className="text-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-white">AI</div>
|
||||
<div className="text-sm text-zinc-500">Powered insights</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background Elements */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
|
||||
</section>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<section id="how-it-works" className="py-20 lg:py-32">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
How It Works
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Four simple steps to comprehensive codebase documentation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Connection Line - Desktop */}
|
||||
<div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={step.number}
|
||||
className="relative group"
|
||||
>
|
||||
<div className="text-center">
|
||||
{/* Step Number */}
|
||||
<div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
|
||||
{step.number}
|
||||
</div>
|
||||
|
||||
{/* Icon */}
|
||||
<div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
|
||||
<step.icon className="w-7 h-7 text-blue-400" />
|
||||
|
||||
{/* Glow effect */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-zinc-400 leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 lg:py-32">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
Everything You Need
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-xl mx-auto">
|
||||
Comprehensive documentation generated automatically from your codebase
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1"
|
||||
>
|
||||
{/* Gradient border on hover */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
|
||||
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
|
||||
<feature.icon className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-zinc-400 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Built by Vectry Section */}
|
||||
<section className="py-20 lg:py-32">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="relative rounded-3xl glass-strong p-8 sm:p-12 lg:p-16 overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
||||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-indigo-500/10 to-cyan-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
|
||||
|
||||
<div className="relative text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
|
||||
<span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||||
<span className="text-sm text-zinc-300">Available for projects</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
Built by{" "}
|
||||
<span className="gradient-text">Vectry</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-400 mb-4 max-w-xl mx-auto">
|
||||
We're an AI consultancy that builds tools like this for businesses.
|
||||
</p>
|
||||
|
||||
<p className="text-zinc-500 mb-8">
|
||||
Need AI automation for your workflow?
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="https://company.repi.fun"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 btn-primary animate-pulse-glow"
|
||||
>
|
||||
Talk to Us
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</a>
|
||||
|
||||
<div className="mt-12 pt-8 border-t border-white/10">
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 text-sm text-zinc-500">
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 hover:text-white transition-colors"
|
||||
>
|
||||
<Github className="w-4 h-4" />
|
||||
Open Source
|
||||
</a>
|
||||
<span className="hidden sm:inline">•</span>
|
||||
<span>Free for public repositories</span>
|
||||
<span className="hidden sm:inline">•</span>
|
||||
<span>No signup required</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user