Merge version_9 into main

Merge version_9 into main

src/app/page.tsx

@@ -11,6 +11,8 @@ 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';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 
 export default function LandingPage() {
   return (
@@ -256,6 +258,104 @@ export default function LandingPage() {
         />
       </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="hero" data-section="hero">
+        <HeroBillboardCarousel
+            title="Discover Omakase Niseko"
+            description="Experience the ultimate in Japanese dining with our exclusive Omakase menu. Each dish is a masterpiece crafted by our skilled chefs."
+            background={{ variant: "downward-rays-animated" }}
+            tag="Exclusive"
+            buttons={[
+                { label: "Book Now", href: "/book", variant: "primary" },
+                { label: "Learn More", href: "/about", variant: "secondary" }
+            ]}
+            mediaItems={[
+                { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Omakase Niseko Dining Experience" },
+                { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Omakase Niseko Chef Preparing Dish" },
+                { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Omakase Niseko Customer Enjoying Meal" }
+            ]}
+            ariaLabel="Hero section showcasing Omakase Niseko dining experience"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={[

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -101,27 +101,30 @@ const HeroBillboardCarousel = ({
             <HeroBackgrounds {...background} />
             <div className={cls(
                 "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
-                "w-full md:w-content-width md:h-full md:items-center md:justify-center",
+                "w-full md:w-content-width md:h-full md:items-start md:justify-center",
                 containerClassName
             )}>
-                <TextBox
-                    title={title}
-                    description={description}
-                    tag={tag}
-                    tagIcon={tagIcon}
-                    buttons={buttons}
-                    className={cls(
-                        "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
-                        textBoxClassName
-                    )}
-                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
-                    descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
-                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
-                    buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
-                    buttonClassName={buttonClassName}
-                    buttonTextClassName={buttonTextClassName}
-                    center={true}
-                />
+                <div className="flex flex-col md:flex-row md:items-start md:justify-between">
+                    <TextBox
+                        title={title}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        buttons={buttons}
+                        className={cls(
+                            "flex flex-col gap-3 md:gap-1 w-content-width",
+                            textBoxClassName
+                        )}
+                        titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                        descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+                        tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                        buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
+                        buttonClassName={cls("rounded-full shadow-3d", buttonClassName)}
+                        buttonTextClassName={buttonTextClassName}
+                        center={false}
+                    />
+                    <h2 className="mt-10 md:mt-0">Hero Section Title</h2>
+                </div>
 
                 <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
                     <AutoCarousel