HeroSection eingeführt

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>
+  );
+}