Startseite fertiggestellt.

components/Footer.module.css

@@ -1,15 +1,9 @@
-/*
-   FOOTER
-   Datei: components/Footer.module.css
-*/
-
 :root {
-  --footer-bg: #272727 ;
-  --footer-text: #a1a1aa;
+  --footer-bg: #272727;
+  --footer-text: #adadb3;
   --footer-text-hover: #ffffff;
   --footer-title: #ffffff;
   --footer-divider: rgba(255, 255, 255, 0.1);
-  --footer-padding-y: clamp(3rem, 6vw, 5rem);
   --footer-gap: clamp(2rem, 5vw, 4rem);
 }
 
@@ -17,7 +11,6 @@
 .footer {
   background-color: var(--footer-bg);
   color: var(--footer-text);
-  font-family: inherit;
 }
 
 .footer a:focus-visible {
@@ -28,7 +21,8 @@
 .footer__inner {
   max-width: var(--container-width);
   margin-inline: auto;
-  padding: var(--footer-padding-y) clamp(1rem, 5vw, 2rem);
+  padding-inline: var(--space-4);
+  padding-block: var(--space-16);
 }
 
 /* Top */
@@ -38,26 +32,16 @@
   gap: var(--footer-gap);
 }
 
-@media (min-width: 768px) {
-  .footer__top {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (min-width: 1024px) {
-  .footer__top {
-    grid-template-columns: 1.5fr 1fr;
-  }
-}
-
 /* Brand */
+.footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
 .footer__logo {
   display: inline-block;
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--footer-title);
-  margin-bottom: 0.75rem;
-  transition: opacity 0.2s ease;
+  width: fit-content;
 }
 
 .footer__logo:hover {
@@ -65,8 +49,6 @@
 }
 
 .footer__tagline {
-  font-size: 0.9rem;
-  line-height: 1.6;
   max-width: 32ch;
   color: var(--footer-text);
 }
@@ -74,34 +56,32 @@
 /* Navigation */
 .footer__nav {
   display: flex;
-  gap: var(--footer-gap);
   flex-wrap: wrap;
+  gap: var(--footer-gap);
 }
 
 .footer__nav ul {
   list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .footer__nav-group ul {
-  padding: 0;
-  margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.6rem;
+  gap: var(--space-2);
 }
 
 .footer__nav-title {
   display: block;
-  font-size: 0.8rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  margin-bottom: var(--space-4);
+  font-size: var(--font-size-xxs);
+  letter-spacing: var(--letter-spacing-wide);
   color: var(--footer-title);
-  margin-bottom: 1rem;
 }
 
 .footer__nav-group a {
-  font-size: 0.9rem;
+  font-size: var(--font-size-xs);
   color: var(--footer-text);
   transition: color 0.2s ease;
 }
@@ -157,3 +137,31 @@
   border-color: rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.05);
 }
+
+/* Tablet */
+@media (min-width: 768px) {
+  .footer__top {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+
+  .footer__nav {
+    justify-self: end;
+    text-align: left;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .footer__inner {
+    padding-inline: var(--space-6);
+  }
+
+  .footer__top {
+    grid-template-columns: 1fr auto;
+  }
+
+  .footer__nav {
+    justify-self: end;
+  }
+}

components/Footer.tsx

@@ -1,11 +1,13 @@
 import styles from "./Footer.module.css";
 import Link from "next/link";
+import Image from "next/image";
 import {
   InstagramLogoIcon,
   LinkedinLogoIcon,
   XLogoIcon,
   FacebookLogoIcon,
 } from "@phosphor-icons/react/dist/ssr";
+import { companyData } from "@/data/companyData";
 
 const currentYear = new Date().getFullYear();
 
@@ -13,22 +15,24 @@ export default function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.footer__inner}>
-        {/* Top: Brand + Navigation */}
         <div className={styles.footer__top}>
-          {/* Brand */}
           <div className={styles.footer__brand}>
             <Link href="/" className={styles.footer__logo}>
-              ENVU {/* ← Logo oder Bildkomponente hier */}
+              <Image
+                src="/logo/logo-basiclean-white.svg"
+                alt={companyData.companyName}
+                width={160}
+                height={48}
+                unoptimized
+              />
             </Link>
-            <p className={styles.footer__tagline}>
-              Maßgeschneiderte digitale Lösungen für Ihr Unternehmen.
-            </p>
+
+            <p className={styles.footer__tagline}>{companyData.slogan}</p>
           </div>
 
-          {/* Navigation Spalten */}
           <nav className={styles.footer__nav} aria-label="Footer Navigation">
-            <div className={styles.footer__nav_group}>
-              <span className={styles.footer__nav_title}>Unternehmen</span>
+            <div className={styles["footer__nav-group"]}>
+              <span className={styles["footer__nav-title"]}>Unternehmen</span>
               <ul>
                 <li>
                   <Link href="/ueberuns">Über uns</Link>
@@ -36,14 +40,17 @@ export default function Footer() {
                 <li>
                   <Link href="/leistungen">Leistungen</Link>
                 </li>
+                <li>
+                  <Link href="/branchenloesungen">Branchenlösungen</Link>
+                </li>
                 <li>
                   <Link href="/kontakt">Kontakt</Link>
                 </li>
               </ul>
             </div>
 
-            <div className={styles.footer__nav_group}>
-              <span className={styles.footer__nav_title}>Rechtliches</span>
+            <div className={styles["footer__nav-group"]}>
+              <span className={styles["footer__nav-title"]}>Rechtliches</span>
               <ul>
                 <li>
                   <Link href="/impressum">Impressum</Link>
@@ -56,13 +63,12 @@ export default function Footer() {
           </nav>
         </div>
 
-        {/* Divider */}
         <div className={styles.footer__divider} />
 
-        {/* Bottom: Copyright + Social */}
         <div className={styles.footer__bottom}>
           <p className={styles.footer__copy}>
-            © {currentYear}. Alle Rechte vorbehalten.
+            Copyright © {currentYear} {companyData.companyName}. Alle Rechte
+            vorbehalten.
           </p>
 
           <div className={styles.footer__social}>
@@ -74,6 +80,7 @@ export default function Footer() {
             >
               <InstagramLogoIcon size={20} />
             </a>
+
             <a
               href="https://linkedin.com"
               target="_blank"
@@ -82,6 +89,7 @@ export default function Footer() {
             >
               <LinkedinLogoIcon size={20} />
             </a>
+
             <a
               href="https://x.com"
               target="_blank"
@@ -90,6 +98,7 @@ export default function Footer() {
             >
               <XLogoIcon size={20} />
             </a>
+
             <a
               href="https://facebook.com"
               target="_blank"

components/HeroSection.module.css

@@ -14,17 +14,7 @@
 }
 
 .heroDecoration {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  right: auto;
-  transform: translate(-50%, -50%);
-  width: min(78vw, 360px);
-  height: auto;
-  opacity: 0.05;
-  pointer-events: none;
-  user-select: none;
-  z-index: 0;
+  display: none;
 }
 
 .content {
@@ -69,12 +59,18 @@
   }
 
   .heroDecoration {
+    display: block;
+    position: absolute;
     top: 50%;
     left: auto;
     right: 0;
     transform: translateY(-50%);
     width: min(42vw, 420px);
+    height: auto;
     opacity: 0.06;
+    pointer-events: none;
+    user-select: none;
+    z-index: 0;
   }
 
   .actions {

components/Navbar/Navbar.tsx

@@ -10,8 +10,8 @@ import { useNavToggleMenu } from "@/hooks/useNavToggleMenu";
 import { useSupportsHover } from "@/hooks/useSupportsHover";
 import { useToggleBodyOverflow } from "@/hooks/useToggleBodyOverflow";
 import styles from "./Navbar.module.css";
-import { NavbarSubMenu } from "./NavbarSubMenu";
 import { useIsDesktop } from "@/hooks/useIsDesktop";
+import { NavbarSubMenu } from "./NavbarSubMenu";
 
 type BasicLink = {
   label: string;