Files
vibn-frontend/app/[workspace]/project/[projectId]/getting-started/setup/page.tsx

103 lines
4.2 KiB
TypeScript

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle2, ArrowRight, Sparkles } from "lucide-react";
import Link from "next/link";
export default async function SetupPage({
params,
}: {
params: Promise<{ workspace: string; projectId: string }>;
}) {
const { workspace, projectId } = await params;
return (
<div className="flex h-full flex-col overflow-auto">
<div className="flex-1 p-8 space-y-8 max-w-4xl">
{/* Header */}
<div>
<h1 className="text-4xl font-bold mb-2">Setup Your Project</h1>
<p className="text-muted-foreground text-lg">
We&apos;ve created your project structure based on the analysis
</p>
</div>
{/* Setup Complete */}
<Card className="border-green-500/50 bg-green-500/5">
<CardContent className="pt-6 pb-6">
<div className="flex items-center gap-4">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10">
<CheckCircle2 className="h-8 w-8 text-green-600" />
</div>
<div>
<h3 className="text-xl font-semibold mb-1">Project Setup Complete!</h3>
<p className="text-muted-foreground">
Your project has been configured with all the necessary sections
</p>
</div>
</div>
</CardContent>
</Card>
{/* What We Created */}
<Card>
<CardHeader>
<CardTitle>What We&apos;ve Set Up</CardTitle>
<CardDescription>Your project is ready with these sections</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3">
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
<div>
<p className="font-medium">Product Vision</p>
<p className="text-sm text-muted-foreground">Your product goals and strategy</p>
</div>
</div>
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
<div>
<p className="font-medium">Progress Tracking</p>
<p className="text-sm text-muted-foreground">Monitor your development progress</p>
</div>
</div>
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
<div>
<p className="font-medium">UI UX Design</p>
<p className="text-sm text-muted-foreground">Design and iterate on your screens</p>
</div>
</div>
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
<div>
<p className="font-medium">Code Repository</p>
<p className="text-sm text-muted-foreground">Connected to your GitHub repo</p>
</div>
</div>
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
<div>
<p className="font-medium">Deployment & Automation</p>
<p className="text-sm text-muted-foreground">CI/CD and automated workflows</p>
</div>
</div>
</div>
</CardContent>
</Card>
{/* Start Building Button */}
<div className="flex justify-center pt-4">
<Link href={`/${workspace}/${projectId}/product`}>
<Button size="lg" className="gap-2">
<Sparkles className="h-4 w-4" />
Start Building
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</div>
</div>
);
}