Deploy

2026-08-03 11:42:10 +00:00
parent 1e20a8cf50
commit 44ba1177d5
1 changed files with 34 additions and 0 deletions
@@ -0,0 +1,34 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { Card, CardContent } from '@/components/ui/Card'
+
+export default function BookNowSection() {
+  return (
+    <section data-vula-section="booknow" id="book-now" className="bg-[#F0F8FF] py-20">
+      <div className="mx-auto max-w-7xl px-4">
+        <Card className="flex flex-col overflow-hidden rounded-xl bg-white shadow-md md:flex-row">
+          <div className="relative h-72 w-full md:h-auto md:w-1/3 md:min-h-full">
+            <Image
+              src="https://images.pexels.com/photos/11360227/pexels-photo-11360227.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="Stylist at work at Zama Salon in Fourways"
+              fill
+              sizes="(max-width: 768px) 100vw, 33vw"
+              className="object-cover"
+            />
+          </div>
+          <CardContent className="flex flex-1 flex-col justify-center p-5 md:p-10">
+            <p className="mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[#00A8CC]">Fourways, Johannesburg</p>
+            <h2 className="font-sora text-3xl font-bold text-[#1A2B3C] md:text-4xl">Ready for your transformation?</h2>
+            <p className="mt-4 max-w-[44ch] text-[#1A2B3C]/70">Precision cuts, colour, keratin treatments, braids and nail artistry - book your chair and let our stylists handle the rest.</p>
+            <div className="mt-8 flex flex-wrap items-center gap-4">
+              <Link href="#booking" className="inline-flex items-center justify-center rounded-full bg-[#FFD700] px-8 py-4 text-base font-semibold text-black transition-all duration-200 ease-out hover:bg-[#FFD700]/90">
+                Book your appointment
+              </Link>
+              <span className="text-sm text-[#1A2B3C]/60">or call <a href="tel:+27825550199" className="font-semibold text-[#0077BE] hover:text-[#00A8CC]">+27 82 555 0199</a></span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  )
+}