Deploy

2026-07-25 19:05:20 +00:00
parent ec44429c66
commit 377c81b8fa
1 changed files with 68 additions and 0 deletions
@@ -0,0 +1,68 @@
 import Image from "next/image"
 import Link from "next/link"
 import Button from "@/components/ui/Button"
 export default function OurStorySection() {
  return (
    <section data-vula-section="ourstory" id="our-story" className="py-24 bg-[#1e1a16]">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          {/* Images */}
          <div className="w-full lg:w-1/2 relative">
            <div className="relative h-[400px] lg:h-[500px] overflow-hidden rounded-lg border border-[#403630]">
              <Image
                src="https://images.pexels.com/photos/15163987/pexels-photo-15163987.jpeg?auto=compress&cs=tinysrgb&h=350"
                alt="Maasai elder sharing stories at a traditional manyatta"
                fill
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#17120f]/80 to-transparent" />
            </div>
            <div className="absolute -bottom-6 -right-6 w-48 h-48 lg:w-64 lg:h-64 overflow-hidden rounded-lg border-2 border-[#d4af37] shadow-2xl">
              <Image
                src="https://images.pexels.com/photos/4485367/pexels-photo-4485367.jpeg?auto=compress&cs=tinysrgb&h=350"
                alt="Handcrafted Maasai beadwork detail on a suite door"
                fill
                sizes="(max-width: 1024px) 30vw, 20vw"
                className="object-cover"
              />
            </div>
          </div>
          {/* Text */}
          <div className="w-full lg:w-1/2 space-y-6">
            <div className="flex items-center gap-4 mb-4">
              <span className="block w-14 h-px bg-[#d4af37]" />
              <span className="text-[10px] tracking-[0.25em] uppercase text-[#d4af37] font-sans">Our Roots</span>
            </div>
            <h2 className="text-4xl md:text-5xl font-light font-serif text-[#eeeae7]">
              Born from a <span className="italic text-[#d4af37]">friendship</span> with the land
            </h2>
            <p className="text-[#eeeae7]/70 leading-relaxed">
              Masai Suites began with a decade of living among the Maasai — learning the rhythm of the Rift Valley, 
              the weight of a beaded necklace, the story in a single acacia tree. Our founder, a conservation architect, 
              partnered with Maasai elders to design six suites that honor the landscape without overwhelming it.
            </p>
            <p className="text-[#eeeae7]/70 leading-relaxed">
              Every timber beam was sourced from sustainably managed forests in the Aberdares. 
              Every woven ceiling echoes a manyatta roof. Our community partnership ensures that 15% of every booking 
              funds local schools and water projects in the adjacent Olkiramatian group ranch.
            </p>
            <div className="flex flex-wrap gap-4 pt-4">
              <Link href="#story">
                <Button variant="outline" className="border-[#d4af37] text-[#d4af37] hover:bg-[#d4af37]/10">
                  Read the Full Story
                </Button>
              </Link>
              <Link href="/booking">
                <Button variant="default" className="bg-[#8b5a3c] hover:bg-[#7a4d34] text-[#eeeae7] border border-[#d4af37]/30">
                  Begin Your Journey
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
 }