# Gasser Website – Phase 1 Implementation Plan

> **For Hermes:** Use subagent-driven-development skill to implement this plan task-by-task.

**Goal:** Build the initial maintainable Astro foundation for the new Gasser Bauunternehmen website, focused on customers works, renovations, references, news and high-quality local trust.

**Architecture:** Astro static/hybrid marketing site with TypeScript, Content Collections for maintainable references/news/team entries, design tokens derived from `DESIGN.md`, and optional subtle motion/Three.js as progressive enhancement. Git remains the source of truth; JARVIS/Hermes maintains content through commits.

**Tech Stack:** Astro, TypeScript, Content Collections, CSS variables/design tokens, optional Tailwind later, Three.js only after core pages are performant.

---

## Phase 1 Scope

This phase creates the foundation, not the final polished launch. We first establish structure, content models, routing and a strong visual baseline.

Included:

- Astro project scaffold
- core layout and global styles
- DESIGN.md-derived CSS variables
- content collections for references, news and team
- initial pages: home, services, references, about, news, contact
- initial content migrated from current-site audit
- static fallback for all motion/Three.js areas

Deferred:

- final professional photos
- full Three.js implementation
- final copywriting polish
- production hosting setup
- analytics/Search Console

---

## Task 1: Scaffold Astro project

**Objective:** Create the base Astro project in the repository without overwriting existing docs.

**Files:**

- Create: `package.json`
- Create: `astro.config.mjs`
- Create: `tsconfig.json`
- Create: `src/`
- Create: `public/`

**Steps:**

1. Initialize Astro with TypeScript.
2. Ensure docs remain untouched.
3. Add scripts:
   - `dev`
   - `build`
   - `preview`
   - `check`
4. Run `npm install`.
5. Run `npm run build`.
6. Commit: `chore: scaffold astro site`.

---

## Task 2: Add design tokens and global styles

**Objective:** Translate `DESIGN.md` into usable CSS variables and base styles.

**Files:**

- Create: `src/styles/tokens.css`
- Create: `src/styles/global.css`
- Modify: root layout once created

**Steps:**

1. Add CSS variables for Bordeaux, Anthrazit, Sichtbeton, Off-White and spacing.
2. Add font imports for DM Sans and Inter.
3. Set global typography, body background and link styles.
4. Add focus-visible states with strong accessibility contrast.
5. Run build.
6. Commit: `style: add gasser design tokens`.

---

## Task 3: Define content collections

**Objective:** Make references, news and team easy to maintain via Git.

**Files:**

- Create: `src/content/config.ts`
- Create: `src/content/references/`
- Create: `src/content/news/`
- Create: `src/content/team/`

**Reference schema fields:**

- title
- slug
- category
- audience
- location
- year
- services
- architect
- summary
- heroImage
- gallery
- featured

**News schema fields:**

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

**Team schema fields:**

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

**Steps:**

1. Create schemas with Astro Content Collections.
2. Add at least one sample reference from the old audit.
3. Add placeholder team content clearly marked as placeholder until photos/info arrive.
4. Add sample news item or Betriebsferien placeholder if appropriate.
5. Run Astro check/build.
6. Commit: `feat: add content collections`.

---

## Task 4: Build base layout and navigation

**Objective:** Create reusable site shell.

**Files:**

- Create: `src/layouts/BaseLayout.astro`
- Create: `src/components/Header.astro`
- Create: `src/components/Footer.astro`
- Create: `src/components/CTA.astro`

**Navigation:**

- Startseite
- Leistungen
- Referenzen
- Über uns
- Aktuelles
- Kontakt

**Steps:**

1. Build responsive header.
2. Add primary CTA: „Projekt per E-Mail anfragen“.
3. Add footer with address/contact placeholders and SBV mention.
4. Add SEO meta props to layout.
5. Run build.
6. Commit: `feat: add base layout and navigation`.

---

## Task 5: Build homepage

**Objective:** Create first strong homepage draft based on the updated brief.

**Files:**

- Create/Modify: `src/pages/index.astro`
- Create: relevant components under `src/components/sections/`

**Homepage sections:**

1. Hero
   - headline: „Umbauten und Kundenarbeiten in Windisch, Brugg und Umgebung“
   - subline around quality, personal support, reliable execution
   - primary CTA email
   - secondary CTA references
2. Leistungsschwerpunkte
   - Kundenarbeiten
   - Umbauten
   - Neubauten
3. Warum Gasser
   - persönlich betreut
   - zuverlässig
   - regional
   - Qualität statt billig
4. Featured references
5. Team teaser
6. News teaser
7. Contact block

**Steps:**

1. Implement with existing placeholder images.
2. Keep Three.js out for now; reserve a static motion slot.
3. Run build.
4. Commit: `feat: build homepage draft`.

---

## Task 6: Build services pages

**Objective:** Create service overview and priority service detail pages.

**Files:**

- Create: `src/pages/leistungen/index.astro`
- Create: `src/pages/leistungen/kundenarbeiten.astro`
- Create: `src/pages/leistungen/umbauten.astro`
- Optional: `src/pages/leistungen/neubauten.astro`

**Priority:**

1. Kundenarbeiten
2. Umbauten
3. Neubauten

**Steps:**

1. Build overview cards.
2. Write first-pass copy focused on private customers and architects.
3. Add relevant CTAs to email/contact.
4. Add placeholder FAQ sections.
5. Run build.
6. Commit: `feat: add services pages`.

---

## Task 7: Build references system

**Objective:** Create maintainable reference overview and detail routes.

**Files:**

- Create: `src/pages/referenzen/index.astro`
- Create: `src/pages/referenzen/[slug].astro`
- Create: `src/components/ReferenceCard.astro`
- Create: `src/components/ReferenceGallery.astro`

**Steps:**

1. Load references from content collection.
2. Add category filter UI if feasible in static first version.
3. Build detail pages with hero image, facts, gallery and CTA.
4. Add reference PDF as secondary download if still desired.
5. Run build.
6. Commit: `feat: add references pages`.

---

## Task 8: Build about/team and news pages

**Objective:** Add trust-building content areas.

**Files:**

- Create: `src/pages/ueber-uns.astro`
- Create: `src/pages/aktuelles/index.astro`
- Create: `src/pages/aktuelles/[slug].astro`

**Steps:**

1. Add firm history/philosophy from existing content, rewritten later.
2. Add Team section with placeholders until photos arrive.
3. Add SBV trust marker.
4. Add news listing/detail pages.
5. Run build.
6. Commit: `feat: add about and news pages`.

---

## Task 9: Build contact page

**Objective:** Make email contact the primary conversion path.

**Files:**

- Create: `src/pages/kontakt.astro`

**Steps:**

1. Add mail CTA as primary action.
2. Add telephone as secondary action.
3. Add contact form placeholder or functional mailto form depending on hosting decision.
4. Add region/service context.
5. Add legal text placeholders for Datenschutz/Impressum requirements.
6. Run build.
7. Commit: `feat: add contact page`.

---

## Task 10: Add subtle motion architecture

**Objective:** Prepare page transitions/motion without harming performance.

**Files:**

- Create: `src/components/MotionLayer.astro`
- Create: `src/scripts/motion.ts`

**Steps:**

1. Add CSS-only transition first.
2. Respect `prefers-reduced-motion`.
3. Add a placeholder for later Three.js enhancement.
4. Do not ship heavy Three.js in first build unless explicitly approved.
5. Run build and test Lighthouse/performance later.
6. Commit: `feat: add subtle motion foundation`.

---

## Acceptance Criteria for Phase 1

- `npm run build` passes.
- All core pages exist.
- Content can be updated through Git by editing content files.
- Homepage prioritizes customers works and renovations.
- Private customer email contact is clearly primary.
- Region Windisch/Hausen/Brugg is visible.
- CI follows Bordeaux + Sichtbeton direction.
- No heavy Three.js dependency before the core site is usable.