Add src/app/reserve/page.tsx
This commit is contained in:
161
src/app/reserve/page.tsx
Normal file
161
src/app/reserve/page.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import Input from '@/components/form/Input';
|
||||
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
|
||||
import { Facebook, Instagram, Twitter } from "lucide-react";
|
||||
|
||||
export default function ReservationPage() {
|
||||
const [name, setName] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [guests, setGuests] = useState("1");
|
||||
const [date, setDate] = useState("");
|
||||
const [time, setTime] = useState("");
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Here you would typically send the data to a backend or an API
|
||||
console.log({ name, phone, guests, date, time });
|
||||
setIsSubmitted(true);
|
||||
// Optionally clear form fields after submission
|
||||
// setName('');
|
||||
// setPhone('');
|
||||
// setGuests('1');
|
||||
// setDate('');
|
||||
// setTime('');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLarge"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About Us", id: "about" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "Why Choose Us", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Reservations", id: "/reserve" }
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/retro-golden-restaurant-logo-collection_23-2148379344.jpg"
|
||||
logoAlt="Nini's Kitchen Logo"
|
||||
brandName="Nini's Kitchen"
|
||||
button={{ text: "Reserve Now", href: "/reserve" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reservation" data-section="reservation" className="flex flex-col items-center justify-center min-h-screen py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="w-full max-w-md bg-card p-8 rounded-lg shadow-xl text-foreground">
|
||||
<h2 className="text-3xl font-bold text-center mb-6">Make a Reservation</h2>
|
||||
{
|
||||
isSubmitted ? (
|
||||
<div className="text-center text-primary-cta font-semibold">
|
||||
<p className="mb-4">Your reservation request has been sent successfully!</p>
|
||||
<p>We will contact you shortly to confirm your booking.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">Name</label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
placeholder="Your Full Name"
|
||||
required
|
||||
className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-foreground mb-1">Phone Number</label>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
value={phone}
|
||||
onChange={setPhone}
|
||||
placeholder="(123) 456-7890"
|
||||
required
|
||||
className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="guests" className="block text-sm font-medium text-foreground mb-1">Number of Guests</label>
|
||||
<Input
|
||||
id="guests"
|
||||
type="number"
|
||||
value={guests}
|
||||
onChange={setGuests}
|
||||
min="1"
|
||||
required
|
||||
className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">Date</label>
|
||||
<Input
|
||||
id="date"
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={setDate}
|
||||
required
|
||||
className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="time" className="block text-sm font-medium text-foreground mb-1">Time</label>
|
||||
<Input
|
||||
id="time"
|
||||
type="time"
|
||||
value={time}
|
||||
onChange={setTime}
|
||||
required
|
||||
className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<ButtonTextShift
|
||||
text="Submit Reservation"
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 rounded-md text-sm font-medium"
|
||||
/>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoSrc="http://img.b2bpic.net/free-vector/retro-golden-restaurant-logo-collection_23-2148379344.jpg"
|
||||
logoAlt="Nini's Kitchen Logo"
|
||||
logoText="Nini's Kitchen"
|
||||
copyrightText="© 2024 Nini's Kitchen. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user