update

components/HeroSection.tsx

@@ -1,17 +1,22 @@
 import { ArrowRightIcon, PhoneIcon } from "@phosphor-icons/react/dist/ssr";
 import Link from "next/link";
 import styles from "./HeroSection.module.css";
+import { companyData } from "@/data/companyData";
+import Image from "next/image";
 
 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}>
+        <Image
+          src="/logo/logo-mininmal-basiclean-grey.svg"
+          alt=""
+          aria-hidden="true"
+          className={styles.heroDecoration}
+          width={620}
+          height={620}
+          unoptimized
+        />
         <div className={styles.content}>
           <h1 id="hero-heading" className={styles.heading}>
             Gebäudereinigung für ein makelloses Arbeitsumfeld
@@ -28,18 +33,18 @@ export default function HeroSection() {
               Jetzt Angebot anfragen
             </Link>
             <Link href="/Leistungen" className="btn btn--outline">
-              {/* <span className="btn-icon animate" aria-hidden="true">
-                <ArrowRightIcon size={18} weight="bold" />
-              </span> */}
               Leistungen ansehen
             </Link>
           </div>
           <div className={styles.actions}>
-            <a href="tel:+491726210606" className="btn btn--tertiary">
+            <a
+              href={`tel:${companyData.contact.phone.value}`}
+              className="btn btn--tertiary"
+            >
               <span className="btn-icon" aria-hidden="true">
                 <PhoneIcon size={18} weight="bold" />
               </span>
-              0172 6210606
+              {companyData.contact.phone.display}
             </a>
           </div>
         </div>