321 lines
17 KiB
TypeScript
321 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
export default function OmakasePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="plain"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="neon-glow-border"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero" className="relative h-screen flex items-center justify-center overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background/90"></div>
|
|
<div className="absolute inset-0 bg-[url('/placeholders/placeholder1.webp')] bg-cover bg-center opacity-20"></div>
|
|
<div className="relative z-10 text-center px-4 md:px-6">
|
|
<h1 className="text-6xl md:text-8xl font-medium text-foreground mb-6 tracking-tight">
|
|
Omakase
|
|
</h1>
|
|
<h2 className="text-2xl md:text-4xl text-foreground/80 mb-8 font-light">
|
|
Premium Japanese Dining in Niseko
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-foreground/70 max-w-2xl mx-auto mb-12 leading-relaxed">
|
|
Experience the art of traditional Japanese cuisine with our expertly crafted omakase menu, featuring the finest seasonal ingredients and centuries-old culinary techniques.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button className="px-8 py-4 bg-primary-cta text-white rounded-full font-medium hover:bg-primary-cta/90 transition-all duration-300 hover:scale-105">
|
|
Reserve Your Experience
|
|
</button>
|
|
<button className="px-8 py-4 border border-foreground/20 text-foreground rounded-full font-medium hover:border-foreground/40 transition-all duration-300">
|
|
View Our Story
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* About Metrics Section */}
|
|
<div id="about" data-section="about" className="py-24 bg-card">
|
|
<div className="container mx-auto px-4 md:px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
|
|
Crafted with Precision
|
|
</h2>
|
|
<p className="text-lg text-foreground/70 max-w-3xl mx-auto">
|
|
Our dedication to excellence is reflected in every aspect of our culinary journey
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
|
<div className="text-center">
|
|
<div className="text-5xl md:text-6xl font-bold text-primary-cta mb-4">
|
|
25+
|
|
</div>
|
|
<h3 className="text-xl font-medium text-foreground mb-2">
|
|
Years of Expertise
|
|
</h3>
|
|
<p className="text-foreground/70">
|
|
Decades of mastering traditional Japanese culinary arts
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-5xl md:text-6xl font-bold text-primary-cta mb-4">
|
|
100%
|
|
</div>
|
|
<h3 className="text-xl font-medium text-foreground mb-2">
|
|
Locally Sourced
|
|
</h3>
|
|
<p className="text-foreground/70">
|
|
Fresh ingredients sourced daily from Hokkaido's finest suppliers
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-5xl md:text-6xl font-bold text-primary-cta mb-4">
|
|
32
|
|
</div>
|
|
<h3 className="text-xl font-medium text-foreground mb-2">
|
|
Guests Daily
|
|
</h3>
|
|
<p className="text-foreground/70">
|
|
Intimate dining experiences with personalized attention
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feature Timeline Section */}
|
|
<div id="experience" data-section="experience" className="py-24 bg-background">
|
|
<div className="container mx-auto px-4 md:px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
|
|
The Omakase Journey
|
|
</h2>
|
|
<p className="text-lg text-foreground/70 max-w-3xl mx-auto">
|
|
Discover the artistry behind each course in our carefully curated dining experience
|
|
</p>
|
|
</div>
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="space-y-16">
|
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
|
<div className="md:w-1/2">
|
|
<div className="w-16 h-16 bg-primary-cta/10 rounded-full flex items-center justify-center mb-6">
|
|
<div className="w-8 h-8 bg-primary-cta rounded-full flex items-center justify-center">
|
|
<span className="text-white font-bold">1</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-medium text-foreground mb-4">
|
|
Seasonal Selection
|
|
</h3>
|
|
<p className="text-foreground/70 leading-relaxed">
|
|
Our chef personally selects the finest seasonal ingredients each morning, ensuring peak freshness and flavor in every dish.
|
|
</p>
|
|
</div>
|
|
<div className="md:w-1/2">
|
|
<div className="aspect-video bg-card rounded-lg overflow-hidden">
|
|
<img src="/placeholders/placeholder1.webp" alt="Seasonal ingredient selection" className="w-full h-full object-cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col md:flex-row-reverse items-center gap-12">
|
|
<div className="md:w-1/2">
|
|
<div className="w-16 h-16 bg-primary-cta/10 rounded-full flex items-center justify-center mb-6">
|
|
<div className="w-8 h-8 bg-primary-cta rounded-full flex items-center justify-center">
|
|
<span className="text-white font-bold">2</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-medium text-foreground mb-4">
|
|
Masterful Preparation
|
|
</h3>
|
|
<p className="text-foreground/70 leading-relaxed">
|
|
Each course is prepared with meticulous attention to detail, combining traditional techniques with modern precision.
|
|
</p>
|
|
</div>
|
|
<div className="md:w-1/2">
|
|
<div className="aspect-video bg-card rounded-lg overflow-hidden">
|
|
<img src="/placeholders/placeholder1.webp" alt="Chef preparation" className="w-full h-full object-cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col md:flex-row items-center gap-12">
|
|
<div className="md:w-1/2">
|
|
<div className="w-16 h-16 bg-primary-cta/10 rounded-full flex items-center justify-center mb-6">
|
|
<div className="w-8 h-8 bg-primary-cta rounded-full flex items-center justify-center">
|
|
<span className="text-white font-bold">3</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-medium text-foreground mb-4">
|
|
Intimate Service
|
|
</h3>
|
|
<p className="text-foreground/70 leading-relaxed">
|
|
Experience personalized service as each dish is presented with the story behind its creation and cultural significance.
|
|
</p>
|
|
</div>
|
|
<div className="md:w-1/2">
|
|
<div className="aspect-video bg-card rounded-lg overflow-hidden">
|
|
<img src="/placeholders/placeholder1.webp" alt="Intimate dining service" className="w-full h-full object-cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials" className="py-24 bg-card">
|
|
<div className="container mx-auto px-4 md:px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
|
|
Guest Experiences
|
|
</h2>
|
|
<p className="text-lg text-foreground/70 max-w-3xl mx-auto">
|
|
Discover what our guests say about their unforgettable omakase experiences
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div className="bg-background/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
|
|
<div className="flex items-center mb-4">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<span key={i} className="text-accent text-lg">★</span>
|
|
))}
|
|
</div>
|
|
<p className="text-foreground/80 mb-6 italic">
|
|
"An absolutely transcendent dining experience. Each course was a masterpiece that told a story of Japanese culinary tradition."
|
|
</p>
|
|
<div className="flex items-center">
|
|
<div className="w-12 h-12 bg-primary-cta/20 rounded-full flex items-center justify-center mr-4">
|
|
<span className="text-primary-cta font-medium">S.K.</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-foreground">Sarah Kim</div>
|
|
<div className="text-sm text-foreground/60">Food Critic</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-background/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
|
|
<div className="flex items-center mb-4">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<span key={i} className="text-accent text-lg">★</span>
|
|
))}
|
|
</div>
|
|
<p className="text-foreground/80 mb-6 italic">
|
|
"The attention to detail and the chef's passion for his craft was evident in every single bite. Truly extraordinary."
|
|
</p>
|
|
<div className="flex items-center">
|
|
<div className="w-12 h-12 bg-primary-cta/20 rounded-full flex items-center justify-center mr-4">
|
|
<span className="text-primary-cta font-medium">M.T.</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-foreground">Michael Thompson</div>
|
|
<div className="text-sm text-foreground/60">Culinary Enthusiast</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-background/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
|
|
<div className="flex items-center mb-4">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<span key={i} className="text-accent text-lg">★</span>
|
|
))}
|
|
</div>
|
|
<p className="text-foreground/80 mb-6 italic">
|
|
"A perfect blend of tradition and innovation. The intimate setting made this a truly memorable anniversary celebration."
|
|
</p>
|
|
<div className="flex items-center">
|
|
<div className="w-12 h-12 bg-primary-cta/20 rounded-full flex items-center justify-center mr-4">
|
|
<span className="text-primary-cta font-medium">A.L.</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-foreground">Anna Lee</div>
|
|
<div className="text-sm text-foreground/60">Travel Blogger</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Newsletter Section */}
|
|
<div id="contact" data-section="contact" className="py-24 bg-background">
|
|
<div className="container mx-auto px-4 md:px-6">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
|
|
Reserve Your Experience
|
|
</h2>
|
|
<p className="text-lg text-foreground/70 mb-12 max-w-2xl mx-auto">
|
|
Join our exclusive list to receive updates on seasonal menus and secure your reservation for an unforgettable omakase experience.
|
|
</p>
|
|
<div className="bg-card/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
|
|
<div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email address"
|
|
className="flex-1 px-6 py-4 bg-background/50 border border-foreground/20 rounded-full text-foreground placeholder:text-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
|
|
/>
|
|
<button className="px-8 py-4 bg-primary-cta text-white rounded-full font-medium hover:bg-primary-cta/90 transition-all duration-300 hover:scale-105">
|
|
Reserve Now
|
|
</button>
|
|
</div>
|
|
<p className="text-sm text-foreground/60 mt-4">
|
|
Limited seating available. Reservations required 48 hours in advance.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-16">
|
|
<div className="text-left">
|
|
<h3 className="text-xl font-medium text-foreground mb-4">Location</h3>
|
|
<p className="text-foreground/70 mb-2">123 Omakase Street</p>
|
|
<p className="text-foreground/70 mb-2">Niseko, Hokkaido 044-0081</p>
|
|
<p className="text-foreground/70">Japan</p>
|
|
</div>
|
|
<div className="text-left">
|
|
<h3 className="text-xl font-medium text-foreground mb-4">Hours</h3>
|
|
<p className="text-foreground/70 mb-2">Dinner: 6:00 PM - 10:00 PM</p>
|
|
<p className="text-foreground/70 mb-2">Tuesday - Sunday</p>
|
|
<p className="text-foreground/70">Closed Mondays</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Section */}
|
|
<div id="footer" data-section="footer" className="py-16 bg-card border-t border-foreground/10">
|
|
<div className="container mx-auto px-4 md:px-6">
|
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
|
<div className="mb-8 md:mb-0">
|
|
<h3 className="text-3xl font-medium text-foreground mb-2">Omakase</h3>
|
|
<p className="text-foreground/70">Premium Japanese Dining Experience</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-8">
|
|
<div className="text-center md:text-left">
|
|
<h4 className="font-medium text-foreground mb-2">Contact</h4>
|
|
<p className="text-sm text-foreground/70">+81 123-456-7890</p>
|
|
<p className="text-sm text-foreground/70">info@omakaseniseko.jp</p>
|
|
</div>
|
|
<div className="text-center md:text-left">
|
|
<h4 className="font-medium text-foreground mb-2">Follow</h4>
|
|
<div className="flex gap-4 justify-center md:justify-start">
|
|
<a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">Instagram</a>
|
|
<a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">Facebook</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-foreground/10 mt-8 pt-8 text-center">
|
|
<p className="text-sm text-foreground/60">
|
|
© 2024 Omakase Niseko. All rights reserved. | Crafted with passion for Japanese culinary excellence.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |