Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 94024c00b0 | |||
| 171607d8fa | |||
| 7b48793165 | |||
| ba4f45e105 | |||
| 2ddda06dcb | |||
| 8fb823c35d | |||
| 1c48ae17fb | |||
| 6cf6778e12 | |||
| 08e717b77c | |||
| d2ef7524e5 | |||
| 2601a5e68d | |||
| ab8b633963 | |||
| 93bcbfc9fb | |||
| fe9679f6ce |
143
src/app/contact-us/page.tsx
Normal file
143
src/app/contact-us/page.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import Input from "@/components/form/Input";
|
||||
import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
|
||||
import ReactLenis from "lenis/react";
|
||||
|
||||
export default function ContactUsPage() {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [messageText, setMessageText] = useState("");
|
||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setMessage(null);
|
||||
|
||||
// Basic validation
|
||||
if (!name || !email || !messageText) {
|
||||
setMessage({ type: "error", text: "Name, Email, and Message are required." });
|
||||
return;
|
||||
}
|
||||
if (!/^[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$/.test(email)) {
|
||||
setMessage({ type: "error", text: "Please enter a valid email address." });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
console.log("Submitting contact form:", { name, email, phone, messageText });
|
||||
await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay
|
||||
|
||||
setMessage({ type: "success", text: "Your message has been sent successfully! We will get back to you shortly." });
|
||||
// Clear form
|
||||
setName("");
|
||||
setEmail("");
|
||||
setPhone("");
|
||||
setMessageText("");
|
||||
} catch (error) {
|
||||
setMessage({ type: "error", text: "Failed to send message. Please try again." });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Kerala Flavors"
|
||||
navItems={[
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reservations", id: "/reservations" },
|
||||
{ name: "Contact Us", id: "/contact-us" },
|
||||
{ name: "Reviews", id: "testimonials" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book a Table", href: "/reservations"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative isolate flex min-h-screen flex-col items-center justify-center p-4">
|
||||
<div className="relative z-10 w-full max-w-lg rounded-lg bg-card p-8 shadow-lg">
|
||||
<h2 className="mb-6 text-center text-3xl font-semibold text-foreground">Contact Us</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">Name</label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
placeholder="Your Name"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">Email</label>
|
||||
<Input
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
type="email"
|
||||
placeholder="Your Email Address"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="mb-1 block text-sm font-medium text-foreground">Phone Number (Optional)</label>
|
||||
<Input
|
||||
id="phone"
|
||||
value={phone}
|
||||
onChange={setPhone}
|
||||
type="tel"
|
||||
placeholder="Your Phone Number"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="messageText" className="mb-1 block text-sm font-medium text-foreground">Message</label>
|
||||
<textarea
|
||||
id="messageText"
|
||||
value={messageText}
|
||||
onChange={(e) => setMessageText(e.target.value)}
|
||||
placeholder="Your message or inquiry"
|
||||
rows={5}
|
||||
required
|
||||
className="w-full rounded-md border border-gray-300 bg-background-accent px-3 py-2 text-foreground shadow-sm focus:border-primary-cta focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
{message && (
|
||||
<div className={`text-center text-sm ${message.type === "success" ? "text-green-500" : "text-red-500"}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
<ButtonTextStagger
|
||||
text="Send Message"
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-primary-cta-text hover:bg-opacity-90"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
73
src/app/contact/page.tsx
Normal file
73
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ContactForm from "@/components/form/ContactForm";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Bella Italia"
|
||||
navItems={[
|
||||
{ name: "Menu", id: "/#menu" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Reviews", id: "/#testimonials" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book a Table", href: "#contact-form-section"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form-section" data-section="contact-form-section">
|
||||
<ContactForm
|
||||
title="Get in Touch"
|
||||
description="Have a question or need to make a reservation? Fill out the form below and we'll get back to you shortly."
|
||||
tag="Contact Us"
|
||||
inputPlaceholder="Your email"
|
||||
buttonText="Send Message"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location-details-section" data-section="location-details-section">
|
||||
<ContactText
|
||||
text={`Our Location:\n123 Italia Street\nRome, IT 00100\n\nPhone: +39 06 1234 5678\nEmail: info@bellaitalia.com\n\nHours:\nMon-Sat: 5:00 PM - 10:00 PM\nSunday: Closed`}
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Get Directions", href: "https://www.google.com/maps/search/123+Italia+Street,+Rome" },
|
||||
{ text: "Call Us", href: "tel:+390612345678" }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Bella Italia"
|
||||
leftLink={{ text: "Privacy Policy", href: "/#privacy" }}
|
||||
rightLink={{ text: "Contact Us", href: "/contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
164
src/app/page.tsx
164
src/app/page.tsx
@@ -30,71 +30,101 @@ export default function ItalianRestaurantPage() {
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Bella Italia"
|
||||
brandName="Kerala Flavors"
|
||||
navItems={[
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reservations", id: "contact" },
|
||||
{ name: "Reservations", id: "/reservations" },
|
||||
{ name: "Contact Us", id: "/contact-us" },
|
||||
{ name: "Reviews", id: "testimonials" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book a Table",
|
||||
href: "contact"
|
||||
text: "Book a Table", href: "/reservations"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Welcome to Bella Italia"
|
||||
description="Authentic Italian cuisine crafted with passion and tradition. Experience the flavors of Italy in every dish."
|
||||
title="Welcome to Kerala Flavors"
|
||||
description="Experience the rich and diverse culinary traditions of Kerala, a journey for your senses."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Fine Dining"
|
||||
tag="Authentic Kerala Cuisine"
|
||||
tagIcon={Sparkles}
|
||||
imageSrc="https://img.b2bpic.net/premium-photo/tasted-famous-italian-food_119101-260.jpg?id=6608694"
|
||||
imageAlt="Elegant Italian restaurant dining room"
|
||||
imageSrc="https://source.unsplash.com/random/1200x800/?kerala-food-restaurant-interior"
|
||||
imageAlt="Vibrant Kerala restaurant interior with traditional decor"
|
||||
buttons={[
|
||||
{ text: "Reserve Now", href: "contact" },
|
||||
{ text: "View Menu", href: "menu" }
|
||||
{ text: "View Menu", href: "menu" },
|
||||
{ text: "Explore Our Story", href: "about" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
title="At Bella Italia, we honor the rich culinary traditions of Italy while celebrating the art of fine dining. Every dish tells a story of tradition, craftsmanship, and love for food."
|
||||
title="At Kerala Flavors, we bring you the authentic tastes of God's Own Country. Our chefs meticulously craft each dish, rooted in traditional recipes and fresh, local ingredients, to offer a culinary experience that's both rich and soulful."
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#" }
|
||||
{ text: "Our Heritage", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<ProductCardOne
|
||||
title="Featured Dishes"
|
||||
description="Discover our signature dishes, carefully crafted using authentic Italian recipes and premium ingredients."
|
||||
title="Our Exquisite Kerala Menu"
|
||||
description="A culinary journey through Kerala's finest dishes, prepared with authentic spices and fresh ingredients."
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Tagliatelle al Ragù",
|
||||
price: "$28",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/italian-spaghetti-tomato-sauce-with-parmesan-inside-blue-plate-top-view_114579-1556.jpg",
|
||||
imageAlt: "Tagliatelle al Ragù with meat sauce"
|
||||
id: "1", name: "Malabar Chicken Biriyani", price: "$18", imageSrc: "https://source.unsplash.com/random/800x600/?malabar-chicken-biriyani", imageAlt: "Flavorful Malabar Chicken Biriyani"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Risotto ai Funghi",
|
||||
price: "$26",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/pasta-tomato-sauce-with-chopped-parmesan-tomato-basilic_114579-919.jpg",
|
||||
imageAlt: "Creamy mushroom risotto"
|
||||
id: "2", name: "Kerala Beef Roast", price: "$20", imageSrc: "https://source.unsplash.com/random/800x600/?kerala-beef-roast", imageAlt: "Spicy Kerala Beef Roast"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Tiramisu Tradizionale",
|
||||
price: "$12",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/top-view-chicken-spaghetti-with-bell-peppers-parsley_140725-312.jpg",
|
||||
imageAlt: "Classic tiramisu dessert"
|
||||
id: "3", name: "Al Faham Chicken", price: "$19", imageSrc: "https://source.unsplash.com/random/800x600/?al-faham-chicken", imageAlt: "Grilled Al Faham Chicken"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Kerala Fish Curry", price: "$17", imageSrc: "https://source.unsplash.com/random/800x600/?kerala-fish-curry", imageAlt: "Tangy Kerala Fish Curry"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Karimeen Pollichathu", price: "$22", imageSrc: "https://source.unsplash.com/random/800x600/?karimeen-pollichathu", imageAlt: "Pearl Spot Fish grilled in banana leaf"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Chicken Fry", price: "$15", imageSrc: "https://source.unsplash.com/random/800x600/?kerala-chicken-fry", imageAlt: "Crispy Kerala Chicken Fry"
|
||||
},
|
||||
{
|
||||
id: "7", name: "Mutton Curry", price: "$21", imageSrc: "https://source.unsplash.com/random/800x600/?kerala-mutton-curry", imageAlt: "Rich Kerala Mutton Curry"
|
||||
},
|
||||
{
|
||||
id: "8", name: "Appam & Stew", price: "$14", imageSrc: "https://source.unsplash.com/random/800x600/?appam-stew", imageAlt: "Soft Appam with creamy Vegetable Stew"
|
||||
},
|
||||
{
|
||||
id: "9", name: "Kappa & Fish Curry", price: "$16", imageSrc: "https://source.unsplash.com/random/800x600/?kappa-fish-curry", imageAlt: "Steamed Tapioca with spicy Fish Curry"
|
||||
},
|
||||
{
|
||||
id: "10", name: "Kerala Parotta", price: "$5", imageSrc: "https://source.unsplash.com/random/800x600/?kerala-parotta", imageAlt: "Flaky Kerala Parotta bread"
|
||||
},
|
||||
{
|
||||
id: "11", name: "Ghee Rice", price: "$12", imageSrc: "https://source.unsplash.com/random/800x600/?ghee-rice", imageAlt: "Fragrant Ghee Rice"
|
||||
},
|
||||
{
|
||||
id: "12", name: "Prawn Roast", price: "$23", imageSrc: "https://source.unsplash.com/random/800x600/?prawn-roast", imageAlt: "Spicy Prawn Roast"
|
||||
},
|
||||
{
|
||||
id: "13", name: "Vegetable Kurma", price: "$13", imageSrc: "https://source.unsplash.com/random/800x600/?vegetable-kurma", imageAlt: "Creamy Vegetable Kurma"
|
||||
},
|
||||
{
|
||||
id: "14", name: "Paneer Butter Masala", price: "$16", imageSrc: "https://source.unsplash.com/random/800x600/?paneer-butter-masala", imageAlt: "Rich Paneer Butter Masala"
|
||||
},
|
||||
{
|
||||
id: "15", name: "Gobi Manchurian", price: "$14", imageSrc: "https://source.unsplash.com/random/800x600/?gobi-manchurian", imageAlt: "Indo-Chinese Gobi Manchurian"
|
||||
},
|
||||
{
|
||||
id: "16", name: "Kerala Sadya", price: "$25", imageSrc: "https://source.unsplash.com/random/800x600/?kerala-sadya-feast", imageAlt: "Traditional Kerala Sadya feast"
|
||||
},
|
||||
{
|
||||
id: "17", name: "Veg Biriyani", price: "$15", imageSrc: "https://source.unsplash.com/random/800x600/?veg-biriyani", imageAlt: "Aromatic Vegetable Biriyani"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
@@ -106,18 +136,14 @@ export default function ItalianRestaurantPage() {
|
||||
|
||||
<div id="impact" data-section="impact">
|
||||
<MetricCardFourteen
|
||||
title="Celebrating Our Success"
|
||||
tag="By The Numbers"
|
||||
title="The Heart of Kerala Cuisine"
|
||||
tag="Our Culinary Journey"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "25+",
|
||||
description: "Years of excellence in authentic Italian cuisine and hospitality"
|
||||
id: "1", value: "100%", description: "Authentic spices and traditional cooking methods from Kerala"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "50,000+",
|
||||
description: "Happy customers who have enjoyed memorable dining experiences at Bella Italia"
|
||||
id: "2", value: "50,000+", description: "Happy customers who have savored the true taste of Kerala"
|
||||
}
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
@@ -127,44 +153,20 @@ export default function ItalianRestaurantPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="What Our Guests Say"
|
||||
description="Experience the warmth and authenticity that our visitors cherish about Bella Italia."
|
||||
title="What Our Guests Savor"
|
||||
description="Hear what our patrons have to say about their unforgettable dining experiences at Kerala Flavors."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "An Unforgettable Evening",
|
||||
quote: "The pasta was absolutely divine! Every bite transported me straight to Italy. The ambiance, the service, everything was perfect. We'll definitely be back.",
|
||||
name: "Maria Rossi",
|
||||
role: "Food Critic",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/culinary-expert-commercial-kitchen-prepares-dish-with-fresh-basil-parsley_482257-124314.jpg",
|
||||
imageAlt: "Maria Rossi"
|
||||
id: "1", title: "A Taste of Home", quote: "The Malabar Biriyani was incredible, just like my grandmother used to make! Every dish here feels authentic and full of soul. Truly a gem!", name: "Priya Sharma", role: "Food Blogger", imageSrc: "https://picsum.photos/id/64/100/100", imageAlt: "Priya Sharma"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Authentic Italian Magic",
|
||||
quote: "This is the most authentic Italian restaurant I've found in the city. The chef clearly knows his craft, and it shows in every plate. A true gem!",
|
||||
name: "Giovanni Ferrari",
|
||||
role: "Restaurant Enthusiast",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/chef-white-uniform-garnishes-plated-dish-with-herbs-spices_482257-121123.jpg",
|
||||
imageAlt: "Giovanni Ferrari"
|
||||
id: "2", title: "Authentic Flavors, Amazing Experience", quote: "From the Karimeen Pollichathu to the Appam and Stew, every dish was a culinary masterpiece. The spices were perfectly balanced, and the service was impeccable.", name: "Rahul Menon", role: "Restaurant Critic", imageSrc: "https://picsum.photos/id/65/100/100", imageAlt: "Rahul Menon"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Perfect for Special Occasions",
|
||||
quote: "We celebrated our anniversary here and it was spectacular. The attention to detail, the wine pairings, the warmth of the staff – simply extraordinary.",
|
||||
name: "Elena Marchetti",
|
||||
role: "Couple",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/close-up-chef-cooking-restaurant-kitchen_329181-16131.jpg",
|
||||
imageAlt: "Elena Marchetti"
|
||||
id: "3", title: "Best Kerala Food in Town", quote: "I've been searching for authentic Kerala cuisine, and Kerala Flavors delivered beyond expectations. The Sadya was a feast for the senses. Highly recommend!", name: "Anjali Nair", role: "Regular Patron", imageSrc: "https://picsum.photos/id/66/100/100", imageAlt: "Anjali Nair"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Worth Every Visit",
|
||||
quote: "I've been coming to Bella Italia for three years now. The consistency, quality, and passion never wavers. It's become my second home.",
|
||||
name: "Antonio Bianchi",
|
||||
role: "Regular Guest",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/chef-workg-together-professional-kitchen_23-2149727992.jpg",
|
||||
imageAlt: "Antonio Bianchi"
|
||||
id: "4", title: "A Delightful Culinary Journey", quote: "The Kerala Beef Roast was tender and perfectly spiced, and the Prawn Roast was heavenly. It's truly a delightful journey through Kerala's rich culinary landscape.", name: "Vikram Singh", role: "Explorer of Cuisines", imageSrc: "https://picsum.photos/id/67/100/100", imageAlt: "Vikram Singh"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -174,25 +176,19 @@ export default function ItalianRestaurantPage() {
|
||||
|
||||
<div id="comparison" data-section="comparison">
|
||||
<FeatureCardSixteen
|
||||
title="What Sets Us Apart"
|
||||
description="Traditional Italian dining elevated with modern hospitality and exceptional service."
|
||||
title="The Kerala Flavors Difference"
|
||||
description="Authentic Kerala cuisine prepared with passion, tradition, and the freshest ingredients."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Frozen pre-made ingredients",
|
||||
"Inconsistent flavors",
|
||||
"Rushed service",
|
||||
"Limited wine selection"
|
||||
"Generic Indian dishes", "Inauthentic spice blends", "Limited traditional options", "Lack of regional specialties"
|
||||
]
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Fresh ingredients sourced daily from Italy",
|
||||
"Consistent excellence in every dish",
|
||||
"Attentive, unhurried service",
|
||||
"Curated selection of Italian wines"
|
||||
"Authentic Kerala recipes passed down generations", "Freshly ground, regional spice mixes", "Extensive menu of traditional and popular Kerala dishes", "Showcasing unique regional specialties like Karimeen Pollichathu"
|
||||
]
|
||||
}}
|
||||
/>
|
||||
@@ -200,11 +196,11 @@ export default function ItalianRestaurantPage() {
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to experience authentic Italian cuisine? Reserve your table at Bella Italia and join us for an evening of culinary excellence."
|
||||
text="Ready to embark on a culinary journey to Kerala? Book your table or reach out to us directly for an unforgettable dining experience."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Make a Reservation", href: "https://example.com/reservations" },
|
||||
{ text: "Contact Us", href: "mailto:info@bellaitalia.com" }
|
||||
{ text: "Make a Reservation", href: "/reservations" },
|
||||
{ text: "Contact Our Team", href: "/contact-us" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -212,9 +208,11 @@ export default function ItalianRestaurantPage() {
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Bella Italia"
|
||||
logoText="Kerala Flavors"
|
||||
logoSrc="https://picsum.photos/seed/kerala-flavors-logo/150/50"
|
||||
logoAlt="Kerala Flavors Logo"
|
||||
leftLink={{ text: "Privacy Policy", href: "#privacy" }}
|
||||
rightLink={{ text: "Contact Us", href: "#contact" }}
|
||||
rightLink={{ text: "Contact Us", href: "/contact-us" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
186
src/app/reservations/page.tsx
Normal file
186
src/app/reservations/page.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import Input from "@/components/form/Input";
|
||||
import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
|
||||
import ReactLenis from "lenis/react";
|
||||
|
||||
export default function ReservationsPage() {
|
||||
const [name, setName] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [guests, setGuests] = useState("1");
|
||||
const [date, setDate] = useState("");
|
||||
const [time, setTime] = useState("");
|
||||
const [requests, setRequests] = useState("");
|
||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setMessage(null);
|
||||
|
||||
// Basic validation
|
||||
if (!name || !phone || !email || !guests || !date || !time) {
|
||||
setMessage({ type: "error", text: "Please fill in all required fields." });
|
||||
return;
|
||||
}
|
||||
if (!/^[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$/.test(email)) {
|
||||
setMessage({ type: "error", text: "Please enter a valid email address." });
|
||||
return;
|
||||
}
|
||||
if (parseInt(guests) < 1) {
|
||||
setMessage({ type: "error", text: "Number of guests must be at least 1." });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
console.log("Submitting reservation:", { name, phone, email, guests, date, time, requests });
|
||||
await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay
|
||||
|
||||
setMessage({ type: "success", text: "Your reservation has been successfully placed! We look forward to seeing you." });
|
||||
// Clear form
|
||||
setName("");
|
||||
setPhone("");
|
||||
setEmail("");
|
||||
setGuests("1");
|
||||
setDate("");
|
||||
setTime("");
|
||||
setRequests("");
|
||||
} catch (error) {
|
||||
setMessage({ type: "error", text: "Failed to place reservation. Please try again." });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Kerala Flavors"
|
||||
navItems={[
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reservations", id: "/reservations" },
|
||||
{ name: "Contact Us", id: "/contact-us" },
|
||||
{ name: "Reviews", id: "testimonials" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book a Table", href: "/reservations"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative isolate flex min-h-screen flex-col items-center justify-center p-4">
|
||||
<div className="relative z-10 w-full max-w-lg rounded-lg bg-card p-8 shadow-lg">
|
||||
<h2 className="mb-6 text-center text-3xl font-semibold text-foreground">Make a Reservation</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">Name</label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
placeholder="Your Name"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="mb-1 block text-sm font-medium text-foreground">Phone Number</label>
|
||||
<Input
|
||||
id="phone"
|
||||
value={phone}
|
||||
onChange={setPhone}
|
||||
type="tel"
|
||||
placeholder="Your Phone Number"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">Email</label>
|
||||
<Input
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
type="email"
|
||||
placeholder="Your Email Address"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="guests" className="mb-1 block text-sm font-medium text-foreground">Number of Guests</label>
|
||||
<Input
|
||||
id="guests"
|
||||
value={guests}
|
||||
onChange={setGuests}
|
||||
type="number"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="date" className="mb-1 block text-sm font-medium text-foreground">Date</label>
|
||||
<Input
|
||||
id="date"
|
||||
value={date}
|
||||
onChange={setDate}
|
||||
type="date"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="time" className="mb-1 block text-sm font-medium text-foreground">Time</label>
|
||||
<Input
|
||||
id="time"
|
||||
value={time}
|
||||
onChange={setTime}
|
||||
type="time"
|
||||
required
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="requests" className="mb-1 block text-sm font-medium text-foreground">Special Requests</label>
|
||||
<textarea
|
||||
id="requests"
|
||||
value={requests}
|
||||
onChange={(e) => setRequests(e.target.value)}
|
||||
placeholder="Allergies, seating preferences, etc."
|
||||
rows={3}
|
||||
className="w-full rounded-md border border-gray-300 bg-background-accent px-3 py-2 text-foreground shadow-sm focus:border-primary-cta focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
{message && (
|
||||
<div className={`text-center text-sm ${message.type === "success" ? "text-green-500" : "text-red-500"}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
<ButtonTextStagger
|
||||
text="Submit Reservation"
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-primary-cta-text hover:bg-opacity-90"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user