first commit
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
export default function ReservationPage() {
|
||||
const t = useTranslations('reservation')
|
||||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
date: '',
|
||||
time: '',
|
||||
guests: '2',
|
||||
occasion: '',
|
||||
requests: ''
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// Parallax effect for hero
|
||||
const handleScroll = () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const heroImage = document.querySelector('.hero-parallax') as HTMLElement;
|
||||
if (heroImage) {
|
||||
heroImage.style.transform = `scale(1.05) translateY(${scrolled * 0.3}px)`;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitted(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[1024px] flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img alt="Teras Dining Room" className="hero-parallax w-full h-full object-cover blur-[4px] brightness-[0.3] scale-105 transition-transform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXZYL1k1MqQOOTVS2XFNUlHm_ujv_2XGjXeqDdqmW2cAzGhZ4YKMmCEyrzgsxhvecujJ71E-2WyhGynN2dOx7cTZN5kWr0OZHk1YS922FdQrqWKJqnyutqRVAiqO4lSs7jQM_4hVi9a2o4y6rFBXIlTFyHZlUWudF1sTQtjjBmk1Nbdr-YCx5t_lcmRArh0U9Q9y3J3wMuZS-Zl-rNtMzgXSyEnwtoLSPzaSFugpPM3nmzszmAAiAdhDXRJZzycQCK8oPbMuQ5JXqp" />
|
||||
<div className="absolute inset-0 chiaroscuro-gradient"></div>
|
||||
</div>
|
||||
|
||||
{/* Booking Widget */}
|
||||
<div className="relative z-10 w-full max-w-2xl px-6" id="booking-container">
|
||||
{!isSubmitted ? (
|
||||
<div className="booking-card bg-surface-container/60 p-8 md:p-12 shadow-2xl transition-all duration-700 transform opacity-100 translate-y-0" id="reservation-form-wrapper">
|
||||
<div className="text-center mb-10">
|
||||
<span className="font-label-caps text-label-caps text-tertiary mb-4 block">{t('subtitle')}</span>
|
||||
<h1 className="font-headline-md text-headline-md text-on-surface">{t('title')}</h1>
|
||||
<div className="w-12 h-px bg-on-tertiary-container mx-auto mt-6"></div>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Date */}
|
||||
<div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
|
||||
<label className="font-label-caps text-[10px] text-on-surface-variant">{t('date')}</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2"
|
||||
value={formData.date}
|
||||
onChange={e => setFormData({...formData, date: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
{/* Time */}
|
||||
<div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
|
||||
<label className="font-label-caps text-[10px] text-on-surface-variant">{t('time')}</label>
|
||||
<input
|
||||
type="time"
|
||||
required
|
||||
className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2"
|
||||
value={formData.time}
|
||||
onChange={e => setFormData({...formData, time: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Guests */}
|
||||
<div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
|
||||
<label className="font-label-caps text-[10px] text-on-surface-variant">{t('guests')}</label>
|
||||
<select
|
||||
required
|
||||
className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2 appearance-none"
|
||||
value={formData.guests}
|
||||
onChange={e => setFormData({...formData, guests: e.target.value})}
|
||||
>
|
||||
<option className="bg-surface" value="1">1 {t('person')}</option>
|
||||
<option className="bg-surface" value="2">2 {t('person')}</option>
|
||||
<option className="bg-surface" value="3">3 {t('person')}</option>
|
||||
<option className="bg-surface" value="4">4 {t('person')}</option>
|
||||
<option className="bg-surface" value="5+">5+ {t('person')}</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* Occasion */}
|
||||
<div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
|
||||
<label className="font-label-caps text-[10px] text-on-surface-variant">{t('occasion')}</label>
|
||||
<select
|
||||
className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2 appearance-none"
|
||||
value={formData.occasion}
|
||||
onChange={e => setFormData({...formData, occasion: e.target.value})}
|
||||
>
|
||||
<option className="bg-surface" value="">{t('occasion_none')}</option>
|
||||
<option className="bg-surface" value="birthday">{t('occasion_birthday')}</option>
|
||||
<option className="bg-surface" value="anniversary">{t('occasion_anniversary')}</option>
|
||||
<option className="bg-surface" value="business">{t('occasion_business')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Special Requests */}
|
||||
<div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
|
||||
<label className="font-label-caps text-[10px] text-on-surface-variant">{t('requests')}</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2 resize-none placeholder:text-outline-variant"
|
||||
placeholder={t('requests_placeholder')}
|
||||
value={formData.requests}
|
||||
onChange={e => setFormData({...formData, requests: e.target.value})}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="w-full bg-secondary-container text-on-secondary-container py-4 font-label-caps text-label-caps tracking-[0.2em] hover:brightness-110 transition-all duration-300 shadow-lg mt-8 active:scale-[0.98]">
|
||||
{t('submit')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div className="booking-card bg-surface-container/80 p-12 text-center shadow-2xl transition-all duration-700 opacity-100 transform translate-y-0" id="success-state">
|
||||
<div className="mb-8">
|
||||
<span className="material-symbols-outlined text-tertiary text-6xl" style={{ fontVariationSettings: "'wght' 200" }}>check_circle</span>
|
||||
</div>
|
||||
<h2 className="font-headline-md text-headline-md text-on-surface mb-4">{t('success_title')}</h2>
|
||||
<p className="text-on-surface-variant font-body-md mb-10 max-w-sm mx-auto">
|
||||
{t('success_desc')}
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 max-w-xs mx-auto">
|
||||
<div className="flex justify-between border-b border-outline-variant/30 pb-2">
|
||||
<span className="font-label-caps text-[10px] text-on-surface-variant">{t('guests')}</span>
|
||||
<span className="font-body-md text-tertiary">{formData.guests} {t('person')}</span>
|
||||
</div>
|
||||
<div className="flex justify-between border-b border-outline-variant/30 pb-2">
|
||||
<span className="font-label-caps text-[10px] text-on-surface-variant">{t('time')}</span>
|
||||
<span className="font-body-md text-tertiary">{formData.time || '19:30'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => setIsSubmitted(false)} className="mt-12 text-secondary font-label-caps text-label-caps border-b border-secondary pb-1 hover:text-tertiary hover:border-tertiary transition-colors">
|
||||
{t('book_another')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex flex-col items-center gap-4">
|
||||
<div className="w-px h-16 bg-gradient-to-b from-transparent via-on-tertiary-container to-transparent"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Informational Section */}
|
||||
<section className="bg-background py-[var(--spacing-section-padding)] px-[var(--spacing-gutter)]">
|
||||
<div className="max-w-[var(--spacing-container-max)] mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<div className="space-y-4">
|
||||
<span className="material-symbols-outlined text-tertiary text-4xl">local_fire_department</span>
|
||||
<h3 className="font-headline-sm text-headline-sm text-on-surface">{t('info_title1')}</h3>
|
||||
<p className="text-on-surface-variant text-body-md">{t('info_desc1')}</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<span className="material-symbols-outlined text-tertiary text-4xl">restaurant_menu</span>
|
||||
<h3 className="font-headline-sm text-headline-sm text-on-surface">{t('info_title2')}</h3>
|
||||
<p className="text-on-surface-variant text-body-md">{t('info_desc2')}</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<span className="material-symbols-outlined text-tertiary text-4xl">wine_bar</span>
|
||||
<h3 className="font-headline-sm text-headline-sm text-on-surface">{t('info_title3')}</h3>
|
||||
<p className="text-on-surface-variant text-body-md">{t('info_desc3')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user