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>
  )
 }