Deploy

src/components/sections/NtofontofoVisionSection.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import Button from '@/components/ui/Button'
+import Link from 'next/link'
+
+export default function NtofontofoVisionSection() {
+  return (
+    <section data-vula-section="ntofontofovision" id="home-away-vision" className="py-20 bg-[#FDF6EC]">
+      <div className="container mx-auto px-4 max-w-4xl text-center">
+        <h2 className="text-3xl lg:text-4xl font-bold text-[#2C1810] mb-8">
+          The Spirit of Ntofontofo
+        </h2>
+        <div className="relative bg-white rounded-xl shadow-[var(--shadow-surface)] p-8 lg:p-12 border border-[#E67E22]/20">
+          <div className="absolute -top-4 left-1/2 -translate-x-1/2">
+            <span className="inline-block bg-[#C0392B] text-white w-8 h-8 rounded-full flex items-center justify-center text-lg font-bold">
+              &ldquo;
+            </span>
+          </div>
+          <p className="text-[#2C1810]/80 text-lg leading-relaxed mb-6">
+            Our vision is to be synonymous with the highest standards of service, with staff equipped to welcome guests from 
+            all walks of life. We offer a nurturing, dignified escape where modern comfort meets the quiet magic of the bushveld.
+          </p>
+          <blockquote className="border-l-4 border-[#F1C40F] pl-4 my-6 text-left italic text-[#2C1810]/90">
+            "To provide excellent and efficient professional services within safe, affordable and accessible facilities \n            that exceed guest expectations — without ever compromising on quality."
+          </blockquote>
+          <p className="text-[#2C1810]/70 mb-8">
+            — Loyiso & Sarah, your hosts at KwaNtofontofo
+          </p>
+          <Link href="/booking">
+            <Button className="bg-[#C0392B] text-white hover:opacity-90 transition-all duration-200">
+              Come and Feel the Spirit of Ntofontofo
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}