# Blueprint to Reality + Construction Timeline Pattern

Session-derived pattern for construction/trades websites where the client wants professional motion rather than decorative 3D.

## When to use

Use for construction, architecture-adjacent, renovation, engineering, or trades companies that need to communicate competence, planning discipline, and trust.

## Visual strategy

Combine:

1. **Blueprint to Reality** — plan grid/lines/axes become volume/brand geometry, then connect to a real project image.
2. **Construction Timeline** — the user sees the process from first inquiry to handover.

This says: “We turn plans into clean execution,” not “we can do WebGL.”

## Hero composition

- Full hero background: dark anthracite/concrete tone.
- Motion layer: centered Three.js/canvas blueprint grid, plan outlines, subtle dots, brand emblem as dimensional object.
- Copy layer: strong claim on the left; must be readable with animation disabled.
- Reality layer: smaller real project photo card on right/bottom. Do not let it cover the centered motion concept.
- CTA: primary email/project inquiry; secondary references.

Good claim examples:

- “Vom Plan zur sauberen Ausführung.”
- “Umbauten und Kundenarbeiten. Persönlich geplant, sauber gebaut.”
- “Aus der Region. Für Bauvorhaben, bei denen Vertrauen zählt.”

## Header treatment

Avoid animated/hover-growing logos. For serious local firms, the header should be calm and legible:

- static emblem/icon + live text or a proper contrast logo variant
- logo already large enough at rest
- subtle underline/accent hover
- no layout shift on hover

If the logo artwork has black text, do not place it raw on a dark header. Use emblem + white text, or a light logo variant.

## Timeline section

Build a visible timeline, not a hidden animation box:

- steps: Anfrage → Besichtigung → Planung & Offerte → Ausführung → Übergabe
- plan line/path as decorative SVG/canvas
- cards partially visible before JS triggers; JS should enhance, not reveal from blank
- mobile: stack cards vertically, disable complex line effects if needed

## Stock/Pixabay use

Use stock assets only for:

- concrete/material textures
- abstract dust/light/blueprint atmosphere
- background overlays

Never use stock photos as fake references/projects unless clearly marked as placeholders.

## QA pitfalls

- Screenshot the hero: if the concept is not visible without motion, simplify.
- Check that the photo is not hiding the 3D/blueprint layer.
- Check header logo contrast on dark background.
- Check timeline before and after scrolling; it should never look empty.
- Run build and browser console checks after every motion/script change.