mmintelandClaude Opus 5.5
75993100fa
The site now exists in German (at the root, with /impressum and /datenschutz) and English (/en). A request without a language follows the visitor's choice from the language switch, then the browser language, then German; the old English legal addresses move to /en for good. All visible texts are data in src/content/de.ts and en.ts, so components hold none of their own. The header carries a DE/EN switch whose bit curtain covers the page while it is swapped and reopens at the same reading position. Title, description, canonical, hreflang, Open Graph, the share image, the sitemap and the structured data are per language. The privacy notice now describes the cookie that remembers the chosen language. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import * as React from "react";
|
|
import { Button } from "@/src/components/Button";
|
|
import { AbstractCircuit } from "@/src/components/Effects";
|
|
import type { Content } from "@/src/content/types";
|
|
import { BitHeadline } from "./BitHeadline";
|
|
|
|
export const HeroStatement: React.FC<{ hero: Content["hero"] }> = ({
|
|
hero,
|
|
}) => (
|
|
<section className="relative overflow-hidden bg-white">
|
|
<div className="absolute inset-0 opacity-70">
|
|
<AbstractCircuit />
|
|
</div>
|
|
|
|
<div className="relative z-10 mx-auto flex min-h-[calc(100dvh-5rem)] w-full max-w-[1400px] flex-col justify-center px-5 py-16 md:px-12 md:py-24">
|
|
<BitHeadline
|
|
lines={hero.headline}
|
|
className="font-sans text-[12.5vw] font-black leading-[0.88] tracking-tighter md:text-[11.5vw] xl:text-[10.5rem]"
|
|
/>
|
|
|
|
<div className="mt-10 grid grid-cols-1 gap-10 md:mt-14 md:grid-cols-12 md:items-end md:gap-12">
|
|
<p className="m-0 max-w-2xl font-sans text-xl leading-snug text-slate-500 md:col-span-7 md:text-3xl">
|
|
{hero.lead} <span className="text-slate-900">{hero.leadStrong}</span>
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-4 md:col-span-5 md:items-end">
|
|
<div
|
|
id="hero-cta"
|
|
className="flex w-full flex-col gap-4 sm:flex-row md:w-auto"
|
|
>
|
|
<Button href="#contact" size="large" className="w-full sm:w-auto">
|
|
{hero.primaryCta}
|
|
</Button>
|
|
<Button
|
|
href="#hello"
|
|
variant="outline"
|
|
size="large"
|
|
className="w-full sm:w-auto"
|
|
>
|
|
{hero.secondaryCta}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="m-0 mt-14 flex list-none flex-wrap gap-x-8 gap-y-3 border-t border-slate-200 p-0 pt-6 md:mt-20">
|
|
{hero.trust.map((item) => (
|
|
<li
|
|
key={item}
|
|
className="font-mono text-[10px] uppercase tracking-[0.2em] text-slate-500 md:text-[11px]"
|
|
>
|
|
{item}
|
|
</li>
|
|
))}
|
|
<li className="font-mono text-[10px] uppercase tracking-[0.2em] text-slate-500 md:text-[11px]">
|
|
{hero.builtAndRunning}{" "}
|
|
<a
|
|
href="https://klz-cables.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-slate-900 underline-offset-4 hover:underline"
|
|
>
|
|
klz-cables.com
|
|
</a>
|
|
{" · "}
|
|
<a
|
|
href="https://e-tib.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-slate-900 underline-offset-4 hover:underline"
|
|
>
|
|
e-tib.com
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|