bender/275cbd7e-5c4e-4cd6-94c7-f3c56b29803b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-09 05:45:58 +00:00
parent b54e9e81d8
commit 19984b71f8
1 changed files with 165 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/app/page.tsx
View File

@@ -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 (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -27,6 +66,114 @@ export default function LandingPage() {
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
{/* Sticky CTA Button */}
{isSticky && (
<div className="fixed bottom-8 right-8 z-40 flex gap-3">
<button
onClick={handleReserveClick}
className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-full font-semibold shadow-lg hover:shadow-xl transition-all hover:scale-105 flex items-center gap-2"
aria-label="Reserve table"
>
<Calendar size={18} />
Reserve Now
</button>
<button
onClick={openWhatsApp}
className="bg-green-500 text-white px-4 py-3 rounded-full shadow-lg hover:shadow-xl transition-all hover:scale-105 flex items-center justify-center"
aria-label="Chat on WhatsApp"
>
<MessageCircle size={20} />
</button>
</div>
)}
{/* Appointment Form Modal */}
{showAppointmentForm && (
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 md:p-8 animate-in">
<h2 className="text-2xl font-bold mb-4 text-gray-900">Reserve Your Table</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
<input
type="text"
value={name}
onChange={(e) => 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"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => 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"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Date</label>
<input
type="date"
value={selectedDate}
onChange={(e) => 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"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Time</label>
<select
value={selectedTime}
onChange={(e) => setSelectedTime(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"
>
<option value="">Select a time</option>
<option value="17:00">5:00 PM</option>
<option value="17:30">5:30 PM</option>
<option value="18:00">6:00 PM</option>
<option value="18:30">6:30 PM</option>
<option value="19:00">7:00 PM</option>
<option value="19:30">7:30 PM</option>
<option value="20:00">8:00 PM</option>
<option value="20:30">8:30 PM</option>
<option value="21:00">9:00 PM</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Number of Guests</label>
<select
value={guestCount}
onChange={(e) => setGuestCount(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"
>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => (
<option key={num} value={num}>
{num} Guest{num > 1 ? "s" : ""}
</option>
))}
</select>
</div>
</div>
<div className="flex gap-3 mt-6">
<button
onClick={() => setShowAppointmentForm(false)}
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium"
>
Cancel
</button>
<button
onClick={handleAppointmentSubmit}
className="flex-1 px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:shadow-lg transition-all font-medium"
>
Confirm Reservation
</button>
</div>
</div>
</div>
)}
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Kobe Prime"
@@ -63,7 +210,7 @@ export default function LandingPage() {
imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-recipe_23-2148145556.jpg?_wi=1", imageAlt: "Master chef preparing steakhouse delicacies"},
]}
buttons={[
{ text: "Reserve Your Table", href: "contact" },
{ text: "Reserve Your Table", onClick: handleReserveClick },
{ text: "View Menu", href: "products" },
]}
/>
@@ -90,7 +237,7 @@ export default function LandingPage() {
<div id="products" data-section="products">
<ProductCardTwo
title="Premium Beef Selection"
description="Each cut is hand-selected for exceptional marbling, tenderness, and flavor. Experience the pinnacle of beef excellence."
description="Each cut is hand-selected for exceptional marbling, tenderness, and flavor. Experience the pinnacle of beef excellence. Book your tasting now to reserve premium cuts."
tag="Featured Cuts"
tagIcon={Flame}
products={[
@@ -108,26 +255,31 @@ export default function LandingPage() {
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "Reserve Premium Cut", onClick: handleReserveClick }]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardNineteen
title="The Kobe Prime Experience"
description="Discover the signature elements that define our premium steakhouse dining."
description="Discover the signature elements that define our premium steakhouse dining. Reserve your table to experience each moment personally."
tag="Dining Journey"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "Reserve Experience", onClick: handleReserveClick }]}
features={[
{
id: 1,
tag: "Teppanyaki Mastery", title: "Live Cooking Performance", subtitle: "Watch skilled chefs prepare your meal with precision", description: "Experience the theater of teppanyaki as our master chefs artfully prepare your beef and accompaniments right before your eyes. Their expert knife work, timing, and technique transform cooking into an unforgettable performance.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-festive-table-with-different-dishes-festive-event-party-wedding-reception_613910-4231.jpg?_wi=2", imageAlt: "Chef performing teppanyaki at the counter"},
tag: "Teppanyaki Mastery", title: "Live Cooking Performance", subtitle: "Watch skilled chefs prepare your meal with precision", description: "Experience the theater of teppanyaki as our master chefs artfully prepare your beef and accompaniments right before your eyes. Their expert knife work, timing, and technique transform cooking into an unforgettable performance.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-festive-table-with-different-dishes-festive-event-party-wedding-reception_613910-4231.jpg?_wi=2", imageAlt: "Chef performing teppanyaki at the counter", buttons: [{ text: "Book Now", onClick: handleReserveClick }],
},
{
id: 2,
tag: "Curated Selection", title: "Premium Sake & Spirits", subtitle: "Carefully selected beverages to complement your meal", description: "Explore our extensive collection of premium Japanese sake, whisky, and wine. Each selection is chosen to pair perfectly with our signature beef offerings, enhancing every aspect of your dining experience.", imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081857.jpg?_wi=2", imageAlt: "Elegant sake and beverage selection display"},
tag: "Curated Selection", title: "Premium Sake & Spirits", subtitle: "Carefully selected beverages to complement your meal", description: "Explore our extensive collection of premium Japanese sake, whisky, and wine. Each selection is chosen to pair perfectly with our signature beef offerings, enhancing every aspect of your dining experience.", imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081857.jpg?_wi=2", imageAlt: "Elegant sake and beverage selection display", buttons: [{ text: "Make Reservation", onClick: handleReserveClick }],
},
{
id: 3,
tag: "Culinary Art", title: "Exquisite Plating", subtitle: "Every dish is a masterpiece of flavor and presentation", description: "Our chefs combine traditional Japanese techniques with contemporary plating artistry. Each course is presented as a work of art, engaging all your senses before that first transcendent bite.", imageSrc: "http://img.b2bpic.net/free-photo/meat-rolls-with-herbs-sauce-glass-wine_140725-3451.jpg?_wi=2", imageAlt: "Beautifully plated gourmet steakhouse dish"},
tag: "Culinary Art", title: "Exquisite Plating", subtitle: "Every dish is a masterpiece of flavor and presentation", description: "Our chefs combine traditional Japanese techniques with contemporary plating artistry. Each course is presented as a work of art, engaging all your senses before that first transcendent bite.", imageSrc: "http://img.b2bpic.net/free-photo/meat-rolls-with-herbs-sauce-glass-wine_140725-3451.jpg?_wi=2", imageAlt: "Beautifully plated gourmet steakhouse dish", buttons: [{ text: "Reserve Table", onClick: handleReserveClick }],
},
]}
/>
</div>
@@ -135,12 +287,13 @@ export default function LandingPage() {
<div id="team" data-section="team">
<TeamCardTwo
title="Meet Our Master Chefs"
description="Extraordinary culinary talent dedicated to perfection in every plate"
description="Extraordinary culinary talent dedicated to perfection in every plate. Experience their artistry by reserving your table today."
tag="Leadership"
textboxLayout="default"
animationType="slide-up"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
buttons={[{ text: "Book Your Chef's Experience", onClick: handleReserveClick }]}
members={[
{
id: "1", name: "Chef Hiroshi Tanaka", role: "Head Chef & Founder", description: "With 25 years of experience in Tokyo's finest steakhouses, Chef Tanaka brings unparalleled expertise and passion to every meal.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-chef-posing-with-copy-space_23-2148723262.jpg", imageAlt: "Chef Hiroshi Tanaka", socialLinks: [{ icon: Globe, url: "#" }],
@@ -155,11 +308,12 @@ export default function LandingPage() {
<div id="testimonial" data-section="testimonial">
<TestimonialCardSix
title="What Our Guests Say"
description="Hear from those who have experienced Kobe Prime's exceptional hospitality and cuisine"
description="Hear from those who have experienced Kobe Prime's exceptional hospitality and cuisine. Join them by securing your reservation."
tag="Testimonials"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
buttons={[{ text: "Become Part of Our Story", onClick: handleReserveClick }]}
testimonials={[
{
id: "1", name: "Sarah Mitchell", handle: "Fine Dining Enthusiast", testimonial: "Kobe Prime exceeded every expectation. The wagyu was extraordinary, and watching the chefs work their magic made it truly unforgettable.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-excited-brunette-girl-smiling-pointing-fingers-sideways-left-right-showing-advertisement-with-happy-pleased-face-standing-white-background_176420-47167.jpg", imageAlt: "Sarah Mitchell"},
@@ -180,7 +334,7 @@ export default function LandingPage() {
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers to common questions about our restaurant, reservations, and dining experience"
description="Find answers to common questions about our restaurant, reservations, and dining experience. Ready to book? Contact us now."
tag="Help & Information"
textboxLayout="default"
useInvertedBackground={false}
@@ -189,6 +343,7 @@ export default function LandingPage() {
imageSrc="http://img.b2bpic.net/free-photo/view-from-ceiling-decorated-celebration-hall-with-round-tables_8353-10198.jpg"
imageAlt="Kobe Prime steakhouse elegant interior"
mediaPosition="left"
buttons={[{ text: "Make Your Reservation", onClick: handleReserveClick }]}
faqs={[
{
id: "1", title: "What is A5 Wagyu beef?", content: "A5 Wagyu is the highest grade of Japanese beef, rated on both marbling and meat quality. It features exceptional intramuscular fat distribution, creating unparalleled tenderness, juiciness, and flavor that melts in your mouth."},