372 lines
19 KiB
TypeScript
372 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Award, ChefHat, Users, Sparkles } from "lucide-react";
|
|
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="sharp"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Omakase Niseko"
|
|
navItems={[
|
|
{ name: "Experience", id: "experience" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reservations", id: "contact" },
|
|
{ name: "Gallery", id: "testimonials" }
|
|
]}
|
|
button={{
|
|
text: "Book Now", href: "#contact"
|
|
}}
|
|
className="backdrop-blur-md bg-black/40 border border-red-900/30"
|
|
navItemClassName="text-white hover:text-red-400 transition-colors"
|
|
buttonClassName="bg-red-600 hover:bg-red-700 text-white"
|
|
buttonTextClassName="font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Omakase Niseko"
|
|
description="Experience the pinnacle of Japanese culinary artistry. An intimate omakase journey featuring the finest seasonal ingredients, expertly prepared by our master sushi chef in the heart of Niseko's mountain paradise."
|
|
buttons={[
|
|
{ text: "Reserve Your Seat", href: "#contact" },
|
|
{ text: "Our Philosophy", href: "#about" }
|
|
]}
|
|
background={{ variant: "glowing-orb" }}
|
|
imageSrc="https://img.b2bpic.net/free-photo/sushi-roll_1203-3647.jpg"
|
|
imageAlt="Premium omakase sushi presentation"
|
|
frameStyle="card"
|
|
className="w-full"
|
|
logoClassName="text-white text-7xl md:text-8xl font-extrabold"
|
|
descriptionClassName="text-red-100 text-base md:text-xl"
|
|
buttonClassName="bg-red-600 hover:bg-red-700 text-white font-bold"
|
|
buttonTextClassName="font-extrabold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaSplitTabsAbout
|
|
title="The Omakase Experience"
|
|
description="Discover what makes Omakase Niseko an unforgettable culinary destination."
|
|
tabs={[
|
|
{
|
|
id: "craftsmanship", label: "Master Craftsmanship", description: "Our chef trained for over 20 years in Tokyo's most prestigious omakase restaurants. Every piece is crafted with meticulous attention to detail, showcasing decades of tradition and innovation combined."
|
|
},
|
|
{
|
|
id: "ingredients", label: "Finest Ingredients", description: "We source premium fish daily from Japan's leading distributors, ensuring only the finest seasonal ingredients reach your plate. Each piece is selected for texture, flavor, and perfection."
|
|
},
|
|
{
|
|
id: "philosophy", label: "Our Philosophy", description: "Omakase means 'trust the chef.' We believe in creating an intimate experience where the chef's expertise guides you through a carefully curated journey of flavors, textures, and traditions."
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/sushi-set-with-gold-color-table_140725-5505.jpg"
|
|
imageAlt="Master sushi chef in preparation"
|
|
imagePosition="right"
|
|
useInvertedBackground="noInvert"
|
|
className="w-full"
|
|
titleClassName="text-white text-4xl md:text-5xl font-extrabold"
|
|
descriptionClassName="text-gray-300 text-base md:text-lg"
|
|
tabClassName="text-gray-400 hover:text-red-400 transition-colors px-4 py-2 font-semibold border-b border-transparent hover:border-red-600"
|
|
activeTabClassName="text-red-500 border-b-2 border-red-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<FeatureCardTwentyThree
|
|
title="The Journey"
|
|
description="Each course is a masterpiece, carefully orchestrated to showcase the season's finest ingredients and the chef's creative vision."
|
|
features={[
|
|
{
|
|
id: "1", title: "Seasonal Selection", tags: ["Premium", "Curated"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/vertical-shot-fresh-tuna-salmon-scallop-nigiri-shrimp-sushi-chopsticks_181624-50855.jpg", imageAlt: "Fresh premium ingredients"
|
|
},
|
|
{
|
|
id: "2", title: "Intimate Counter Seating", tags: ["Exclusive", "Limited"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/empty-wood-chair_1339-6717.jpg", imageAlt: "Intimate restaurant counter"
|
|
},
|
|
{
|
|
id: "3", title: "Personalized Menu", tags: ["Bespoke", "Chef's Choice"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/sushi-set-with-gold-color-table_140725-5505.jpg", imageAlt: "Chef preparing personalized selection"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
tag="Experience"
|
|
tagIcon={Sparkles}
|
|
className="w-full"
|
|
cardTitleClassName="text-white font-bold text-xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
metrics={[
|
|
{
|
|
id: "1", value: "20+", title: "Years", description: "Master chef experience in Tokyo's finest restaurants", icon: Award
|
|
},
|
|
{
|
|
id: "2", value: "15", title: "Courses", description: "Average omakase journey with premium selections", icon: ChefHat
|
|
},
|
|
{
|
|
id: "3", value: "8", title: "Seats", description: "Exclusive counter seating for intimate experiences", icon: Users
|
|
}
|
|
]}
|
|
title="By The Numbers"
|
|
description="Excellence defined by precision and tradition"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
className="w-full"
|
|
valueClassName="text-red-500 text-8xl font-extrabold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Guest Experiences"
|
|
description="What our guests say about their omakase journey with us"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", handle: "Tokyo, Japan", testimonial: "An absolutely transcendent experience. The chef's knowledge and passion for every piece was evident. This is omakase at its finest.", imageSrc: "https://img.b2bpic.net/free-photo/lifestyle-people-learning-make-sushi_23-2149865319.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", name: "Takeshi Yamamoto", handle: "Osaka, Japan", testimonial: "I've enjoyed omakase across Japan, and this is exceptional. The quality of the fish is outstanding and the presentation is impeccable.", imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-cutting-eggplant-into-slices-cutting-board-with-knife-white-table_176474-1565.jpg", imageAlt: "Takeshi Yamamoto"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Richardson", handle: "London, UK", testimonial: "Worth every penny. The intimate setting, the masterful preparation, and the personalized attention made this unforgettable.", imageSrc: "https://img.b2bpic.net/free-photo/sushi-set-with-soybean-sauce_140725-4084.jpg", imageAlt: "Emma Richardson"
|
|
},
|
|
{
|
|
id: "4", name: "James Chen", handle: "Singapore", testimonial: "A true celebration of Japanese culinary art. Each course tells a story. Highly recommend for anyone seeking an authentic omakase experience.", imageSrc: "https://img.b2bpic.net/free-photo/view-people-learning-how-make-traditional-sushi-dish_23-2151186430.jpg", imageAlt: "James Chen"
|
|
},
|
|
{
|
|
id: "5", name: "Yuki Nakamura", handle: "Hokkaido, Japan", testimonial: "The chef's technique is flawless. Every ingredient is treated with the respect it deserves. This is true omakase.", imageSrc: "https://img.b2bpic.net/free-photo/lifestyle-people-learning-make-sushi_23-2149865319.jpg", imageAlt: "Yuki Nakamura"
|
|
},
|
|
{
|
|
id: "6", name: "Alexandra Petrov", handle: "Moscow, Russia", testimonial: "An extraordinary dining experience in a stunning mountain setting. The combination of culinary excellence and ambiance is perfect.", imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-cutting-eggplant-into-slices-cutting-board-with-knife-white-table_176474-1565.jpg", imageAlt: "Alexandra Petrov"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
speed={40}
|
|
topMarqueeDirection="left"
|
|
className="w-full"
|
|
cardClassName="bg-red-950/20 border border-red-900/50 rounded-lg p-6"
|
|
testimonialClassName="text-gray-100 text-sm line-clamp-2"
|
|
nameClassName="text-white font-bold text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Reserve Your Experience"
|
|
description="Book your intimate omakase journey. Our team will contact you to confirm your reservation and discuss any dietary preferences or special occasions."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
|
{ name: "date", type: "date", placeholder: "Preferred Date", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Dietary preferences, special occasions, or questions...", rows: 5,
|
|
required: false
|
|
}}
|
|
useInvertedBackground="noInvert"
|
|
imageSrc="https://img.b2bpic.net/free-photo/empty-wood-chair_1339-6716.jpg"
|
|
imageAlt="Restaurant ambiance and setting"
|
|
mediaPosition="right"
|
|
buttonText="Confirm Reservation"
|
|
className="w-full"
|
|
titleClassName="text-white text-4xl md:text-5xl font-extrabold"
|
|
descriptionClassName="text-gray-300 text-base md:text-lg mb-8"
|
|
buttonClassName="bg-red-600 hover:bg-red-700 text-white font-bold w-full py-3 rounded-lg transition-all duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<div id="ecommerce" data-section="ecommerce">
|
|
<ProductCatalog
|
|
layout="section"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Sushi Platter",
|
|
price: 25.00,
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "Sushi Platter",
|
|
rating: 4.8,
|
|
reviewCount: 120,
|
|
category: "Appetizers",
|
|
onProductClick: () => {}
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Tempura Assortment",
|
|
price: 18.00,
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "Tempura Assortment",
|
|
rating: 4.7,
|
|
reviewCount: 95,
|
|
category: "Appetizers",
|
|
onProductClick: () => {}
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Sashimi Selection",
|
|
price: 35.00,
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "Sashimi Selection",
|
|
rating: 4.9,
|
|
reviewCount: 150,
|
|
category: "Main Course",
|
|
onProductClick: () => {}
|
|
}
|
|
]}
|
|
searchPlaceholder="Search Omakase Niseko menu..."
|
|
emptyMessage="No items found in the menu"
|
|
className="mt-10"
|
|
gridClassName="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
|
|
cardClassName="bg-white rounded-lg shadow-md overflow-hidden"
|
|
imageClassName="w-full h-48 object-cover"
|
|
searchClassName="mb-4"
|
|
filterClassName="mb-4"
|
|
toolbarClassName="mb-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metric" data-section="metric">
|
|
<MetricCardOne
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "500+",
|
|
title: "Clients",
|
|
description: "Trusted by over 500 satisfied clients",
|
|
icon: () => <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Clients" className="w-10 h-10" />
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "20+",
|
|
title: "Years",
|
|
description: "Master chef experience in Tokyo's finest restaurants",
|
|
icon: () => <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Years" className="w-10 h-10" />
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "15",
|
|
title: "Courses",
|
|
description: "Average omakase journey with premium selections",
|
|
icon: () => <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Courses" className="w-10 h-10" />
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "8",
|
|
title: "Seats",
|
|
description: "Exclusive counter seating for intimate experiences",
|
|
icon: () => <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Seats" className="w-10 h-10" />
|
|
}
|
|
]}
|
|
title="By The Numbers"
|
|
description="Excellence defined by precision and tradition"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
className="w-full"
|
|
valueClassName="text-red-500 text-8xl font-extrabold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Our Partners"
|
|
description="At Omakase Niseko, we collaborate with a select group of companies to bring you the best experience. Here are some of our esteemed partners."
|
|
bulletPoints={[
|
|
{ title: "Sakura Hospitality", description: "Leading in luxury accommodations and services." },
|
|
{ title: "Niseko Lifts", description: "Providing reliable and efficient ski lift services." },
|
|
{ title: "Yukiguni Cuisine", description: "Specializing in traditional Japanese cuisine with a modern twist." },
|
|
{ title: "Niseko Outdoor Adventures", description: "Offering a wide range of outdoor activities and tours." }
|
|
]}
|
|
imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
|
|
imageAlt="Partnership ribbon with Omakase Niseko"
|
|
imagePosition="left"
|
|
textboxLayout="stacked"
|
|
useInvertedBackground="never"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Why Choose Omakase Niseko?"
|
|
description="Experience the essence of Japanese cuisine in the heart of Niseko. Here's why we stand out."
|
|
bulletPoints={[
|
|
{ title: "Seasonal Ingredients", description: "Using the freshest, locally-sourced ingredients to create each dish." },
|
|
{ title: "Master Chefs", description: "Crafting meals with precision and passion, led by our expert chefs." },
|
|
{ title: "Warm Ambiance", description: "Enjoy a cozy and inviting atmosphere that enhances your dining experience." },
|
|
{ title: "Exclusive Events", description: "Participate in special events and private dining experiences." }
|
|
]}
|
|
imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
|
|
imageAlt="Chef preparing a dish in a traditional Japanese kitchen"
|
|
imagePosition="right"
|
|
textboxLayout="stacked"
|
|
useInvertedBackground="never"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Experience", items: [
|
|
{ label: "The Omakase", href: "#experience" },
|
|
{ label: "Our Philosophy", href: "#about" },
|
|
{ label: "Reservations", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Location", items: [
|
|
{ label: "Niseko, Hokkaido", href: "#" },
|
|
{ label: "Hours: 5:00 PM - 11:00 PM", href: "#" },
|
|
{ label: "Closed Mondays", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Inquiries", href: "mailto:info@omakaseniseko.com" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Omakase Niseko. All rights reserved."
|
|
className="w-full"
|
|
columnTitleClassName="text-white font-extrabold text-lg mb-4"
|
|
columnItemClassName="text-gray-400 hover:text-red-400 transition-colors text-sm mb-2"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |