Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9d7de87b16 | |||
| cccaa74a16 | |||
| f7893c78b8 | |||
| ff1dce076b | |||
| 94024c00b0 | |||
| 171607d8fa | |||
| 7b48793165 | |||
| ba4f45e105 | |||
| 2ddda06dcb | |||
| 8fb823c35d | |||
| 1c48ae17fb | |||
| 6cf6778e12 | |||
| 08e717b77c | |||
| d2ef7524e5 | |||
| ab8b633963 |
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>
|
||||
);
|
||||
}
|
||||
@@ -32,13 +32,14 @@ export default function ItalianRestaurantPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Kerala Flavors"
|
||||
navItems={[
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reservations", id: "contact" },
|
||||
{ name: "Reviews", id: "testimonials" }
|
||||
{ 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: "contact"
|
||||
text: "Book a Table", href: "/reservations"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -50,11 +51,11 @@ export default function ItalianRestaurantPage() {
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Authentic Kerala Cuisine"
|
||||
tagIcon={Sparkles}
|
||||
imageSrc="https://source.unsplash.com/random/1200x800/?kerala-food-restaurant-interior"
|
||||
imageSrc="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1200&h=800&auto=format&fit=crop&q=80"
|
||||
imageAlt="Vibrant Kerala restaurant interior with traditional decor"
|
||||
buttons={[
|
||||
{ text: "View Menu", href: "menu" },
|
||||
{ text: "Explore Our Story", href: "about" }
|
||||
{ text: "View Menu", href: "/#menu" },
|
||||
{ text: "Explore Our Story", href: "/#about" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -64,7 +65,7 @@ export default function ItalianRestaurantPage() {
|
||||
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: "Our Heritage", href: "#" }
|
||||
{ text: "Our Heritage", href: "/#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -75,55 +76,55 @@ export default function ItalianRestaurantPage() {
|
||||
description="A culinary journey through Kerala's finest dishes, prepared with authentic spices and fresh ingredients."
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Malabar Chicken Biriyani", price: "$18", imageSrc: "https://source.unsplash.com/random/800x600/?malabar-chicken-biriyani", imageAlt: "Flavorful Malabar Chicken Biriyani"
|
||||
id: "1", name: "Malabar Chicken Biriyani", price: "$18", imageSrc: "https://picsum.photos/seed/biriyani/800/600", imageAlt: "Flavorful Malabar Chicken Biriyani"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Kerala Beef Roast", price: "$20", imageSrc: "https://source.unsplash.com/random/800x600/?kerala-beef-roast", imageAlt: "Spicy Kerala Beef Roast"
|
||||
id: "2", name: "Kerala Beef Roast", price: "$20", imageSrc: "https://picsum.photos/seed/beefroast/800/600", imageAlt: "Spicy Kerala Beef Roast"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Al Faham Chicken", price: "$19", imageSrc: "https://source.unsplash.com/random/800x600/?al-faham-chicken", imageAlt: "Grilled Al Faham Chicken"
|
||||
id: "3", name: "Al Faham Chicken", price: "$19", imageSrc: "https://picsum.photos/seed/alfaham/800/600", 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: "4", name: "Kerala Fish Curry", price: "$17", imageSrc: "https://picsum.photos/seed/fishcurry/800/600", 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: "5", name: "Karimeen Pollichathu", price: "$22", imageSrc: "https://picsum.photos/seed/karimeen/800/600", 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: "6", name: "Chicken Fry", price: "$15", imageSrc: "https://picsum.photos/seed/chickenfry/800/600", 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: "7", name: "Mutton Curry", price: "$21", imageSrc: "https://picsum.photos/seed/muttoncurry/800/600", 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: "8", name: "Appam & Stew", price: "$14", imageSrc: "https://picsum.photos/seed/appamstew/800/600", 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: "9", name: "Kappa & Fish Curry", price: "$16", imageSrc: "https://picsum.photos/seed/kappa/800/600", 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: "10", name: "Kerala Parotta", price: "$5", imageSrc: "https://picsum.photos/seed/parotta/800/600", 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: "11", name: "Ghee Rice", price: "$12", imageSrc: "https://picsum.photos/seed/gheerice/800/600", 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: "12", name: "Prawn Roast", price: "$23", imageSrc: "https://picsum.photos/seed/prawnroast/800/600", 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: "13", name: "Vegetable Kurma", price: "$13", imageSrc: "https://picsum.photos/seed/vegkurma/800/600", 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: "14", name: "Paneer Butter Masala", price: "$16", imageSrc: "https://picsum.photos/seed/paneer/800/600", 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: "15", name: "Gobi Manchurian", price: "$14", imageSrc: "https://picsum.photos/seed/gobi/800/600", 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: "16", name: "Kerala Sadya", price: "$25", imageSrc: "https://picsum.photos/seed/sadya/800/600", 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"
|
||||
id: "17", name: "Veg Biriyani", price: "$15", imageSrc: "https://picsum.photos/seed/vegibiriyani/800/600", imageAlt: "Aromatic Vegetable Biriyani"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
@@ -156,16 +157,16 @@ export default function ItalianRestaurantPage() {
|
||||
description="Hear what our patrons have to say about their unforgettable dining experiences at Kerala Flavors."
|
||||
testimonials={[
|
||||
{
|
||||
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://source.unsplash.com/random/100x100/?indian-woman-chef", imageAlt: "Priya Sharma"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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://source.unsplash.com/random/100x100/?indian-man-foodie", imageAlt: "Rahul Menon"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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://source.unsplash.com/random/100x100/?south-indian-woman", imageAlt: "Anjali Nair"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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://source.unsplash.com/random/100x100/?indian-man-traveler", imageAlt: "Vikram Singh"
|
||||
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"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -208,11 +209,13 @@ export default function ItalianRestaurantPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Kerala Flavors"
|
||||
leftLink={{ text: "Privacy Policy", href: "#privacy" }}
|
||||
rightLink={{ text: "Contact Us", href: "#contact" }}
|
||||
logoSrc="https://via.placeholder.com/150x50.png?text=Kerala+Flavors+Logo"
|
||||
logoAlt="Kerala Flavors Logo"
|
||||
leftLink={{ text: "Privacy Policy", href: "/#privacy" }}
|
||||
rightLink={{ text: "Contact Us", href: "/contact-us" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
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