Lieber erst testen?
@@ -227,4 +224,10 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
);
}
+function ProductDetailPage() {
+ const { perfumeSlug = "kalter-beton" } = useParams();
+
+ return ;
+}
+
export default ProductDetailPage;
\ No newline at end of file
diff --git a/parfum-shop/src/main.jsx b/parfum-shop/src/main.jsx
index b9a1a6d..aa01e08 100644
--- a/parfum-shop/src/main.jsx
+++ b/parfum-shop/src/main.jsx
@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router";
+import App from "./App";
+import "./App.css";
-createRoot(document.getElementById('root')).render(
-
-
- ,
-)
+ReactDOM.createRoot(document.getElementById("root")).render(
+
+
+
+
+
+);
\ No newline at end of file
diff --git a/parfum-shop/src/pages/LandingPage.css b/parfum-shop/src/pages/LandingPage.css
new file mode 100644
index 0000000..debd035
--- /dev/null
+++ b/parfum-shop/src/pages/LandingPage.css
@@ -0,0 +1,397 @@
+.page {
+ min-height: 100vh;
+ background: #efefef;
+ color: #1f1f1f;
+}
+
+/* HERO */
+.hero {
+ position: relative;
+ min-height: 720px;
+ margin-left: 20px;
+ margin-right: 20px;
+ margin-top: 0px;
+ border-radius: 0;
+ overflow: hidden;
+ background-image: url("/HERO.jpeg");
+ background-size: cover;
+ background-position: center;
+}
+
+.hero-overlay {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
+ linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
+}
+
+.hero-content {
+ position: relative;
+ z-index: 2;
+ max-width: 460px;
+ padding: 120px 0 0 38px;
+ color: white;
+}
+
+.eyebrow {
+ margin-bottom: 16px;
+ font-size: 12px;
+ letter-spacing: 0.18em;
+ opacity: 0.85;
+}
+
+.hero h1 {
+ margin: 0 0 18px;
+ font-size: 62px;
+ line-height: 0.95;
+ font-weight: 300;
+ letter-spacing: -0.04em;
+ color: white;
+}
+
+.hero-text {
+ max-width: 320px;
+ font-size: 15px;
+ line-height: 1.5;
+ color: rgba(255, 255, 255, 0.85);
+}
+
+.hero-actions {
+ display: flex;
+ gap: 12px;
+ margin-top: 28px;
+}
+
+.btn {
+ border: none;
+ border-radius: 999px;
+ padding: 12px 18px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.btn:hover {
+ transform: translateY(-1px);
+}
+
+.btn-primary {
+ background: #ff6a00;
+ color: #fff;
+}
+
+.btn-secondary {
+ background: rgba(255, 255, 255, 0.15);
+ color: #fff;
+ backdrop-filter: blur(8px);
+}
+
+/* SECTIONS */
+.section {
+ padding: 28px 20px 10px;
+}
+
+.section-heading {
+ margin-bottom: 28px;
+}
+
+.section-heading h2,
+.discovery-copy h2 {
+ margin: 0;
+ font-size: 52px;
+ line-height: 0.95;
+ font-weight: 300;
+ letter-spacing: -0.04em;
+ color: #1f1f1f;
+}
+
+/* GRID */
+.product-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 18px;
+}
+
+.product-card {
+ position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ background: #f5f5f5;
+ border: 1px solid #d9d9d9;
+ border-radius: 0px;
+ padding: 18px;
+ min-height: 360px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ cursor: pointer;
+ transition: transform 0.15s ease, border-color 0.15s ease;
+ text-decoration: none;
+ color: inherit;
+}
+
+.product-card:focus-visible {
+ outline: 2px solid #ff6a00;
+ outline-offset: 3px;
+}
+
+.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-card:active {
+ transform: scale(0.97);
+ border-color: #ff6a00;
+}
+
+.product-top {
+ position: relative;
+ z-index: 4;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 12px;
+}
+
+.product-id {
+ font-size: 18px;
+ color: #5f5f5f;
+}
+
+.product-top h3 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 400;
+ text-align: right;
+ letter-spacing: 0.02em;
+}
+
+.product-image-wrap {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 180px;
+ padding: 20px 0;
+ width: 100%;
+ overflow: hidden;
+}
+
+.product-image {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ max-width: 600px;
+ height: auto;
+ object-fit: contain;
+ border-radius: 0px;
+ transition: transform 0.4s ease;
+}
+
+.product-card:hover .product-image {
+ transform: scale(1.05);
+}
+
+.product-bottom {
+ position: relative;
+ z-index: 4;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ gap: 12px;
+}
+
+.product-bottom p {
+ margin: 0;
+ max-width: 170px;
+ font-size: 15px;
+ line-height: 1.35;
+ color: #5f5f5f;
+}
+
+.arrow {
+ font-size: 26px;
+ color: #ff6a00;
+ 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;
+}
+
+.product-card:active .product-id,
+.product-card:active .product-top h3,
+.product-card:active .product-bottom p,
+.product-card:active .arrow {
+ color: #ff6a00;
+ mix-blend-mode: normal;
+ transform: scale(1.02);
+ transition: all 0.1s ease;
+}
+
+/* DISCOVERY */
+.discovery-section {
+ display: grid;
+ grid-template-columns: 600px 1fr;
+ gap: 28px;
+ align-items: center;
+ background: #ff6a00;
+ margin: 20px;
+ border-radius: 0px;
+ padding: 40px 38px;
+}
+
+.discovery-copy h2 {
+ margin: 0;
+ font-size: 42px;
+ line-height: 0.95;
+ font-weight: 300;
+ letter-spacing: -0.04em;
+ color: #fff;
+}
+
+.discovery-copy p {
+ margin-top: 18px;
+ font-size: 15px;
+ line-height: 1.5;
+ color: #fff;
+}
+
+.discovery-btn {
+ border: none;
+ border-radius: 999px;
+ padding: 12px 18px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: transform 0.2s ease, opacity 0.2s ease;
+ background: #fff;
+ color: #ff6a00;
+}
+
+.discovery-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
+.discovery-btn:active {
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+ background: rgba(255, 255, 255, 0.8);
+}
+
+.discovery-banner {
+ position: relative;
+ width: 100%;
+ max-width: 1300px;
+ height: 340px;
+ border-radius: 20px;
+ overflow: hidden;
+}
+
+.discovery-banner img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+ .hero {
+ min-height: 620px;
+ }
+
+ .hero-content {
+ padding: 90px 24px 40px;
+ }
+
+ .hero h1,
+ .section-heading h2,
+ .discovery-copy h2 {
+ font-size: 42px;
+ }
+
+ .product-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .discovery-section {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 640px) {
+ .hero {
+ margin: 12px;
+ min-height: 540px;
+ }
+
+ .hero h1,
+ .section-heading h2,
+ .discovery-copy h2 {
+ font-size: 34px;
+ }
+
+ .hero-actions {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .product-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .product-card {
+ min-height: 320px;
+ }
+}
\ No newline at end of file
diff --git a/parfum-shop/src/pages/LandingPage.jsx b/parfum-shop/src/pages/LandingPage.jsx
index c9459bd..74a2ad4 100644
--- a/parfum-shop/src/pages/LandingPage.jsx
+++ b/parfum-shop/src/pages/LandingPage.jsx
@@ -1,8 +1,9 @@
import { useEffect, useRef } from "react";
+import { Link } from "react-router";
import { gsap } from "gsap";
import perfumes from "../data/perfumes";
-import "../App.css";
-import "../navbar.css";
+import "../pages/LandingPage.css";
+import "../style/navbar.css";
function LandingPage() {
const cardRefs = useRef([]);
@@ -33,7 +34,9 @@ function LandingPage() {
video.pause();
try {
video.currentTime = 0;
- } catch {}
+ } catch {
+ // Ignore errors when setting currentTime
+ }
};
const playVideo = (video) => {
@@ -41,7 +44,9 @@ function LandingPage() {
try {
video.currentTime = 0;
- } catch {}
+ } catch {
+ // Ignore errors when setting currentTime
+ }
const playAttempt = video.play();
if (playAttempt && typeof playAttempt.catch === "function") {
@@ -198,7 +203,8 @@ function LandingPage() {
{perfumes.map((item, index) => (
-
{
@@ -238,7 +244,7 @@ function LandingPage() {
{item.text}
→