# Gasser conversion, SEO, reference structure, and transition hardening

Session-derived implementation pattern for local construction/trades sites after the visual hero is working and the client shifts focus to conversion, references, SEO, and performance.

## Trigger

Use this pattern when a local-business site already has the main visual direction but the client asks to strengthen:

- homepage hero copy/CTA
- contact page conversion
- references/case-study depth
- local SEO metadata/structured data
- Astro ClientRouter page transitions
- font/performance hygiene

## Homepage hero copy/CTA

- Make the headline concrete and local. Prefer: `Umbauten und Kundenarbeiten in Windisch, Brugg und Umgebung.` over generic claims such as `... mit Verantwortung`.
- Keep the lead short and benefit-led: personally handled, cleanly executed, regional, and the main service set.
- Show both contact paths above the fold:
  - primary email/project request CTA
  - secondary phone CTA as a visible `tel:` button
  - tertiary proof link such as references as a text link, not another equal-weight button
- Preserve visual hierarchy: CTA order should tell the user what to do first.

## Contact page conversion pattern

A strong contact page should actively guide the lead, not only list address data.

Include:

- two explicit contact option cards: `Direkt anrufen` and `Per E-Mail anfragen`
- a guided inquiry/project-questionnaire entry point if the site has one
- an inquiry checklist:
  - project type
  - property/project location
  - photos, plans, or sketches
  - desired timeframe / constraints
  - phone number for follow-up
- a service area card with nearby towns/region tags
- the physical address, phone, and email repeated in clear context
- official social-media links in both contact page and footer, ideally centralised in a single data file and added to LocalBusiness/Organization `sameAs` JSON-LD
- a map/route section with a direct Google Maps route link plus an embedded map when acceptable
- a graceful visual fallback for map embeds, because Google Maps iframes can render blank in previews or privacy-restricted browsers even when the link works
- a reviews section that links to the official Google profile/reviews rather than copying static stars or quotes unless an approved API/widget is in place

## Reference detail structure

If `gallery` exists in the content schema, render it. Do not let the field sit unused.

A reference detail page should support:

- hero visual with intentional branded fallback if real image is not approved
- project facts (`Ort`, `Jahr`, `Projektart`, `Kategorie`, `Architekt/Planung`, `Leistungen`)
- structured case story:
  - `Ausgangslage`
  - `Herausforderung`
  - `Lösung`
  - `Ergebnis`
- gallery / before-after area
- a transparent fallback note when real project photos are pending approval

Schema fields that work well as optional content-enrichment hooks:

- `projectType`
- `situation`
- `challenge`
- `solution`
- `result`

## Astro page-transition hardening

When using Astro ClientRouter and a custom transition script:

- `ensureStyle` / `ensureOverlay` guards are not enough.
- Add a global initialization guard before registering listeners, e.g. `window.__gasserTransitionInitialized`.
- Keep the transition short and subtle; for a construction site, around `600–650ms` reads cleaner than a showy `760ms+` wipe.
- Do not animate `mailto:` / `tel:` as navigable page transitions.

## Local SEO / structured data

For Swiss local trades sites, add in the base layout:

- canonical URL
- Open Graph metadata
- Twitter card fallback
- `LocalBusiness` plus `GeneralContractor` JSON-LD
- address, phone, email, areaServed, and key services/knowsAbout

Then override homepage title/description with local service keywords: Windisch, Brugg, Umgebung, Umbauten, Kundenarbeiten, Baumeisterarbeiten.

## Performance notes

- Do not load Google Fonts via CSS `@import`; use `preconnect` and `<link rel="stylesheet">` in the document head.
- Avoid `background-attachment: fixed` on mobile.
- Three.js can still be dynamically imported inside the hero script, but queue initialization with `IntersectionObserver` so the heavy import happens only when the canvas is near/inside view.
- Keep `prefers-reduced-motion` fallbacks for sketch/logo/page-transition motion.

## QA checklist

- Build passes.
- Homepage, contact page, and at least one reference detail page return `200`.
- Browser/visual QA verifies:
  - hero hierarchy and phone CTA
  - contact conversion cards + checklist + service area
  - reference facts/story/gallery fallback
- Inspect generated head for canonical, OG tags, JSON-LD, and font links.
- Verify transition init guard is present in browser state or code.
- Verify official social links resolve to the intended profiles before publishing them.
- If a Google Maps iframe appears blank in browser QA, keep the direct Maps buttons and add a branded fallback panel/pin over the map area so the section still reads as an intentional location block.
- Do not display static Google review stars/counts unless sourced from an approved current API/widget; link out to Google reviews instead.