Bob AI: create a whole new hero section

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -44,23 +44,29 @@ export default function LandingPage() {
       </div>
 
       <div id="hero-section" data-section="hero-section">
-        <HeroSplit
-          background={{ variant: "glowing-orb" }}
-          title="Artisan Baked Goods Delivered to Your Door"
-          description="Experience the warmth of homemade bread, freshly baked pastries, and custom cakes made with love using time-honored techniques and the finest ingredients."
-          tag="Fresh Daily"
+        <HeroBillboard
+          title="Freshly Baked Every Morning"
+          description="Discover our artisan collection of sourdough breads, buttery croissants, and decadent pastries crafted with premium ingredients and traditional baking methods."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Baked Fresh Daily"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Order Now", href: "#product-section" },
-            { text: "Visit Us", href: "#contact-section" }
+            { text: "Shop Now", href: "#products", dataWebildId: "hero_shop_btn" },
+            { text: "Learn More", href: "#about", dataWebildId: "hero_learn_btn" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc="https://img.b2bpic.net/free-photo/modern-bakery-shop-with-assortment-bread-shelf_169016-37564.jpg"
-          imageAlt="Warm, inviting bakery interior with fresh bread and pastries on display"
+          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
+          imageAlt="Golden-brown artisan breads and pastries fresh from the oven"
           mediaAnimation="slide-up"
-          imagePosition="right"
-          fixedMediaHeight={true}
+          marqueeItems={[
+            { text: "Sourdough", icon: Sparkles },
+            { text: "Croissants", icon: Sparkles },
+            { text: "Cinnamon Rolls", icon: Sparkles },
+            { text: "Custom Cakes", icon: Sparkles }
+          ]}
+          marqueeSpeed={50}
+          showMarqueeCard={true}
         />
       </div>
 

src/components/sections/about/MediaAbout.tsx

@@ -64,34 +64,46 @@ const MediaAbout = ({
             aria-label={ariaLabel}
             className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
         >
-            <div className={cls("relative w-content-width mx-auto aspect-auto min-h-70 md:aspect-video md:min-h-0 rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
-                <MediaContent
-                    imageSrc={imageSrc}
-                    videoSrc={videoSrc}
-                    imageAlt={imageAlt}
-                    videoAriaLabel={videoAriaLabel}
-                    imageClassName={cls("w-full h-full object-cover", mediaClassName)}
-                />
-                <div className="absolute inset-0 z-0 bg-background/40 backdrop-blur-xs pointer-events-none select-none rounded-theme-capped" />
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                    <div className="relative z-10 flex items-center justify-center h-full w-content-width p-5 md:w-45 mx-auto">
-                        <TextBox
-                            title={title}
-                            description={description}
-                            tag={tag}
-                            tagIcon={tagIcon}
-                            tagAnimation={tagAnimation}
-                            buttons={buttons}
-                            buttonAnimation={buttonAnimation}
-                            className={cls("flex flex-col gap-3 md:gap-1", 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 max-md:justify-center mt-3", buttonContainerClassName)}
-                            buttonClassName={buttonClassName}
-                            buttonTextClassName={buttonTextClassName}
-                            center={true}
+            <div className={cls("relative w-content-width mx-auto aspect-auto min-h-70 md:aspect-video md:min-h-0 rounded-theme-capped overflow-visible", mediaWrapperClassName)} style={{ perspective: "1000px" }}>
+                <div className="relative w-full h-full rounded-theme-capped overflow-hidden" style={{ transformStyle: "preserve-3d", transition: "transform 0.6s ease-in-out" }} onMouseEnter={(e) => { e.currentTarget.style.transform = "rotateY(180deg)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "rotateY(0deg)"; }}>
+                    {/* Front side */}
+                    <div style={{ backfaceVisibility: "hidden" }}>
+                        <MediaContent
+                            imageSrc={imageSrc}
+                            videoSrc={videoSrc}
+                            imageAlt={imageAlt}
+                            videoAriaLabel={videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
                         />
+                        <div className="absolute inset-0 z-0 bg-background/40 backdrop-blur-xs pointer-events-none select-none rounded-theme-capped" />
+                        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                            <div className="relative z-10 flex items-center justify-center h-full w-content-width p-5 md:w-45 mx-auto">
+                                <TextBox
+                                    title={title}
+                                    description={description}
+                                    tag={tag}
+                                    tagIcon={tagIcon}
+                                    tagAnimation={tagAnimation}
+                                    buttons={buttons}
+                                    buttonAnimation={buttonAnimation}
+                                    className={cls("flex flex-col gap-3 md:gap-1", 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 max-md:justify-center mt-3", buttonContainerClassName)}
+                                    buttonClassName={buttonClassName}
+                                    buttonTextClassName={buttonTextClassName}
+                                    center={true}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    {/* Back side */}
+                    <div className="absolute inset-0 w-full h-full bg-foreground rounded-theme-capped flex items-center justify-center p-5" style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }}>
+                        <div className="text-center">
+                            <h3 className="text-4xl font-medium text-background mb-4">Discover More</h3>
+                            <p className="text-base md:text-lg text-background/80 leading-[1.2]">Explore our artisanal craftsmanship and heritage. Hover back to see the front.</p>
+                        </div>
                     </div>
                 </div>
             </div>

src/components/sections/product/ProductCardOne.tsx

@@ -73,7 +73,7 @@ const ProductCardItem = memo(({
 }: ProductCardItemProps) => {
     return (
         <article
-            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped transition-all duration-300 ease-out hover:scale-105 hover:shadow-lg", cardClassName)}
             onClick={product.onProductClick}
             role="article"
             aria-label={`${product.name} - ${product.price}`}