Update app/menu/page.tsx

app/menu/page.tsx

@@ -0,0 +1,90 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Footer } from "@/components/footer";
+import { Phone } from "lucide-react";
+
+const menuCategories = [
+  {
+    title: "Signature Curry Goat",
+    items: [
+      { name: "Curry Goat (Small)", price: "$1,000" },
+      { name: "Curry Goat (Large)", price: "$1,500" },
+      { name: "Mixed (Small)", price: "$1,200" },
+      { name: "Mixed (Large)", price: "$1,600" },
+    ]
+  },
+  {
+    title: "Roti",
+    items: [
+      { name: "Roti", price: "$150" },
+    ]
+  },
+  {
+    title: "Chicken Dishes",
+    items: [
+      { name: "Fry Chicken", price: "Small $800 | Large $1,200" },
+      { name: "Barbe Fry Chicken", price: "Small $950 | Large $1,300" },
+      { name: "Sweet & Sour Chicken", price: "Small $950 | Large $1,300" },
+      { name: "Curry Chicken", price: "Small $950 | Large $1,300" },
+    ]
+  },
+  {
+    title: "Traditional Dishes",
+    items: [
+      { name: "Curry Tripe & Bean", price: "Small $950 | Large $1,300" },
+      { name: "Cow Head & Bean", price: "Small $950 | Large $1,300" },
+      { name: "Brown Stew Slice Fish", price: "$1,600" },
+    ]
+  },
+  {
+    title: "Soups",
+    items: [
+      { name: "Goat Head Soup", price: "Small $200 | Medium $400" },
+    ]
+  }
+];
+
+export default function MenuPage() {
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <div className="bg-[#3d2b1f] py-20 text-white">
+        <Container>
+          <Heading className="text-center text-[#ffcc00]">Our Menu</Heading>
+          <Subheading className="text-center text-neutral-200">Authentic flavors, generous portions.</Subheading>
+        </Container>
+      </div>
+
+      <Container className="py-16">
+        <div className="max-w-4xl mx-auto space-y-12">
+          {menuCategories.map((category, idx) => (
+            <div key={idx} className="bg-white p-8 rounded-2xl shadow-sm border border-neutral-200">
+              <h3 className="text-2xl font-bold text-[#3d2b1f] border-b-2 border-[#ffcc00] pb-2 mb-6">
+                {category.title}
+              </h3>
+              <div className="space-y-4">
+                {category.items.map((item, i) => (
+                  <div key={i} className="flex justify-between items-center gap-4">
+                    <span className="font-medium text-lg text-neutral-800">{item.name}</span>
+                    <div className="flex-grow border-b border-dotted border-neutral-300 h-4"></div>
+                    <span className="font-bold text-[#ff8c00] whitespace-nowrap">{item.price}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+          
+          <div className="text-center pt-8">
+            <Button size="lg" className="bg-[#ff8c00] hover:bg-[#e67e00] text-white px-10" asChild>
+              <a href="tel:1-876-665-5098">
+                <Phone className="mr-2 h-5 w-5" /> Call to Order Now
+              </a>
+            </Button>
+          </div>
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}