diff --git a/src/app/book/page.tsx b/src/app/book/page.tsx new file mode 100644 index 0000000..700dde7 --- /dev/null +++ b/src/app/book/page.tsx @@ -0,0 +1,201 @@ +"use client"; + +import { useState } from 'react'; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; + +const navItems = [ + { name: "Home", href: "/" }, + { name: "Menu", id: "#menu-preview" }, + { name: "Events", id: "#private-events" }, + { name: "Reserve", href: "/book" }, + { name: "Find Us", href: "/contact" } +]; + +const footerColumns = [ + { + items: [ + { label: "Menu", href: "#menu-preview" }, + { label: "Events", href: "#private-events" }, + { label: "Reservations", href: "/book" }, + { label: "Contact", href: "/contact" } + ] + }, + { + items: [ + { label: "Privacy Policy", href: "#" }, + { label: "Terms of Service", href: "#" }, + { label: "Cookie Policy", href: "#" } + ] + }, + { + items: [ + { label: "Instagram", href: "https://www.instagram.com/nowhereabudhabi" }, + { label: "Facebook", href: "https://www.facebook.com/nowhereabudhabi" } + ] + } +]; + +export default function BookingPage() { + const [step, setStep] = useState(1); + const [formData, setFormData] = useState({ + name: '', + email: '', + phone: '', + date: '', time: '', + guests: 1, + notes: '' + }); + const [errors, setErrors] = useState({}); + + const validateStep1 = () => { + let newErrors = {}; + if (!formData.name) newErrors.name = 'Name is required'; + if (!formData.email) newErrors.email = 'Email is required'; + else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Email is invalid'; + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const validateStep2 = () => { + let newErrors = {}; + if (!formData.date) newErrors.date = 'Date is required'; + if (!formData.time) newErrors.time = 'Time is required'; + if (formData.guests < 1) newErrors.guests = 'At least 1 guest is required'; + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + }; + + const nextStep = () => { + if (step === 1 && !validateStep1()) return; + if (step === 2 && !validateStep2()) return; // Validation for step 2 before confirmation + setStep(prev => prev + 1); + }; + + const prevStep = () => setStep(prev => prev - 1); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Here you would typically send formData to a backend + alert('Booking submitted: ' + JSON.stringify(formData, null, 2)); + setStep(1); // Reset form + setFormData({ name: '', email: '', phone: '', date: '', time: '', guests: 1, notes: '' }); + }; + + const renderStep = () => { + switch (step) { + case 1: + return ( +
+

Your Details

+
+ + {errors.name &&

{errors.name as string}

} +
+
+ + {errors.email &&

{errors.email as string}

} +
+
+ +
+ +
+ ); + case 2: + return ( +
+

Booking Details

+
+ + {errors.date &&

{errors.date as string}

} +
+
+ + {errors.time &&

{errors.time as string}

} +
+
+ + + {errors.guests &&

{errors.guests as string}

} +
+
+ + +
+
+ ); + case 3: + return ( +
+

Confirmation

+

Name: {formData.name}

+

Email: {formData.email}

+

Phone: {formData.phone}

+

Date: {formData.date}

+

Time: {formData.time}

+

Guests: {formData.guests}

+
+ + +
+
+ + +
+
+ ); + default: + return null; + } + }; + + return ( + + +
+
+

Book Your Table

+
+
1
+
+
2
+
+
3
+
+ {renderStep()} +
+
+ + + ); +} diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx new file mode 100644 index 0000000..bfdd99a --- /dev/null +++ b/src/app/contact/page.tsx @@ -0,0 +1,109 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; + +const navItems = [ + { name: "Home", href: "/" }, + { name: "Menu", id: "#menu-preview" }, + { name: "Events", id: "#private-events" }, + { name: "Reserve", href: "/book" }, + { name: "Find Us", href: "/contact" } +]; + +const footerColumns = [ + { + items: [ + { label: "Menu", href: "#menu-preview" }, + { label: "Events", href: "#private-events" }, { label: "Reservations", href: "/book" }, + { label: "Contact", href: "/contact" } + ] + }, + { + items: [ + { label: "Privacy Policy", href: "#" }, + { label: "Terms of Service", href: "#" }, + { label: "Cookie Policy", href: "#" } + ] + }, + { + items: [ + { label: "Instagram", href: "https://www.instagram.com/nowhereabudhabi" }, + { label: "Facebook", href: "https://www.facebook.com/nowhereabudhabi" } + ] + } +]; + +export default function ContactPage() { + return ( + + +
+
+

Visit Us

+ +
+
+
+

Our Location

+

Address: Downtown, Al Maryah Island, Abu Dhabi

+

Phone: +971 50 123 4567

+

Email: info@nowhereabudhabi.com

+

Exact location details will be provided upon reservation confirmation.

+
+
+ +
+ +
+
+ +
+

Opening Hours

+
    +
  • Dinner: Monday - Saturday, 7:00 PM - 1:00 AM
    • +
  • Café: Daily, 10:00 AM - 5:00 PM
    • +
  • Bar: Daily, 5:00 PM - 2:00 AM
    • +
+

We look forward to welcoming you to Nowhere.

+
+
+
+ + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 55ce5e5..db84f1b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,6 +12,8 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import ProductCardTwo from '@/components/sections/product/ProductCardTwo'; import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix'; +import ProductCardThree from '@/components/sections/product/ProductCardThree'; +import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive'; export default function LandingPage() { return ( @@ -35,6 +37,10 @@ export default function LandingPage() { name: "Home", id: "#hero"}, { name: "Menu", id: "#menu-preview"}, + { + name: "Before & After", id: "#before-after-gallery"}, + { + name: "Reviews", id: "#reviews"}, { name: "Events", id: "#private-events"}, { @@ -175,6 +181,49 @@ export default function LandingPage() { /> + + +
+ +
+
); -} +} \ No newline at end of file