repi/codeboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: overhaul landing page with demo gallery, preview mockup, and fix links

Browse Source 
- Add 'Featured Examples' section with 6 popular repos (express, flask, zod, etc.)
- Add browser window mockup in hero showing what generated docs look like
- Fix all links: company.repi.fun → vectry.tech, github.com → gitea.repi.fun
- Update stats: ~3 min generation, 10+ languages supported
- New ExampleRepos client component with generate-on-click functionality
This commit is contained in:
Vectry
2026-02-09 17:14:56 +00:00
parent f4ed838f77
commit 327e19df8f
5 changed files with 337 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/src/app/globals.css
View File

@@ -207,6 +207,29 @@ body {
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bg-blue-500\/60 {
background-color: rgba(59, 130, 246, 0.6);
}
.bg-purple-500\/60 {
background-color: rgba(168, 85, 247, 0.6);
}
.bg-green-500\/60 {
background-color: rgba(34, 197, 94, 0.6);
}
.bg-orange-500\/60 {
background-color: rgba(249, 115, 22, 0.6);
}
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

231
apps/web/src/app/page.tsx
View File

@@ -1,4 +1,5 @@
import { RepoInput } from "@/components/repo-input";
import { ExampleRepoCard } from "@/components/example-repo-card";
import {
Link2,
Code2,
@@ -9,7 +10,12 @@ import {
Search,
BookOpen,
ArrowRight,
Github
Github,
Layers,
Workflow,
Terminal,
FileCode,
CheckCircle2,
} from "lucide-react";
export default function HomePage() {
@@ -67,40 +73,193 @@ export default function HomePage() {
},
];
const exampleRepos = [
{
name: "sindresorhus/p-limit",
description: "Elegant promise concurrency limiter with a simple API and robust error handling.",
language: "TypeScript",
languageColor: "#3178c6",
},
{
name: "expressjs/express",
description: "Fast, unopinionated web framework for Node.js with minimalistic design.",
language: "JavaScript",
languageColor: "#f1e05a",
},
{
name: "pallets/flask",
description: "Lightweight Python web framework with simplicity and flexibility at its core.",
language: "Python",
languageColor: "#3572A5",
},
{
name: "colinhacks/zod",
description: "TypeScript-first schema validation with static type inference.",
language: "TypeScript",
languageColor: "#3178c6",
},
{
name: "tiangolo/fastapi",
description: "Modern, high-performance Python API framework with automatic OpenAPI docs.",
language: "Python",
languageColor: "#3572A5",
},
{
name: "redis/node-redis",
description: "High-performance Redis client for Node.js with comprehensive feature support.",
language: "TypeScript",
languageColor: "#3178c6",
},
];
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>
<span className="text-white">in 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="relative max-w-4xl mx-auto mb-20 animate-slide-up opacity-0 stagger-3">
<div className="relative rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-blue-500/10">
<div className="flex items-center gap-2 px-4 py-3 bg-zinc-900/80 border-b border-white/10">
<div className="flex items-center 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-1 text-center">
<span className="text-xs text-zinc-500 font-mono">codeboard-docs.html</span>
</div>
<div className="w-16" />
</div>
<div className="bg-[#0d0d12] p-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-4">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-blue-500/30">
<Layers className="w-5 h-5 text-blue-400" />
</div>
<div>
<h3 className="text-white font-semibold">Architecture Overview</h3>
<p className="text-xs text-zinc-500">High-level system design</p>
</div>
</div>
<div className="rounded-lg border border-white/10 bg-black/40 p-4 font-mono text-xs">
<div className="flex items-center gap-2 text-zinc-400 mb-3">
<Workflow className="w-4 h-4" />
<span>Dependency Graph</span>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded bg-blue-500/30 border border-blue-500/50" />
<span className="text-blue-300">src/index.ts</span>
<span className="text-zinc-600">→</span>
<div className="w-3 h-3 rounded bg-purple-500/30 border border-purple-500/50" />
<span className="text-purple-300">lib/core</span>
</div>
<div className="flex items-center gap-2 pl-6">
<span className="text-zinc-600">↳</span>
<div className="w-3 h-3 rounded bg-green-500/30 border border-green-500/50" />
<span className="text-green-300">utils/parser</span>
</div>
<div className="flex items-center gap-2 pl-6">
<span className="text-zinc-600">↳</span>
<div className="w-3 h-3 rounded bg-orange-500/30 border border-orange-500/50" />
<span className="text-orange-300">api/routes</span>
</div>
</div>
</div>
<div className="rounded-lg border border-white/10 bg-black/40 p-4">
<div className="flex items-center gap-2 text-zinc-400 mb-3 text-xs font-mono">
<Terminal className="w-4 h-4" />
<span>Key Metrics</span>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="text-center p-3 rounded-lg bg-white/5">
<div className="text-xl font-bold text-white">24</div>
<div className="text-xs text-zinc-500">Modules</div>
</div>
<div className="text-center p-3 rounded-lg bg-white/5">
<div className="text-xl font-bold text-white">156</div>
<div className="text-xs text-zinc-500">Files</div>
</div>
<div className="text-center p-3 rounded-lg bg-white/5">
<div className="text-xl font-bold text-white">8.2k</div>
<div className="text-xs text-zinc-500">Lines</div>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<div className="flex items-center gap-2 text-zinc-400 mb-2">
<FileCode className="w-4 h-4" />
<span className="text-sm font-medium">Module Breakdown</span>
</div>
<div className="space-y-3">
{[
{ name: "Core Engine", files: 12, color: "blue" },
{ name: "API Layer", files: 8, color: "purple" },
{ name: "Utilities", files: 15, color: "green" },
{ name: "Tests", files: 23, color: "orange" },
].map((mod) => (
<div
key={mod.name}
className="p-3 rounded-lg bg-white/5 border border-white/5 hover:border-white/10 transition-colors"
>
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-zinc-300">{mod.name}</span>
<span className="text-xs text-zinc-500">{mod.files} files</span>
</div>
<div className="h-1.5 rounded-full bg-white/10 overflow-hidden">
<div
className={`h-full rounded-full bg-${mod.color}-500/60`}
style={{ width: `${Math.random() * 40 + 60}%` }}
/>
</div>
</div>
))}
</div>
<div className="pt-4 border-t border-white/10">
<div className="flex items-center gap-2 text-green-400 text-sm">
<CheckCircle2 className="w-4 h-4" />
<span>Docs generated in 2m 34s</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="absolute -inset-1 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-indigo-500/20 rounded-xl blur-2xl -z-10 opacity-50" />
</div>
<div className="flex flex-wrap justify-center gap-8 sm:gap-12 animate-fade-in opacity-0 stagger-4">
<div className="text-center">
<div className="text-2xl sm:text-3xl font-bold text-white">5 min</div>
<div className="text-2xl sm:text-3xl font-bold text-white">~3 min</div>
<div className="text-sm text-zinc-500">Average generation time</div>
</div>
<div className="hidden sm:block w-px bg-zinc-800" />
@@ -110,18 +269,16 @@ export default function HomePage() {
</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 className="text-2xl sm:text-3xl font-bold text-white">10+</div>
<div className="text-sm text-zinc-500">Languages supported</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">
@@ -134,35 +291,26 @@ export default function HomePage() {
</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"
>
{steps.map((step) => (
<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>
@@ -174,7 +322,29 @@ export default function HomePage() {
</div>
</section>
{/* Features Section */}
<section 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">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
<Github className="w-4 h-4 text-blue-400" />
<span className="text-sm text-zinc-300">Try It Out</span>
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
Featured Examples
</h2>
<p className="text-zinc-400 max-w-xl mx-auto">
Click any repository to instantly generate documentation
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{exampleRepos.map((repo) => (
<ExampleRepoCard key={repo.name} repo={repo} />
))}
</div>
</div>
</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">
@@ -187,12 +357,11 @@ export default function HomePage() {
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{features.map((feature, index) => (
{features.map((feature) => (
<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">
@@ -217,11 +386,9 @@ export default function HomePage() {
</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" />
@@ -245,7 +412,7 @@ export default function HomePage() {
</p>
<a
href="https://company.repi.fun"
href="https://vectry.tech"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 btn-primary animate-pulse-glow"
@@ -257,7 +424,7 @@ export default function HomePage() {
<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"
href="https://gitea.repi.fun/repi/codeboard"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 hover:text-white transition-colors"

96
apps/web/src/components/example-repo-card.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowRight, Loader2 } from "lucide-react";
interface ExampleRepo {
name: string;
description: string;
language: string;
languageColor: string;
}
interface ExampleRepoCardProps {
repo: ExampleRepo;
}
export function ExampleRepoCard({ repo }: ExampleRepoCardProps) {
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const handleGenerate = async () => {
const repoUrl = `https://github.com/${repo.name}`;
setIsLoading(true);
try {
const response = await fetch("/api/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ repoUrl }),
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || "Failed to start generation");
}
const data = await response.json();
router.push(`/generate?repo=${encodeURIComponent(repoUrl)}&id=${data.id}`);
} catch (err) {
setIsLoading(false);
}
};
return (
<div className="group relative p-6 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-blue-500/10">
<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-center justify-between mb-4">
<div
className="flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium"
style={{
backgroundColor: `${repo.languageColor}20`,
color: repo.languageColor,
border: `1px solid ${repo.languageColor}40`,
}}
>
<span
className="w-2 h-2 rounded-full"
style={{ backgroundColor: repo.languageColor }}
/>
{repo.language}
</div>
</div>
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors font-mono">
{repo.name}
</h3>
<p className="text-sm text-zinc-400 mb-6 leading-relaxed line-clamp-2">
{repo.description}
</p>
<button
onClick={handleGenerate}
disabled={isLoading}
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200
bg-gradient-to-r from-blue-600/20 to-indigo-600/20 hover:from-blue-600 hover:to-indigo-600
border border-blue-500/30 hover:border-transparent text-blue-300 hover:text-white
disabled:opacity-50 disabled:cursor-not-allowed group/btn"
>
{isLoading ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span>Starting...</span>
</>
) : (
<>
<span>Generate Docs</span>
<ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
</>
)}
</button>
</div>
);
}

6
apps/web/src/components/footer.tsx
View File

@@ -17,7 +17,7 @@ export function Footer() {
<div className="flex items-center gap-6">
<a
href="https://company.repi.fun"
href="https://vectry.tech"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 text-sm text-zinc-400 hover:text-white transition-colors"
@@ -27,7 +27,7 @@ export function Footer() {
</a>
<a
href="https://github.com"
href="https://gitea.repi.fun/repi/codeboard"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
@@ -42,7 +42,7 @@ export function Footer() {
<p className="text-sm text-zinc-500">
© {new Date().getFullYear()} CodeBoard. Built by{" "}
<a
href="https://company.repi.fun"
href="https://vectry.tech"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-400 hover:text-white transition-colors"

8
apps/web/src/components/navbar.tsx
View File

@@ -38,13 +38,13 @@ export function Navbar() {
))}
<a
href="https://github.com"
href="https://gitea.repi.fun/repi/codeboard"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
>
<Github className="w-4 h-4" />
GitHub
Source
</a>
</div>
@@ -77,13 +77,13 @@ export function Navbar() {
))}
<a
href="https://github.com"
href="https://gitea.repi.fun/repi/codeboard"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors py-2"
>
<Github className="w-4 h-4" />
GitHub
Source
</a>
</div>
</div>