Update src/app/page.tsx

Merge version_5 into main

src/app/contact-us/page.tsx

@@ -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>
+    );
+}

src/app/contact/page.tsx

@@ -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>
+    );
+}

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: "Menu", id: "/#menu" },
-                            { name: "About", id: "about" },
+                            { name: "About", id: "/#about" },
-                            { name: "Reservations", id: "contact" },
+                            { name: "Reservations", id: "/reservations" },
-                            { name: "Reviews", id: "testimonials" }
+                            { name: "Contact Us", id: "/contact-us" },
+                            { name: "Reviews", id: "/#testimonials" }
                         ]}
                         button={{
-                            text: "Book a Table",
+                            text: "Book a Table",                            href: "/reservations"
-                            href: "contact"
                         }}
                     />
                 </div>
 
                 <div id="hero" data-section="hero">
                     <HeroBillboard
-                        title="Welcome to Bella Italia"
+                        title="Welcome to Kerala Flavors"
-                        description="Authentic Italian cuisine crafted with passion and tradition. Experience the flavors of Italy in every dish."
+                        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"
+                        imageSrc="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1200&h=800&auto=format&fit=crop&q=80"
-                        imageAlt="Elegant Italian restaurant dining room"
+                        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"
+                        title="Our Exquisite Kerala Menu"
-                        description="Discover our signature dishes, carefully crafted using authentic Italian recipes and premium ingredients."
+                        description="A culinary journey through Kerala's finest dishes, prepared with authentic spices and fresh ingredients."
                         products={[
                             {
-                                id: "1",
+                                id: "1",                                name: "Malabar Chicken Biriyani",                                price: "$22.00",                                imageSrc: "https://images.unsplash.com/photo-1626804172088-348600d8d73b?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Flavorful Malabar Chicken Biriyani"
-                                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: "2",
+                                id: "2",                                name: "Kerala Beef Roast",                                price: "$25.00",                                imageSrc: "https://images.unsplash.com/photo-1610438289745-f938d94e101f?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Spicy Kerala Beef Roast"
-                                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: "3",
+                                id: "3",                                name: "Al Faham Chicken",                                price: "$24.00",                                imageSrc: "https://images.unsplash.com/photo-1627063737527-dc5f956d2528?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Grilled Al Faham Chicken"
-                                name: "Tiramisu Tradizionale",
+                            },
-                                price: "$12",
+                            {
-                                imageSrc: "https://img.b2bpic.net/free-photo/top-view-chicken-spaghetti-with-bell-peppers-parsley_140725-312.jpg",
+                                id: "4",                                name: "Kerala Fish Curry",                                price: "$22.00",                                imageSrc: "https://images.unsplash.com/photo-1625938590629-d5867f70b4b2?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&_wi=1",                                imageAlt: "Tangy Kerala Fish Curry"
-                                imageAlt: "Classic tiramisu dessert"
+                            },
+                            {
+                                id: "5",                                name: "Karimeen Pollichathu",                                price: "$28.00",                                imageSrc: "https://images.unsplash.com/photo-1624646197365-5c1a1b1a1c9a?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Pearl Spot Fish grilled in banana leaf"
+                            },
+                            {
+                                id: "6",                                name: "Chicken Fry",                                price: "$18.00",                                imageSrc: "https://images.unsplash.com/photo-1603598583495-9f5e0a6d07d1?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Crispy Kerala Chicken Fry"
+                            },
+                            {
+                                id: "7",                                name: "Mutton Curry",                                price: "$26.00",                                imageSrc: "https://images.unsplash.com/photo-1631515159392-cd23f990499d?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&_wi=1",                                imageAlt: "Rich Kerala Mutton Curry"
+                            },
+                            {
+                                id: "8",                                name: "Appam & Stew",                                price: "$16.00",                                imageSrc: "https://images.unsplash.com/photo-1628191060937-299f0f9b6e8a?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Soft Appam with creamy Vegetable Stew"
+                            },
+                            {
+                                id: "9",                                name: "Kappa & Fish Curry",                                price: "$20.00",                                imageSrc: "https://images.unsplash.com/photo-1625938590629-d5867f70b4b2?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&_wi=2",                                imageAlt: "Steamed Tapioca with spicy Fish Curry"
+                            },
+                            {
+                                id: "10",                                name: "Kerala Parotta",                                price: "$6.00",                                imageSrc: "https://images.unsplash.com/photo-1600891965585-a7590868b4b1?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Flaky Kerala Parotta bread"
+                            },
+                            {
+                                id: "11",                                name: "Ghee Rice",                                price: "$15.00",                                imageSrc: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=800&h=600&auto=format&fit=crop&q=80",                                imageAlt: "Fragrant Ghee Rice"
+                            },
+                            {
+                                id: "12",                                name: "Prawn Roast",                                price: "$29.00",                                imageSrc: "https://images.unsplash.com/photo-1606222841315-fe70308e7529?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Spicy Prawn Roast"
+                            },
+                            {
+                                id: "13",                                name: "Vegetable Kurma",                                price: "$16.00",                                imageSrc: "https://images.unsplash.com/photo-1627915509939-f9f3b5e1b9b1?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Creamy Vegetable Kurma"
+                            },
+                            {
+                                id: "14",                                name: "Paneer Butter Masala",                                price: "$19.00",                                imageSrc: "https://images.unsplash.com/photo-1631515159392-cd23f990499d?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&_wi=2",                                imageAlt: "Rich Paneer Butter Masala"
+                            },
+                            {
+                                id: "15",                                name: "Gobi Manchurian",                                price: "$17.00",                                imageSrc: "https://images.unsplash.com/photo-1563214561-1e9b2f2f7d5c?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Indo-Chinese Gobi Manchurian"
+                            },
+                            {
+                                id: "16",                                name: "Kerala Sadya",                                price: "$35.00",                                imageSrc: "https://images.unsplash.com/photo-1616782255866-22442d87e0b5?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                imageAlt: "Traditional Kerala Sadya feast"
+                            },
+                            {
+                                id: "17",                                name: "Veg Biriyani",                                price: "$18.00",                                imageSrc: "https://images.unsplash.com/photo-1589302633008-8e6bfed62a20?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop",                                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"
+                        title="The Heart of Kerala Cuisine"
-                        tag="By The Numbers"
+                        tag="Our Culinary Journey"
                         metrics={[
                             {
-                                id: "1",
+                                id: "1",                                value: "100%",                                description: "Authentic spices and traditional cooking methods from Kerala"
-                                value: "25+",
-                                description: "Years of excellence in authentic Italian cuisine and hospitality"
                             },
                             {
-                                id: "2",
+                                id: "2",                                value: "50,000+",                                description: "Happy customers who have savored the true taste of Kerala"
-                                value: "50,000+",
-                                description: "Happy customers who have enjoyed memorable dining experiences at Bella Italia"
                             }
                         ]}
                         metricsAnimation="slide-up"
@@ -127,44 +153,20 @@ export default function ItalianRestaurantPage() {
 
                 <div id="testimonials" data-section="testimonials">
                     <TestimonialCardTen
-                        title="What Our Guests Say"
+                        title="What Our Guests Savor"
-                        description="Experience the warmth and authenticity that our visitors cherish about Bella Italia."
+                        description="Hear what our patrons have to say about their unforgettable dining experiences at Kerala Flavors."
                         testimonials={[
                             {
-                                id: "1",
+                                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/seed/priya/100/100",                                imageAlt: "Priya Sharma"
-                                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: "2",
+                                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/seed/rahul/100/100",                                imageAlt: "Rahul Menon"
-                                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: "3",
+                                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/seed/anjali/100/100",                                imageAlt: "Anjali Nair"
-                                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: "4",
+                                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/seed/vikram/100/100",                                imageAlt: "Vikram Singh"
-                                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"
                             }
                         ]}
                         textboxLayout="default"
@@ -174,25 +176,19 @@ export default function ItalianRestaurantPage() {
 
                 <div id="comparison" data-section="comparison">
                     <FeatureCardSixteen
-                        title="What Sets Us Apart"
+                        title="The Kerala Flavors Difference"
-                        description="Traditional Italian dining elevated with modern hospitality and exceptional service."
+                        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",
+                                "Generic Indian dishes",                                "Inauthentic spice blends",                                "Limited traditional options",                                "Lack of regional specialties"
-                                "Inconsistent flavors",
-                                "Rushed service",
-                                "Limited wine selection"
                             ]
                         }}
                         positiveCard={{
                             items: [
-                                "Fresh ingredients sourced daily from Italy",
+                                "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"
-                                "Consistent excellence in every dish",
-                                "Attentive, unhurried service",
-                                "Curated selection of Italian wines"
                             ]
                         }}
                     />
@@ -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: "Make a Reservation", href: "/reservations" },
-                            { text: "Contact Us", href: "mailto:info@bellaitalia.com" }
+                            { text: "Contact Our Team", href: "/contact-us" }
                         ]}
                         useInvertedBackground={false}
                     />
@@ -212,12 +208,14 @@ export default function ItalianRestaurantPage() {
 
                 <div id="footer" data-section="footer">
                     <FooterLogoReveal
-                        logoText="Bella Italia"
+                        logoText="Kerala Flavors"
-                        leftLink={{ text: "Privacy Policy", href: "#privacy" }}
+                        logoSrc="https://via.placeholder.com/150x50.png?text=Kerala+Flavors+Logo"
-                        rightLink={{ text: "Contact Us", href: "#contact" }}
+                        logoAlt="Kerala Flavors Logo"
+                        leftLink={{ text: "Privacy Policy", href: "/#privacy" }}
+                        rightLink={{ text: "Contact Us", href: "/contact-us" }}
                     />
                 </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/reservations/page.tsx

@@ -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>
+    );
+}