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