📚 HF Wiki

aktualisiert 18:52:56
Wiki / system / wp-layout-analyse-hochfrequenz.md

WP-Layout-Analyse hochfrequenz-tech.ultimo.hochfrequenz.tech (Impreza-Theme)

> Ableitung für Astro-Theme-Setup. Quelle: Screenshot 01_home_desktop.png + 01_home_mobile.png (2026-05-01)

Markenfarben (visuell ableitbar)

Typografie

Header / Navigation

Hero-Layout (3-spaltig)

Linke Spalte (~30%)Mittlere Spalte (~30%)Rechte Spalte (~40%)
Schwarze Tagline-BoxBild (Frau mit Tesla-Gerät)Anmelde-Form-Box ⭐
"Nach Nikola Tesla und Georges Lakhovsky"+ Olivgrüne Quote-Box drunter"HOCHFREQUENZ ERFAHREN? TERMIN HIER!"
H1 "HOCHFREQUENZ TECHNOLOGIE""Hochfrequenz ist die Kunst…" QuoteFelder: Vorname, Nachname, Telefon, Email, PLZ
H3 "Was bietet das für Sie bedeutend?"— Zhakir TahirCheckbox + Submit-Button
Bullet-Liste mit 4 Punkten

> Wichtig: Anmelde-Form steht direkt im Hero rechts. Das ist exakt der Universum-Funnel den Chapaty will → in Astro wird das die Universum-Registrierung mit Lead-Erfassung.

Mid-Section: Anwendungs-Cards (2×4 Grid)

8 Icon-Cards mit:

Typische Inhalte: "Ausführung der Hochfrequenztherapie", "Förderung der Selbstheilung", "Steigerung der Lebenszufriedenheit", "Stärkung des Energiefeldes", "Beruhigung des Nervensystems", "Reduktion der Muskelverspannungen", "Aktivierung der Selbstregulation", "Stärkung des Immunsystems"

→ Astro-Komponente: <ApplicationCardsGrid /> mit 8 Cards aus YAML/JSON-Datenfile.

Mid-Section CTA

Olivgrüner Banner-Button: "Mehr Infos zu allen Anwendungsbereichen"

Erfahrungsberichte-Carousel

Headline: "ENTDECKE DIE ERFAHRUNGSBERICHTE" Sublabel: "Anwendungen am Menschen / Anwendungen am Tier" (Tab-Switch)

3 Karten sichtbar mit:

Pfeile links/rechts zum Wechseln. Mobile: Swipe.

→ Astro-Komponente: <ExperienceCarousel filter="mensch|tier" items={experiences} /> mit Embla.js oder Swiper.

Footer (oben dunkel + Olivgrün-Bar + unten dunkel)

Dunkles Top: Headline "JETZT KOSTENLOS REGISTRIEREN UND TEIL DER WELT DER HOCHFREQUENZ ENTDECKEN!"

Olivgrüne Disclaimer-Bar: "WICHTIGER HINWEIS — Die Inhalte dieser Webseite dienen ausschließlich der allgemeinen Information…" (DSGVO/Health-Disclaimer)

Unteres Dunkel: Phone, Email, Adresse, Impressum/Datenschutz, Copyright

→ In Astro: <SiteFooter /> mit slot für Disclaimer-Bar als wiederverwendbare Komponente.

Mobile-Behavior (aus 01_home_mobile.png ableitbar)

Komponenten-Inventar für Astro (Bauplan)


components/
├── layout/
│   ├── SiteHeader.astro       — Logo + Nav + Phone + CTA
│   ├── SiteFooter.astro       — Dark + Olive-Disclaimer + Dark
│   └── BaseLayout.astro       — HTML + i18n + SEO
├── hero/
│   ├── HomeHero.astro         — 3-spaltiger Hero mit Form
│   ├── PageHero.astro         — Einfacher Hero für Unter-Pages
│   └── UniverseSignupForm.astro — Anmelde-Form (Lead-Magnet)
├── content/
│   ├── ApplicationCard.astro  — Single Card (Icon + Title + Desc)
│   ├── ApplicationGrid.astro  — 2x4 Grid
│   ├── ExperienceCard.astro   — Erfahrungsbericht Card
│   ├── ExperienceCarousel.astro — Mit Tab-Filter Mensch/Tier
│   ├── QuoteBox.astro         — Olivgrüne Quote-Box (Pioniere zitieren)
│   └── DisclaimerBar.astro    — Olivgrüne Pflicht-Disclaimer-Bar
├── product/
│   ├── ProductCard.astro      — Hörbuch / Tesla 2GO
│   └── ProductHero.astro      — Produkt-Detailseite
└── ui/
    ├── Button.astro           — Olive primary, Outline secondary
    └── Container.astro        — Max-w-7xl wrapper

Tailwind-Theme-Tokens


colors: {
  primary: {
    50: '#f5f7ed', 100: '#e8edd6', 200: '#d3deb0',
    300: '#b8c884', 400: '#9CAF88', 500: '#8B9A57',
    600: '#6e7c43', 700: '#566237', 800: '#454f2e',
    900: '#3a4128', 950: '#1d2014',
  },
  ink: { DEFAULT: '#2A2A2A', dark: '#1F1F1F' },
  paper: '#FFFFFF',
  mute: '#F5F5F5',
}
fontFamily: {
  serif: ['Playfair Display', 'Cormorant Garamond', 'serif'],
  sans: ['Inter', 'system-ui', 'sans-serif'],
}

Was im Astro-Theme NICHT vom WP übernommen wird

Was übernommen wird