diff --git a/index.html b/index.html
index 924a3f6..e7c43fc 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>victoria-way-voice</title>
-    <meta name="description" content="Lovable Generated Project" />
-    <meta name="author" content="Lovable" />
+    <title>Save Victoria Way Carpark - Petition for Enterprise Place Residents</title>
+    <meta name="description" content="Sign the petition to save Victoria Way Carpark in Woking. Essential parking for Enterprise Place residents - help us show the council this community resource matters." />
+    <meta name="author" content="Enterprise Place Residents" />
 
-    <meta property="og:title" content="victoria-way-voice" />
-    <meta property="og:description" content="Lovable Generated Project" />
+    <meta property="og:title" content="Save Victoria Way Carpark - Petition for Enterprise Place Residents" />
+    <meta property="og:description" content="Sign the petition to save Victoria Way Carpark in Woking. Essential parking for Enterprise Place residents." />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
 
diff --git a/src/assets/carpark-hero.jpg b/src/assets/carpark-hero.jpg
new file mode 100644
index 0000000..4cbb30d
Binary files /dev/null and b/src/assets/carpark-hero.jpg differ
diff --git a/src/components/PetitionForm.tsx b/src/components/PetitionForm.tsx
new file mode 100644
index 0000000..7d1e52e
--- /dev/null
+++ b/src/components/PetitionForm.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "sonner";
+
+export const PetitionForm = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    comment: "",
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // In a real application, this would submit to a backend
+    toast.success("Thank you for signing! Your voice matters.");
+    setFormData({ name: "", email: "", comment: "" });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 max-w-xl mx-auto">
+      <div>
+        <Input
+          placeholder="Your Name"
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          required
+          className="bg-background border-border"
+        />
+      </div>
+      <div>
+        <Input
+          type="email"
+          placeholder="Your Email"
+          value={formData.email}
+          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+          required
+          className="bg-background border-border"
+        />
+      </div>
+      <div>
+        <Textarea
+          placeholder="Why is Victoria Way Carpark important to you? (Optional)"
+          value={formData.comment}
+          onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
+          className="bg-background border-border min-h-24"
+        />
+      </div>
+      <Button 
+        type="submit" 
+        size="lg" 
+        className="w-full bg-gradient-to-r from-accent to-accent/90 hover:from-accent/90 hover:to-accent/80 text-accent-foreground shadow-[var(--shadow-elevated)] font-semibold"
+      >
+        Sign the Petition
+      </Button>
+    </form>
+  );
+};
diff --git a/src/components/StatCard.tsx b/src/components/StatCard.tsx
new file mode 100644
index 0000000..75c293b
--- /dev/null
+++ b/src/components/StatCard.tsx
@@ -0,0 +1,18 @@
+import { LucideIcon } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+interface StatCardProps {
+  icon: LucideIcon;
+  number: string;
+  label: string;
+}
+
+export const StatCard = ({ icon: Icon, number, label }: StatCardProps) => {
+  return (
+    <Card className="p-6 text-center bg-card shadow-[var(--shadow-card)] border-border">
+      <Icon className="w-12 h-12 mx-auto mb-4 text-primary" />
+      <p className="text-4xl font-bold text-primary mb-2">{number}</p>
+      <p className="text-muted-foreground">{label}</p>
+    </Card>
+  );
+};
diff --git a/src/components/TestimonialCard.tsx b/src/components/TestimonialCard.tsx
new file mode 100644
index 0000000..99b4705
--- /dev/null
+++ b/src/components/TestimonialCard.tsx
@@ -0,0 +1,25 @@
+import { Card } from "@/components/ui/card";
+import { Quote } from "lucide-react";
+
+interface TestimonialCardProps {
+  name: string;
+  comment: string;
+  date: string;
+}
+
+export const TestimonialCard = ({ name, comment, date }: TestimonialCardProps) => {
+  return (
+    <Card className="p-6 bg-card shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-elevated)] transition-[var(--transition-smooth)] border-border">
+      <div className="flex items-start gap-4">
+        <Quote className="w-8 h-8 text-accent flex-shrink-0 mt-1" />
+        <div className="flex-1">
+          <p className="text-foreground mb-4 leading-relaxed">{comment}</p>
+          <div className="flex items-center justify-between">
+            <p className="font-semibold text-primary">{name}</p>
+            <p className="text-sm text-muted-foreground">{date}</p>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
diff --git a/src/index.css b/src/index.css
index 4844bbd..77bf409 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,34 +9,40 @@ All colors MUST be HSL.
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 220 15% 20%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 220 15% 20%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 220 15% 20%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 215 70% 25%;
+    --primary-foreground: 0 0% 100%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 145 50% 45%;
+    --secondary-foreground: 0 0% 100%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 20% 96%;
+    --muted-foreground: 220 15% 50%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 25 95% 55%;
+    --accent-foreground: 0 0% 100%;
 
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 100%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 215 20% 88%;
+    --input: 215 20% 88%;
+    --ring: 215 70% 25%;
 
-    --radius: 0.5rem;
+    --radius: 0.75rem;
+    
+    --gradient-hero: linear-gradient(135deg, hsl(215 70% 25%) 0%, hsl(215 60% 35%) 100%);
+    --gradient-cta: linear-gradient(135deg, hsl(25 95% 55%) 0%, hsl(25 95% 48%) 100%);
+    --shadow-elevated: 0 10px 40px -10px hsl(215 70% 25% / 0.2);
+    --shadow-card: 0 4px 20px -4px hsl(215 70% 25% / 0.1);
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
     --sidebar-background: 0 0% 98%;
 
@@ -56,33 +62,38 @@ All colors MUST be HSL.
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --background: 220 25% 8%;
+    --foreground: 0 0% 95%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 220 20% 12%;
+    --card-foreground: 0 0% 95%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 220 20% 12%;
+    --popover-foreground: 0 0% 95%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 215 70% 60%;
+    --primary-foreground: 0 0% 100%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 145 50% 50%;
+    --secondary-foreground: 0 0% 100%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 220 20% 16%;
+    --muted-foreground: 220 10% 65%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 25 95% 58%;
+    --accent-foreground: 0 0% 100%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 50%;
+    --destructive-foreground: 0 0% 100%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --border: 220 20% 20%;
+    --input: 220 20% 20%;
+    --ring: 215 70% 60%;
+    
+    --gradient-hero: linear-gradient(135deg, hsl(215 70% 20%) 0%, hsl(215 60% 30%) 100%);
+    --gradient-cta: linear-gradient(135deg, hsl(25 95% 58%) 0%, hsl(25 95% 50%) 100%);
+    --shadow-elevated: 0 10px 40px -10px hsl(0 0% 0% / 0.4);
+    --shadow-card: 0 4px 20px -4px hsl(0 0% 0% / 0.3);
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 7130b54..0eecaab 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,12 +1,176 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+import { Button } from "@/components/ui/button";
+import { TestimonialCard } from "@/components/TestimonialCard";
+import { PetitionForm } from "@/components/PetitionForm";
+import { StatCard } from "@/components/StatCard";
+import { Home, Users, Car, AlertTriangle } from "lucide-react";
+import carparkHero from "@/assets/carpark-hero.jpg";
 
 const Index = () => {
+  const testimonials = [
+    {
+      name: "Sarah Mitchell",
+      comment: "I'm a single mother with two young children. Since losing Victoria Way Carpark, I have to park 15 minutes away and carry heavy shopping bags while holding my toddler's hand. It's unsafe and exhausting.",
+      date: "2 days ago",
+    },
+    {
+      name: "David Chen",
+      comment: "I work night shifts at the hospital. Coming home at 2am to find no parking near my flat at Enterprise Place is terrifying. I've been followed twice walking from distant parking spots.",
+      date: "5 days ago",
+    },
+    {
+      name: "Margaret Thompson",
+      comment: "I'm 72 and disabled. This carpark was my lifeline - now I struggle to visit my daughter at Enterprise Place. The council needs to understand what they've taken from us.",
+      date: "1 week ago",
+    },
+  ];
+
+  const scrollToPetition = () => {
+    document.getElementById("petition")?.scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
-      </div>
+    <div className="min-h-screen bg-background">
+      {/* Hero Section */}
+      <section className="relative h-[600px] flex items-center justify-center text-center overflow-hidden">
+        <div 
+          className="absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url(${carparkHero})` }}
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/70" />
+        
+        <div className="relative z-10 max-w-4xl mx-auto px-6">
+          <h1 className="text-5xl md:text-6xl font-bold text-primary-foreground mb-6">
+            Save Victoria Way Carpark
+          </h1>
+          <p className="text-xl md:text-2xl text-primary-foreground/90 mb-8">
+            Don't let Woking Council take away the only parking solution for Enterprise Place residents
+          </p>
+          <Button 
+            size="lg" 
+            onClick={scrollToPetition}
+            className="bg-gradient-to-r from-accent to-accent/90 hover:from-accent/90 hover:to-accent/80 text-accent-foreground text-lg px-8 py-6 shadow-[var(--shadow-elevated)] font-semibold"
+          >
+            Sign the Petition Now
+          </Button>
+        </div>
+      </section>
+
+      {/* Impact Stats */}
+      <section className="py-16 px-6 bg-muted">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <StatCard icon={Home} number="120+" label="Affected Households" />
+            <StatCard icon={Users} number="300+" label="Residents Impacted" />
+            <StatCard icon={Car} number="0" label="Alternative Parking Nearby" />
+            <StatCard icon={AlertTriangle} number="Daily" label="Safety Concerns" />
+          </div>
+        </div>
+      </section>
+
+      {/* Problem Statement */}
+      <section className="py-16 px-6">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-4xl font-bold text-primary mb-8 text-center">
+            The Crisis Facing Enterprise Place Residents
+          </h2>
+          <div className="prose prose-lg max-w-none text-foreground space-y-6">
+            <p className="text-lg leading-relaxed">
+              Victoria Way Carpark has been the primary parking facility for Enterprise Place residents for years. 
+              Now, with its closure, over 300 residents face daily hardship, safety risks, and quality of life degradation.
+            </p>
+            <div className="bg-card p-8 rounded-lg shadow-[var(--shadow-card)] border border-border">
+              <h3 className="text-2xl font-semibold text-primary mb-4">The Real Impact:</h3>
+              <ul className="space-y-3 text-foreground">
+                <li className="flex items-start">
+                  <span className="text-accent font-bold mr-3">•</span>
+                  <span>Parents struggle to transport children safely to and from home</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent font-bold mr-3">•</span>
+                  <span>Elderly and disabled residents can no longer visit family easily</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent font-bold mr-3">•</span>
+                  <span>Night shift workers face safety risks walking from distant parking</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent font-bold mr-3">•</span>
+                  <span>Emergency vehicle access has become complicated</span>
+                </li>
+                <li className="flex items-start">
+                  <span className="text-accent font-bold mr-3">•</span>
+                  <span>Property values are declining as parking becomes impossible</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-16 px-6 bg-muted">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-4xl font-bold text-primary mb-4 text-center">
+            Hear from Your Constituents
+          </h2>
+          <p className="text-xl text-muted-foreground mb-12 text-center">
+            Real stories from real residents affected by this decision
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {testimonials.map((testimonial, index) => (
+              <TestimonialCard key={index} {...testimonial} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Petition Form */}
+      <section id="petition" className="py-16 px-6">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-4xl font-bold text-primary mb-4">
+            Add Your Voice
+          </h2>
+          <p className="text-xl text-muted-foreground mb-12">
+            Sign the petition to urge Woking Council to save Victoria Way Carpark or provide alternative parking for Enterprise Place residents
+          </p>
+          <PetitionForm />
+        </div>
+      </section>
+
+      {/* Call to Action */}
+      <section className="py-16 px-6 bg-gradient-to-r from-primary to-primary/90 text-primary-foreground">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl font-bold mb-4">
+            Every Signature Counts
+          </h2>
+          <p className="text-lg mb-8 text-primary-foreground/90">
+            Help us show Woking Council that Victoria Way Carpark is essential to our community
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button 
+              size="lg"
+              onClick={scrollToPetition}
+              className="bg-gradient-to-r from-accent to-accent/90 hover:from-accent/90 hover:to-accent/80 text-accent-foreground font-semibold shadow-[var(--shadow-elevated)]"
+            >
+              Sign the Petition
+            </Button>
+            <Button 
+              size="lg"
+              variant="outline"
+              className="bg-primary-foreground text-primary hover:bg-primary-foreground/90 border-primary-foreground font-semibold"
+            >
+              Share This Campaign
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-8 px-6 bg-card border-t border-border">
+        <div className="max-w-6xl mx-auto text-center text-muted-foreground">
+          <p>© 2025 Save Victoria Way Carpark Campaign | For the residents of Enterprise Place, Woking</p>
+        </div>
+      </footer>
     </div>
   );
 };
