Deploy

2026-07-14 17:42:06 +00:00
parent 4a5ae02d05
commit d371f96fcb
1 changed files with 121 additions and 0 deletions
@@ -0,0 +1,121 @@
+import { Camera, Clock, Globe, Mail, MapPin, Phone } from 'lucide-react'
+
+import Link from 'next/link'
+
+const quickLinks = [
+  { label: 'Home', href: '/' },
+  { label: 'Five Room Homestead', href: '#rooms' },
+  { label: 'Franschhoek Heritage Story', href: '#our-story' },
+  { label: 'Farmstead Gallery', href: '#gallery' },
+  { label: 'Book Your Farmstay', href: '#book-now' },
+  { label: 'Find Die Opstal', href: '#find-us' },
+]
+
+const socialLinks = [
+  { icon: Globe, href: '#', label: 'Facebook' },
+  { icon: Camera, href: '#', label: 'Instagram' },
+]
+
+export default function Footer() {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="bg-[#36454F] text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+          {/* Contact */}
+          <div>
+            <h4 className="text-xl font-heading mb-5 text-[#6b8e23]">Die Opstal</h4>
+            <div className="space-y-3">
+              <a
+                href="https://maps.google.com/?q=Die+Opstal+Franschhoek"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-start gap-3 group hover:text-[#6b8e23] transition-all duration-200 ease-out"
+              >
+                <MapPin className="w-5 h-5 mt-0.5 shrink-0" />
+                <span>5 Die Opstal Road, Franschhoek, 7690, South Africa</span>
+              </a>
+              <a
+                href="tel:+27218761234"
+                className="flex items-center gap-3 group hover:text-[#6b8e23] transition-all duration-200 ease-out"
+              >
+                <Phone className="w-5 h-5 shrink-0" />
+                <span>+27 21 876 1234</span>
+              </a>
+              <a
+                href="mailto:stay@dieopstal.co.za"
+                className="flex items-center gap-3 group hover:text-[#6b8e23] transition-all duration-200 ease-out"
+              >
+                <Mail className="w-5 h-5 shrink-0" />
+                <span>stay@dieopstal.co.za</span>
+              </a>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="text-xl font-heading mb-5 text-[#6b8e23]">Explore</h4>
+            <ul className="space-y-2.5">
+              {quickLinks.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-white/80 hover:text-white hover:underline decoration-[#6b8e23] underline-offset-4 transition-all duration-200 ease-out"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Hours */}
+          <div>
+            <h4 className="text-xl font-heading mb-5 text-[#6b8e23]">Farm Rhythms</h4>
+            <ul className="space-y-2.5">
+              <li className="flex items-start gap-2">
+                <Clock className="w-5 h-5 mt-0.5 shrink-0 text-[#6b8e23]" />
+                <span>Breakfast 7:30 – 10:00 am daily</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <Clock className="w-5 h-5 mt-0.5 shrink-0 text-[#6b8e23]" />
+                <span>Check‑in from 2:00 pm</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <Clock className="w-5 h-5 mt-0.5 shrink-0 text-[#6b8e23]" />
+                <span>Check‑out by 11:00 am</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <Clock className="w-5 h-5 mt-0.5 shrink-0 text-[#6b8e23]" />
+                <span>Garden open until dusk</span>
+              </li>
+            </ul>
+          </div>
+
+          {/* Social & Copyright */}
+          <div className="flex flex-col justify-between">
+            <div>
+              <h4 className="text-xl font-heading mb-5 text-[#6b8e23]">Stay Close</h4>
+              <div className="flex gap-4 mb-8">
+                {socialLinks.map(({ icon: Icon, href, label }) => (
+                  <a
+                    key={label}
+                    href={href}
+                    aria-label={label}
+                    className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-[#6b8e23] hover:text-white transition-all duration-200 ease-out"
+                  >
+                    <Icon className="w-5 h-5" />
+                  </a>
+                ))}
+              </div>
+            </div>
+            <p className="text-white/60 text-sm">
+              © {year} Die Opstal. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}