Lovable Workflow – Build Instructions & Reihenfolge

## 🎯 Ziel

Klare Anleitung für Lovable wie das EBICS Box Projekt aufgebaut werden soll. Schritt-für-Schritt Reihenfolge für konsistente, qualitativ hochwertige Ergebnisse.

---

## 📋 Master Prompt für Lovable (Projekt-Setup)

```
Du baust die Website für EBICS Box – eine Banking API für Entwickler.

## Projekt-Kontext
EBICS Box ist eine On-Premises Middleware die das komplexe EBICS-Protokoll 
in eine moderne REST API übersetzt. Zielgruppe: Fintechs, SaaS-Anbieter, 
Entwickler die Banking-Integration brauchen.

## Tech Stack
- React + TypeScript
- Tailwind CSS
- Shadcn/ui als Komponenten-Basis
- Lucide Icons
- React Router für Navigation
- i18n mit react-i18next (DE + EN)

## Design-Prinzipien
1. **Dark Mode Only** – Kein Light Mode Toggle
2. **Developer-First** – Code-Beispiele sind Hero-Elemente
3. **Minimal & Clean** – Keine Stock-Fotos, keine Illustrationen
4. **Premium-Gefühl** – Wie Stripe, Linear, Vercel

## Farbschema (STRIKT einhalten)
--bg-primary: #0A0A0B;      /* Haupthintergrund */
--bg-elevated: #141415;      /* Cards */
--bg-subtle: #1C1C1E;        /* Inputs, Hover */
--border: #2A2A2D;           /* Borders */
--accent: #00E676;           /* Primary Green */
--accent-hover: #00C853;     /* Hover State */
--text-primary: #FAFAFA;     /* Headlines */
--text-secondary: #A1A1AA;   /* Body */
--text-muted: #71717A;       /* Meta */

## Typografie
- Headlines: Inter, font-weight 600-700
- Body: Inter, font-weight 400
- Code: JetBrains Mono
- Keine anderen Fonts verwenden

## Wichtige Regeln
- Alle Texte MÜSSEN auf Deutsch UND Englisch vorbereitet sein (i18n)
- Mobile-First responsive Design
- Semantic HTML (accessibility)
- Komponenten wiederverwendbar bauen
- Copy-Button bei allen Code-Blöcken
- Keine externen Bilder außer dem Logo
```

---

## 🔢 Build-Reihenfolge (7 Phasen)

---

## Phase 1: Foundation (ZUERST!) 🏗️

### 1.1 Projekt-Setup & Design Tokens

```
Erstelle das Grundgerüst für EBICS Box:

1. Tailwind Config mit Custom Colors:
   - bg-primary: #0A0A0B
   - bg-elevated: #141415
   - bg-subtle: #1C1C1E
   - border: #2A2A2D
   - accent: #00E676
   - accent-hover: #00C853
   - text-primary: #FAFAFA
   - text-secondary: #A1A1AA
   - text-muted: #71717A

2. Global Styles:
   - Body background: bg-primary
   - Default text: text-secondary
   - Font: Inter (import von Google Fonts)
   - Code Font: JetBrains Mono

3. CSS Variables in globals.css

Noch KEINE Komponenten, nur das Fundament.
```

### 1.2 Base Components

```
Erstelle wiederverwendbare Base Components:

1. Button Komponente mit Varianten:
   - primary (grüner Hintergrund, schwarzer Text)
   - secondary (transparent, border)
   - ghost (nur Text, grün)

2. Card Komponente:
   - bg-elevated, border, rounded-xl, p-6
   - Optional: hover glow effect

3. Badge Komponente:
   - Grün auf grünem 12% opacity Background
   - rounded-full

4. Input Komponente:
   - bg-subtle, border
   - Focus ring in accent

5. CodeBlock Komponente:
   - Background #0D1117
   - Monospace font
   - Copy-Button oben rechts
```

### 1.3 Layout Components

```
Erstelle Layout Components:

1. Container: max-width 1200px, zentriert, padding
2. Section: vertical padding 120px/80px mobile
3. SectionHeader: Badge + Headline + Subheadline
4. Grid: responsive 1-4 Spalten
```

---

## Phase 2: Navigation & Footer 🧭

### 2.1 Header

```
Sticky Header mit:
- Logo links (Text "EBICS Box" in accent)
- Nav Mitte: Produkt, Preise, Use Cases, Services, Docs
- Rechts: Language Switcher (DE|EN) + CTA Button
- Mobile: Hamburger → Fullscreen Overlay
```

### 2.2 Footer

```
4-Spalten Footer:
- Logo + Beschreibung
- Produkt Links
- Rechtliches
- Kontakt
Bottom: Copyright, "Made in Cologne", Social Icons
```

---

## Phase 3: Homepage (6 Sections) 🏠

### 3.1 Hero
```
- Badge: "Seit 2014 in Produktion"
- Headline: "Banking-Automatisierung für Entwickler"
- Subheadline: EBICS als REST API...
- 2 Buttons: Kontakt (primary), Docs (secondary)
- Subtle green gradient glow von oben
```

### 3.2 Problem
```
- Headline: "EBICS ist mächtig. Aber auch komplex."
- 4 Cards: €50-200k, 6-12 Monate, Formate, Komplexität
- Transition: "EBICS Box nimmt dir das ab."
```

### 3.3 Solution/Features
```
- Headline: "Alles was du brauchst: HTTP + JSON"
- 4 Feature Cards: Überweisungen, Kontoauszüge, Multi-Banking, On-Premises
```

### 3.4 Code Preview
```
- 2 Code-Blöcke: Request + Response
- Copy-Buttons
- Optional: Tabs für verschiedene Beispiele
```

### 3.5 Use Cases Teaser
```
- 3 Cards: Marketplace, Subscription, Treasury
- Links zu /use-cases
```

### 3.6 Trust & CTA
```
- Trust Badges: 2014, Open Source, Köln, 15+ Jahre
- Final CTA Section mit Button
```

---

## Phase 4: Unterseiten 📄

| # | Seite | Inhalt |
|---|-------|--------|
| 4.1 | **Produkt** | Features mit Code-Beispielen |
| 4.2 | **Preise** | 3 Tiers + Add-Ons + FAQ |
| 4.3 | **Kontakt** | Formular + Jan Info |
| 4.4 | **Use Cases** | 4 Use Cases mit Problem/Lösung/ROI |
| 4.5 | **Services** | 5 Services + Railslove + Jan |
| 4.6 | **Docs** | Landing Page mit Quick Start |

---

## Phase 5: Legal ⚖️

| # | Seite | Inhalt |
|---|-------|--------|
| 5.1 | **Impressum** | Pflichtangaben |
| 5.2 | **Datenschutz** | DSGVO Text |
| 5.3 | **Cookie Banner** | Consent mit Optionen |

---

## Phase 6: i18n & Polish ✨

### 6.1 Internationalisierung
```
- react-i18next Setup
- ALLE Texte in de.json + en.json
- Language Switcher funktional
- URL Prefix /de/ und /en/
```

### 6.2 SEO
```
- Meta Tags pro Seite
- Open Graph
- Structured Data
- Sitemap
```

### 6.3 Animations
```
- Page fade-in
- Scroll animations (subtle!)
- Button/Card hover effects
- Copy-Button Feedback
```

---

## Phase 7: Integrations 🔗

| # | Integration | Beschreibung |
|---|-------------|--------------|
| 7.1 | **Brevo** | Kontaktformular → Lead |
| 7.2 | **Calendly** | Terminbuchung Einbindung |
| 7.3 | **Analytics** | Plausible oder GA4 |

---

## ✅ Qualitäts-Checkliste (nach jeder Phase)

```
□ Responsive getestet (Mobile, Tablet, Desktop)
□ Nur Design System Farben verwendet
□ Nur Inter + JetBrains Mono
□ Komponenten wiederverwendbar
□ Accessibility: Kontraste, Focus States
□ Alle Texte i18n-ready
□ Keine Console Errors
□ Konsistentes Spacing
```

---

## 🔧 Troubleshooting

### Farben falsch:
```
Korrigiere die Farben:
- Hintergrund: #0A0A0B
- Cards: #141415  
- Accent: #00E676
Keine anderen Varianten!
```

### Layout kaputt:
```
Fixe das Layout:
- Container max-width: 1200px
- Mobile: 1 Spalte, padding 16px
- Desktop: Grid wie definiert
```

### Inkonsistente Komponenten:
```
Verwende die erstellten Komponenten aus components/ui/
Keine inline styles für Button, Card, Input etc.
```

---

📁 **Referenz:** `18-lovable-workflow.md`
🏷️ **Labels:** lovable, workflow, foundation
⚡ **Priority:** P0
⏱️ **Estimate:** Referenz-Dokument

#	Seite	Inhalt
4.1	Produkt	Features mit Code-Beispielen
4.2	Preise	3 Tiers + Add-Ons + FAQ
4.3	Kontakt	Formular + Jan Info
4.4	Use Cases	4 Use Cases mit Problem/Lösung/ROI
4.5	Services	5 Services + Railslove + Jan
4.6	Docs	Landing Page mit Quick Start

#	Seite	Inhalt
5.1	Impressum	Pflichtangaben
5.2	Datenschutz	DSGVO Text
5.3	Cookie Banner	Consent mit Optionen

#	Integration	Beschreibung
7.1	Brevo	Kontaktformular → Lead
7.2	Calendly	Terminbuchung Einbindung
7.3	Analytics	Plausible oder GA4

Lovable Workflow – Build Instructions & Reihenfolge #19

Description

🎯 Ziel

📋 Master Prompt für Lovable (Projekt-Setup)

🔢 Build-Reihenfolge (7 Phasen)

Phase 1: Foundation (ZUERST!) 🏗️

1.1 Projekt-Setup & Design Tokens

1.2 Base Components

1.3 Layout Components

Phase 2: Navigation & Footer 🧭

2.1 Header

2.2 Footer

Phase 3: Homepage (6 Sections) 🏠

3.1 Hero

3.2 Problem

3.3 Solution/Features

3.4 Code Preview

3.5 Use Cases Teaser

3.6 Trust & CTA

Phase 4: Unterseiten 📄

Phase 5: Legal ⚖️

Phase 6: i18n & Polish ✨

6.1 Internationalisierung

6.2 SEO

6.3 Animations

Phase 7: Integrations 🔗

✅ Qualitäts-Checkliste (nach jeder Phase)

🔧 Troubleshooting

Farben falsch:

Layout kaputt:

Inkonsistente Komponenten:

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions