Deploy

2026-07-14 17:42:08 +00:00
parent 21f4d2902d
commit 62e742f025
1 changed files with 62 additions and 0 deletions
@@ -0,0 +1,62 @@
 import Image from 'next/image'
 import Button from '@/components/ui/Button'
 export default function FranschhoekHeritageStorySection() {
  return (
    <section data-vula-section="franschhoekheritagestory" id="our-story" className="py-20 bg-white">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="flex flex-col lg:flex-row gap-12 items-center">
          {/* Text */}
          <div className="flex-1 max-w-lg">
            <span className="inline-block text-sm uppercase tracking-widest text-[#6b8e23] mb-2">Die Opstal · Since 1927</span>
            <h2 className="text-3xl md:text-5xl font-bold text-[#2c331f] mb-6">
              From neglect to nurture: a 1920s story.
            </h2>
            <p className="text-base text-[#2c331f]/80 leading-relaxed mb-4">
              When we first saw Die Opstal, the gables were crumbling, the orchard overgrown,
              and the yellowwood floors buried under decades of dust. We spent two years
              restoring every door frame, every window sash, and every fireplace — keeping
              the soul of the original homestead intact.
            </p>
            <p className="text-base text-[#2c331f]/80 leading-relaxed mb-4">
              Today, breakfast is made from free-range eggs laid by our own chickens, peaches
              from the orchard, and sourdough baked in the wood‑fired oven. The hens scratch
              under the fig trees while guests sip coffee on the stoep, watching the mist burn
              off the Franschhoek mountains.
            </p>
            <p className="text-sm text-[#36454F] font-medium">
              This is not a hotel. It is a home we are honoured to share.
            </p>
            <div className="mt-6">
              <Button className="bg-[#6b8e23] hover:bg-[#5a7a1d] text-white rounded-full px-8 py-3">
                <a href="#book-now">Come experience the rhythm</a>
              </Button>
            </div>
          </div>
          {/* Image with floating chip */}
          <div className="flex-1 relative">
            <div
              className="overflow-hidden"
              style={{ borderRadius: '999px 999px 24px 24px' }}
            >
              <Image
                src="https://images.pexels.com/photos/7696509/pexels-photo-7696509.jpeg?auto=compress&cs=tinysrgb&h=350"
                alt="Restored Cape Dutch homestead with mountain backdrop"
                width={600}
                height={400}
                className="object-cover w-full h-auto"
              />
            </div>
            {/* Floating chip */}
            <div className="absolute -bottom-4 -left-4 bg-white rounded-[22px] shadow-2xl p-4 max-w-[200px]">
              <p className="text-sm font-semibold text-[#36454F]">Farm fresh every day</p>
              <p className="text-xs text-[#2c331f] mt-1">Free-range eggs and orchard fruit daily.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
 }