Merge version_6 into main

Merge version_6 into main

src/app/page.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
@@ -11,6 +11,7 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Wheat, Coffee, Cake, Cookie, Heart, MapPin, Instagram, Facebook, Mail, Sparkles, Award } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 
 export default function LandingPage() {
   return (
@@ -27,7 +28,7 @@ export default function LandingPage() {
       headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
+        <NavbarStyleApple
           brandName="Artisan Bakery"
           navItems={[
             { name: "Home", id: "hero" },
@@ -36,27 +37,45 @@ export default function LandingPage() {
             { name: "Contact", id: "contact" },
             { name: "Order Online", id: "pricing" }
           ]}
-          bottomLeftText="Freshly Baked Daily"
-          bottomRightText="hello@artisanbakery.com"
         />
       </div>
       
       <div id="hero" data-section="hero">
-        <HeroCentered
-          title="Welcome to Artisan Bakery"
-          description="Experience the warmth of freshly baked bread, pastries, and cakes made with love and premium ingredients. From sourdough to croissants, every bite tells a story of craftsmanship."
-          background={{ variant: "plain" }}
-          avatars={[
-            { src: "http://img.b2bpic.net/free-photo/tablet-mobile-female-using-phone_1303-2074.jpg", alt: "Happy customer enjoying fresh bread" },
-            { src: "http://img.b2bpic.net/free-photo/cook-accurately-breaks-egg-make-dough-ingredients-cooking-flour-products-dough-bread-muffins-pie-pizza-dough-copy-space_639032-453.jpg", alt: "Artisan baker at work" },
-            { src: "http://img.b2bpic.net/free-photo/various-baking-supermarket-shelves-sale_627829-7384.jpg", alt: "Golden pastries fresh from the oven" }
-          ]}
-          avatarText="Trusted by thousands of families"
+        <HeroBillboardRotatedCarousel
+          title="Artisan Bakery"
+          description="Discover our rotating selection of freshly baked masterpieces. From traditional sourdough to delicate French pastries, each creation is crafted with passion and premium ingredients."
+          background={{ variant: "radial-gradient" }}
+          tag="Freshly Baked Daily"
           buttons={[
-            { text: "Order Now", href: "pricing" },
-            { text: "Learn Our Story", href: "about" }
+            { label: "Order Now", href: "#order", dataWebildId: "hero_order_btn" },
+            { label: "View Menu", href: "#menu", dataWebildId: "hero_menu_btn" }
           ]}
           buttonAnimation="slide-up"
+          carouselItems={[
+            {
+              id: "item-1",
+              imageSrc: "https://img.b2bpic.net/free-photo/close-up-delicious-croissants_23-2149199145.jpg",
+              imageAlt: "Golden croissants fresh from the oven"
+            },
+            {
+              id: "item-2",
+              imageSrc: "https://img.b2bpic.net/free-photo/artisan-sourdough-bread-rustic-table_23-2149199234.jpg",
+              imageAlt: "Rustic sourdough loaf with perfect crust"
+            },
+            {
+              id: "item-3",
+              imageSrc: "https://img.b2bpic.net/free-photo/assorted-pastries-display-bakery-case_23-2149199312.jpg",
+              imageAlt: "Assorted pastries and cakes"
+            },
+            {
+              id: "item-4",
+              imageSrc: "https://img.b2bpic.net/free-photo/chocolate-eclairs-elegant-presentation_23-2149199401.jpg",
+              imageAlt: "Elegant chocolate eclairs"
+            }
+          ]}
+          autoPlay={true}
+          autoPlayInterval={5000}
+          ariaLabel="Artisan Bakery hero section with rotating product carousel"
         />
       </div>
       

src/components/sections/about/MediaAbout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-
+import { useState } from "react";
 import MediaContent from "@/components/shared/MediaContent";
 import TextBox from "@/components/Textbox";
 import { cls } from "@/lib/utils";
@@ -31,6 +31,11 @@ interface MediaAboutProps {
     buttonTextClassName?: string;
     mediaWrapperClassName?: string;
     mediaClassName?: string;
+    backgroundVideoSrc?: string;
+    backgroundVideoAriaLabel?: string;
+    backSideTitle?: string;
+    backSideDescription?: string;
+    enableFlip?: boolean;
 }
 
 const MediaAbout = ({
@@ -57,42 +62,110 @@ const MediaAbout = ({
     buttonTextClassName = "",
     mediaWrapperClassName = "",
     mediaClassName = "",
+    backgroundVideoSrc,
+    backgroundVideoAriaLabel,
+    backSideTitle = "Learn More",
+    backSideDescription = "Discover additional details about our story and mission.",
+    enableFlip = false,
 }: MediaAboutProps) => {
+    const [isFlipped, setIsFlipped] = useState(false);
 
     return (
         <section
             aria-label={ariaLabel}
+            style={backgroundVideoSrc ? { position: "relative" } : undefined}
+            className={cls("relative", backgroundVideoSrc && "overflow-hidden")}
             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-hidden", mediaWrapperClassName)}
+                style={enableFlip ? {
+                    perspective: "1000px",
+                    cursor: "pointer",
+                } : undefined}
+                onMouseEnter={() => enableFlip && setIsFlipped(true)}
+                onMouseLeave={() => enableFlip && setIsFlipped(false)}
+            >
+                <div
+                    style={enableFlip ? {
+                        position: "relative",
+                        width: "100%",
+                        height: "100%",
+                        transformStyle: "preserve-3d",
+                        transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+                        transition: "transform 0.6s ease-in-out",
+                    } : undefined}
+                >
+                    {/* Front side */}
+                    <div
+                        style={enableFlip ? {
+                            position: "absolute",
+                            width: "100%",
+                            height: "100%",
+                            backfaceVisibility: "hidden",
+                        } : undefined}
+                        className="group"
+                    >
+                        <MediaContent
+                            imageSrc={imageSrc}
+                            videoSrc={videoSrc}
+                            imageAlt={imageAlt}
+                            videoAriaLabel={videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover transition-shadow duration-300 group-hover:shadow-inner", 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 */}
+                    {enableFlip && (
+                        <div
+                            style={{
+                                position: "absolute",
+                                width: "100%",
+                                height: "100%",
+                                backfaceVisibility: "hidden",
+                                transform: "rotateY(180deg)",
+                                backgroundColor: useInvertedBackground ? "hsl(var(--background))" : "hsl(var(--foreground))",
+                            }}
+                            className="rounded-theme-capped"
+                        >
+                            <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={backSideTitle}
+                                        description={backSideDescription}
+                                        className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+                                        titleClassName={cls("text-4xl font-medium text-balance", titleClassName)}
+                                        descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+                                        buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-3", buttonContainerClassName)}
+                                        center={true}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    )}
                 </div>
             </div>
         </section>