since3-website/modules/landingPage/ui/components/hero/hero-section.tsx

import { ArrowDownRight } from "lucide-react"

import { site } from "@/modules/shared/config/site"
import { Magnetic } from "@/modules/shared/ui/components/magnetic"

import { HeroShader } from "./hero-shader"
import { KineticHeadline } from "./kinetic-headline"

export function HeroSection() {
  return (
    <section
      aria-labelledby="hero-title"
      data-theme="dark"
      className="relative isolate flex min-h-svh flex-col overflow-clip"
    >
      <HeroShader className="absolute inset-0 -z-10 size-full" />
      {/* Keeps header, label and headline readable on the brightest parts of the shader */}
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 bg-linear-to-t from-black via-black/45 to-black/10"
      />
      <div
        aria-hidden="true"
        className="absolute inset-x-0 top-0 -z-10 h-56 bg-linear-to-b from-black/85 to-transparent"
      />

      <div className="container-site flex flex-1 flex-col justify-end pt-32 pb-8 md:pb-10">
        <div
          className="hero-fade flex items-center justify-between font-mono text-label text-ink-300"
          style={{ "--d": "0ms" } as React.CSSProperties}
        >
          <span>(Digitalagentur aus {site.city})</span>
          <span className="hidden sm:inline">52.15° N / 7.34° E</span>
        </div>

        <div id="hero-title" className="mt-6">
          <KineticHeadline
            lines={["Websites und", "Software, die", "arbeiten."]}
            className="text-mega"
          />
        </div>

        <div className="mt-10 grid items-end gap-8 border-t border-white/15 pt-6 md:grid-cols-12">
          <p
            className="hero-fade type-body text-lead text-ink-300 md:col-span-6 lg:col-span-5"
            style={{ "--d": "150ms" } as React.CSSProperties}
          >
            Wir entwickeln Websites, Web-Anwendungen und KI-Automatisierungen
            für Unternehmen, die Ergebnisse sehen wollen statt Präsentationen.
          </p>

          <div
            className="hero-fade flex items-center justify-between gap-6 md:col-span-6 md:justify-end lg:col-span-7"
            style={{ "--d": "300ms" } as React.CSSProperties}
          >
            <a
              href="#projekte"
              className="group flex items-center gap-2 font-mono text-label text-ink-300 hover:text-white"
            >
              <ArrowDownRight
                aria-hidden
                className="size-4 transition-transform duration-500 ease-out-expo group-hover:rotate-45"
              />
              Arbeiten ansehen
            </a>
            <Magnetic strength={0.3}>
              <a
                href="#kontakt"
                className="group grid size-32 place-items-center rounded-full bg-white text-center text-sm font-semibold text-black transition-[scale] duration-500 ease-out-expo hover:scale-110 md:size-40 md:text-base"
              >
                <span>
                  Projekt
                  <br />
                  starten
                </span>
              </a>
            </Magnetic>
          </div>
        </div>
      </div>
    </section>
  )
}