Seed: portfolio template (18 files)
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||
import {
|
||||
ArrowLeft, ArrowRight, Star, ExternalLink, Palette, ZoomIn, Quote
|
||||
} from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const metrics = [
|
||||
{ value: "+40%", label: "Engagement" },
|
||||
{ value: "-55%", label: "Support Tickets" },
|
||||
{ value: "2x", label: "Session Duration" },
|
||||
];
|
||||
|
||||
const techStack = ["React", "TypeScript", "Tailwind CSS", "D3.js", "Framer Motion"];
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||
<Header />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section className="pt-32 pb-16 px-6">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<Link to="/work" className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8">
|
||||
<ArrowLeft className="h-4 w-4" /> Back to Work
|
||||
</Link>
|
||||
<Badge variant="secondary" className="mb-4">Web Design</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight animate-fade-up">Fintech Dashboard Redesign</h1>
|
||||
<p className="mt-4 text-lg text-muted-foreground">A complete overhaul of the analytics dashboard for a Series B fintech startup.</p>
|
||||
<div className="flex flex-wrap gap-6 mt-6 text-sm text-muted-foreground">
|
||||
<span><strong className="text-foreground">Client:</strong> FinanceFlow</span>
|
||||
<span><strong className="text-foreground">Year:</strong> 2025</span>
|
||||
<span><strong className="text-foreground">Duration:</strong> 3 months</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── HERO IMAGE ── */}
|
||||
<section className="px-6 pb-16">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<div className="aspect-video rounded-2xl bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center relative overflow-hidden animate-scale-in cursor-pointer group">
|
||||
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
|
||||
<div className="absolute top-10 left-10 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
|
||||
<div className="absolute bottom-12 right-16 w-40 h-40 rounded-full bg-white/10 blur-3xl" />
|
||||
<Palette className="h-24 w-24 text-white/20 relative z-10" />
|
||||
<div className="absolute bottom-4 right-4 z-20 flex items-center gap-1.5 bg-black/40 backdrop-blur-sm text-white/70 text-xs px-3 py-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ZoomIn className="h-3.5 w-3.5" /> Click to enlarge
|
||||
</div>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-5xl p-0 overflow-hidden rounded-2xl">
|
||||
<div className="aspect-video bg-gradient-to-br from-violet-400 to-purple-600 flex items-center justify-center relative overflow-hidden">
|
||||
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
|
||||
<div className="absolute top-10 left-10 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
|
||||
<div className="absolute bottom-12 right-16 w-40 h-40 rounded-full bg-white/10 blur-3xl" />
|
||||
<Palette className="h-24 w-24 text-white/20 relative z-10" />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CHALLENGE / SOLUTION / RESULTS ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="mx-auto max-w-5xl grid lg:grid-cols-[1fr_280px] gap-12">
|
||||
<div className="grid md:grid-cols-3 gap-12">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-primary mb-3">The Challenge</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">The existing dashboard was cluttered and had a 60% drop-off rate. Users struggled to find critical financial data and the interface felt outdated.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-primary mb-3">The Solution</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">Redesigned the information architecture, introduced a modular card system, and built real-time data visualizations with smooth animations.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wider text-primary mb-3">The Impact</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">User engagement increased by 40%, support tickets dropped 55%, and the average session duration doubled within the first month.</p>
|
||||
</div>
|
||||
</div>
|
||||
<Card className="h-fit backdrop-blur-sm bg-card/80 border-border/50">
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<h4 className="font-semibold text-sm uppercase tracking-wider text-primary">Project Overview</h4>
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground">Client</div>
|
||||
<div className="font-medium text-sm">FinanceFlow</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground">Duration</div>
|
||||
<div className="font-medium text-sm">3 months</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground">Role</div>
|
||||
<div className="font-medium text-sm">Design & Development</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground">Tech Stack</div>
|
||||
<div className="flex flex-wrap gap-1.5 mt-1">
|
||||
{["React", "TypeScript", "Tailwind CSS"].map((t, i) => (
|
||||
<Badge key={i} variant="secondary" className="text-xs">{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── KEY METRICS ── */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="mx-auto max-w-4xl px-6 grid grid-cols-3 gap-8">
|
||||
{metrics.map((m, i) => (
|
||||
<div key={i} className="text-center">
|
||||
<div className="text-4xl font-black bg-gradient-to-r from-primary to-violet-500 bg-clip-text text-transparent">{m.value}</div>
|
||||
<div className="text-sm text-muted-foreground mt-1">{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── SECOND IMAGE ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<div className="aspect-[2/1] rounded-2xl bg-gradient-to-br from-sky-400 to-indigo-600 flex items-center justify-center relative overflow-hidden animate-scale-in cursor-pointer group">
|
||||
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
|
||||
<div className="absolute top-8 right-12 w-28 h-28 rounded-full bg-white/10 blur-2xl" />
|
||||
<div className="absolute bottom-10 left-8 w-36 h-36 rounded-full bg-white/10 blur-3xl" />
|
||||
<Palette className="h-24 w-24 text-white/20 relative z-10" />
|
||||
<div className="absolute bottom-4 right-4 z-20 flex items-center gap-1.5 bg-black/40 backdrop-blur-sm text-white/70 text-xs px-3 py-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ZoomIn className="h-3.5 w-3.5" /> Click to enlarge
|
||||
</div>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-5xl p-0 overflow-hidden rounded-2xl">
|
||||
<div className="aspect-[2/1] bg-gradient-to-br from-sky-400 to-indigo-600 flex items-center justify-center relative overflow-hidden">
|
||||
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
|
||||
<div className="absolute top-8 right-12 w-28 h-28 rounded-full bg-white/10 blur-2xl" />
|
||||
<div className="absolute bottom-10 left-8 w-36 h-36 rounded-full bg-white/10 blur-3xl" />
|
||||
<Palette className="h-24 w-24 text-white/20 relative z-10" />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CLIENT TESTIMONIAL ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<Card className="backdrop-blur-sm bg-card/80 border-border/50">
|
||||
<CardContent className="pt-8 pb-8 text-center">
|
||||
<Quote className="h-10 w-10 text-primary/30 mx-auto mb-4" />
|
||||
<div className="flex justify-center gap-0.5 mb-6">
|
||||
{[...Array(5)].map((_, j) => (
|
||||
<Star key={j} className="h-5 w-5 fill-amber-400 text-amber-400" />
|
||||
))}
|
||||
</div>
|
||||
<blockquote className="text-xl italic text-muted-foreground leading-relaxed">"Alex completely transformed our product. The new dashboard is intuitive, beautiful, and our users love it."</blockquote>
|
||||
<div className="mt-6">
|
||||
<div className="font-semibold">David Park</div>
|
||||
<div className="text-sm text-muted-foreground">CPO, FinanceFlow</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Separator className="mx-auto max-w-4xl" />
|
||||
|
||||
{/* ── TECH STACK ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-12 animate-fade-up">Tech Stack</h2>
|
||||
<div className="flex flex-wrap gap-3 stagger">
|
||||
{techStack.map((t, i) => (
|
||||
<Badge key={i} variant="outline" className="text-sm px-4 py-2 hover-card-lift transition-all duration-300 cursor-default">{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── NEXT/PREV ── */}
|
||||
<section className="py-24 px-6 border-t">
|
||||
<div className="mx-auto max-w-4xl flex items-center justify-between">
|
||||
<Button asChild variant="ghost" className="active:scale-[0.98]">
|
||||
<Link to="/work" className="inline-flex items-center gap-1 hover:gap-2 transition-all"><ArrowLeft className="h-4 w-4" /> Previous Project</Link>
|
||||
</Button>
|
||||
<Button asChild variant="ghost" className="active:scale-[0.98]">
|
||||
<Link to="/work" className="inline-flex items-center gap-1 hover:gap-2 transition-all">Next Project <ArrowRight className="h-4 w-4" /></Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user