64ce70daa4
- NextAuth v5 with email+password credentials, JWT sessions - Registration, login, email verification, password reset flows - Stripe integration: Free (15/day), Starter ($5/1k/mo), Pro ($20/100k/mo) - API key management (cb_ prefix) with hash-based validation - Dashboard with generations history, settings, billing management - Rate limiting: Redis daily counter (free), DB monthly (paid) - Generate route auth: Bearer API key + session, anonymous allowed - Worker userId propagation for generation history - Pricing section on landing page, auth-aware navbar - Middleware with route protection, CORS for codeboard.vectry.tech - Docker env vars for auth, Stripe, email (smtp.migadu.com)
598 lines
26 KiB
TypeScript
598 lines
26 KiB
TypeScript
import Link from "next/link";
|
|
import { RepoInput } from "@/components/repo-input";
|
|
import { ExampleRepoCard } from "@/components/example-repo-card";
|
|
import { ScrollSection } from "@/components/scroll-section";
|
|
import {
|
|
Link2,
|
|
Code2,
|
|
Sparkles,
|
|
FileText,
|
|
GitBranch,
|
|
Boxes,
|
|
Search,
|
|
BookOpen,
|
|
ArrowRight,
|
|
Github,
|
|
Layers,
|
|
Workflow,
|
|
Terminal,
|
|
FileCode,
|
|
CheckCircle2,
|
|
Check,
|
|
Crown,
|
|
Zap,
|
|
} 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.",
|
|
},
|
|
];
|
|
|
|
const pricingTiers = [
|
|
{
|
|
name: "Free",
|
|
price: 0,
|
|
period: "forever",
|
|
description: "Get started with CodeBoard",
|
|
generations: "15 / day",
|
|
features: ["15 generations per day", "Public repository support", "Interactive documentation", "Architecture diagrams"],
|
|
cta: "Get Started",
|
|
href: "/register",
|
|
highlighted: false,
|
|
},
|
|
{
|
|
name: "Starter",
|
|
price: 5,
|
|
period: "month",
|
|
description: "For regular use",
|
|
generations: "1,000 / month",
|
|
features: ["1,000 generations per month", "Generation history", "API key access", "Priority support"],
|
|
cta: "Start Free Trial",
|
|
href: "/register",
|
|
highlighted: true,
|
|
},
|
|
{
|
|
name: "Pro",
|
|
price: 20,
|
|
period: "month",
|
|
description: "For teams & power users",
|
|
generations: "100,000 / month",
|
|
features: ["100,000 generations per month", "Full generation history", "Multiple API keys", "Dedicated support", "Custom integrations"],
|
|
cta: "Start Free Trial",
|
|
href: "/register",
|
|
highlighted: false,
|
|
},
|
|
];
|
|
|
|
const exampleRepos = [
|
|
{
|
|
name: "sindresorhus/p-limit",
|
|
description: "Elegant promise concurrency limiter with a simple API and robust error handling.",
|
|
language: "TypeScript",
|
|
languageColor: "#3178c6",
|
|
docId: "gen_1770661300051_y9qnjpu",
|
|
},
|
|
{
|
|
name: "expressjs/express",
|
|
description: "Fast, unopinionated web framework for Node.js with minimalistic design.",
|
|
language: "JavaScript",
|
|
languageColor: "#f1e05a",
|
|
docId: "gen_1770661300322_glzwj8k",
|
|
},
|
|
{
|
|
name: "pallets/flask",
|
|
description: "Lightweight Python web framework with simplicity and flexibility at its core.",
|
|
language: "Python",
|
|
languageColor: "#3572A5",
|
|
docId: "gen_1770661300222_ushzuqi",
|
|
},
|
|
{
|
|
name: "colinhacks/zod",
|
|
description: "TypeScript-first schema validation with static type inference.",
|
|
language: "TypeScript",
|
|
languageColor: "#3178c6",
|
|
docId: "gen_1770661300115_701f52c",
|
|
},
|
|
{
|
|
name: "tiangolo/fastapi",
|
|
description: "Modern, high-performance Python API framework with automatic OpenAPI docs.",
|
|
language: "Python",
|
|
languageColor: "#3572A5",
|
|
docId: "gen_1770661300275_p7o2e2m",
|
|
},
|
|
{
|
|
name: "redis/node-redis",
|
|
description: "High-performance Redis client for Node.js with comprehensive feature support.",
|
|
language: "TypeScript",
|
|
languageColor: "#3178c6",
|
|
docId: "gen_1770661300165_a8wzri6",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="relative">
|
|
<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">
|
|
<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>
|
|
|
|
<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 minutes</span>
|
|
</h1>
|
|
|
|
<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>
|
|
|
|
<div className="max-w-xl mx-auto mb-16 animate-slide-up opacity-0 stagger-2">
|
|
<RepoInput />
|
|
</div>
|
|
|
|
<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">~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" />
|
|
<div className="text-center">
|
|
<div className="text-2xl sm:text-3xl font-bold text-white">Free</div>
|
|
<div className="text-sm text-zinc-500">tier to start</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">10+</div>
|
|
<div className="text-sm text-zinc-500">Languages supported</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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">
|
|
<ScrollSection>
|
|
<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>
|
|
</ScrollSection>
|
|
|
|
<div className="relative">
|
|
<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, i) => (
|
|
<ScrollSection key={step.number} delay={i + 1}>
|
|
<div className="relative group">
|
|
<div className="text-center">
|
|
<div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
|
|
{step.number}
|
|
</div>
|
|
|
|
<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" />
|
|
|
|
<div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-white mb-2">
|
|
{step.title}
|
|
</h3>
|
|
|
|
<p className="text-sm text-zinc-400 leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ScrollSection>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-20 lg:py-32">
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<ScrollSection>
|
|
<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">
|
|
Pre-generated docs ready to explore — or paste any repo URL above
|
|
</p>
|
|
</div>
|
|
</ScrollSection>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{exampleRepos.map((repo, i) => (
|
|
<ScrollSection key={repo.name} delay={(i % 3) + 1}>
|
|
<ExampleRepoCard repo={repo} />
|
|
</ScrollSection>
|
|
))}
|
|
</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">
|
|
<ScrollSection>
|
|
<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>
|
|
</ScrollSection>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{features.map((feature, i) => (
|
|
<ScrollSection key={feature.title} delay={(i % 2) + 1}>
|
|
<div className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1">
|
|
<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>
|
|
</ScrollSection>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="pricing" className="py-20 lg:py-32">
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<ScrollSection>
|
|
<div className="text-center mb-16">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
|
|
<Zap className="w-4 h-4 text-blue-400" />
|
|
<span className="text-sm text-zinc-300">Pricing</span>
|
|
</div>
|
|
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
|
Simple, Transparent <span className="gradient-text">Pricing</span>
|
|
</h2>
|
|
<p className="text-zinc-400 max-w-xl mx-auto">
|
|
Start free, scale when you need to
|
|
</p>
|
|
</div>
|
|
</ScrollSection>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
|
|
{pricingTiers.map((tier, i) => (
|
|
<ScrollSection key={tier.name} delay={i + 1}>
|
|
<div
|
|
className={`relative group h-full rounded-2xl p-8 transition-all duration-300 hover:-translate-y-1 ${
|
|
tier.highlighted
|
|
? "glass-strong border-blue-500/30 shadow-lg shadow-blue-500/10"
|
|
: "glass hover:bg-white/[0.05]"
|
|
}`}
|
|
>
|
|
{tier.highlighted && (
|
|
<>
|
|
<div className="absolute -inset-px rounded-2xl bg-gradient-to-b from-blue-500/20 via-transparent to-blue-500/10 -z-10" />
|
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30 text-xs font-medium text-blue-300">
|
|
<Crown className="w-3 h-3" />
|
|
Most Popular
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className="mb-6">
|
|
<h3 className="text-lg font-semibold text-white mb-1">{tier.name}</h3>
|
|
<p className="text-sm text-zinc-500">{tier.description}</p>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex items-baseline gap-1">
|
|
{tier.price === 0 ? (
|
|
<span className="text-4xl font-bold text-white">Free</span>
|
|
) : (
|
|
<>
|
|
<span className="text-4xl font-bold text-white">${tier.price}</span>
|
|
<span className="text-zinc-500">/ {tier.period}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 text-sm text-zinc-400">
|
|
<span className="text-blue-400 font-medium">{tier.generations}</span> generations
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-8 space-y-3">
|
|
{tier.features.map((feature) => (
|
|
<div key={feature} className="flex items-start gap-3">
|
|
<div className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${
|
|
tier.highlighted
|
|
? "bg-blue-500/20 text-blue-400"
|
|
: "bg-white/10 text-zinc-400"
|
|
}`}>
|
|
<Check className="w-3 h-3" />
|
|
</div>
|
|
<span className="text-sm text-zinc-300">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-auto">
|
|
<Link
|
|
href={tier.href}
|
|
className={`block w-full text-center py-3 px-6 rounded-xl text-sm font-medium transition-all duration-200 ${
|
|
tier.highlighted
|
|
? "btn-primary"
|
|
: "glass border border-white/10 text-white hover:bg-white/10 hover:border-white/20"
|
|
}`}
|
|
>
|
|
{tier.cta}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</ScrollSection>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-20 lg:py-32">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<ScrollSection>
|
|
<div className="relative rounded-3xl glass-strong p-8 sm:p-12 lg:p-16 overflow-hidden">
|
|
<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://vectry.tech"
|
|
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://gitea.repi.fun/repi/codeboard"
|
|
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>Free tier available</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollSection>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|