---
name: local-business-website-redesign
description: Redesign and rebuild maintainable local business / trades websites with content inventory, brand system, SEO, Git-managed content, and optional tasteful motion.
version: 1.0.0
author: Hermes Agent
license: MIT
metadata:
  hermes:
    tags: [website-redesign, local-business, astro, content-strategy, seo, design-system, three-js]
    related_skills: [web-scraping, design-md, popular-web-designs, writing-plans, github-repo-management]
---

# Local Business Website Redesign

Use this skill when rebuilding or extending a website for a local business, trades company, construction firm, architect, medical practice, restaurant, consultant, or similar service provider where trust, local SEO, references/cases, and maintainable content matter.

The goal is not just a prettier website. The goal is a durable business asset: credible, fast, locally visible, easy to update, and structured so new references/news/team content can be added without reworking the site.

## Core Principles

1. **Archive before redesigning** — preserve current pages, assets, PDFs, screenshots, sitemap, and extracted Markdown.
2. **Strategy before components** — clarify services, target audiences, valuable leads, region, tone, trust signals, and content maintenance model.
3. **Content model before page polish** — references, news, team, and services should be structured data/content collections, not hardcoded blobs.
4. **Real proof beats generic design** — prioritize real photos, real projects, team, associations, and local context over stock imagery.
5. **Performance and accessibility are part of quality** — animation is progressive enhancement, never a blocker.
6. **Avoid unnecessary CMS weight** — if Hermes/JARVIS or a developer maintains content via Git, static/hybrid content collections are often better than WordPress.

## Recommended Workflow

### 1. Current Site Capture

Create a project folder and store:

- `raw_html/` — original page HTML snapshots
- `content_markdown/` — extracted content per page
- `assets/` or `assets_all/` — visible images plus hidden CMS/gallery assets
- `downloads/` — linked PDFs/documents
- `data/pages.json` — URLs, titles, meta descriptions, headings, links, images
- `content_inventory.md` — human-readable inventory
- `design_audit_initial.md` — visual/UX/marketing audit with screenshots
- `screenshots/` — at least homepage and key conversion/reference pages

For CMS/builder sites, also scan raw HTML for media URLs hidden in widgets/galleries, not only `<img>` tags. Many legacy builders load gallery images from script/config fragments.

### 2. Strategy Brief

Before implementation, document:

- primary and secondary services
- primary target audiences
- most valuable inquiries / lead types
- geographic focus for local SEO
- desired conversion path: email, phone, form, booking, etc.
- trust signals: team, associations, certifications, reviews, references
- tone: premium vs. value, personal vs. corporate, technical vs. warm
- maintenance model: Git/Markdown, headless CMS, or classic CMS
- content gaps: missing team photos, new references, legal text, better images

Save this as `docs/brand-and-content-brief.md` or equivalent.

### 3. Design System

For non-trivial redesigns, create a formal `DESIGN.md` using the `design-md` skill.

Include:

- brand colors and roles
- neutral/material palette
- typography
- spacing
- shapes/radii
- button/card/contact/reference components
- do/don't guidance

For trades/construction/architecture sites, a strong pattern is:

- existing logo color as controlled accent
- material-inspired neutrals (concrete, stone, wood, steel)
- large real project photos
- sharp or lightly rounded geometry
- restrained motion
- trust-heavy copy, not cheap-price positioning

Lint `DESIGN.md` with:

```bash
npx -y @google/design.md lint DESIGN.md
```

Fix broken refs and WCAG warnings before using it as the design source of truth.

### 4. Technical Architecture

For Git-maintained local business websites, default recommendation:

- Astro
- TypeScript
- Content Collections for references/news/team/services
- CSS variables from `DESIGN.md`
- image optimization
- static output unless a dynamic feature requires otherwise

Use WordPress only when a non-technical client genuinely needs a visual admin interface and accepts maintenance/security overhead.

### 5. Content Collections

Model recurring content explicitly.

Reference/project fields:

- `title`
- `slug`
- `category`
- `audience`
- `location`
- `year`
- `services`
- `architect` / partner if relevant
- `summary`
- `heroImage`
- `gallery`
- `featured`
- `anonymizedLocation` / privacy flag if needed

News/current info fields:

- `title`
- `slug`
- `date`
- `category`
- `summary`
- `image`
- `published`

Team fields:

- `name`
- `role`
- `photo`
- `shortBio`
- optional `email` / `phone`

### 6. Page Structure

Typical local business/trades structure:

- Home
- Services / Leistungen
- Service detail pages for priority services
- References / projects
- Reference detail pages
- About / team
- News / current info
- Contact
- Legal pages as needed

When the business benefits from better lead qualification, add a dedicated inquiry route such as `/projekt-anfrage/` with a guided questionnaire. For static/conventional hosting, ship phase 1 as a client-side wizard that generates a structured email summary; defer real uploads/backend delivery until the exact hosting package is confirmed. See `references/local-business-digital-inquiry-wizard.md`.

Homepage should quickly answer:

- what the company does
- where it works
- who it serves
- why to trust it
- how to inquire

### 7. Motion / Three.js Guidance

Use motion only when it reinforces the brand.

Good uses:

- subtle animated logo with static fallback
- page-transition line/raster motif
- light parallax on reference images
- material/blueprint/construction-grid accents
- **Blueprint to Reality** hero: plan grid/lines become dimensional brand geometry, while real project imagery is a smaller “reality layer” rather than a blocking full-card photo
- **Construction Timeline** section: a scroll-revealed sequence from inquiry → site visit → planning/quote → execution → handover, using plan lines and process cards to explain how the company works

Rules:

- lazy-load Three.js with dynamic import
- respect `prefers-reduced-motion`
- provide a static image fallback
- avoid loading heavy WebGL on pages where it adds no value
- use adaptive performance modes for client-facing hero motion: `full`, `reduced`, and `static`; detect reduced motion, data saver, low memory/core counts, and mobile viewport; in `static`, skip importing Three.js entirely and show a branded CSS fallback
- verify build chunk size and user-perceived performance

For an animated logo, start with a conservative implementation:

- render the existing logo as a texture on a plane
- add slight hover-driven rotation/depth
- keep the original `<img>` as fallback
- only reveal canvas when texture loads successfully
- dispose renderer/materials on route swaps if the framework uses client transitions

For a construction/trades hero background, use a restrained blueprint/construction scene:

- absolutely positioned canvas behind the hero content
- prefer material context first: sight-concrete/stone/wood/steel texture + brand mark + plan/construction lines often reads more credible than abstract dots or floating dev-demo geometry
- center the motion concept independently of right-hand photos/cards; the project photo should support the “reality” idea, not cover the motion layer
- when the user says the hero feels unclear or the Leitbild card feels “aufgesetzt”, remove the separate explanatory box and integrate the idea directly into the hero composition: headline, material texture, freestanding emblem, and one small caption/label all saying the same thing
- avoid percentage/stat panels in early hero or analysis sections unless the user explicitly wants numeric proof; unverified or overly analytical numbers can make a small local-trades site feel like a dashboard rather than a trust-building company site
- Three.js lines/diagonals/brand emblem, low opacity, brand accent color; avoid prominent dot fields when the user asks for material realism
- `pointer-events: none`
- hide on mobile and reduced-motion
- no interactive controls, stats panels, or obvious dev overlays

For header branding, avoid hover-grow logos. It looks jumpy and cheap on serious local-business sites. Prefer a static, legible header treatment: emblem/icon + text, larger at rest, with a subtle underline/light-edge hover state. If the original full logo has dark text on a transparent/white artwork, do not place it directly on a dark header unless you create a light/contrasting variant.

For richer local-business navigation, prefer selective flyouts rather than a full mega-menu for every top-level item. Good candidates are service taxonomy (`Leistungen`), reference categories, and contact/conversion paths. Desktop flyouts should use restrained fade/translate motion with Bordeaux/material accents; mobile should use accordion expansion because hover does not exist. Critical pitfall: do not make the visual space below the nav with `top: calc(100% + gap)`; that creates a mouse dead zone and the menu closes before users can select an item. Use `top: 100%` plus `padding-top` on the flyout so the visual gap remains part of the hover/pointer area. See `references/gasser-navigation-flyout-pattern.md`.

For desktop navigation upgrades, use animated flyouts only for categories where they improve orientation or conversion (e.g. services, references, contact). Keep the animation restrained: opacity, a small vertical reveal, and a material/plan-grid panel; avoid bounce/elastic motion. On mobile/tablet, use tap-controlled accordion submenus instead of hover. Pitfall: do not use broad `.nav-menu:focus-within .nav-flyout` visibility together with click-controlled `[data-open]` state, because focused toggles can leave multiple translucent “ghost” flyouts visible. Prefer `:hover` + `[data-open]` on desktop and `[data-open]` on mobile. See `references/gasser-animated-header-flyouts.md`.

- Astro pitfall: browser-only scripts that touch `document`/`window` must not be imported from layout frontmatter, because static prerender will throw `document is not defined`. Put them in a `<script>` tag inside the rendered layout body or guard all browser access.
- Astro scoped-style pitfall: conditional classes can appear in the DOM while the expected scoped CSS still fails to apply, especially after refactoring class expressions. Do not trust class presence alone; inspect computed styles or use browser visual QA. If a conditional class such as `visual--placeholder` is present but CSS rules do not apply, replace complex `class:list` expressions with an explicit template-literal class string and re-check.

Do not begin with complex SVG extrusion or physics unless the user explicitly wants a showpiece.

### 8. Live Preview While Building

When the client wants to review progress on another device, run the dev server on all interfaces and keep it alive as a background process:

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

Verify with `ss -ltnp`, `curl -I http://127.0.0.1:4321/`, and `hostname -I`, then give the LAN/Tailscale URL (`http://<ip>:4321/`). If phone/PC cannot reach it, diagnose network/VPN/firewall before changing the app. Disable framework dev toolbars/overlays before client review.

## Content Expansion With Pending Client Answers

When the client says they will answer a separate questions/content document later but asks to keep building, continue with clearly labeled assumptions and placeholders rather than blocking. Good durable additions:

- convert service taxonomy into a typed data file and generate detail pages from it
- create service-detail pages with: hero, suitable audiences, typical work, process, content-placeholder notes, related references, and project-inquiry CTA
- update homepage service cards to link to the new detail routes rather than anchors
- add an FAQ page with provisional answers for scope, region, inquiry preparation, uploads, and what the digital questionnaire does/does not promise
- link new placeholder sections from footer/contact/CTA so the user can review navigation flow
- avoid invented proof, prices, guarantees, timelines, or testimonials; mark missing photos/details as pending approval

Always build and browser-check at least one generated detail page plus the FAQ/conversion page before pushing.

## Mobile Homepage/Header Pattern

When a mobile homepage header has a brand block plus a primary inquiry CTA, keep them in the same first row. At tablet/mobile breakpoints, switch the header container to a two-column grid (`minmax(0, 1fr) auto`), place the nav in a second row spanning both columns, and make nav links horizontally scrollable with `white-space: nowrap` rather than allowing staggered line breaks. At narrow widths, shrink the mark/title/subtitle and CTA padding. Verify around 390px that brand and CTA top positions are aligned and neither overflows.

If the user asks for a quick logo reveal on first homepage view, implement a non-blocking CSS-only intro overlay: homepage only, animate only `opacity` and `transform: scale(...)`, set `pointer-events: none`, and disable it for `prefers-reduced-motion`. Treat it as a brand moment over an already-loaded page, not as a loader. If the client says the pulse is not visible, make the brand mark visibly intentional rather than merely longer: preload the mark image, raise the intro above header/page transitions, start the shell at visible opacity, use a light circular/radial plate behind the bordeaux mark, hide competing text, and use roughly a 1000–1150ms zoom/settle/fade sequence. If the client wants a stronger “dive into the logo” opening, avoid double-pulse/bounce keyframes entirely; use one smooth fade-in followed by one continuous center-origin zoom from the supplied 3D logo. Prefer optimized WebP + PNG fallback. Decide the replay policy explicitly: first-view-only via `sessionStorage`, or target-aware replay every time an internal navigation lands on `/`. For Astro ClientRouter sites, hide the intro by default and only reveal it with a pre-paint or route-target `has-pending-gasser-intro` class; otherwise route swaps back to `/` can briefly flash intro markup before the hiding script runs. If users want the intro on every homepage return, inspect the clicked link target and replay only for pathname `/`; suppress it for all other routes and clean the pending class after the animation. If users see duplicate logo blinking on navigation, remove/hide any separate page-transition brand mark so it is not confused with the homepage intro. Do not transform the hero/background layers as part of the logo intro; otherwise the background can appear at a changed zoom level. Do not add Three.js for a one-second 2D dive unless the design genuinely needs real 3D camera/perspective movement; CSS transform is usually smoother and cheaper.

When upgrading this pattern to GSAP for a more architectural logo motion, keep the first-visit homepage intro and the internal route transition separate. Direct first homepage load can use the larger 1.8–2.2s timeline; internal navigation should use a smaller but still visible transition around 1.1–1.3s. In Astro ClientRouter, append the route-transition overlay to `document.documentElement` rather than `body`, because body swaps can remove overlays and make the animation appear missing. Trigger the route transition in the captured click handler once an internal navigable link is confirmed; do not rely only on `astro:before-preparation`. Always set finished overlays to `display: none`, not only `opacity: 0`. See `references/gasser-mobile-hero-performance-patterns.md`, `references/gasser-visible-intro-logo-and-title-scale.md`, `references/gasser-intro-logo-dive-animation.md`, `references/gasser-3d-logo-intro-animation.md`, `references/gasser-homepage-intro-route-cache-pattern.md`, `references/gasser-homepage-intro-animation-routing.md`, and `references/gasser-gsap-route-transition-and-aligned-hero-assets.md`. 

For GSAP route transitions in Astro ClientRouter projects, append the transition overlay to `document.documentElement`, not `document.body`; body swaps can remove an overlay mid-navigation. Start the short route transition in the captured internal-link click handler, then suppress the large homepage intro through `astro:before-swap`/`astro:after-swap`. When old hero variants are rejected, remove their image tags, CSS keyframes, metadata defaults, and files under `public/`; then search both `src/` and `dist/` so stale OG/JSON-LD or built HTML references do not continue loading old assets. See `references/gasser-gsap-route-transition-and-hero-asset-cleanup.md` for the concrete Gasser pattern.

See `references/gasser-mobile-hero-performance-patterns.md`, `references/gasser-visible-intro-logo-and-title-scale.md`, `references/gasser-intro-logo-dive-animation.md`, `references/gasser-3d-logo-intro-animation.md`, `references/gasser-homepage-intro-route-cache-pattern.md`, and `references/gasser-homepage-intro-animation-routing.md`.

## Digital Inquiry / Form Strategy

For local trades/construction sites, a guided inquiry wizard can be a stronger modern conversion pattern than a generic contact form or first-generation chatbot.

Recommended sequence:

1. **Static wizard first** — collect project type, location, object type, documents/photos/plans, timing, description, and contact data; generate a structured `mailto:` summary so the feature works on static hosting.
2. **Backend later** — once hosting is confirmed, add PHP/SMTP or provider-backed form delivery, spam protection, and optional file upload.
3. **Assistant last** — consider a rule-based FAQ/router or project-brief generator before a full AI chatbot. Avoid auto-pricing, schedule promises, or feasibility claims unless approved by the business.

Positioning: “better prepared first conversation” rather than “instant quote marketplace”. Keep phone and direct email visible for users who do not want a wizard.

For trades/construction conversion paths, treat phone and WhatsApp as first-class actions, not afterthoughts. Centralize contact data, make phone links real `tel:+41...` links, and use WhatsApp for photos/sketches/short first descriptions with a prepared `wa.me` message. Add a short expectation/privacy note: WhatsApp is practical for initial images and context, but binding statements follow only after personal contact or inspection. See `references/gasser-phone-whatsapp-contact-paths.md`.

## QA Checklist

Before presenting progress:

- build passes
- no TypeScript/Astro diagnostics
- key pages render
- navigation works
- primary CTA is visible above the fold
- email/phone links are correct
- logo is legible on intended background
- hero uses a credible real image or a clearly intentional placeholder
- mobile layout is acceptable
- reduced-motion fallback exists for animation
- design aligns with the brand brief
- local SEO basics are present: canonical, Open Graph, useful title/description, and `LocalBusiness`/`GeneralContractor` JSON-LD for trades sites
- conversion pages are checked visually: homepage CTA hierarchy, contact phone/email options, inquiry checklist, service area, and reference-detail facts/story/gallery fallback
- Astro ClientRouter page-transition scripts have a global initialization guard before registering document-level event listeners
- Homepage intro animations are hidden by default and only opt in via an early root class or route-target replay flag; verify internal navigation back to `/` follows the chosen policy (suppressed for first-view-only, visible for homepage-return replay). Avoid pulse/bounce if the user asks for an imposing logo dive, and verify the hero/background zoom level does not change when the logo intro plays.

## Pitfalls

- **Tiny or jumpy logo:** do not rely on hover-scaling to make a logo readable. If the logo is too small at rest, redesign the header treatment; hover should add a line/light accent, not resize the brand.
- **Hero photo or text card hiding/confusing the concept:** if using blueprint/3D motion, keep project imagery and explanatory cards out of the main hero until the motion metaphor is clear. A tilted/right-hand “reality layer” photo or floating label card can read as a separate object lying beside the design rather than as an intentional transformation. If the user calls out a rectangular block or pasted-on terms (e.g. service labels) in the hero, remove the block entirely and move the idea into the background composition: material texture + freestanding brand mark + abstract floor-plan/blueprint linework behind the headline. Prefer a subtle SVG/canvas blueprint ground plan with walls, axes, nodes, and low-opacity bordeaux accents over a literal photo/card. If the client later rejects the generated plan as random/wild lines and provides a real sketch/plan asset, stop refining synthetic linework and use the supplied drawing as the hero source: full-bleed background, strongest on the left, fading right into the logo/text zone.
- **Inconsistent service-card clickability:** on local-business homepages, service tiles must be either all clickable or all static. Mixed behavior makes users think the site is broken. If the homepage teaser links to a services page, make the whole card an `<a>` with a visible cue such as “Mehr dazu”, add matching `id` anchors on the services page, and verify each target URL responds.
- **Duplicate service taxonomy on the homepage:** avoid repeating the same labels in multiple adjacent sections (e.g. “Kundenarbeiten / Umbauten / Neubauten” in hero, service cards, and an info grid). Keep one service teaser for the taxonomy, then use the next block to explain working method/process (e.g. Besichtigen → Planen → Ausführen → Übergeben) or proof/trust. Repetition reads like filler rather than strategy.
- **Framed logo artefacts in dark hero/header:** if the provided emblem/logo file includes a white background, border, exported artboard, or bitmap frame, create a transparent mark asset and use that in the header and WebGL/canvas texture. The visible brand element should be only the bordeaux symbol unless a full contrast-safe logo variant is deliberately designed.
- **Unclear visual leitidee:** when a client says the visual idea is unclear, do not merely tweak opacity/positioning. Rewrite the composition so the concept is textually and visually explicit: headline claim, named Leitidee, process steps, and background motion all telling the same story. If a separate “Leitidee” box feels pasted on, dissolve it into the hero: material background, freestanding brand mark, plan/construction linework, and a small integrated caption are usually stronger than a standalone explanatory card. If the user provides 2D/3D logo assets for the animation, verify real alpha/transparency and create clean transparent derivatives before using them; an RGB PNG with a checkerboard/white artboard will still show as a frame in WebGL/CSS. Prefer orthogonal plan grids plus one intentional brand axis over decorative diagonal line fields, especially after the user calls diagonal lines unnecessary. If a full-width blueprint/floor-plan concept is promising but the client says execution is bad, simplify aggressively: keep the logo static, protect the text zone with a dark overlay, move denser plan detail away from copy, and reveal only a recognizable plan sequence (outer walls → inner walls → openings/dimensions → one accent build line). Avoid logo bobbing, sinusoidal floating, pointer/scroll drift, excessive grid density, and “motion demo” behaviour. If a small tilted/right-side blueprint still feels decorative, replace it with a full-width orthogonal SVG plan layer: thick outer walls, thinner inner walls, door arcs, measure lines, dashed axes, and one bordeaux build line driven by scroll variables. Keep Three.js for logo/depth only; use SVG for plan precision. If the client supplies a real pencil/sketch drawing after rejecting synthetic linework, let the sketch become the visual leitidee and reduce oversized homepage typography at the same time; an enormous `h1` can overpower the drawing and make the site feel like an agency portfolio. Use subtle CSS sketch drift / light-pass motion first, with `prefers-reduced-motion`, before adding complex WebGL. When the client supplies corrected layered artwork, do not use “similar” previous file names: use the exact requested base/overlay pair and verify same natural dimensions, DOM rect, object-fit/object-position, transform, transform-origin, and loaded resources before reporting success. Remove stale tracked public assets and OG/default-image references when the old image must no longer appear.
- **Dashboard-like percentages on trust pages:** unless sourced and intentionally used as proof, remove percentage panels from local business homepages. Service categories and trust themes should read as practical strengths, not analytics widgets.
- **Empty-looking motion sections:** scroll-triggered cards should still be partially visible before JS/IntersectionObserver fires; otherwise the section looks broken in screenshots and quick reviews.
- **Repeated reference images:** using the same photo on multiple cards reads as placeholder/fake. Assign distinct real images as soon as possible. If real photos are not approved yet, do not use empty beige boxes or repeated stock-style photos; replace the image area with a deliberately designed project tile using the brand mark, blueprint/grid language, category, location, year/service labels, and service tags. Add a short note that photos will be added when approved. Verify with visual QA that the result reads as intentional, not as missing images.
- **Tiny logo on dark header:** existing logo files often include dark text that loses contrast on dark headers. Either enlarge it, create a light header variant, or use icon + text treatment.
- **Over-designed or oversized hero typography:** local trade websites need credibility and clarity. Oversized service-taxonomy headlines such as “Umbauten, Kundenarbeiten und Baumeisterarbeiten” can feel like an agency portfolio and overpower supplied sketch/material imagery. If the user says the headline is too large, reduce the h1 clamp across desktop/tablet/mobile, increase line-height slightly, and keep the title width compact. See `references/gasser-visible-intro-logo-and-title-scale.md`.
- **Animation before content:** Three.js can be a premium detail, but build content architecture and conversion paths first.
- **One-size-fits-all WebGL hero:** do not serve the full Three.js hero animation to every device. For client-facing local-business sites, weak hardware should get an adaptive `reduced` or `static` mode: skip the Three.js import entirely for reduced-motion/data-saver/very low-memory devices, and lower pixel ratio, geometry, particles, antialiasing, and frame rate for mid-tier/mobile devices. A smooth static material/grid fallback is preferable to stuttering premium motion.
- **Hardcoded references:** project/reference data must be maintainable. Use collections so new references do not require editing layout code.
- **Generic stock photography:** it weakens trust. Use current real photos initially, then replace with better originals when the client provides them.
- **Invented service vocabulary:** do not create plausible-sounding trade terms when enriching local construction copy. If the client rejects a term, remove it from visible pages and internal notes that may seed future copy. Prefer the service taxonomy from existing website/social sources and concrete examples such as `Umgebungsarbeiten`, `Stützmauern`, `Fundamente`, `Fassaden`, and `Betonsanierungen` over invented labels.
- **Meta copy leaking into the site:** phrases like “the website should show” or “this module demonstrates” are implementation notes, not customer-facing business copy. Rewrite them into direct claims about how the company works.

## Social/External Source Mining

When the client points to Instagram/Facebook or Drive folders for a local business:

- Capture only publicly available metadata/content unless authenticated access is explicitly configured.
- Social platforms may block deep post scraping; still record useful metadata: profile name, follower/like counts, service descriptions, location, and service keywords.
- Business Facebook “About” text is often a concise service taxonomy; compare it against the site’s Leistung pages and add missing service categories.
- Treat stock/Pixabay images as material/texture/atmosphere only, not fake references. For construction firms, fake project imagery damages trust.
- If Drive files are wrappers/links (e.g. a `.docx` that is really a Dropbox HTML shortcut), extract the real document URL and archive the source locally, but keep raw source folders out of Git unless the user explicitly wants them published.

## Competitor / Best-Practice Research

For trades and construction sites, sample 4–6 relevant local/regional/Swiss competitors before finalizing information architecture. Extract recurring patterns, but do not blindly copy corporate breadth. Large competitors often emphasize broad service lines, project stories, sustainability, career/apprenticeship content, and scale metrics; a smaller local firm can differentiate with personal contact, private customer jobs, working cleanly in occupied homes, regional proximity, and proof-rich reference stories.

Useful output: `docs/competitor-research-and-differentiation.md` with:

- sites sampled
- patterns found
- what to copy/adapt
- what to avoid
- differentiators for this business
- recommended content blocks

## Deliverables to Commit Early

- `docs/current-site-audit/`
- `docs/brand-and-content-brief.md`
- `DESIGN.md`
- `docs/plans/phase-1-implementation-plan.md`
- initial Astro scaffold
- first homepage/hero prototype

## Linked Resources

- `references/gasser-animated-header-flyouts.md` — Gasser navigation upgrade pattern: desktop service/reference/contact flyouts, mobile accordion submenus, restrained plan-grid animation, and the `:focus-within` ghost-flyout pitfall.
- `references/gasser-phone-whatsapp-contact-paths.md` — Gasser contact-conversion pattern: central `company.ts` phone/WhatsApp data, real `tel:+41...` links, prepared `wa.me` project message, contact-page expectation/privacy note, inquiry wizard WhatsApp preference, and QA checks for CTA links.
- `references/gasser-navigation-flyout-pattern.md` — Gasser header navigation pattern: selective desktop flyouts for services/references/contact, mobile accordion fallback, accessible toggles, and the hover-gap fix using `top: 100%` plus `padding-top` instead of `top: calc(100% + gap)`.
- `references/gasser-construction-website-case.md` — Case notes from a construction-company website rebuild: Bordeaux + sight-concrete CI, Astro, Git content maintenance, and subtle Three.js logo pattern.
- `references/blueprint-to-reality-motion-pattern.md` — Motion/UX pattern for construction sites: Blueprint to Reality hero, Construction Timeline, header-logo pitfalls, and stock-image rules.
- `references/local-business-digital-inquiry-wizard.md` — Pattern for adding a static-first guided project inquiry wizard, hosting-safe form phases, and chatbot-vs-questionnaire guidance for local trades sites.
- `references/gasser-hero-logo-animation-freestanding.md` — Session-derived implementation notes for using supplied 2D/3D Gasser logo PNGs as transparent hero/WebGL textures, removing white artboards/frames, and replacing distracting diagonal/photo-heavy hero compositions with a clearer “Planlinie → Materialkörper → saubere Ausführung” motif.
- `references/gasser-hero-blueprint-motion-reset.md` — Pitfall and correction notes for full-width hero blueprint/floor-plan motion: keep the logo static, preserve text readability, use a recognizable orthogonal plan, and avoid motion-demo clutter.
- `references/gasser-pencil-sketch-hero-background.md` — Correction pattern for replacing rejected synthetic blueprint lines with a client-provided full-bleed pencil/sketch background: strong left-side drawing, rightward fade, quiet logo/text zone, and visual QA.
- `references/gasser-legacy-content-copy-enrichment.md` — Notes for enriching the Gasser rebuild from the existing homepage: crawl legacy subpages, rewrite factual content into more polished copy, preserve service taxonomy/history/references, and remove rejected invented terms such as “Gartenbeton”.
- `references/gasser-reference-placeholder-cards.md` — Pattern for making reference/project cards look intentional when distinct approved photos are missing: branded blueprint-style project tiles, service tags, coherent detail-page hero treatment, and computed-style/visual QA checks.
- `references/gasser-conversion-seo-reference-structure.md` — Session pattern for tightening local construction-site conversion after visual direction is stable: local hero copy, phone/email CTAs, contact checklist/service area, reference facts/story/gallery scaffolding, LocalBusiness/GeneralContractor SEO, font loading, mobile fixed-background avoidance, Three.js viewport-gated loading, and Astro page-transition init guards.
- `references/gasser-mobile-hero-performance-patterns.md` — Mobile header and homepage-intro pattern for Gasser-style local business sites: keep brand + inquiry CTA in one row on mobile, use horizontally scrollable nav, add a fast non-blocking CSS logo intro, and combine with adaptive hero-performance QA.
- `references/gasser-homepage-intro-animation-tuning.md` — Session notes for Gasser homepage logo intro tuning: avoid pulse/bounce, prevent Astro ClientRouter route-swap flashes, run only on direct first homepage load, and use a 1.5s background/aperture fade plus moderate logo dive that fades before bitmap blur.
- `references/gasser-homepage-intro-animation-routing.md` — Detailed Gasser pattern for preventing homepage intro replay/flash during Astro ClientRouter swaps: default-hidden intro, pre-paint opt-in class, route-swap suppression, no separate transition wordmark, and technology options beyond CSS.
- `references/gasser-gsap-architectural-logo-intro.md` — GSAP + CSS-3D pattern for a premium architectural homepage logo intro and separate shorter route transition: direct-home-only full timeline, CSS fallback, cleanup/display-none rules, and QA checks to prevent old zoom flashes or hero-background zoom shifts.
- `references/gasser-3d-logo-intro-performance.md` — Gasser-specific performance correction: remove decorative hero WebGL logo when heavy, use first-view-only CSS intro with `Gasserlogo3d` WebP/PNG fallback, sessionStorage skip, and QA checks for no Three.js homepage load.
- `references/adaptive-hero-animation-performance.md` — Adaptive WebGL/CSS fallback pattern for local-business hero animations on weaker hardware: full/reduced/static modes, data-saver/reduced-motion/device-memory heuristics, lazy/idle initialization, and QA checks.
- `references/adaptive-hero-animation-performance.md` — Adaptive WebGL/CSS fallback pattern for local-business hero animations on weaker hardware: full/reduced/static modes, data-saver/reduced-motion/device-memory heuristics, lazy/idle initialization, and QA checks.