From 2f53d1031a51f2ddda2943d468760e8545bc8c58 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:11:16 +0000
Subject: [PATCH] Seed: services template (18 files)

---
 src/pages/CaseStudy.tsx | 166 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 src/pages/CaseStudy.tsx

diff --git a/src/pages/CaseStudy.tsx b/src/pages/CaseStudy.tsx
new file mode 100644
index 0000000..ce12364
--- /dev/null
+++ b/src/pages/CaseStudy.tsx
@@ -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>
+  );
+}
\ No newline at end of file