src/App.tsx

@@ -1,13 +1,52 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
+import ProductFlipCards from './components/sections/product/ProductFlipCards';
 
 export default function App() {
   return (
-    <Routes>
-      <Route element={<Layout />}>
-        <Route path="/" element={<HomePage />} />
-      </Route>
-    </Routes>
+    <>
+      <Routes>
+        <Route element={<Layout />}>
+          <Route path="/" element={<HomePage />} />
+        </Route>
+      </Routes>
+      <ProductFlipCards 
+        tag="Products" 
+        title="Featured Collection" 
+        description="Hover over our products to reveal detailed specifications and features." 
+        products={[
+          {
+            name: "Premium Wireless Headphones",
+            price: "$299",
+            imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&q=80",
+            detailedDescription: "Experience crystal clear audio with active noise cancellation, 30-hour battery life, and ultra-comfortable memory foam ear cushions."
+          },
+          {
+            name: "Smart Fitness Watch",
+            price: "$199",
+            imageSrc: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&q=80",
+            detailedDescription: "Track your health metrics, receive notifications, and enjoy built-in GPS with a sleek, water-resistant design perfect for any workout."
+          },
+          {
+            name: "Professional Camera Lens",
+            price: "$899",
+            imageSrc: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&q=80",
+            detailedDescription: "Capture stunning portraits with this 50mm f/1.4 prime lens, featuring advanced optical coating and fast, silent autofocus."
+          },
+          {
+            name: "Mechanical Keyboard",
+            price: "$149",
+            imageSrc: "https://images.unsplash.com/photo-1595225476474-87563907a212?w=800&q=80",
+            detailedDescription: "Boost your productivity with tactile mechanical switches, customizable RGB backlighting, and a durable aluminum frame."
+          }
+        ]}
+      />
+    
+
+  <div id="product" data-section="product">
+    <ProductFlipCards />
+  </div>
+</>
   );
-}
+}

src/components/sections/product/ProductFlipCards.tsx

@@ -0,0 +1,103 @@
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+
+type ProductFlipCardProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  products: {
+    name: string;
+    price: string;
+    imageSrc: string;
+    detailedDescription: string;
+    onClick?: () => void;
+  }[];
+};
+
+const ProductFlipCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  products,
+}: ProductFlipCardProps) => {
+  return (
+    <section aria-label="Product section" className="py-20">
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-3 md:gap-2">
+          <span className="px-3 py-1 text-sm card rounded">{tag}</span>
+
+          <TextAnimation
+            text={title}
+            variant="slide-up"
+            tag="h2"
+            className="text-6xl font-medium text-center text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="slide-up"
+            tag="p"
+            className="md:max-w-6/10 text-lg leading-tight text-center"
+          />
+
+          {(primaryButton || secondaryButton) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-1 md:mt-2">
+              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: "-15%" }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+        >
+          <GridOrCarousel>
+            {products.map((product) => (
+              <div
+                key={product.name}
+                className="group relative w-full h-[400px] rounded-lg shadow-lg overflow-hidden cursor-pointer [perspective:1000px]"
+                onClick={product.onClick}
+              >
+                <div className="relative w-full h-full transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
+                  {/* Front Side */}
+                  <div className="absolute inset-0 w-full h-full [backface-visibility:hidden] card rounded flex flex-col">
+                    <div className="w-full h-3/5 overflow-hidden rounded-t">
+                      <img
+                        src={product.imageSrc}
+                        alt={product.name}
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+                    <div className="flex flex-col items-center justify-center gap-2 p-5 h-2/5 text-center">
+                      <h3 className="text-xl font-medium">{product.name}</h3>
+                      <span className="text-lg font-bold">{product.price}</span>
+                    </div>
+                  </div>
+
+                  {/* Back Side */}
+                  <div className="absolute inset-0 w-full h-full [backface-visibility:hidden] [transform:rotateY(180deg)] card rounded flex flex-col items-center justify-center p-6 text-center">
+                    <h3 className="text-xl font-medium mb-4">{product.name}</h3>
+                    <p className="text-base leading-relaxed text-foreground/80">
+                      {product.detailedDescription}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </GridOrCarousel>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default ProductFlipCards;