# Gasser Construction Website Case Notes

Session context: rebuilding `https://gassergmbh.ch` for Gasser Bauunternehmen GmbH in a GitHub/Astro repository.

## Client / Business Context

- Business: regional construction company in Windisch AG.
- Primary services: **Kundenarbeiten** and **Umbauten**.
- Secondary services: occasional Neubauten, Sanierungen, Baumeisterarbeiten.
- Primary audiences:
  - private customers for Kundenarbeiten
  - architects for Umbauten and occasional Neubauten
- Most valuable leads: private inquiries.
- Region: Windisch, Hausen, Brugg and nearby area.
- Primary conversion: email contact.
- Secondary conversion: phone and contact form.
- Trust signals: team photos, SBV association, real references, local history.
- Maintenance: Hermes/JARVIS maintains via Git, so Markdown/MDX/Content Collections are appropriate.

## Current-Site Capture Pattern Used

Stored current site under a project/repo audit folder:

- `raw_html/`
- `content_markdown/`
- `assets/`
- `assets_all/`
- `downloads/`
- `data/pages.json`
- `data/assets.json`
- `data/downloads.json`
- `content_inventory.md`
- `design_audit_initial.md`
- `redesign_notes.md`
- `screenshots/`

Important: the legacy site used a CMS/builder where many gallery/media URLs appeared in raw HTML/widget data, not as simple visible `<img>` tags. A second regex scan of raw HTML discovered more reference/gallery assets.

## Brand Direction

Working CI concept:

> Sichtbeton trifft Bordeaux.

Design values:

- quality, not cheapness
- personal and trustworthy
- reliable: „wir kümmern uns darum“
- regional and grounded
- professional, calm, not flashy

Initial palette:

- Gasser Bordeaux: `#7A1F2B`
- Bordeaux Dark: `#4A121A`
- Sight concrete: `#B8B4AA`
- Light concrete: `#E7E3DA`
- Warm Off-White: `#F7F4EE`
- Anthracite: `#1F2326`
- Steel Gray: `#596066`

Claim direction:

- „Zuverlässig bauen. Persönlich betreut.“
- Hero headline: „Umbauten und Kundenarbeiten in Windisch, Brugg und Umgebung“

## Recommended Technical Direction

- Astro + TypeScript
- static output first
- Content Collections for references, news, team
- `DESIGN.md` for design tokens and rationale
- GitHub as source of truth
- no heavy CMS unless visual editing becomes a hard requirement

## Local Preview Pattern

When the user wants to watch progress from PC/iPhone, run the Astro dev server on all interfaces, not only loopback:

```bash
npm run dev -- --host 0.0.0.0
```

Verify with:

```bash
ss -ltnp | grep ':4321'
curl -I http://127.0.0.1:4321/
hostname -I
```

Tell the user the LAN/Tailscale-accessible URL, e.g. `http://<host-ip>:4321/`. If iPhone cannot reach it, suspect network/VPN/firewall routing and consider a tunnel. Disable Astro dev toolbar for clean remote previews:

```js
export default defineConfig({
  devToolbar: { enabled: false },
});
```

## Three.js Logo Pattern

User asked whether an animated Gasser logo with Three.js is feasible. Answer: yes, as a subtle premium detail.

Initial implementation pattern:

- Put original logo in `public/images/gasser-logo.png`.
- Component renders both:
  - a `<canvas data-animated-logo>` for Three.js
  - a normal `<img>` fallback
- Three.js dynamically imports `three` inside the init function.
- Texture-load the logo onto a plane.
- Add slight pointer-driven rotation and a subtle Bordeaux line pulse.
- Reveal canvas only after texture successfully loads.
- Respect `prefers-reduced-motion`; keep fallback image visible.
- Dispose renderer, geometries and materials on route swaps if using client transitions.

Pitfalls found:

- Install `@types/three` for TypeScript projects using `astro check`.
- Vite may warn about large chunks after adding Three.js. This is not necessarily a build failure, but future work should lazy-load and scope animation carefully.
- Existing full logo with dark wordmark has weak contrast on dark headers. Consider enlarging it, creating a light logo variant, or separating icon + text for header use.

## Construction / Blueprint Motion Pattern

A subtle Three.js hero layer worked well for a construction brand when treated as background texture, not as the main event.

Implementation pattern:

- `ConstructionScene.astro` renders an absolutely positioned `<canvas data-construction-scene>` inside the hero.
- Client script dynamically imports `three`.
- Build a group of `Line` geometries for blueprint/grid lines plus a few Bordeaux accent diagonals.
- Add small instanced dots for technical depth.
- Animate only tiny rotation/position/opacity changes.
- Set `pointer-events: none`, moderate opacity, and hide on small screens or `prefers-reduced-motion`.
- Dispose materials/geometries/renderer on `astro:before-swap`.

Keep the visual behind real content. The QA target is: premium technical atmosphere, no interference with headline/CTA/image.

## Astro Client Script Pitfall

Do **not** import browser-only scripts that touch `document`/`window` from the frontmatter of a layout. During static prerender this causes `document is not defined`.

Safer pattern for page-transition or browser-only scripts in Astro layouts:

```astro
<body>
  <Header />
  <slot />
  <Footer />
  <script>
    import '../scripts/page-transition.ts';
  </script>
</body>
```

Also guard client scripts with `prefers-reduced-motion` where appropriate.

## Page Transition Pattern

A light internal-link page wipe can reinforce the brand without adding heavy routing complexity:

- append a fixed `.page-transition` overlay client-side
- on click of same-origin internal links, trigger CSS keyframe animation
- use Bordeaux/anthracite/concrete motif
- skip external links, download links, same path, and reduced-motion users

## Competitor Research Takeaways

Sampled Swiss construction/real-estate companies: ERNE, Implenia, Marti, ANLIKER, Birchmeier, Halter.

Recurring patterns:

- broad service architecture: Hochbau, Tiefbau, Umbau/Sanierung, Spezialitäten, Gesamtleistungen
- prominent projects/references with stories and filters
- News/Stories for project updates, team, apprenticeship, sustainability
- sustainability / material cycle / regional materials messaging
- careers and apprenticeships
- corporate stats and scale signals

For a smaller local construction business, do not copy the corporate breadth. Differentiate with:

- personal contact and direct responsibility
- private customer jobs treated professionally, not as an afterthought
- “Umbauen im bewohnten Bestand” as a trust theme
- regional proximity: Windisch, Hausen, Brugg and nearby area
- quality/reliability/clean jobsite instead of cheap-price positioning
- project stories showing problem → solution → result

Recommended additional content blocks:

- “So läuft eine Anfrage ab”
- “Kundenarbeiten, die wir häufig übernehmen”
- “Umbauen im bewohnten Bestand”
- reusable trust module: SBV, team photos, references, local region, direct email
- reference detail stories with challenge, work performed, outcome, gallery

## Design QA Findings

The first Astro prototype improved after replacing an abstract placeholder hero panel with a real reference/project image. Real images made the site feel more credible and grounded.

Key QA notes:

- Header logo was visible but still somewhat small and low-contrast.
- Large modern headline worked, but risked feeling slightly over-designed for a local construction company.
- Real project image in the hero made the CI feel more trustworthy.
- Add more body sections before footer; otherwise the page feels too short.
- Astro dev toolbar can appear as a floating control overlay during browser QA; disable it before asking the user to review remotely.

## Files/Docs Worth Reproducing in Similar Projects

- `docs/current-site-audit/`
- `docs/brand-and-content-brief.md`
- `DESIGN.md`
- `docs/plans/phase-1-implementation-plan.md`
- `docs/competitor-research-and-differentiation.md`
- Initial routes: `/leistungen/`, `/referenzen/`, `/ueber-uns/`, `/aktuelles/`, `/kontakt/`.
- Components/scripts: animated logo, construction scene, CTA card, reference card, page transition.