From e8f72687c49dee6bcd79f7efe22a9ca8209d4954 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Thu, 4 Jun 2026 09:17:00 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 91 ++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/components/layout/Footer.tsx

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..156a5cb
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,91 @@
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
+
+export default function Footer() {
+  return (
+    <footer className="bg-[#111827] text-white py-16">
+      <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+        {/* Brand */}
+        <div className="space-y-4">
+          <h3 className="text-3xl font-bold font-heading text-[#8b5a3c]">Kapa Roast</h3>
+          <p className="text-gray-300 text-sm leading-relaxed">
+            Roasting single-origin African beans in the heart of Cape Town. 
+            Every batch tells a story of origin, care, and community.
+          </p>
+          <div className="flex space-x-4 pt-2">
+            <a href="#" aria-label="Facebook" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
+              <Globe className="h-5 w-5" />
+            </a>
+            <a href="#" aria-label="Instagram" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
+              <Camera className="h-5 w-5" />
+            </a>
+            <a href="#" aria-label="X" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
+              <X className="h-5 w-5" />
+            </a>
+            <a href="#" aria-label="TikTok" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
+              <Video className="h-5 w-5" />
+            </a>
+            <a href="#" aria-label="WhatsApp" className="text-gray-400 hover:text-[#16a34a] transition-colors duration-200">
+              <MessageCircle className="h-5 w-5" />
+            </a>
+          </div>
+        </div>
+
+        {/* Quick Links */}
+        <div>
+          <h4 className="text-lg font-semibold font-heading mb-4 text-white">Browse</h4>
+          <ul className="space-y-2 text-sm text-gray-400">
+            <li><a href="/" className="hover:text-[#ea580c] transition-colors duration-200">Home</a></li>
+            <li><a href="#menu" className="hover:text-[#ea580c] transition-colors duration-200">Menu</a></li>
+            <li><a href="#gallery" className="hover:text-[#ea580c] transition-colors duration-200">Gallery</a></li>
+            <li><a href="#contact" className="hover:text-[#ea580c] transition-colors duration-200">Contact</a></li>
+          </ul>
+        </div>
+
+        {/* Contact */}
+        <div>
+          <h4 className="text-lg font-semibold font-heading mb-4 text-white">Get in Touch</h4>
+          <ul className="space-y-3 text-sm text-gray-400">
+            <li className="flex items-start gap-2">
+              <MapPin className="h-4 w-4 mt-0.5 text-[#8b5a3c]" />
+              <span>14 Roeland Street<br />Cape Town 8001</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <Phone className="h-4 w-4 text-[#8b5a3c]" />
+              <a href="tel:+27210000000" className="hover:text-[#ea580c] transition-colors duration-200">+27 21 000 0000</a>
+            </li>
+            <li className="flex items-center gap-2">
+              <Mail className="h-4 w-4 text-[#8b5a3c]" />
+              <a href="mailto:hello@kaparoast.co.za" className="hover:text-[#ea580c] transition-colors duration-200">hello@kaparoast.co.za</a>
+            </li>
+          </ul>
+        </div>
+
+        {/* Hours */}
+        <div>
+          <h4 className="text-lg font-semibold font-heading mb-4 text-white">Roastery Hours</h4>
+          <ul className="space-y-2 text-sm text-gray-400">
+            <li className="flex justify-between">
+              <span>Monday–Friday</span>
+              <span>7am – 5pm</span>
+            </li>
+            <li className="flex justify-between">
+              <span>Saturday</span>
+              <span>8am – 3pm</span>
+            </li>
+            <li className="flex justify-between">
+              <span>Sunday</span>
+              <span>9am – 1pm</span>
+            </li>
+          </ul>
+          <p className="mt-4 text-xs text-gray-500">
+            Public holidays may vary — call ahead.
+          </p>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-gray-700 text-center text-sm text-gray-400">
+        <p>&copy; {new Date().getFullYear()} Kapa Roast. All rights reserved.</p>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file