Bob AI: Can you make the buttons look more 3d and round th...

Merge version_6 into main

src/app/page.tsx

@@ -12,6 +12,7 @@ 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 (
@@ -318,6 +319,43 @@ export default function LandingPage() {
         />
       </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

@@ -118,7 +118,7 @@ const HeroBillboardCarousel = ({
                     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}
+                    buttonClassName={cls("rounded-full shadow-3d", buttonClassName)}
                     buttonTextClassName={buttonTextClassName}
                     center={true}
                 />