e-tib.com/docs/TODO.md

E-TIB Website Redesign - Task List

1. Project Initialization & Infrastructure

• Initialize Next.js Application with pnpm (App Router, TypeScript).
• Implement docker-compose.yml and docker-compose.dev.yml following the klz-2026 reference pattern (App, DB, Reverse Proxy, Redis, Qdrant).
• Configure Dockerfile and Dockerfile.dev.
• Integrate internal Mintel packages: @mintel/ui, @mintel/next-config, @mintel/next-utils, @mintel/payload-ai.
• Setup TailwindCSS v4 with E-TIB color palette (#117c61, #333333, #fafafa) and modern industrial tokens.
• Configure Next.js i18n (German Default, English) mirroring KLZ-2026 setup.

2. Payload CMS Integration

• Initialize Payload v3 with Postgres adapter.
• Create Collections: Pages, Media, Competences (Kompetenzen), References (Referenzen), Team, Jobs.
• Setup Global configuration for Header, Footer, and Company Data.
• Setup seeders for legacy content (texts and placeholder videos/images).

3. Core Component Library (UI)

• Build global Layout (Industrial Navigation Header, Universal Footer).
• Create Hero Section with background video support (reference: schleicher-gruppe.de).
• Create Sub-Company Tiles Component (E-TIB GmbH, Verwaltung, Ingenieurgesellschaft, Bohrtechnik).
• Build Bento-grid layout for the Competences overview.
• Create visual Timeline component for the "Über uns" section.
• Build interactive Contact Form utilizing @mintel/mail.

4. Page Implementation

• Startseite
  • Hero Video with overlay.
  • Group overview tiles.
  • Competences preview grid.
  • References preview slider.
• Kompetenzen
  • High-fidelity grid detailing all services (Kabelbau, Querung, Kabelpflugarbeiten, etc.).
• Über uns
  • Timeline of company foundations (2015 - 2025).
• Kontakt
  • Interactive Map (Leaflet) & Contact Persons grid pulled from Payload.
• Karriere & Messen
  • Dynamic job listings and exhibition dates.
• Pflichtseiten
  • Impressum, Datenschutz, Cookie Content Manager.

5. Animations & Micro-Interactions

• Add framer-motion scroll-triggered animations for group tiles and timeline points.
• Implement modern hover states on cards, links, and buttons (glassmorphism accents).
• Smooth layout transitions and floating visual accents.

6. Content, QA & Deployment

• Process legacy assets (./assets) and integrate into public or Payload media base.
• Ensure SEO setup based on legacy meta-data (porting from _site_profile.json).
• Pre-flight checks (Lighthouse testing, PA11y accessibility audit, responsive testing on mobile/tablet).
• Sync environments / initial deployment to infrastructure.