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