From 19984b71f8b1ced4addfcae4e48a1ea189f918fc Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 9 Mar 2026 05:45:58 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 175 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 165 insertions(+), 10 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e6822dd..2aeb7b3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,9 +11,48 @@ import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCar import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia"; import ContactCenter from "@/components/sections/contact/ContactCenter"; import FooterBase from "@/components/sections/footer/FooterBase"; -import { Sparkles, Award, Flame, Globe } from "lucide-react"; +import { Sparkles, Award, Flame, Globe, MessageCircle, Calendar, Phone } from "lucide-react"; +import { useState, useEffect } from "react"; export default function LandingPage() { + const [isSticky, setIsSticky] = useState(false); + const [showAppointmentForm, setShowAppointmentForm] = useState(false); + const [selectedDate, setSelectedDate] = useState(""); + const [selectedTime, setSelectedTime] = useState(""); + const [guestCount, setGuestCount] = useState("2"); + const [email, setEmail] = useState(""); + const [name, setName] = useState(""); + + useEffect(() => { + const handleScroll = () => { + setIsSticky(window.scrollY > 100); + }; + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const handleReserveClick = () => { + setShowAppointmentForm(true); + }; + + const handleAppointmentSubmit = () => { + if (name && email && selectedDate && selectedTime) { + alert(`Reservation confirmed for ${name} on ${selectedDate} at ${selectedTime} for ${guestCount} guests.`); + setShowAppointmentForm(false); + setName(""); + setEmail(""); + setSelectedDate(""); + setSelectedTime(""); + setGuestCount("2"); + } + }; + + const openWhatsApp = () => { + const message = `Hi Kobe Prime! I'd like to make a reservation. Can you help me?`; + const encodedMessage = encodeURIComponent(message); + window.open(`https://wa.me/1234567890?text=${encodedMessage}`, "_blank"); + }; + return ( + {/* Sticky CTA Button */} + {isSticky && ( +
+ + +
+ )} + + {/* Appointment Form Modal */} + {showAppointmentForm && ( +
+
+

Reserve Your Table

+
+
+ + setName(e.target.value)} + placeholder="Your name" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
+
+ + setEmail(e.target.value)} + placeholder="your@email.com" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
+
+ + setSelectedDate(e.target.value)} + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ )} +