add landingpage with the basics

parfum-shop/src/App.css

@@ -1,184 +1,329 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
+.page {
+  min-height: 100vh;
+  background: #efefef;
+  color: #1f1f1f;
 }
 
+/* HERO */
 .hero {
   position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
+  min-height: 720px;
+  margin: 20px;
+  border-radius: 0 0 18px 18px;
+  overflow: hidden;
+  background-image: url("/HERO.jpeg");
+  background-size: cover;
+  background-position: center;
 }
 
-#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));
+}
+
+.navbar {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  padding-top: 22px;
+}
+
+.nav-pill {
+  display: flex;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+}
+
+.nav-link {
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 13px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  transition: 0.2s ease;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.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: white;
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  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: #1d1d1d;
+}
+
+/* GRID */
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+}
+
+.product-card {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  border-radius: 18px;
+  padding: 18px;
+  min-height: 360px;
   display: flex;
   flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
+  justify-content: space-between;
 }
 
-#next-steps {
+.product-top {
   display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
+.product-id {
+  font-size: 18px;
+  color: #5f5f5f;
 }
 
-#next-steps ul {
-  list-style: none;
-  padding: 0;
+.product-top h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 400;
+  text-align: right;
+  letter-spacing: 0.02em;
+}
+
+.product-image-wrap {
   display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
+  justify-content: center;
+  align-items: center;
+  min-height: 180px;
+  padding: 20px 0;
+  width: 100%;
+  overflow: hidden;
 }
 
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
+.product-image {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  object-fit: contain;
+  border-radius: 10px;
 }
 
-.ticks {
+.product-bottom {
+  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: #444;
+}
+
+.arrow {
+  font-size: 26px;
+  color: #ff6a00;
+  line-height: 1;
+}
+
+/* DISCOVERY */
+.discovery-section {
+  display: grid;
+  grid-template-columns: 600px 1fr;
+  gap: 28px;
+  align-items: center;
+  padding: 40px 20px 50px;
+}
+
+.discovery-copy h2 {
+  margin: 0;
+  font-size: 42px;
+  line-height: 0.95;
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: #1d1d1d;
+}
+
+.discovery-copy p {
+  margin-top: 18px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #555;
+}
+
+.discovery-banner {
   position: relative;
   width: 100%;
+  max-width: 1300px;
+  height: 340px;
+  border-radius: 20px;
+  overflow: hidden;
+}
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
+.discovery-banner img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.banner-btn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: none;
+  border-radius: 999px;
+  padding: 12px 18px;
+  background: rgba(255, 255, 255, 0.22);
+  color: white;
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+  .hero {
+    min-height: 620px;
   }
 
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
+  .hero-content {
+    padding: 90px 24px 40px;
   }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
+
+  .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;
+  }
+
+  .nav-pill {
+    gap: 4px;
+    padding: 6px;
+  }
+
+  .nav-link {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .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;
+  }
+}

parfum-shop/src/App.jsx

@@ -1,10 +1,149 @@
+import "./App.css";
+
+const perfumes = [
+  {
+    id: "01",
+    name: "KALTER BETON",
+    image:
+      "/KALTER BETON.png",
+    text: "Mineralisch. Roh. Unberührt.",
+  },
+  {
+    id: "02",
+    name: "NASSER MARMOR",
+    image:
+      "/NASSER MARMOR.png",
+    text: "Kühl. Glatt. Sinnlich.",
+  },
+  {
+    id: "03",
+    name: "BLASSE SEIDE",
+    image:
+      "/BLASSE SEIDE.png",
+    text: "Blass. Sanft. Kostbar.",
+  },
+  {
+    id: "04",
+    name: "WEISSE ASCHE",
+    image:
+      "/WEISSE ASCHE.png",
+    text: "Still. Staubig. Erhaben.",
+  },
+  {
+    id: "05",
+    name: "VERBRANNTES CHROM",
+    image:
+      "/VERBRANNTES CHROM.png",
+    text: "Metallisch. Verzehrt. Edel.",
+  },
+  {
+    id: "06",
+    name: "SCHWARZES BENZIN",
+    image:
+      "/SCHWARZES BENZIN.png",
+    text: "Dunkel. Glänzend. Verboten.",
+  },
+];
+
 function App() {
   return (
-    <div style={{ padding: "40px", fontFamily: "Arial, sans-serif" }}>
-      <h1>Parfum Shop</h1>
-      <p>Entdecke exklusive Nischenparfums.</p>
+    <div className="page">
+      <header className="hero">
+        <nav className="navbar">
+          <div className="nav-pill">
+            <a href="#home" className="nav-link active">
+              Name
+            </a>
+            <a href="#dufte" className="nav-link">
+              Düfte
+            </a>
+            <a href="#testen" className="nav-link">
+              Testen
+            </a>
+            <a href="#cart" className="nav-link">
+              Cart
+            </a>
+          </div>
+        </nav>
 
-      <button>Jetzt entdecken</button>
+        <div className="hero-overlay" />
+
+        <div className="hero-content">
+          <p className="eyebrow">NISCHENDÜFTE</p>
+          <h1>
+            DÜFTE ALS
+            <br />
+            AUSDRUCK
+            <br />
+            VON KONZEPT
+          </h1>
+          <p className="hero-text">
+            Konzeptuelle Düfte zwischen Materialität, Raum und Charakter.
+          </p>
+
+          <div className="hero-actions">
+            <button className="btn btn-primary">Aktuelle Düfte</button>
+            <button className="btn btn-secondary">Discovery Set</button>
+          </div>
+        </div>
+      </header>
+
+      <main>
+        <section className="section" id="dufte">
+          <div className="section-heading">
+            <h2>
+              WÄHLE EINE
+              <br />
+              ATMOSPHÄRE
+            </h2>
+          </div>
+
+          <div className="product-grid">
+            {perfumes.map((item) => (
+              <article className="product-card" key={item.id}>
+                <div className="product-top">
+                  <span className="product-id">{item.id}</span>
+                  <h3>{item.name}</h3>
+                </div>
+
+                <div className="product-image-wrap">
+                  <img src={item.image} alt={item.name} className="product-image" />
+                </div>
+
+                <div className="product-bottom">
+                  <p>{item.text}</p>
+                  <span className="arrow">→</span>
+                </div>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="discovery-section" id="testen">
+          <div className="discovery-copy">
+            <h2>
+              DER SICHERE EINSTIEG
+              <br />
+              DISCOVERY SET
+            </h2>
+            <p>
+              6 Samples × 2ml.
+              <br />
+              Jeden Duft eine Woche tragen.
+              <br />
+              Verstehen, was funktioniert.
+            </p>
+          </div>
+
+          <div className="discovery-banner">
+            <img
+              src="/DISCOVERYSET.png"
+              alt="Discovery Set"
+            />
+            <button className="banner-btn">Discovery Set bestellen</button>
+          </div>
+        </section>
+      </main>
     </div>
   );
 }

parfum-shop/src/index.css

@@ -1,111 +1,33 @@
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #1f1f1f;
+  background: #efefef;
+  line-height: 1.5;
+  font-weight: 400;
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
+* {
+  box-sizing: border-box;
+}
 
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
+html {
+  scroll-behavior: smooth;
 }
 
 body {
   margin: 0;
+  background: #efefef;
 }
 
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+a {
+  color: inherit;
 }
 
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}
+button {
+  font: inherit;
+}