Bob AI: Add 3D flip animation to product cards on hover. Front side

Merge version_3 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import TextAbout from '@/components/sections/about/TextAbout';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
@@ -40,19 +40,39 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
+        <HeroBillboardCarousel
-          logoText="Artisan Bakery"
+          title="Freshly Baked Every Morning"
-          description="Freshly baked goodness, crafted daily with premium ingredients and time-honored techniques. Experience the warmth and comfort of authentic artisan baking."
+          description="Discover our rotating selection of artisan breads, pastries, and seasonal specialties. Each item is crafted with premium ingredients and traditional baking methods."
+          background={{ variant: "radial-gradient" }}
+          tag="New Collection"
+          tagAnimation="pulse"
           buttons={[
-            { text: "Order Now", href: "#order" },
+            { text: "Shop Now", href: "#shop", dataWebildId: "hero_shop_btn" },
-            { text: "Learn More", href: "#about" }
+            { text: "View Menu", href: "#menu", dataWebildId: "hero_menu_btn" }
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "sparkles-gradient" }}
+          mediaItems={[
-          imageSrc="http://img.b2bpic.net/free-photo/baker-with-flour-hand_169016-1422.jpg"
+            {
-          imageAlt="Fresh artisan bakery display"
+              imageSrc: "https://img.b2bpic.net/free-photo/baker-with-flour-hand_169016-1422.jpg?_wi=1",
-          mediaAnimation="slide-up"
+              imageAlt: "Artisan sourdough bread"
-          frameStyle="card"
+            },
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg?_wi=1",
+              imageAlt: "Fresh croissants display"
+            },
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/baker-with-flour-hand_169016-1422.jpg?_wi=2",
+              imageAlt: "Seasonal pastry collection"
+            },
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg?_wi=2",
+              imageAlt: "Custom cake designs"
+            }
+          ]}
+          ariaLabel="Hero carousel showcasing artisan bakery products"
+          containerClassName="py-20"
+          titleClassName="text-5xl font-bold text-amber-900"
+          descriptionClassName="text-lg text-amber-700"
         />
       </div>
 

src/components/sections/product/ProductCardFour.tsx

@@ -2,6 +2,8 @@
 
 import { memo, useCallback } from "react";
 import { useRouter } from "next/navigation";
+
+import { useState } from "react";
 import CardStack from "@/components/cardStack/CardStack";
 import ProductImage from "@/components/shared/ProductImage";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
@@ -68,7 +70,118 @@ interface ProductCardItemProps {
   actionButtonClassName?: string;
 }
 
-const ProductCardItem = memo(({
+const ProductCardItemComponent = memo(({
+  product,
+  shouldUseLightText,
+  cardClassName = "",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+}: ProductCardItemProps) => {
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  return (
+    <div
+      className={cls(
+        "relative w-full h-full cursor-pointer perspective",
+        cardClassName
+      )}
+      onMouseEnter={() => setIsFlipped(true)}
+      onMouseLeave={() => setIsFlipped(false)}
+      style={{
+        perspective: "1000px",
+      }}
+    >
+      <div
+        style={{
+          transformStyle: "preserve-3d",
+          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+          transition: "transform 0.6s ease-in-out",
+        }}
+        className="w-full h-full"
+      >
+        {/* Front Side - Product Image and Name */}
+        <div
+          style={{
+            backfaceVisibility: "hidden",
+          }}
+          className="w-full h-full flex flex-col"
+        >
+          <div className={cls("relative flex-1 overflow-hidden bg-gray-100", imageClassName)}>
+            <ProductImage
+              src={product.image}
+              alt={product.name}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="p-4 bg-white">
+            <h3 className={cls("font-semibold text-lg", cardNameClassName, shouldUseLightText ? "text-white" : "text-gray-900")}>
+              {product.name}
+            </h3>
+            {product.price && (
+              <p className={cls("text-sm mt-1", cardPriceClassName, shouldUseLightText ? "text-gray-300" : "text-gray-600")}>
+                ${product.price}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Back Side - Product Details */}
+        <div
+          style={{
+            backfaceVisibility: "hidden",
+            transform: "rotateY(180deg)",
+          }}
+          className="w-full h-full flex flex-col bg-white p-4 absolute inset-0"
+        >
+          <div className="flex-1 overflow-y-auto">
+            <h3 className={cls("font-semibold text-lg mb-3", shouldUseLightText ? "text-white" : "text-gray-900")}>
+              {product.name}
+            </h3>
+            {product.description && (
+              <p className={cls("text-sm mb-3", shouldUseLightText ? "text-gray-300" : "text-gray-700")}>
+                {product.description}
+              </p>
+            )}
+            {product.variant && (
+              <div className="mb-3">
+                <p className={cls("text-xs font-semibold mb-1", shouldUseLightText ? "text-gray-400" : "text-gray-500")}>
+                  Variant
+                </p>
+                <p className={cls("text-sm", cardVariantClassName, shouldUseLightText ? "text-gray-300" : "text-gray-700")}>
+                  {product.variant}
+                </p>
+              </div>
+            )}
+            {product.price && (
+              <div className="mb-3">
+                <p className={cls("text-lg font-bold", cardPriceClassName, shouldUseLightText ? "text-white" : "text-gray-900")}>
+                  ${product.price}
+                </p>
+              </div>
+            )}
+          </div>
+          <button
+            className={cls(
+              "w-full py-2 px-4 bg-blue-600 text-white rounded font-medium hover:bg-blue-700 transition-colors",
+              actionButtonClassName
+            )}
+          >
+            Add to Cart
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ProductCardItemComponent.displayName = "ProductCardItem";
+
+const ProductCardItem = ProductCardItemComponent;
+
+const ProductCardItemOld = memo(({
   product,
   shouldUseLightText,
   cardClassName = "",
@@ -170,7 +283,6 @@ const ProductCardFour = ({
     }
   }, [isFromApi, router]);
 
-
   if (isLoading && !productsProp) {
     return (
       <div className="w-content-width mx-auto py-20 text-center">