matthias/Dev-Landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'codex/canva-redesign'

Browse Source 
# Conflicts:
#	backlog/config.yml
#	src/components/cta.tsx
#	src/components/faq7.tsx
#	src/components/feature284.tsx
#	src/pages/index.astro
#	src/styles/global.css
This commit is contained in:
Matthias Meister
2026-05-05 22:41:58 +02:00
parent 117839058b e57678a68d
commit aac9e52bfb
7 changed files with 366 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/components/canva-landing.tsx Normal file
View File

@@ -0,0 +1,249 @@
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 };

22
src/pages/index.astro
View File

@@ -1,13 +1,5 @@
---
import { About19 } from "@/components/about19";
import { Contact21 } from "@/components/contact21";
import { Faq7 } from "@/components/faq7";
import { Feature284 } from "@/components/feature284";
import { Footer27 } from "@/components/footer27";
import { Hero235 } from "@/components/hero235";
import { Pricing4 } from "@/components/pricing4";
import { Stats11 } from "@/components/stats11";
import CTASection from "@/components/cta";
import { CanvaLanding } from "@/components/canva-landing";
import "@/styles/global.css";
---
@@ -25,16 +17,6 @@ import "@/styles/global.css";
defer></script>
</head>
<body>
<main class="w-full overflow-x-hidden">
<Hero235 client:load />
<CTASection client:load />
<Feature284 client:load />
<Stats11 client:load />
<Pricing4 client:load />
<Faq7 client:load />
<About19 client:load />
<Contact21 client:load />
<Footer27 client:load />
</main>
<CanvaLanding />
</body>
</html>

81
src/styles/global.css
View File

@@ -49,38 +49,38 @@
}
:root {
--background: oklch(0.982 0.012 82);
--foreground: oklch(0.235 0.024 72);
--card: oklch(0.996 0.006 82);
--card-foreground: oklch(0.235 0.024 72);
--popover: oklch(0.996 0.006 82);
--popover-foreground: oklch(0.235 0.024 72);
--primary: oklch(0.285 0.045 148);
--primary-foreground: oklch(0.985 0.011 82);
--secondary: oklch(0.915 0.028 82);
--secondary-foreground: oklch(0.275 0.031 72);
--muted: oklch(0.94 0.018 82);
--muted-foreground: oklch(0.485 0.024 72);
--accent: oklch(0.705 0.079 141);
--accent-foreground: oklch(0.17 0.026 148);
--destructive: oklch(0.56 0.19 27);
--border: oklch(0.86 0.018 80);
--input: oklch(0.84 0.018 80);
--ring: oklch(0.53 0.071 142);
--chart-1: oklch(0.66 0.08 142);
--chart-2: oklch(0.55 0.055 72);
--chart-3: oklch(0.47 0.04 215);
--chart-4: oklch(0.72 0.055 93);
--chart-5: oklch(0.38 0.046 148);
--radius: 0.5rem;
--sidebar: oklch(0.965 0.012 82);
--sidebar-foreground: oklch(0.235 0.024 72);
--sidebar-primary: oklch(0.285 0.045 148);
--sidebar-primary-foreground: oklch(0.985 0.011 82);
--sidebar-accent: oklch(0.93 0.02 82);
--sidebar-accent-foreground: oklch(0.275 0.031 72);
--sidebar-border: oklch(0.86 0.018 80);
--sidebar-ring: oklch(0.53 0.071 142);
--background: oklch(0.115 0.012 22);
--foreground: oklch(0.965 0.013 76);
--card: oklch(0.16 0.014 22);
--card-foreground: oklch(0.965 0.013 76);
--popover: oklch(0.16 0.014 22);
--popover-foreground: oklch(0.965 0.013 76);
--primary: oklch(0.61 0.235 27);
--primary-foreground: oklch(0.985 0.01 76);
--secondary: oklch(0.22 0.016 22);
--secondary-foreground: oklch(0.965 0.013 76);
--muted: oklch(0.19 0.014 22);
--muted-foreground: oklch(0.73 0.021 76);
--accent: oklch(0.61 0.235 27);
--accent-foreground: oklch(0.985 0.01 76);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.965 0.013 76 / 20%);
--input: oklch(0.965 0.013 76 / 20%);
--ring: oklch(0.61 0.235 27);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--radius: 0.625rem;
--sidebar: oklch(0.16 0.014 22);
--sidebar-foreground: oklch(0.965 0.013 76);
--sidebar-primary: oklch(0.61 0.235 27);
--sidebar-primary-foreground: oklch(0.985 0.01 76);
--sidebar-accent: oklch(0.22 0.016 22);
--sidebar-accent-foreground: oklch(0.965 0.013 76);
--sidebar-border: oklch(0.965 0.013 76 / 20%);
--sidebar-ring: oklch(0.61 0.235 27);
}
.dark {
@@ -122,20 +122,11 @@
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground antialiased;
@apply bg-background text-foreground;
text-rendering: geometricPrecision;
}
html {
@apply scroll-smooth font-sans;
@apply font-sans;
scroll-behavior: smooth;
}
}
body {
background-image:
linear-gradient(to bottom, oklch(0.988 0.01 82), var(--background) 46rem),
linear-gradient(90deg, oklch(0.86 0.018 80 / 0.28) 1px, transparent 1px);
background-size: auto, 6rem 6rem;
}
::selection {
background: oklch(0.78 0.075 141 / 0.35);
}