app/page.tsx

@@ -1,7 +1,9 @@
+import HeroSection from "@/components/HeroSection";
+
 export default function Home() {
   return (
     <main>
-      <h1>Mehr Sauberkeit, weniger Aufwand für ein sauberes Arbeitsumfeld</h1>
+      <HeroSection />
     </main>
   );
 }

components/HeroSection.module.css

@@ -0,0 +1,87 @@
+.hero {
+  position: relative;
+  background: linear-gradient(to bottom, #f9f9f9 5%, #ffffff 50%, #f9f9f9 100%);
+  padding-block: var(--space-16);
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+}
+
+.inner {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+}
+
+.heroDecoration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  right: var(--space-4);
+  width: auto;
+  height: 80%;
+  opacity: 0.12;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.heading {
+  max-width: 20ch;
+}
+
+.lead {
+  max-width: 56ch;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-3);
+  margin-top: var(--space-2);
+}
+
+.actions :global(.btn) {
+  width: fit-content;
+  justify-content: center;
+  min-height: 44px;
+}
+
+/* Tablet */
+@media (min-width: 768px) {
+  .hero {
+    padding-block: var(--space-28);
+  }
+
+  .heroDecoration {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+     height: 90%;
+  }
+  .actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-6);
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .hero {
+    padding-block: var(--space-36);
+  }
+  .inner {
+    padding-inline: var(--space-6);
+  }
+}

components/HeroSection.tsx

@@ -0,0 +1,41 @@
+import { ArrowRightIcon, PhoneIcon } from "@phosphor-icons/react/dist/ssr";
+import Link from "next/link";
+import styles from "./HeroSection.module.css";
+
+export default function HeroSection() {
+  return (
+    <section className={styles.hero} aria-labelledby="hero-heading">
+      <img
+        src="/logo/logo-mininmal-basiclean-grey.svg"
+        alt=""
+        aria-hidden="true"
+        className={styles.heroDecoration}
+      />
+      <div className={styles.inner}>
+        <div className={styles.content}>
+          <h1 id="hero-heading" className={styles.heading}>
+            Mehr Sauberkeit, weniger Aufwand für ein sauberes Arbeitsumfeld
+          </h1>
+          <p className={`lead ${styles.lead}`}>
+            Professionelle Gebäudereinigung für Büros, Praxen und Gewerbeflächen
+            nach festen Abläufen und höchsten Qualitätsstandards.
+          </p>
+          <div className={styles.actions}>
+            <Link href="/kontakt" className="btn btn--filled">
+              <span className="btn-icon animate" aria-hidden="true">
+                <ArrowRightIcon size={18} weight="bold" />
+              </span>
+              Jetzt Angebot anfragen
+            </Link>
+            <a href="tel:+495112345678" className="btn btn--outline">
+              <span className="btn-icon" aria-hidden="true">
+                <PhoneIcon size={18} weight="bold" />
+              </span>
+              0172 621 0606
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}