Deploy

2026-06-23 08:47:38 +00:00
parent 84a98eb26e
commit 08322cb06f
1 changed files with 55 additions and 0 deletions
@@ -0,0 +1,55 @@
 import Image from "next/image"
 import Link from "next/link"
 import Button from "@/components/ui/Button"
 import { CalendarDays, UtensilsCrossed } from 'lucide-react'
 export default function ReserveATableSection() {
  return (
    <section data-vula-section="reserveatable" id="reserve-a-table" className="bg-white py-20 px-6">
      <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
        <div className="relative h-80 md:h-96 overflow-hidden rounded-lg">
          <Image
            src="https://images.pexels.com/photos/5953552/pexels-photo-5953552.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
            alt="Beautifully set table at Pino's Italian Restaurant"
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
            className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
          />
        </div>
        <div>
          <div className="flex items-center gap-2 text-[#d4af37] mb-2">
            <UtensilsCrossed className="w-5 h-5" />
            <span className="text-sm uppercase tracking-widest font-semibold">Family-Style Hospitality</span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-[#111827] mb-4 leading-tight">
            Reserve Your Table
          </h2>
          <p className="text-lg text-gray-600 mb-6">
            Whether it&apos;s a romantic date night or a lively family dinner, we&apos;re ready to welcome
            you with authentic Italian warmth. Book your table in seconds through our easy online system.
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <Link
              href="https://www.opentable.com/restref/client/?restref=123456&lang=en-US&ot_source=Restaurant%20website"
              target="_blank"
              rel="noopener noreferrer"
            >
              <Button variant="default" size="lg" className="flex items-center gap-2 bg-[#dc2626] text-white hover:opacity-90">
                <CalendarDays className="w-5 h-5" />
                Make a Reservation
              </Button>
            </Link>
            <Link href="/order">
              <Button variant="secondary" size="lg" className="border-2 border-[#d4af37] text-[#d4af37] hover:bg-[#d4af37] hover:text-white">
                Order Takeout
              </Button>
            </Link>
          </div>
          <p className="text-sm text-gray-500 mt-4">
            Call us at <a href="tel:+13125550100" className="text-[#dc2626] underline-offset-2 hover:underline">(312) 555-0100</a> for large parties or special events.
          </p>
        </div>
      </div>
    </section>
  )
 }