Update src/app/reservations/page.tsx

Merge version_2 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/page.tsx

@@ -34,11 +34,12 @@ export default function ItalianRestaurantPage() {
                         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>
@@ -195,11 +196,11 @@ export default function ItalianRestaurantPage() {
 
                 <div id="contact" data-section="contact">
                     <ContactText
-                        text="Ready to embark on a culinary journey to Kerala? Reserve your table at Kerala Flavors and discover a world of taste."
+                        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@keralaflavors.com" }
+                            { text: "Make a Reservation", href: "/reservations" },
+                            { text: "Contact Our Team", href: "/contact-us" }
                         ]}
                         useInvertedBackground={false}
                     />
@@ -209,7 +210,7 @@ export default function ItalianRestaurantPage() {
                     <FooterLogoReveal
                         logoText="Kerala Flavors"
                         leftLink={{ text: "Privacy Policy", href: "#privacy" }}
-                        rightLink={{ text: "Contact Us", href: "#contact" }}
+                        rightLink={{ text: "Contact Us", href: "/contact-us" }}
                     />
                 </div>
             </ReactLenis>

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