55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
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">
|
||
<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
|
||
</h1>
|
||
<p className={`lead ${styles.lead}`}>
|
||
Mit festen Abläufen und hohen Qualitätsstandards – für ein sauberes,
|
||
professionelles Arbeitsumfeld.
|
||
</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>
|
||
<Link href="/Leistungen" className="btn btn--outline">
|
||
Leistungen ansehen
|
||
</Link>
|
||
</div>
|
||
<div className={styles.actions}>
|
||
<a
|
||
href={`tel:${companyData.contact.phone.value}`}
|
||
className="btn btn--tertiary"
|
||
>
|
||
<span className="btn-icon" aria-hidden="true">
|
||
<PhoneIcon size={18} weight="bold" />
|
||
</span>
|
||
{companyData.contact.phone.display}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|