From 117839058bc99498a196ce6cdc767883ba6ee084 Mon Sep 17 00:00:00 2001 From: Matthias Meister Date: Tue, 5 May 2026 22:20:09 +0200 Subject: [PATCH] Professionalize landing page design --- backlog/config.yml | 14 + ...1 - Professionalize-landing-page-design.md | 42 ++ src/components/about19.tsx | 56 ++- src/components/contact21.tsx | 76 ++-- src/components/cta.tsx | 21 +- src/components/faq7.tsx | 40 +- src/components/feature284.tsx | 113 +++--- src/components/footer27.tsx | 188 +++------ src/components/hero235.tsx | 129 +++++-- src/components/pricing4.tsx | 362 +++++++++--------- src/components/stats11.tsx | 76 ++-- src/pages/index.astro | 6 +- src/styles/global.css | 81 ++-- 13 files changed, 628 insertions(+), 576 deletions(-) create mode 100644 backlog/config.yml create mode 100644 backlog/tasks/task-1 - Professionalize-landing-page-design.md diff --git a/backlog/config.yml b/backlog/config.yml new file mode 100644 index 0000000..d6a32af --- /dev/null +++ b/backlog/config.yml @@ -0,0 +1,14 @@ +project_name: "Dev Landing" +default_status: "To Do" +statuses: ["To Do", "In Progress", "Done"] +labels: [] +date_format: yyyy-mm-dd +max_column_width: 20 +auto_open_browser: true +default_port: 6420 +remote_operations: false +auto_commit: false +bypass_git_hooks: false +check_active_branches: false +active_branch_days: 30 +task_prefix: "task" diff --git a/backlog/tasks/task-1 - Professionalize-landing-page-design.md b/backlog/tasks/task-1 - Professionalize-landing-page-design.md new file mode 100644 index 0000000..252f743 --- /dev/null +++ b/backlog/tasks/task-1 - Professionalize-landing-page-design.md @@ -0,0 +1,42 @@ +--- +id: TASK-1 +title: Professionalize landing page design +status: In Progress +assignee: [] +created_date: '2026-05-05 19:55' +updated_date: '2026-05-05 20:13' +labels: [] +dependencies: [] +priority: high +--- + +## Description + + +Refresh the existing landing page so it feels more professional while preserving the current regional KMU positioning and current content structure. + + +## Acceptance Criteria + +- [x] #1 Visual hierarchy is clearer across the first viewport and content sections +- [x] #2 Styling feels cohesive and professional without generic AI visual patterns +- [x] #3 Responsive layout remains usable on mobile and desktop + + +## Implementation Plan + + +1. Audit current structure and design context +2. Tighten theme tokens and page rhythm +3. Refresh hero/trust/features/pricing/contact styling +4. Build and visual-check responsive behavior +5. Mark acceptance criteria verified, leave task In Progress for user confirmation + + +## Implementation Notes + + +Backlog was missing in the repo, so I initialized it with CLI defaults and disabled remote branch checks after sandbox git fetch failed. Design context exists in .impeccable.md: regional KMU, calm/direct/human, warm light theme. + +Implemented the professionalization pass: warm OKLCH theme, full-width page shell, redesigned hero with real workspace image, calmer trust/features/stats sections, clearer pricing tabs, refined FAQ/about/contact/footer. Verified with pnpm build, git diff --check, and in-app browser checks for hero visibility and pricing tab interaction. Dev-server hydration errors in browser logs were from the initial Vite dependency optimization at 20:10:49 and did not recur after reload. + diff --git a/src/components/about19.tsx b/src/components/about19.tsx index 7e1eba6..0ccff2b 100644 --- a/src/components/about19.tsx +++ b/src/components/about19.tsx @@ -7,32 +7,48 @@ interface About19Props { const About19 = ({ className }: About19Props) => { return ( -
-
-
-
+
+
+
+
-
-

- Hallo, ich bin Matthias. -

-

- Ich bin in der Region aufgewachsen, war durch die Bundeswehr viele Jahre weg — und bin jetzt zurück. Und ich plane zu bleiben. +

+

+ Über die Zusammenarbeit

-

- Seit über 15 Jahren beschäftige ich mich mit Webentwicklung und Software. Einen Großteil davon intern für die Bundeswehr — Projekte die ich Ihnen leider nicht zeigen kann. Was ich Ihnen zeigen kann: Wie ich arbeite. Zuverlässig, präzise und ohne unnötigen Schnickschnack. -

-

- Neben Websites für regionale Unternehmen entwickle ich eigene Software und Apps. Das bedeutet: Wenn Ihre Anforderungen irgendwann über eine einfache Website hinausgehen, bin ich noch immer der richtige Ansprechpartner. -

-

- Mein Ziel ist es, Unternehmen aus der Region — Handwerker, Friseure, Ärzte — mit dem auszustatten, was Großstadtagenturen ihren Kunden für viel mehr Geld verkaufen. Eine Website die funktioniert, gefunden wird und Ihnen keine Kopfschmerzen macht. +

+ Hallo, ich bin Matthias. Zurück in der Region und hier, um zu + bleiben. +

+
+

+ Ich bin in der Region aufgewachsen, war durch die Bundeswehr + viele Jahre weg und bin jetzt zurück. +

+

+ Seit über 15 Jahren beschäftige ich mich mit Webentwicklung und + Software. Einen Großteil davon intern für die Bundeswehr: + Projekte, die ich Ihnen leider nicht zeigen kann. Was ich Ihnen + zeigen kann: wie ich arbeite. Zuverlässig, präzise und ohne + unnötigen Schnickschnack. +

+

+ Neben Websites für regionale Unternehmen entwickle ich eigene + Software und Apps. Wenn Ihre Anforderungen irgendwann über eine + einfache Website hinausgehen, bleibt der Ansprechpartner also + derselbe. +

+
+

+ Mein Ziel: Unternehmen aus der Region mit einer Website + ausstatten, die funktioniert, gefunden wird und Ihnen keine + Kopfschmerzen macht.

diff --git a/src/components/contact21.tsx b/src/components/contact21.tsx index d14eb3d..913dd93 100644 --- a/src/components/contact21.tsx +++ b/src/components/contact21.tsx @@ -21,7 +21,7 @@ const contactFormSchema = z.object({ email: z .string() .min(1, "Bitte geben Sie Ihre E-Mail ein") - .email("Bitte geben Sie eine gueltige E-Mail ein"), + .email("Bitte geben Sie eine gültige E-Mail ein"), message: z.string().min(1, "Bitte beschreiben Sie kurz Ihr Anliegen"), }); @@ -68,19 +68,29 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => { }; return ( -
-
-
+
+
+
-

- Erzählen Sie mir kurz von Ihrem Unternehmen — ich melde mich innerhalb von 24 Stunden mit einem unverbindlichen Angebot. -

-
- Matthias Meister +
+

+ Kontakt +

+

+ Erzählen Sie kurz, worum es geht. +

+

+ Ich melde mich innerhalb von 24 Stunden mit einer ersten + Einschätzung und dem passenden nächsten Schritt. +

+
+
+
+ MM +

Matthias Meister @@ -91,26 +101,22 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => {

-
-

- Jetzt Website anfordern -

- - {isSubmitted && ( -
-

- Vielen Dank! Ich melde mich in Kürze bei Ihnen. -

-
+
+ {isSubmitted && ( +
+

+ Vielen Dank! Ich melde mich in Kürze bei Ihnen. +

+
+ )} -
- + + { id={field.name} aria-invalid={fieldState.invalid} placeholder="Ihr Name*" - className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base" + className="h-14 rounded-none border-0 border-b border-b-border bg-transparent! px-0 shadow-none placeholder:text-muted-foreground/65 focus-visible:border-b-primary focus-visible:ring-0 lg:text-base" /> {fieldState.invalid && ( @@ -147,7 +153,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => { type="email" aria-invalid={fieldState.invalid} placeholder="Ihre E-Mail*" - className="h-15 rounded-none border-0 border-b border-b-foreground/25 bg-transparent! shadow-none placeholder:text-foreground/20 focus-visible:ring-0 lg:text-base" + className="h-14 rounded-none border-0 border-b border-b-border bg-transparent! px-0 shadow-none placeholder:text-muted-foreground/65 focus-visible:border-b-primary focus-visible:ring-0 lg:text-base" /> {fieldState.invalid && ( @@ -170,7 +176,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => { aria-invalid={fieldState.invalid} placeholder="Nachricht: Worum geht es bei Ihrem Projekt?" rows={4} - className="min-h-32 w-full rounded-none border-0 border-b border-b-foreground/25 bg-transparent px-0 py-3 text-base text-foreground shadow-none outline-none placeholder:text-foreground/20 focus-visible:border-ring focus-visible:ring-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive lg:text-base" + className="min-h-36 w-full rounded-none border-0 border-b border-b-border bg-transparent px-0 py-4 text-base text-foreground shadow-none outline-none placeholder:text-muted-foreground/65 focus-visible:border-b-primary focus-visible:ring-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive lg:text-base" /> {fieldState.invalid && ( @@ -186,7 +192,7 @@ const Contact21 = ({ className, onSubmit }: Contact21Props) => { )}
- + {faqs.map((faq, index) => ( - + {faq.question} - {faq.answer} + + {faq.answer} + ))} diff --git a/src/components/feature284.tsx b/src/components/feature284.tsx index 1fc5593..c5165c7 100644 --- a/src/components/feature284.tsx +++ b/src/components/feature284.tsx @@ -1,44 +1,43 @@ -import { HelpCircleIcon } from "lucide-react"; -import React from "react"; +import { + Gauge, + Handshake, + MapPinned, + Search, + Smartphone, +} from "lucide-react"; -import { GlowingEffect } from "@/components/ui/glowing-effect"; import { cn } from "@/lib/utils"; const featureData = [ { - desc: "Ihre Website erklaert in wenigen Sekunden, fuer wen Sie arbeiten und was Sie konkret anbieten.", - img: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img1.jpeg", + desc: "Die Startseite sagt schnell, für wen Sie arbeiten, was Sie anbieten und wie Interessenten Kontakt aufnehmen.", title: "Klare Positionierung", - badgeTitle: "Vorteil 01", - gridClass: "md:col-span-1", + badgeTitle: "01", + icon: MapPinned, }, { - desc: "Ein zeitgemaesses Design sorgt fuer einen starken ersten Eindruck und passt zu Ihrem Unternehmen.", - img: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img7.jpeg", - title: "Modernes Erscheinungsbild", - badgeTitle: "Vorteil 02", - gridClass: "lg:col-span-2", + desc: "Gestaltung, Texte und Struktur wirken seriös, ohne den Charakter eines regionalen Betriebs glattzubügeln.", + title: "Glaubwürdiger Auftritt", + badgeTitle: "02", + icon: Handshake, }, { - desc: "Ihre Inhalte funktionieren sauber auf Smartphone, Tablet und Desktop - ohne Umwege fuer Besucher.", - img: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img11.jpeg", - title: "Mobil optimiert", - badgeTitle: "Vorteil 03", - gridClass: "md:col-span-1 lg:row-span-2 ", + desc: "Telefonnummer, Formular und zentrale Informationen bleiben auf Smartphone und Desktop leicht erreichbar.", + title: "Mobil sauber geführt", + badgeTitle: "03", + icon: Smartphone, }, { - desc: "Klare Kontaktwege mit gut sichtbaren Handlungsaufforderungen machen den naechsten Schritt leicht.", - img: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img2.jpeg", - title: "Anfragen ohne Huerden", - badgeTitle: "Vorteil 04", - gridClass: "lg:col-span-2", + desc: "Technik, Bilder und Inhalte werden so umgesetzt, dass die Seite schnell lädt und stabil bleibt.", + title: "Schnell und robust", + badgeTitle: "04", + icon: Gauge, }, { - desc: "Die Seite bleibt wartbar aufgebaut, damit Inhalte spaeter schnell angepasst oder erweitert werden koennen.", - img: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/guri3/img4.jpeg", - title: "Pflegeleicht aufgebaut", - badgeTitle: "Vorteil 05", - gridClass: "md:col-span-1", + desc: "Google findet die richtigen Inhalte: Leistungen, Region, Kontakt und die wichtigsten Suchbegriffe.", + title: "Für Suche vorbereitet", + badgeTitle: "05", + icon: Search, }, ]; @@ -48,45 +47,43 @@ interface Feature284Props { const Feature284 = ({ className }: Feature284Props) => { return ( -
-
-
+
+
+
+
+

+ Was die Seite leisten muss +

+

+ Professionell heißt hier: verständlich, erreichbar, belastbar. +

+
+
{featureData.map((feature, index) => (
- -
-

{feature.badgeTitle}

- -
-
- {feature.title} +

+ {feature.badgeTitle} +

+
-

- {feature.title} -

-

{feature.desc}

+
+

+ {feature.title} +

+

+ {feature.desc} +

+
))} +
diff --git a/src/components/footer27.tsx b/src/components/footer27.tsx index d5d7aa4..0030333 100644 --- a/src/components/footer27.tsx +++ b/src/components/footer27.tsx @@ -1,10 +1,6 @@ -"use client"; - -import { motion } from "framer-motion"; -import { ArrowUpRight } from "lucide-react"; +import { ArrowRight, Mail, Phone } from "lucide-react"; import { Button } from "@/components/ui/button"; -import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; interface Footer27Props { @@ -12,137 +8,65 @@ interface Footer27Props { } const Footer27 = ({ className }: Footer27Props) => { - const socialLinks = [ - { name: "E-Mail", href: "#" }, - { name: "LinkedIn", href: "#" }, - ]; - - const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - duration: 0.6, - staggerChildren: 0.1, - }, - }, - }; - - const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { duration: 0.5 }, - }, - }; - return ( -
-
-
+ +
+

© 2026 Matthias Meister Webdesign — Crimmitschau

+ +
-
+ ); }; diff --git a/src/components/hero235.tsx b/src/components/hero235.tsx index 5d81be6..806c80e 100644 --- a/src/components/hero235.tsx +++ b/src/components/hero235.tsx @@ -1,4 +1,4 @@ -import { ArrowRight } from "lucide-react"; +import { ArrowRight, Mail, MapPin, Phone } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; @@ -9,38 +9,103 @@ interface Hero235Props { const Hero235 = ({ className }: Hero235Props) => { return ( -
-
-
-

- Matthias Meister | Webdesign für KMU aus der Region -

-

- Rückmeldung innerhalb von 24 Stunden -

-
-
-

- Websites für Unternehmen aus der Region - klar, schnell und - glaubwürdig. -

-

- Ich arbeite direkt für Handwerk, Praxen und kleine Betriebe aus - der Region. Ohne Baukasten-Look, Agenturshow oder technischen - Umweg - sondern mit einer Website, die Ihr Angebot klar zeigt und - Anfragen leichter macht. -

-
- -

- Kurze Nachricht reicht - Sie erhalten direkt eine erste - Einschätzung und den passenden nächsten Schritt. +

+
+
+ + Matthias Meister Webdesign + + +
+ +
+
+

+ Webdesign für regionale KMU

+

+ Websites, die vor Ort Vertrauen schaffen. +

+

+ Für Handwerk, Praxen und kleine Betriebe: klar erklärt, schnell + gebaut und so strukturiert, dass Besucher ohne Umwege verstehen, + warum sie gerade Sie anfragen sollten. +

+ +
+ {[ + ["24h", "Rückmeldung"], + ["2 Wochen", "typischer Go-Live"], + ["Sachsen", "Hosting & Betrieb"], + ].map(([value, label]) => ( +
+
+ {value} +
+
+ {label} +
+
+ ))} +
+
+ +
+
+ Arbeitsplatz von Matthias Meister beim Entwickeln einer Website +
+ + Direkt mit dem Entwickler statt mit wechselnden Agenturrollen. + + + Persönlich geplant + +
+
diff --git a/src/components/pricing4.tsx b/src/components/pricing4.tsx index 1cb7c58..8e2b688 100644 --- a/src/components/pricing4.tsx +++ b/src/components/pricing4.tsx @@ -5,217 +5,211 @@ import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; -import { Separator } from "@/components/ui/separator"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; interface PricingPlan { name: string; - badge: string; price: string; - description?: string; + period: string; + description: string; features: string[]; - buttonText: string; isPopular?: boolean; } interface Pricing4Props { title?: string; description?: string; - plans?: PricingPlan[]; className?: string; } +const developmentPlans: PricingPlan[] = [ + { + name: "Basis", + price: "799 €", + period: "Einmalpreis", + description: "Für einen klaren Webauftritt mit den wichtigsten Inhalten.", + features: [ + "Eine Seite mit fünf Sektionen", + "Kontaktformular", + "Impressum und Datenschutz", + "Mobilfreundlich und für Google vorbereitet", + "Cookiefreie Analytics ohne Banner", + ], + }, + { + name: "Profi", + price: "1.499 €", + period: "Einmalpreis", + description: "Für Betriebe, die mehrere Leistungen sauber erklären wollen.", + features: [ + "Bis zu fünf Unterseiten", + "Google Maps Integration", + "SEO-Basis für lokale Auffindbarkeit", + "Optionaler Blog", + "Alles aus Basis inklusive", + ], + isPopular: true, + }, + { + name: "Maßarbeit", + price: "2.499 €", + period: "Einmalpreis", + description: "Für individuelle Anforderungen, CMS und spätere Erweiterungen.", + features: [ + "Individuelles Design nach Ihren Anforderungen", + "CMS zur eigenen Inhaltspflege", + "Erweiterbare Struktur", + "Alles aus Profi inklusive", + ], + }, +]; + +const servicePlans: PricingPlan[] = [ + { + name: "Hosting", + price: "19 €", + period: "pro Monat", + description: "Solide technische Basis für kleine Unternehmensseiten.", + features: [ + "Hosting auf deutschen Servern in Sachsen", + "SSL, Domain und tägliche Backups", + "Monatlicher Einblick in Besucherzahlen", + ], + }, + { + name: "Wartung", + price: "39 €", + period: "pro Monat", + description: "Für Unternehmen, die Betrieb und Sicherheit abgeben möchten.", + features: [ + "Alles aus Hosting inklusive", + "Regelmäßige Updates und Sicherheitschecks", + "1 Stunde Support pro Monat", + "Monitoring bei technischen Problemen", + ], + isPopular: true, + }, + { + name: "Full Service", + price: "69 €", + period: "pro Monat", + description: "Für laufende Änderungen ohne jedes Mal ein neues Projekt.", + features: [ + "Alles aus Wartung inklusive", + "Kleinere Inhaltsänderungen bis 2 Stunden pro Monat", + "Häufigerer Einblick in Besucherzahlen", + ], + }, +]; + const Pricing4 = ({ - title = "Entwicklungspakete", + title = "Pakete mit klarer Kante.", description = - "Alle Websites laufen auf deutschen Servern, sind DSGVO-konform und kommen ohne Cookie-Banner aus. Auf Wunsch erhalten Sie monatlich einen Einblick, wie viele Menschen Ihre Website besuchen haben — und woher sie kommen.", - plans = [ - { - name: "BASIS", - badge: "799 €", - price: "799 €", - features: [ - "Eine Seite, fünf Sektionen", - "Kontaktformular", - "Impressum & Datenschutz", - "Mobilfreundlich & für Google optimiert", - "DSGVO-konformes Kontaktformular", - "Cookiefreies Analytics — ohne Abmahnrisiko", - ], - buttonText: "Kostenloses Angebot anfordern", - }, - { - name: "PROFI", - badge: "1.499 € ⭐ Empfehlung", - price: "1.499 €", - features: [ - "Bis zu 5 Unterseiten", - "Google Maps Integration", - "SEO-Basis (bessere Auffindbarkeit bei Google)", - "Optionaler Blog", - "DSGVO-konformes Kontaktformular", - "Cookiefreies Analytics — ohne Abmahnrisiko", - "Alles aus Basis inklusive", - ], - buttonText: "Kostenloses Angebot anfordern", - isPopular: true, - }, - { - name: "MASSARBEIT", - badge: "2.499 €", - price: "2.499 €", - features: [ - "Individuelles Design nach Ihren Wünschen", - "CMS — Sie pflegen Inhalte selbst", - "DSGVO-konformes Kontaktformular", - "Cookiefreies Analytics — ohne Abmahnrisiko", - "Alles aus Profi inklusive", - ], - buttonText: "Kostenloses Angebot anfordern", - }, - ], + "Die Preise sind bewusst nachvollziehbar gehalten. Im Gespräch klären wir, welches Paket passt und wo ein schlankerer Weg sinnvoller ist.", className, }: Pricing4Props) => { - const [isMonthly, setIsMonthly] = useState(false); + const [activeTab, setActiveTab] = useState<"development" | "service">( + "development", + ); + const plans = activeTab === "development" ? developmentPlans : servicePlans; + return ( -
-
-
-

- {title} -

-
-

+

+
+
+
+

+ Preise +

+

+ {title} +

+

{description}

- - setIsMonthly(value === "monthly") - } - className="w-fit shrink-0" - aria-label="Leistungsvariante" +
+ + setActiveTab(value as "development" | "service") + } + className="w-fit lg:justify-self-end" + aria-label="Paketart auswählen" + > + + + Entwicklung + + + Hosting & Wartung + + + +
+ +
+ {plans.map((plan) => ( +
- - - Entwicklung - - - Hosting & Wartung - - - -
-
- {isMonthly ? ( - plans.map((plan) => ( -
- - {plan.badge} - -

- {plan.price} +
+
+

+ {plan.name}

-

Einmalpreis

- -
-
    - {plan.features.map((feature, featureIndex) => ( -
  • -
    • - ))} -
- -
+

+ {plan.description} +

- )) - ) : ( - [ - { - name: "BASIC HOSTING", - badge: "19 €/Monat", - price: "19 €", - features: [ - "Hosting auf deutschen Servern in Sachsen", - "Grünes Schloss im Browser (SSL) — sicher & von Google bevorzugt", - "Tägliche Backups — Ihre Daten sind immer geschützt", - "Domain inklusive", - "Monatlicher Einblick in Ihre Besucherzahlen", - ], - }, - { - name: "WARTUNG", - badge: "39 €/Monat ⭐ Empfehlung", - price: "39 €", - features: [ - "Alles aus Basic Hosting inklusive", - "Regelmäßige Updates & Sicherheitschecks", - "1 Stunde Support pro Monat", - "Monitoring — ich merke bevor Sie es tun, wenn etwas nicht stimmt", - "Wöchentlicher Einblick in Ihre Besucherzahlen", - ], - isPopular: true, - }, - { - name: "FULL SERVICE", - badge: "69 €/Monat", - price: "69 €", - features: [ - "Alles aus Wartung inklusive", - "Kleinere Inhaltsänderungen (bis 2 Stunden/Monat)", - "Täglicher Einblick in Ihre Besucherzahlen", - ], - }, - ].map((plan) => ( -
- - {plan.badge} + {plan.isPopular && ( + + Empfohlen -

- {plan.price} -

-

Monatlicher Preis

- -
-
    - {plan.features.map((feature, featureIndex) => ( -
  • -
    • - ))} -
- -
-
- )) - )} -
+ )} +

+ +
+

+ {plan.price} +

+

+ {plan.period} +

+
+ +
    + {plan.features.map((feature) => ( +
  • +
    • + ))} +
+ + + + ))}
diff --git a/src/components/stats11.tsx b/src/components/stats11.tsx index 5d31d8d..b96e095 100644 --- a/src/components/stats11.tsx +++ b/src/components/stats11.tsx @@ -5,59 +5,39 @@ interface Stats11Props { } const Stats11 = ({ className }: Stats11Props) => { - return ( -
-
-
-
+ const stats = [ + ["SEO-ready", "Leistungsseiten, Region und Kontakt sauber strukturiert."], + ["< 1 Sek.", "Auf schnelle Ladezeiten und klare Technik ausgelegt."], + ["ab 799 €", "Transparente Einstiegspreise ohne Paketnebel."], + ["2 Wochen", "Typischer Zeitraum vom Startgespräch bis zur Vorschau."], + ]; + return ( +
+
+
-

- Für Google optimiert, schnell geladen und klar kalkulierbar. - - {" "} - Genau die Zahlen, die bei einer Website wirklich zählen. - +

+ Messbare Grundlagen +

+

+ Gute Websites fühlen sich ruhig an, weil die Basis stimmt.

-
-
-
- - - SEO-ready - -

- Für Google optimiert +

+
+ {stats.map(([value, label]) => ( +
+

+ {value} +

+

+ {label}

-
- - - {"< 1 Sek."} - -

- Ladezeit -

-
-
- - - ab 799 € - -

- Transparenter Einmalpreis -

-
-
- - - 2 Wochen - -

- Bis zum Go-Live -

-
-
+ ))}
diff --git a/src/pages/index.astro b/src/pages/index.astro index 0f5a6ad..30f4e14 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -25,8 +25,8 @@ import "@/styles/global.css"; defer> -
- +
+ @@ -35,6 +35,6 @@ import "@/styles/global.css"; -
+ diff --git a/src/styles/global.css b/src/styles/global.css index fb3c7e9..d9c4938 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -49,38 +49,38 @@ } :root { - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --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.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --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); } .dark { @@ -122,9 +122,20 @@ @apply border-border outline-ring/50; } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground antialiased; } html { - @apply font-sans; + @apply scroll-smooth font-sans; } -} \ No newline at end of file +} + +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); +}