Handoff: Valanto – Marketing-Startseite (One-Pager)
Veraltet, Stand Juli 2026. Dieses Handoff beschreibt den ersten Entwurf. Heute
gelten src/index.css und CLAUDE.md: nur eine Schrift (Archivo, kein Source Serif 4),
keine Dachzeilen/Eyebrows, Zielgruppen als Bühne mit Produktbildern auf Anthrazit,
Produktbilder im Petrol-Rahmen statt durchgehendem Hairline-Raster. Preise und Claim
unten sind nachgeführt, die übrigen Gestaltungsangaben nicht.
Seit 20.10.2026 nennen Bewerter-Block und Preiskarte die Methoden Realwert, Ertragswert und
Residualwert, und vor dem Abschluss steht die Sektion «Fragen und Antworten» (#faq, FAQPage im JSON-LD).
Overview
Marketing-Website für Valanto, eine Schweizer SaaS-Plattform für Immobilienprofis
(Liegenschaftsverwaltung, Bewertungen mit Dossier, Neubauprojekte, Landingpages,
Verkäufer-Portal). Dieses Paket enthält die designte Startseite als One-Pager mit
Ankern, fertige DE-Copy sowie FR/EN-Übersetzungen, und die komplette i18n-Struktur.
Betreibergesellschaft: Felsberg Consulting GmbH. Verrechnung läuft über die GmbH –
im Impressum/Footer korrekt abbilden.
About the Design Files
Die Dateien in diesem Bundle sind Design-Referenzen, erstellt in HTML – ein
Prototyp, der Look und Verhalten zeigt, kein produktiver Code zum 1:1-Kopieren.
Aufgabe ist, dieses Design in der Zielumgebung neu aufzubauen. Stack steht fest:
Laravel + Inertia + React (siehe Abschnitt „Umsetzung: Laravel + Inertia + React").
Sections als eigene React-Komponenten, i18n mit react-i18next (die JSON-Locales in
locales/ passen 1:1). Styling-Werte unten sind verbindlich; Tailwind-Mapping im
Laravel-Abschnitt.
Der Design-Prototyp ist eine Design-Component (.dc.html) und läuft nur im
Design-Tool. Nicht übernehmen – nur als visuelle Referenz lesen.
Fidelity
High-fidelity. Finale Farben, Typografie, Spacing und Interaktionen. Pixelgenau
mit den Libraries/Patterns des Zielprojekts nachbauen. Ausnahme: die Produkt-UI im
Hero-Mockup und die Dashboard-Tabelle sind Platzhalter-Illustrationen – sobald
echte Screenshots vorliegen, ersetzen.
Art Direction (wichtig)
- Mobile-first bauen (Layout „Valanto Mobile", 390px, siehe Abschnitt
„Responsive / Mobile-first").
- Explizit NICHT nach „Vibe-Coding-Default" aussehen: kein lila Gradient, keine
zentrierten Emoji-Card-Muster.
- Alle Ecken sind eckig –
border-radius: 0 durchgängig. Keine Pills, keine
abgerundeten Karten. Buttons sind Rechtecke, oft als zusammenhängende Gruppe
(geteilte Kante, kein Gap).
- (veraltet, Stand Juli 2026) Editorial/Swiss-Grid-Ästhetik: Hairline-Raster (1px Linien in Anthrazit
#23262D) statt Schatten und Karten-Lift. Feature-, Preis- und Zielgruppen-Grids
sind durch durchgehende 1px-Linien getrennt, nicht durch Gaps.
- Signature-Motiv: das Bewertungs-Dossier als aufgefächertes Dokument im Hero
(leicht rotierte Papierlage dahinter, harter Offset-Schatten
14px 14px 0).
- Warmer Papier-Hintergrund
#FAF7F2; Anthrazit-Bänder für Trust-Bar / CTA / Footer.
Typography (veraltet, Stand Juli 2026 – heute nur Archivo, keine Eyebrows)
- Display / Headlines / Preise / Rollen-Titel:
Source Serif 4 (Google Fonts),
weight 600 (Headlines) / 700 (Preise, Labels), letter-spacing: -0.01em auf grossen
Headlines.
- UI / Body / Nav / Buttons:
Archivo (Google Fonts), weights 400/500/600/700.
- Eyebrows: Archivo 12px, weight 700,
letter-spacing: 0.18em, Farbe Petrol.
- Body: 15–17px,
line-height: 1.7, Farbe #55585F. text-wrap: pretty auf Fliesstext.
- (Referenz aus Briefing war M PLUS Rounded 1c – für Valanto bewusst durch die
eckigere Serif/Grotesk-Kombi ersetzt, passend zur „eckig"-Vorgabe.)
Design Tokens
Farben:
--paper #FAF7F2 – Haupt-Hintergrund--paper-2 #F1ECE2 – sekundärer Block-Hintergrund (SIV-Sektion, Dossier-Rücklage)--ink #23262D – Anthrazit: Text, Linien, dunkle Bänder--ink-2 #1A1C21 – Footer-Hintergrund (noch dunkler)--accent #23808F – Petrol (Primäraktion, Akzente). Abgewandelt vom
Felsberg-Cyan #45B7C3 – eigenständiger, tiefer.--accent-hover #2E9DB0 – Petrol Hover auf dunklem Grund--accent-soft #8FBFC8 – gedämpfter Petrol (Balken, sekundär)--text #55585F – Fliesstext--muted #6E6A60 – gedämpfter Text, Hinweise, „per Monat" (auf Papier). AA-korrigiert von #A6A296 (2.3:1) → #6E6A60 (~4.7:1 auf #FAF7F2).--muted-warm #B4B0A5 / #8E8B82 – Footer-Text (auf dunklem Grund). Footer-Labels/Copyright AA-korrigiert von #6E6B64 (~3.1:1) → #8E8B82 (~4.8:1 auf #1A1C21).--line #23262D – Rasterlinien (voll) · #DED8CC (Hairline auf Papier, dezent)--line-dark #4A4E57 – Linien auf dunklem Grund- Weiss #FFFFFF – Dossier-Karte, „Beliebt"-Preiskarte, SIV-Punktebox
Spacing (Section-Padding): horizontal 52px, vertikal je Sektion 56–84px.
Grid-Gaps: Content-Splits 40–56px; Karten-/Feature-Grids 0 (durch Linien getrennt).
Radius: 0 überall. Shadows: nur Offset-Schatten am Dossier (14px 14px 0 rgba(35,38,45,.08)), sonst keine.
Icon-/Marker-Grössen: Feature-Zähler „01–06" (Serif 15px, Petrol) + 22px leeres
1px-Quadrat oben rechts je Feature-Zelle. Preis-Häkchen: 16px Petrol-Vollquadrat, ✓ weiss.
Screens / Views
Eine Seite (/), scrollbar, mit sticky Header. Sektionen von oben nach unten:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
