Seed: services template (18 files)
This commit is contained in:
@@ -0,0 +1,166 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
ArrowLeft, ArrowRight, CheckCircle2, Star, ChevronLeft, ChevronRight
|
||||||
|
} from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const techStack = ["React", "TypeScript", "Node.js", "PostgreSQL", "AWS", "Figma"];
|
||||||
|
|
||||||
|
const results = [
|
||||||
|
{ value: "+40%", label: "Revenue Increase" },
|
||||||
|
{ value: "2.1s", label: "Avg Load Time" },
|
||||||
|
{ value: "+65%", label: "Conversion Rate" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const solutionPoints = [
|
||||||
|
"Complete UX audit and redesign with user research-backed decisions",
|
||||||
|
"Migration to a headless commerce architecture for flexibility",
|
||||||
|
"Performance optimization achieving sub-2-second load times",
|
||||||
|
"Automated CI/CD pipeline with comprehensive testing coverage",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function CaseStudyPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── BACK LINK ── */}
|
||||||
|
<div className="pt-28 pb-4">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<Link to="/" className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||||
|
<ArrowLeft className="h-4 w-4" /> Back to Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section className="pb-16">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<Badge variant="secondary" className="mb-4">Acme Corp</Badge>
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight animate-fade-up">
|
||||||
|
Reimagining the Acme Digital Experience
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 text-lg text-muted-foreground leading-relaxed max-w-2xl">
|
||||||
|
A complete digital transformation for one of the fastest-growing e-commerce brands, resulting in a 40% revenue increase within three months.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FULL-WIDTH IMAGE ── */}
|
||||||
|
<section className="pb-16">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="relative aspect-[2/1] rounded-2xl bg-gradient-to-br from-primary/20 via-violet-500/15 to-rose-500/10 border overflow-hidden animate-scale-in">
|
||||||
|
<div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
|
||||||
|
<div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-violet-500/15 blur-3xl" />
|
||||||
|
<div className="absolute -bottom-10 -left-10 w-36 h-36 rounded-full bg-primary/15 blur-3xl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CHALLENGE ── */}
|
||||||
|
<section className="pb-24">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<h2 className="text-2xl font-bold mb-4 animate-fade-up">The Challenge</h2>
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
Acme Corp was struggling with an outdated website that suffered from poor performance, low conversion rates, and a fragmented user experience across devices. Their existing platform could not scale to meet growing demand.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── SOLUTION ── */}
|
||||||
|
<section className="pb-24">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<h2 className="text-2xl font-bold mb-4 animate-fade-up">Our Solution</h2>
|
||||||
|
<p className="text-muted-foreground leading-relaxed mb-6">
|
||||||
|
We took a holistic approach, redesigning the entire digital experience from the ground up while implementing a modern tech stack built for performance and scale.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
{solutionPoints.map((point, i) => (
|
||||||
|
<li key={i} className="flex items-start gap-3 text-sm">
|
||||||
|
<CheckCircle2 className="h-5 w-5 text-primary shrink-0 mt-0.5" />
|
||||||
|
<span>{point}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── RESULTS ── */}
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<h2 className="text-2xl font-bold mb-8 text-center animate-fade-up">Results</h2>
|
||||||
|
<div className="grid grid-cols-3 gap-8 stagger">
|
||||||
|
{results.map((r, i) => (
|
||||||
|
<div key={i} className="text-center p-6 rounded-xl bg-background border">
|
||||||
|
<div className="text-3xl font-extrabold bg-gradient-to-r from-primary to-violet-500 bg-clip-text text-transparent">{r.value}</div>
|
||||||
|
<div className="mt-2 text-sm text-muted-foreground">{r.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-8 mt-8 max-w-md mx-auto">
|
||||||
|
<div className="text-center p-4 rounded-xl bg-background border">
|
||||||
|
<div className="text-lg font-bold">8 Weeks</div>
|
||||||
|
<div className="text-xs text-muted-foreground">Project Duration</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-4 rounded-xl bg-background border">
|
||||||
|
<div className="text-lg font-bold">6 People</div>
|
||||||
|
<div className="text-xs text-muted-foreground">Team Size</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TESTIMONIAL ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<div className="backdrop-blur-sm bg-card/80 border border-border/50 rounded-2xl p-8 sm:p-12">
|
||||||
|
<div className="flex gap-0.5 mb-4">
|
||||||
|
{[...Array(5)].map((_, j) => (
|
||||||
|
<Star key={j} className="h-5 w-5 fill-amber-400 text-amber-400" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<blockquote className="text-lg italic leading-relaxed">
|
||||||
|
"Apex Studio transformed our online presence. Revenue increased 40% within three months of launching our new site. They truly understood our vision."
|
||||||
|
</blockquote>
|
||||||
|
<div className="mt-6 flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-violet-500 hover:scale-110 transition-transform" />
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold">Emily Chen</div>
|
||||||
|
<div className="text-sm text-muted-foreground">VP Marketing, Acme Corp</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TECH STACK ── */}
|
||||||
|
<section className="pb-16">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 animate-fade-up">Tech Stack</h2>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{techStack.map((tech, i) => (
|
||||||
|
<Badge key={i} variant="secondary" className="text-sm px-4 py-1.5 hover:bg-primary/10 transition-colors">{tech}</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── NAV ── */}
|
||||||
|
<section className="pb-24">
|
||||||
|
<div className="mx-auto max-w-4xl px-6 flex items-center justify-between">
|
||||||
|
<Button asChild variant="outline" className="active:scale-[0.98]">
|
||||||
|
<Link to="/"><ChevronLeft className="mr-2 h-4 w-4" /> Previous Project</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild variant="outline" className="active:scale-[0.98]">
|
||||||
|
<Link to="/">Next Project <ChevronRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user