diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..98579b0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,19 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
+import Contact from './pages/Contact';
+import Policy from './pages/Policy';
+import Terms from './pages/Terms';
 
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/contact" element={<Contact />} />
+        <Route path="/policy" element={<Policy />} />
+        <Route path="/terms" element={<Terms />} />
       </Route>
     </Routes>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/sections/MenuSection.tsx b/src/components/sections/MenuSection.tsx
new file mode 100644
index 0000000..6b2ab9e
--- /dev/null
+++ b/src/components/sections/MenuSection.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import Card from "@/components/ui/Card"
+import TextAnimation from "@/components/ui/TextAnimation"
+
+export default function MenuSection() {
+  const items = [
+    { title: "Espresso", description: "Rich, bold, and smooth.", price: "$3.50" },
+    { title: "Cappuccino", description: "Perfectly steamed milk.", price: "$4.50" },
+    { title: "Latte", description: "Creamy and comforting.", price: "$4.75" },
+    { title: "Mocha", description: "Decadent chocolate blend.", price: "$5.00" },
+    { title: "Americano", description: "Espresso with hot water.", price: "$3.75" },
+    { title: "Flat White", description: "Velvety microfoam finish.", price: "$4.25" },
+  ]
+
+  return (
+    <section id="menu" className="py-24 bg-background">
+      <div className="max-w-6xl mx-auto px-6">
+        <TextAnimation 
+          tag="h2" 
+          text="Our Menu" 
+          variant="fade-blur" 
+          className="text-4xl font-bold text-foreground mb-12 text-center luxury-serif" 
+        />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {items.map((item, i) => (
+            <Card key={i} className="p-6 flex flex-col gap-4">
+              <h3 className="text-xl font-bold text-foreground">{item.title}</h3>
+              <p className="text-muted-foreground">{item.description}</p>
+              <span className="text-lg font-bold text-primary-cta">{item.price}</span>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..e93c0d7
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,43 @@
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
+import ChecklistTimeline from "@/components/ui/ChecklistTimeline";
+
+export default function About() {
+  return (
+    <div className="bg-background text-foreground">
+      <HeroSplit
+        tag="About Us"
+        title="Crafting Coffee with Passion"
+        description="We are a team of coffee lovers dedicated to the perfect brew. From the farm to your cup, we ensure quality in every step."
+        primaryButton={{ text: "Our Menu", href: "/menu" }}
+        secondaryButton={{ text: "Contact Us", href: "/contact" }}
+        imageSrc="https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=1000&auto=format&fit=crop"
+      />
+      <AboutFeaturesSplit
+        tag="Our Journey"
+        title="From Bean to Cup"
+        description="We source the finest beans and roast them with care, ensuring every cup tells a story of quality and community."
+        items={[
+          { icon: "coffee", title: "Quality Beans", description: "Sourced from the best farms." },
+          { icon: "users", title: "Community", description: "Building connections." },
+          { icon: "award", title: "Excellence", description: "Award-winning roasts." }
+        ]}
+        imageSrc="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=1000&auto=format&fit=crop"
+      />
+      <section className="py-24 bg-background">
+        <div className="max-w-6xl mx-auto px-6">
+          <ChecklistTimeline
+            heading="Our Milestones"
+            subheading="A journey of passion and coffee."
+            items={[
+              { label: "2018", detail: "Founded in a small garage." },
+              { label: "2020", detail: "Expanded to our first cafe." },
+              { label: "2024", detail: "Launched our online store." }
+            ]}
+            completedLabel="Achieved"
+          />
+        </div>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
new file mode 100644
index 0000000..8e861d7
--- /dev/null
+++ b/src/pages/Contact.tsx
@@ -0,0 +1,35 @@
+import Card from "@/components/ui/Card";
+import Input from "@/components/ui/Input";
+import Textarea from "@/components/ui/Textarea";
+import Button from "@/components/ui/Button";
+import Label from "@/components/ui/Label";
+import GridLinesBackground from "@/components/ui/GridLinesBackground";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+export default function Contact() {
+  return (
+    <div className="relative min-h-screen pt-24 pb-24">
+      <GridLinesBackground position="absolute" />
+      <div className="max-w-2xl mx-auto px-6">
+        <Card className="p-8 md:p-12">
+          <TextAnimation text="Contact Us" variant="fade-blur" tag="h1" className="text-4xl font-bold mb-8" />
+          <form className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Your name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="Your email" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="message">Message</Label>
+              <Textarea id="message" placeholder="How can we help?" rows={4} />
+            </div>
+            <Button text="Send Message" variant="primary" className="w-full" />
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Policy.tsx b/src/pages/Policy.tsx
new file mode 100644
index 0000000..21be566
--- /dev/null
+++ b/src/pages/Policy.tsx
@@ -0,0 +1,31 @@
+import PolicyContent from "@/components/sections/legal/PolicyContent";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function Policy() {
+  return (
+    <div className="min-h-screen bg-background py-24">
+      <ScrollReveal>
+        <PolicyContent
+          title="Privacy Policy"
+          subtitle="Last updated: October 2024"
+          sections={[
+            {
+              heading: "Information We Collect",
+              content: [
+                { type: "paragraph", text: "We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us for support." },
+                { type: "list", items: ["Name and contact information", "Payment details", "Order history"] }
+              ]
+            },
+            {
+              heading: "How We Use Your Information",
+              content: [
+                { type: "paragraph", text: "We use the information we collect to provide, maintain, and improve our services, process transactions, and communicate with you." },
+                { type: "numbered-list", items: ["To process your orders", "To send you updates and marketing communications", "To improve our website and services"] }
+              ]
+            }
+          ]}
+        />
+      </ScrollReveal>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Terms.tsx b/src/pages/Terms.tsx
new file mode 100644
index 0000000..2328d13
--- /dev/null
+++ b/src/pages/Terms.tsx
@@ -0,0 +1,30 @@
+import PolicyContent from "@/components/sections/legal/PolicyContent";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function Terms() {
+  return (
+    <div className="min-h-screen bg-background py-24">
+      <ScrollReveal>
+        <PolicyContent
+          title="Terms of Service"
+          subtitle="Last updated: October 2024"
+          sections={[
+            {
+              heading: "Acceptance of Terms",
+              content: [
+                { type: "paragraph", text: "By accessing or using our website, you agree to be bound by these Terms of Service and all applicable laws and regulations." }
+              ]
+            },
+            {
+              heading: "Use License",
+              content: [
+                { type: "paragraph", text: "Permission is granted to temporarily download one copy of the materials on our website for personal, non-commercial transitory viewing only." },
+                { type: "list", items: ["Do not modify or copy the materials", "Do not use the materials for any commercial purpose", "Do not attempt to decompile or reverse engineer any software"] }
+              ]
+            }
+          ]}
+        />
+      </ScrollReveal>
+    </div>
+  );
+}
\ No newline at end of file