Add src/app/reservations-contact/page.tsx
This commit is contained in:
178
src/app/reservations-contact/page.tsx
Normal file
178
src/app/reservations-contact/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import Input from "@/components/form/Input";
|
||||
import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
|
||||
|
||||
export default function ReservationsContactPage() {
|
||||
const [name, setName] = React.useState('');
|
||||
const [email, setEmail] = React.useState('');
|
||||
const [phone, setPhone] = React.useState('');
|
||||
const [date, setDate] = React.useState('');
|
||||
const [time, setTime] = React.useState('');
|
||||
const [guests, setGuests] = React.useState('');
|
||||
const [message, setMessage] = React.useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle reservation submission logic here
|
||||
console.log({ name, email, phone, date, time, guests, message });
|
||||
alert('Reservation request submitted!');
|
||||
// Reset form
|
||||
setName('');
|
||||
setEmail('');
|
||||
setPhone('');
|
||||
setDate('');
|
||||
setTime('');
|
||||
setGuests('');
|
||||
setMessage('');
|
||||
};
|
||||
|
||||
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: "Reservations", id: "/reservations-contact" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Legal", id: "/legal" },
|
||||
{ name: "Reviews", id: "testimonials" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book a Table", href: "/reservations-contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Réservations & Contact"
|
||||
description="Plan your visit or reach out to us for any inquiries. We look forward to hosting you at Bella Italia."
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="https://img.b2bpic.net/premium-photo/modern-style-dining-area_119101-267.jpg"
|
||||
imageAlt="Elegant restaurant interior with tables set"
|
||||
buttons={[
|
||||
{ text: "Make a Reservation", href: "#reservation-form" },
|
||||
{ text: "Contact Information", href: "#contact-info" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reservation-form" data-section="reservation-form" className="py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-4xl md:text-5xl font-semibold text-center mb-12">Make a Reservation</h2>
|
||||
<form onSubmit={handleSubmit} className="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 bg-card p-8 rounded-lg shadow-xl">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
value={name}
|
||||
onChange={setName}
|
||||
required
|
||||
ariaLabel="Full Name"
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
required
|
||||
ariaLabel="Email Address"
|
||||
/>
|
||||
<Input
|
||||
type="tel"
|
||||
placeholder="Phone Number"
|
||||
value={phone}
|
||||
onChange={setPhone}
|
||||
ariaLabel="Phone Number"
|
||||
/>
|
||||
<Input
|
||||
type="date"
|
||||
placeholder="Date"
|
||||
value={date}
|
||||
onChange={setDate}
|
||||
required
|
||||
ariaLabel="Reservation Date"
|
||||
/>
|
||||
<Input
|
||||
type="time"
|
||||
placeholder="Time"
|
||||
value={time}
|
||||
onChange={setTime}
|
||||
required
|
||||
ariaLabel="Reservation Time"
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Number of Guests"
|
||||
value={guests}
|
||||
onChange={setGuests}
|
||||
required
|
||||
ariaLabel="Number of Guests"
|
||||
min="1"
|
||||
/>
|
||||
<div className="md:col-span-2">
|
||||
<textarea
|
||||
className="w-full p-3 rounded-lg border border-gray-300 focus:ring-primary-cta focus:border-primary-cta bg-background-accent text-foreground transition-colors duration-300"
|
||||
placeholder="Special Requests or Message"
|
||||
rows={4}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
aria-label="Special Requests"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="md:col-span-2 flex justify-center mt-6">
|
||||
<ButtonTextStagger
|
||||
type="submit"
|
||||
text="Submit Reservation Request"
|
||||
className="w-full md:w-auto px-8 py-3"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<ContactText
|
||||
text="Our team is here to assist you. Feel free to reach out with any questions or special requests."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Call Us: +1 (234) 567-890", href: "tel:+1234567890" },
|
||||
{ text: "Email Us: info@bellaitalia.com", href: "mailto:info@bellaitalia.com" },
|
||||
{ text: "Visit Us: 123 Italian Way, Food City, IT 98765", href: "https://maps.app.goo.gl/YourRestaurantLocation" } // Placeholder for map link
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Bella Italia"
|
||||
leftLink={{ text: "Privacy Policy", href: "/legal" }}
|
||||
rightLink={{ text: "Contact Us", href: "/reservations-contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user