250 lines
9.6 KiB
TypeScript
250 lines
9.6 KiB
TypeScript
import {
|
|
ArrowUpRight,
|
|
Check,
|
|
CornerDownRight,
|
|
Mail,
|
|
MapPin,
|
|
Phone,
|
|
} from "lucide-react";
|
|
|
|
const services = [
|
|
{
|
|
number: "01",
|
|
title: "Website",
|
|
text: "Eine klare Startseite oder ein kompletter Auftritt, der sofort zeigt, warum man Ihnen vertrauen kann.",
|
|
},
|
|
{
|
|
number: "02",
|
|
title: "Struktur",
|
|
text: "Angebot, Beweise, Ablauf und Kontakt werden so sortiert, dass Besucher nicht suchen müssen.",
|
|
},
|
|
{
|
|
number: "03",
|
|
title: "Technik",
|
|
text: "Schnell, mobil sauber, DSGVO-arm und so gebaut, dass spätere Änderungen nicht zum Projekt werden.",
|
|
},
|
|
];
|
|
|
|
const deliverables = [
|
|
"Strategie und Seitenstruktur",
|
|
"Individuelles Screen-Design",
|
|
"Astro/React Umsetzung",
|
|
"Kontaktformular und Datenschutz",
|
|
"Hosting, Wartung und Analytics",
|
|
];
|
|
|
|
const packages = [
|
|
{
|
|
name: "Basis",
|
|
price: "799 EUR",
|
|
detail: "Eine starke Seite für ein klares Angebot.",
|
|
},
|
|
{
|
|
name: "Profi",
|
|
price: "1.499 EUR",
|
|
detail: "Mehrere Seiten für Betriebe mit erklärungsbedürftigem Angebot.",
|
|
},
|
|
{
|
|
name: "Maßarbeit",
|
|
price: "2.499 EUR+",
|
|
detail: "Individuelle Struktur, CMS und besondere Anforderungen.",
|
|
},
|
|
];
|
|
|
|
const CanvaLanding = () => {
|
|
return (
|
|
<main className="min-h-screen overflow-hidden bg-background text-foreground">
|
|
<section className="relative grid min-h-screen grid-cols-1 border-b border-border lg:grid-cols-[1.08fr_0.92fr]">
|
|
<div className="flex min-h-[640px] flex-col justify-between px-5 py-5 sm:px-8 lg:px-12">
|
|
<header className="grid gap-4 border-b border-border pb-5 text-xs uppercase tracking-[0.28em] text-muted-foreground sm:grid-cols-[1fr_auto]">
|
|
<a href="/" className="font-semibold text-foreground">
|
|
Matthias Meister
|
|
</a>
|
|
<nav className="flex flex-wrap gap-5">
|
|
<a href="#leistungen">Leistungen</a>
|
|
<a href="#pakete">Pakete</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div className="max-w-5xl py-16 sm:py-20 lg:py-24">
|
|
<p className="mb-6 max-w-sm text-sm uppercase tracking-[0.32em] text-primary">
|
|
Projektbrief für regionale Unternehmen
|
|
</p>
|
|
<h1 className="max-w-[11ch] text-[clamp(4.25rem,13vw,11.5rem)] font-black uppercase leading-[0.78] tracking-normal text-foreground">
|
|
Website ohne Umweg
|
|
</h1>
|
|
<div className="mt-8 grid gap-7 border-t border-border pt-7 lg:grid-cols-[0.72fr_1fr]">
|
|
<p className="text-sm uppercase tracking-[0.24em] text-muted-foreground">
|
|
Strategie trifft Umsetzung
|
|
</p>
|
|
<p className="max-w-2xl text-lg leading-8 text-foreground/78">
|
|
Ich baue Websites für Handwerk, Praxen, Salons und
|
|
Dienstleister aus der Region. Direkt, glaubwürdig und so
|
|
reduziert, dass der nächste Kontakt naheliegt.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 border-t border-border pt-5 text-sm uppercase tracking-[0.2em] text-muted-foreground sm:grid-cols-3">
|
|
<span>Antwort in 24h</span>
|
|
<span>DSGVO-arm</span>
|
|
<span>Hosting aus DE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<aside className="relative flex min-h-[520px] flex-col justify-between border-t border-primary-foreground/25 bg-primary px-5 py-5 text-primary-foreground sm:px-8 lg:border-l lg:border-t-0 lg:px-12">
|
|
<div className="flex items-start justify-between border-b border-primary-foreground/30 pb-5 text-xs uppercase tracking-[0.28em]">
|
|
<span>Creative Direction</span>
|
|
<span>2026</span>
|
|
</div>
|
|
<div className="absolute bottom-32 right-10 h-36 w-36 border border-primary-foreground/35" />
|
|
<div className="relative mt-28 max-w-xl">
|
|
<p className="text-[clamp(4rem,10vw,9rem)] font-black uppercase leading-[0.75] tracking-normal">
|
|
01
|
|
</p>
|
|
<p className="mt-7 max-w-sm text-2xl font-semibold uppercase leading-none">
|
|
Klarer Auftritt. Harte Kante. Weniger Agenturlärm.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="#kontakt"
|
|
className="group inline-flex w-fit items-center gap-3 border border-primary-foreground px-5 py-4 text-sm font-semibold uppercase tracking-[0.18em] transition hover:bg-primary-foreground hover:text-primary"
|
|
>
|
|
Projekt anfragen
|
|
<ArrowUpRight className="size-5 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
|
|
</a>
|
|
</aside>
|
|
</section>
|
|
|
|
<section
|
|
id="leistungen"
|
|
className="grid border-b border-border lg:grid-cols-[0.36fr_0.64fr]"
|
|
>
|
|
<div className="border-b border-border px-5 py-12 sm:px-8 lg:border-b-0 lg:border-r lg:px-12 lg:py-20">
|
|
<p className="text-sm uppercase tracking-[0.3em] text-primary">
|
|
Leistungen (02)
|
|
</p>
|
|
<h2 className="mt-6 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
|
|
Vom Brief zur Seite
|
|
</h2>
|
|
</div>
|
|
<div className="divide-y divide-border">
|
|
{services.map((service) => (
|
|
<article
|
|
key={service.number}
|
|
className="grid gap-8 px-5 py-10 sm:px-8 md:grid-cols-[7rem_0.4fr_1fr] lg:px-12"
|
|
>
|
|
<span className="text-5xl font-black text-primary">
|
|
{service.number}
|
|
</span>
|
|
<h3 className="text-3xl font-black uppercase leading-none">
|
|
{service.title}
|
|
</h3>
|
|
<p className="max-w-2xl text-lg leading-8 text-muted-foreground">
|
|
{service.text}
|
|
</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid border-b border-border lg:grid-cols-2">
|
|
<div className="bg-foreground px-5 py-14 text-background sm:px-8 lg:px-12 lg:py-24">
|
|
<p className="text-sm uppercase tracking-[0.3em] text-primary">
|
|
Deliverables (03)
|
|
</p>
|
|
<h2 className="mt-8 max-w-[10ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
|
|
Was am Ende steht
|
|
</h2>
|
|
</div>
|
|
<div className="grid content-center gap-4 px-5 py-12 sm:px-8 lg:px-12">
|
|
{deliverables.map((item) => (
|
|
<div
|
|
key={item}
|
|
className="flex items-center gap-4 border-b border-border pb-4 text-lg font-semibold uppercase tracking-[0.08em]"
|
|
>
|
|
<Check className="size-5 text-primary" />
|
|
<span>{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="pakete" className="border-b border-border px-5 py-14 sm:px-8 lg:px-12 lg:py-24">
|
|
<div className="grid gap-8 lg:grid-cols-[0.45fr_0.55fr]">
|
|
<div>
|
|
<p className="text-sm uppercase tracking-[0.3em] text-primary">
|
|
Pakete (04)
|
|
</p>
|
|
<h2 className="mt-8 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
|
|
Kosten ohne Nebel
|
|
</h2>
|
|
</div>
|
|
<div className="grid gap-4">
|
|
{packages.map((item) => (
|
|
<article
|
|
key={item.name}
|
|
className="grid gap-4 border border-border p-5 sm:grid-cols-[0.5fr_0.5fr] sm:p-6"
|
|
>
|
|
<div>
|
|
<p className="text-sm uppercase tracking-[0.24em] text-primary">
|
|
{item.name}
|
|
</p>
|
|
<p className="mt-4 text-4xl font-black uppercase">
|
|
{item.price}
|
|
</p>
|
|
</div>
|
|
<p className="self-end text-lg leading-7 text-muted-foreground">
|
|
{item.detail}
|
|
</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="kontakt"
|
|
className="grid min-h-[620px] lg:grid-cols-[0.72fr_0.28fr]"
|
|
>
|
|
<div className="px-5 py-14 sm:px-8 lg:px-12 lg:py-24">
|
|
<p className="text-sm uppercase tracking-[0.3em] text-primary">
|
|
Kontakt (05)
|
|
</p>
|
|
<h2 className="mt-8 max-w-[12ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl lg:text-8xl">
|
|
Erzählen Sie mir kurz vom Projekt
|
|
</h2>
|
|
<p className="mt-8 max-w-2xl text-xl leading-8 text-muted-foreground">
|
|
Ein paar Sätze reichen: Was bieten Sie an, was soll die Website
|
|
leisten, und wann soll sie online sein?
|
|
</p>
|
|
<a
|
|
href="mailto:hallo@matthias-meister.com"
|
|
className="mt-10 inline-flex items-center gap-3 bg-primary px-6 py-5 text-sm font-black uppercase tracking-[0.18em] text-primary-foreground transition hover:bg-foreground hover:text-background"
|
|
>
|
|
<CornerDownRight className="size-5" />
|
|
Anfrage per Mail senden
|
|
</a>
|
|
</div>
|
|
<div className="flex flex-col justify-end gap-6 bg-primary px-5 py-10 text-primary-foreground sm:px-8 lg:px-10">
|
|
<div className="flex gap-3">
|
|
<Mail className="size-5" />
|
|
<span>hallo@matthias-meister.com</span>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<Phone className="size-5" />
|
|
<span>Rückmeldung innerhalb von 24 Stunden</span>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<MapPin className="size-5" />
|
|
<span>Regionale KMU in Deutschland</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export { CanvaLanding };
|