Add src/app/contact-us/page.tsx

2026-06-03 15:27:49 +00:00
parent d2ef7524e5
commit 08e717b77c
1 changed files with 143 additions and 0 deletions
--- a/src/app/contact-us/page.tsx
+++ b/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", href: "/reservations" },
+                            { name: "Contact Us", href: "/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>
+    );
+}