Merge branch 'landingpage'

parfum-shop/package-lock.json

@@ -8,6 +8,7 @@
       "name": "parfum-shop",
       "version": "0.0.0",
       "dependencies": {
+        "gsap": "^3.14.2",
         "react": "^19.2.4",
         "react-dom": "^19.2.4"
       },
@@ -57,6 +58,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -847,6 +849,7 @@
       "integrity": "sha512-q9pE8+47bQNHb5eWVcE6oXppA+JTSwvnrhH53m0ZuHuK5MLvwsLoWrWzBTFQqQ06BVxz1gp0HblLsch8o6pvZw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "picomatch": "^4.0.3"
       },
@@ -910,6 +913,7 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -956,6 +960,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1019,6 +1024,7 @@
       "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.26.0"
       }
@@ -1074,6 +1080,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1263,6 +1270,7 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -1582,6 +1590,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2271,6 +2285,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2303,6 +2318,7 @@
       "integrity": "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "=0.120.0",
         "@rolldown/pluginutils": "1.0.0-rc.10"
@@ -2498,6 +2514,7 @@
       "integrity": "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.3",
@@ -2622,6 +2639,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

parfum-shop/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "gsap": "^3.14.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },

parfum-shop/src/App.css

@@ -22,7 +22,9 @@
 .hero {
   position: relative;
   min-height: 720px;
-  margin: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 0px;
   border-radius: 0 0 18px 18px;
   overflow: hidden;
   background-image: url("/HERO.jpeg");
@@ -165,6 +167,9 @@
 }
 
 .product-card {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
   background: #f5f5f5;
   border: 1px solid #d9d9d9;
   border-radius: 18px;
@@ -173,23 +178,54 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-  cursor: pointer;
 }
 
-.product-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
-  border-color: #bbbbbb; 
+.product-card:focus-visible {
+  outline: 2px solid #ff6a00;
+  outline-offset: 3px;
 }
 
-.product-card:active {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  border-color: #ff6a00; 
+.product-hover-fill {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.product-hover-image,
+.product-hover-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.product-hover-image {
+  background-size: cover;
+  background-position: center;
+}
+
+.product-hover-video {
+  display: block;
+  object-fit: cover;
+}
+
+.product-hover-fill::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.08),
+    rgba(0, 0, 0, 0.18)
+  );
 }
 
 .product-top {
+  position: relative;
+  z-index: 4;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -210,6 +246,8 @@
 }
 
 .product-image-wrap {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -220,7 +258,9 @@
 }
 
 .product-image {
-  width: 100%; /* Angepasst auf Card */
+  position: relative;
+  z-index: 1;
+  width: 100%;
   max-width: 600px;
   height: auto;
   object-fit: contain;
@@ -233,6 +273,8 @@
 }
 
 .product-bottom {
+  position: relative;
+  z-index: 4;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
@@ -253,7 +295,24 @@
   line-height: 1;
 }
 
-/* --------------------------------------------------- */
+.product-id,
+.product-top h3,
+.product-bottom p,
+.arrow {
+  transition: color 0.25s ease;
+}
+
+.product-card:hover .product-id,
+.product-card:hover .product-top h3,
+.product-card:hover .product-bottom p,
+.product-card:hover .arrow,
+.product-card:focus-within .product-id,
+.product-card:focus-within .product-top h3,
+.product-card:focus-within .product-bottom p,
+.product-card:focus-within .arrow {
+  color: #fff;
+  mix-blend-mode: difference;
+}
 
 /* DISCOVERY */
 .discovery-section {
@@ -374,5 +433,3 @@
 
   
 }
-
-/* --------------------------------------------------- */

parfum-shop/src/App.jsx

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
 import "./App.css";
 
 // Hallo im Code,
@@ -20,7 +22,9 @@ const perfumes = [
     id: "01",
     name: "KALTER BETON",
     image:
-      "/KALTER BETON.png",
+      "/kalter-beton-product.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/kalter-beton-hover.webm",
     text: "Mineralisch. Roh. Unberührt.",
   },
   {
@@ -28,6 +32,8 @@ const perfumes = [
     name: "NASSER MARMOR",
     image:
       "/NASSER MARMOR.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/nasser-marmor-hover.webm",
     text: "Kühl. Glatt. Sinnlich.",
   },
   {
@@ -35,6 +41,8 @@ const perfumes = [
     name: "BLASSE SEIDE",
     image:
       "/BLASSE SEIDE.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/blasse-seide-hover.webm",
     text: "Blass. Sanft. Kostbar.",
   },
   {
@@ -42,6 +50,8 @@ const perfumes = [
     name: "WEISSE ASCHE",
     image:
       "/WEISSE ASCHE.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/weisse-asche-hover.webm",
     text: "Still. Staubig. Erhaben.",
   },
   {
@@ -49,6 +59,8 @@ const perfumes = [
     name: "VERBRANNTES CHROM",
     image:
       "/VERBRANNTES CHROM.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/verbranntes-chrom-hover.webm",
     text: "Metallisch. Verzehrt. Edel.",
   },
   {
@@ -56,11 +68,157 @@ const perfumes = [
     name: "SCHWARZES BENZIN",
     image:
       "/SCHWARZES BENZIN.png",
+    fillImage: "/platzhalter.png",
+    fillVideo: "/schwarzes-benzin-hover.webm",
     text: "Dunkel. Glänzend. Verboten.",
   },
 ];
 
 function App() {
+  const cardRefs = useRef([]);
+
+  useEffect(() => {
+    const cards = cardRefs.current.filter(Boolean);
+    const cardStates = cards
+      .map((card) => {
+        const hoverFill = card.querySelector(".product-hover-fill");
+        const hoverVideo = card.querySelector(".product-hover-video");
+        const productImage = card.querySelector(".product-image");
+        const arrow = card.querySelector(".arrow");
+
+        if (!hoverFill || !productImage || !arrow) {
+          return null;
+        }
+
+        gsap.set(hoverFill, { autoAlpha: 0, scale: 1.08 });
+        gsap.set(productImage, { autoAlpha: 1, scale: 1 });
+        gsap.set(arrow, { x: 0 });
+
+        return { card, hoverFill, hoverVideo, productImage, arrow };
+      })
+      .filter(Boolean);
+
+    const stopVideo = (video) => {
+      if (!video) {
+        return;
+      }
+
+      video.pause();
+      try {
+        video.currentTime = 0;
+      } catch {
+        // Ignore if browser blocks random access while buffering.
+      }
+    };
+
+    const playVideo = (video) => {
+      if (!video) {
+        return;
+      }
+
+      try {
+        video.currentTime = 0;
+      } catch {
+        // Ignore if browser blocks random access while buffering.
+      }
+
+      const playAttempt = video.play();
+      if (playAttempt && typeof playAttempt.catch === "function") {
+        playAttempt.catch(() => {});
+      }
+    };
+
+    const deactivate = (state) => {
+      gsap.killTweensOf([state.hoverFill, state.productImage, state.arrow]);
+      stopVideo(state.hoverVideo);
+
+      gsap.to(state.hoverFill, {
+        autoAlpha: 0,
+        scale: 1.08,
+        duration: 0.35,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.productImage, {
+        scale: 1,
+        autoAlpha: 1,
+        duration: 0.35,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.arrow, {
+        x: 0,
+        duration: 0.35,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    };
+
+    const activate = (state) => {
+      cardStates.forEach((item) => {
+        if (item !== state) {
+          deactivate(item);
+        }
+      });
+
+      gsap.killTweensOf([state.hoverFill, state.productImage, state.arrow]);
+      playVideo(state.hoverVideo);
+
+      gsap.to(state.hoverFill, {
+        autoAlpha: 1,
+        scale: 1,
+        duration: 0.45,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.productImage, {
+        scale: 0.92,
+        autoAlpha: 0.35,
+        duration: 0.45,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+      gsap.to(state.arrow, {
+        x: 8,
+        duration: 0.45,
+        ease: "power2.out",
+        overwrite: "auto",
+      });
+    };
+
+    const cardCleanups = cardStates.map((state) => {
+      const onEnter = () => activate(state);
+      const onLeave = () => deactivate(state);
+
+      state.card.addEventListener("pointerenter", onEnter);
+      state.card.addEventListener("pointerleave", onLeave);
+
+      return () => {
+        state.card.removeEventListener("pointerenter", onEnter);
+        state.card.removeEventListener("pointerleave", onLeave);
+      };
+    });
+
+    const resetAll = () => {
+      cardStates.forEach((state) => deactivate(state));
+    };
+
+    const onMouseOutWindow = (event) => {
+      if (!event.relatedTarget) {
+        resetAll();
+      }
+    };
+
+    window.addEventListener("blur", resetAll);
+    document.addEventListener("mouseout", onMouseOutWindow);
+
+    return () => {
+      window.removeEventListener("blur", resetAll);
+      document.removeEventListener("mouseout", onMouseOutWindow);
+      cardCleanups.forEach((cleanup) => cleanup());
+    };
+  }, []);
+
   return (
     <div className="page">
       {/* Hero */}
@@ -118,8 +276,32 @@ function App() {
           </div>
 
           <div className="product-grid">
-            {perfumes.map((item) => (
-              <article className="product-card" key={item.id}>
+            {perfumes.map((item, index) => (
+              <article
+                className="product-card"
+                key={item.id}
+                ref={(el) => {
+                  cardRefs.current[index] = el;
+                }}
+              >
+                <div className="product-hover-fill" aria-hidden="true">
+                  {item.fillVideo ? (
+                    <video
+                      className="product-hover-video"
+                      src={item.fillVideo}
+                      muted
+                      loop
+                      playsInline
+                      preload="metadata"
+                    />
+                  ) : (
+                    <div
+                      className="product-hover-image"
+                      style={{ backgroundImage: `url(${item.fillImage || item.image})` }}
+                    />
+                  )}
+                </div>
+
                 <div className="product-top">
                   <span className="product-id">{item.id}</span>
                   <h3>{item.name}</h3>
@@ -170,4 +352,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;