parfum-shop/package-lock.json

@@ -8,7 +8,6 @@
       "name": "parfum-shop",
       "version": "0.0.0",
       "dependencies": {
-        "gsap": "^3.14.2",
         "react": "^19.2.4",
         "react-dom": "^19.2.4"
       },
@@ -58,7 +57,6 @@
       "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",
@@ -849,7 +847,6 @@
       "integrity": "sha512-q9pE8+47bQNHb5eWVcE6oXppA+JTSwvnrhH53m0ZuHuK5MLvwsLoWrWzBTFQqQ06BVxz1gp0HblLsch8o6pvZw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "picomatch": "^4.0.3"
       },
@@ -913,7 +910,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -960,7 +956,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1024,7 +1019,6 @@
       "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.26.0"
       }
@@ -1080,7 +1074,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1270,7 +1263,6 @@
       "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",
@@ -1590,12 +1582,6 @@
         "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",
@@ -2285,7 +2271,6 @@
       "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"
       }
@@ -2318,7 +2303,6 @@
       "integrity": "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@oxc-project/types": "=0.120.0",
         "@rolldown/pluginutils": "1.0.0-rc.10"
@@ -2514,7 +2498,6 @@
       "integrity": "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.3",
@@ -2639,7 +2622,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

parfum-shop/package.json

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

parfum-shop/src/App.css

@@ -22,9 +22,7 @@
 .hero {
   position: relative;
   min-height: 720px;
-  margin-left: 20px;
+  margin: 20px;
-  margin-right: 20px;
-  margin-top: 0px;
   border-radius: 0 0 18px 18px;
   overflow: hidden;
   background-image: url("/HERO.jpeg");
@@ -167,9 +165,6 @@
 }
 
 .product-card {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
   background: #f5f5f5;
   border: 1px solid #d9d9d9;
   border-radius: 18px;
@@ -178,54 +173,23 @@
   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:focus-visible {
+.product-card:hover {
-  outline: 2px solid #ff6a00;
+  transform: translateY(-6px);
-  outline-offset: 3px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+  border-color: #bbbbbb; 
 }
 
-.product-hover-fill {
+.product-card:active {
-  position: absolute;
+  transform: translateY(-2px);
-  inset: 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  z-index: 2;
+  border-color: #ff6a00; 
-  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;
@@ -246,8 +210,6 @@
 }
 
 .product-image-wrap {
-  position: relative;
-  z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -258,9 +220,7 @@
 }
 
 .product-image {
-  position: relative;
+  width: 100%; /* Angepasst auf Card */
-  z-index: 1;
-  width: 100%;
   max-width: 600px;
   height: auto;
   object-fit: contain;
@@ -273,8 +233,6 @@
 }
 
 .product-bottom {
-  position: relative;
-  z-index: 4;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
@@ -295,24 +253,7 @@
   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 {
@@ -433,3 +374,5 @@
 
   
 }
+
+/* --------------------------------------------------- */

parfum-shop/src/App.jsx

@@ -1,5 +1,3 @@
-import { useEffect, useRef } from "react";
-import { gsap } from "gsap";
 import "./App.css";
 
 // Hallo im Code,
@@ -22,9 +20,7 @@ const perfumes = [
     id: "01",
     name: "KALTER BETON",
     image:
-      "/kalter-beton-product.png",
+      "/KALTER BETON.png",
-    fillImage: "/platzhalter.png",
-    fillVideo: "/kalter-beton-hover.webm",
     text: "Mineralisch. Roh. Unberührt.",
   },
   {
@@ -32,8 +28,6 @@ const perfumes = [
     name: "NASSER MARMOR",
     image:
       "/NASSER MARMOR.png",
-    fillImage: "/platzhalter.png",
-    fillVideo: "/nasser-marmor-hover.webm",
     text: "Kühl. Glatt. Sinnlich.",
   },
   {
@@ -41,8 +35,6 @@ const perfumes = [
     name: "BLASSE SEIDE",
     image:
       "/BLASSE SEIDE.png",
-    fillImage: "/platzhalter.png",
-    fillVideo: "/blasse-seide-hover.webm",
     text: "Blass. Sanft. Kostbar.",
   },
   {
@@ -50,8 +42,6 @@ const perfumes = [
     name: "WEISSE ASCHE",
     image:
       "/WEISSE ASCHE.png",
-    fillImage: "/platzhalter.png",
-    fillVideo: "/weisse-asche-hover.webm",
     text: "Still. Staubig. Erhaben.",
   },
   {
@@ -59,8 +49,6 @@ const perfumes = [
     name: "VERBRANNTES CHROM",
     image:
       "/VERBRANNTES CHROM.png",
-    fillImage: "/platzhalter.png",
-    fillVideo: "/verbranntes-chrom-hover.webm",
     text: "Metallisch. Verzehrt. Edel.",
   },
   {
@@ -68,157 +56,11 @@ 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 */}
@@ -276,32 +118,8 @@ function App() {
           </div>
 
           <div className="product-grid">
-            {perfumes.map((item, index) => (
+            {perfumes.map((item) => (
-              <article
+              <article className="product-card" key={item.id}>
-                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>
@@ -352,4 +170,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;