Initialize client project from skeleton
Client: Sport Generated: 2026-01-29T15:31:44.504Z
This commit is contained in:
Prototype Generator
48
READ_FIRST.md
Normal file
48
READ_FIRST.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# READ_FIRST.md
|
||||
|
||||
> Projekt: **Sport**
|
||||
> Generiert am: 2026-01-29
|
||||
|
||||
## Über dieses Repository
|
||||
|
||||
Dieses Repository wurde automatisch aus dem **WebsiteSkeleton** generiert.
|
||||
Es enthält alle Konfigurationen, Design-Tokens und Prompts, die für den Website-Build benötigt werden.
|
||||
|
||||
## Regeln
|
||||
|
||||
1. **Lies zuerst den Masterprompt:** `prompts/master_prompt.md`
|
||||
2. **Skill-Hierarchie beachten:** SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
|
||||
3. **Design nur aus Tokens:** Alle Farben, Abstände, Schriftgrößen kommen aus `theme/globals.css`.
|
||||
4. **Keine Templates:** Jede Seite wird individuell gebaut – keine vorgefertigten Layouts.
|
||||
5. **TypeScript strict:** Kein `any`, keine impliziten Typen.
|
||||
6. **Keine Secrets:** API-Keys, Tokens etc. gehören in `.env`, NIEMALS ins Repository.
|
||||
|
||||
## Dateistruktur
|
||||
|
||||
```
|
||||
├── app/ # Next.js App Router
|
||||
├── skills/ # Globale + Client Skills
|
||||
│ ├── SYSTEM_SKILLS.md
|
||||
│ ├── UI_GUIDELINES.md
|
||||
│ ├── DEFINITION_OF_DONE.md
|
||||
│ └── CLIENT_OVERRIDES.md
|
||||
├── spec/ # Projektspezifikation
|
||||
│ ├── ProjectSpec.json
|
||||
│ └── design_tokens.json
|
||||
├── theme/ # CSS (Single Source of Truth)
|
||||
│ ├── globals.css
|
||||
│ └── stylesheet.css
|
||||
├── prompts/ # AI Build Prompts
|
||||
│ └── master_prompt.md
|
||||
└── docker/ # Docker Setup
|
||||
```
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
1. Öffne `prompts/master_prompt.md`
|
||||
2. Folge der Lesereihenfolge
|
||||
3. Baue die Website gemäß Spec und Design-Tokens
|
||||
|
||||
---
|
||||
|
||||
*Generiert von website-prototype-generator.*
|
||||
@@ -1,4 +1,18 @@
|
||||
[
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"entries": []
|
||||
"projectId": "071d9635-4d8e-4d22-ad69-220a290a4c30",
|
||||
"generatedAt": "2026-01-29T15:31:44.504Z",
|
||||
"generator": "website-prototype-generator",
|
||||
"specVersion": "1.0",
|
||||
"llmUsed": true,
|
||||
"artifacts": [
|
||||
"design_tokens.json",
|
||||
"CLIENT_OVERRIDES.md",
|
||||
"master_prompt.md",
|
||||
"globals.css",
|
||||
"stylesheet.css",
|
||||
"READ_FIRST.md",
|
||||
"ProjectSpec.json"
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,107 +1,218 @@
|
||||
# Master Prompt
|
||||
# Website-Build Masterprompt v2
|
||||
|
||||
Anweisungen für die KI zur Website-Generierung.
|
||||
> Projekt: **Sport** | Branche: Sport / Fitness | Sprache: de
|
||||
|
||||
## 0. Research & Kontext
|
||||
|
||||
### Branchen-Insights
|
||||
1. Digitalisierung im Fitnessbereich: Immer mehr Fitnessstudios und Sportanbieter setzen auf digitale Lösungen wie Apps und Online-Kurse. 2. Personalisierung von Fitnessangeboten: Individuelle Trainingspläne und Ernährungsberatung werden zunehmend nachgefragt. 3. Nachhaltigkeit im Sport: Umweltfreundliche Produkte und Dienstleistungen gewinnen an Bedeutung. 4. Wellness und mentale Gesundheit: Der Fokus auf ganzheitliches Wohlbefinden wird immer wichtiger. 5. Community-Building: Die Schaffung von Gemeinschaften durch soziale Medien und Events ist ein wachsender Trend.
|
||||
|
||||
### Wettbewerbsanalyse
|
||||
Wettbewerber in der Sport-/Fitnessbranche nutzen oft ein modernes, ansprechendes Design mit klaren Call-to-Action-Elementen. Häufige Features sind Buchungssysteme für Kurse, Mitgliederbereiche und Blogs. Viele Websites bieten auch interaktive Elemente wie Fitness-Tracker oder Ernährungspläne. Stärken der Wettbewerber sind die Benutzerfreundlichkeit und die Integration von Social-Media-Elementen. Eine Lücke besteht oft in der Personalisierung der Nutzererfahrung und der Bereitstellung von Inhalten, die über das Standardangebot hinausgehen.
|
||||
|
||||
### SEO-Keywords
|
||||
Fitnessstudio Wien, Personal Training Österreich, Online Fitnesskurse, Gesunde Ernährung Tipps, Sportartikel kaufen, Yoga Kurse Wien, Fitness Community, Ernährungsberatung, Krafttraining für Anfänger, Lauftraining Tipps, Fitness Trends 2023, Gesundheitsbewusstsein, Sportevents in Österreich, Nachhaltige Sportmode, Wellness und Fitness
|
||||
|
||||
### Content-Richtlinien
|
||||
Die Website sollte in einem premium und exklusiven Ton kommunizieren, der Vertrauen und Expertise ausstrahlt. Botschaften sollten klar und ansprechend sein, mit einem Fokus auf die individuellen Bedürfnisse der Kunden. Das Wertversprechen sollte die Qualität der Dienstleistungen und Produkte betonen sowie die Vorteile einer Mitgliedschaft oder Nutzung der Angebote hervorheben.
|
||||
|
||||
---
|
||||
|
||||
## Kontext
|
||||
## 1. Lesereihenfolge (PFLICHT)
|
||||
|
||||
Du arbeitest mit einem minimalistischen Website-Skeleton. Dieses Repository enthält:
|
||||
**Du MUSST die folgenden Dateien in dieser EXAKTEN Reihenfolge lesen**, bevor du irgendeine Zeile Code schreibst:
|
||||
|
||||
- Keine fertigen Layouts
|
||||
- Keine UI-Komponenten
|
||||
- Keine Design-Vorgaben
|
||||
1. `READ_FIRST.md` (Projektübersicht & Regeln)
|
||||
2. `skills/SYSTEM_SKILLS.md` (globale System-Skills – **nicht überschreibbar**)
|
||||
3. `skills/UI_GUIDELINES.md` (UI-Richtlinien – **nicht überschreibbar**)
|
||||
4. `skills/DEFINITION_OF_DONE.md` (Definition of Done – **nicht überschreibbar**)
|
||||
5. `skills/CLIENT_OVERRIDES.md` (kundenspezifische Ergänzungen)
|
||||
6. `spec/ProjectSpec.json` (Projektspezifikation)
|
||||
7. `spec/design_tokens.json` (Design-Token – **Single Source of Truth**)
|
||||
8. `theme/globals.css` (CSS Custom Properties – **Single Source of Truth**)
|
||||
9. `theme/stylesheet.css` (Strukturelles CSS-Framework)
|
||||
|
||||
Alles muss von Grund auf neu erstellt werden.
|
||||
**Erst nach dem Lesen aller Dateien darfst du mit der Implementierung beginnen.**
|
||||
|
||||
## 2. Strikte Regeln (Non-Negotiable)
|
||||
|
||||
### Design & Styling
|
||||
- **Keine Templates:** Verwende KEINE vorgefertigten UI-Templates, Themes oder Section-Bibliotheken (kein shadcn, kein tailwindui, keine Copy-Paste-Sections).
|
||||
- **Design nur aus Tokens:** Jede Farbe, jedes Spacing, jede Schriftgröße MUSS aus `globals.css` Custom Properties kommen. KEINE Hardcoded-Werte im Code.
|
||||
- **Keine UI-Libraries:** Kein shadcn/ui, kein Material UI, kein Chakra UI, kein daisyUI. Nur native Tailwind CSS v4 + Custom Components.
|
||||
- **Tailwind v4:** Nutze die neuen v4 Features (CSS-first config, `@theme` directive).
|
||||
|
||||
### Architecture
|
||||
- **Skill-Hierarchie:** `SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES`
|
||||
- CLIENT_OVERRIDES dürfen globale Regeln NICHT brechen, nur ergänzen.
|
||||
- **TypeScript strict:** Alle Dateien in TypeScript. `strict: true` in tsconfig. Keine `any` Types (außer bei externen Libraries ohne Types).
|
||||
- **Stack:** Next.js 16 App Router, React 19, TypeScript 5+, Tailwind CSS v4, framer-motion (sparsam), lucide-react.
|
||||
- **File Structure:** Folge der Next.js 16 App Router Convention. Routes in `app/`, Components in `components/`.
|
||||
- **No New Dependencies:** Füge KEINE neuen npm packages ohne explizite Begründung hinzu. Nutze den vorhandenen Stack.
|
||||
|
||||
### Performance & Accessibility
|
||||
- **framer-motion sparsam:** Nur für key interactions. Keine Animationen auf jedem Element.
|
||||
- **Lenis:** NICHT aktivieren, es sei denn CLIENT_OVERRIDES fordert es explizit.
|
||||
- **Accessibility:** Semantisches HTML5, ARIA-Labels wo nötig, Keyboard-Navigation, WCAG AA minimum.
|
||||
- **Performance:** Keine unnötigen Client Components. Nutze Server Components wo möglich. Next.js Image für alle Bilder.
|
||||
|
||||
## 3. Markenidentität
|
||||
|
||||
- **Kunde:** Sport
|
||||
- **Branche:** Sport / Fitness
|
||||
- **Tonalität:** premium, exklusiv
|
||||
- **Sprache:** de (Alle Texte in dieser Sprache!)
|
||||
- **Locale:** de-AT
|
||||
- **Primärfarbe:** #2563eb
|
||||
- **Sekundärfarbe:** #64748b
|
||||
- **Akzentfarbe:** #f59e0b
|
||||
- **CTA Primary:** "Jetzt Termin buchen"
|
||||
- **CTA Secondary:** "Mehr über unsere Angebote erfahren"
|
||||
|
||||
## 4. Seitenstruktur & Anforderungen
|
||||
|
||||
### Startseite (`/`)
|
||||
|
||||
**Beschreibung:** Willkommen bei Sport – Ihre Anlaufstelle für Fitness und Wellness in Österreich.
|
||||
|
||||
**Route:** `app/page.tsx`
|
||||
|
||||
**Mindestanforderungen:**
|
||||
- Responsive (Mobile-first)
|
||||
- Semantisches HTML (header, main, section, footer)
|
||||
- SEO Meta Tags (title, description, og:tags)
|
||||
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über unsere Angebote erfahren"
|
||||
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||
|
||||
### Über Uns (`/ueber-uns`)
|
||||
|
||||
**Beschreibung:** Erfahren Sie mehr über unsere Philosophie und unser engagiertes Team.
|
||||
|
||||
**Route:** `app/ueber-uns/page.tsx`
|
||||
|
||||
**Mindestanforderungen:**
|
||||
- Responsive (Mobile-first)
|
||||
- Semantisches HTML (header, main, section, footer)
|
||||
- SEO Meta Tags (title, description, og:tags)
|
||||
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über unsere Angebote erfahren"
|
||||
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||
|
||||
### Kontakt (`/kontakt`)
|
||||
|
||||
**Beschreibung:** Kontaktieren Sie uns für Anfragen oder Buchungen. Wir freuen uns auf Sie!
|
||||
|
||||
**Route:** `app/kontakt/page.tsx`
|
||||
|
||||
**Mindestanforderungen:**
|
||||
- Responsive (Mobile-first)
|
||||
- Semantisches HTML (header, main, section, footer)
|
||||
- SEO Meta Tags (title, description, og:tags)
|
||||
- Call-to-Actions mit "Jetzt Termin buchen" und "Mehr über unsere Angebote erfahren"
|
||||
- Accessibility (ARIA labels, alt texts, keyboard nav)
|
||||
|
||||
## 5. Technische Anforderungen
|
||||
|
||||
**Features:**
|
||||
- FAQ
|
||||
- Team-Seite
|
||||
- Buchungssystem für Kurse
|
||||
- Mitgliederbereich
|
||||
|
||||
**Domain:** sport.at
|
||||
**Analytics:** Nicht angegeben
|
||||
**Hosting:** Nicht angegeben
|
||||
|
||||
## 6. Implementierungs-Reihenfolge
|
||||
|
||||
Befolge diese Schritte in exakter Reihenfolge:
|
||||
|
||||
1. **Plan erstellen:** Kurzer Plan (3-5 Bullet Points) mit deinem Implementierungsansatz.
|
||||
2. **Layout-Components:** Header, Footer, Navigation (in `components/layout/`).
|
||||
3. **Shared Components:** Buttons, Cards, Forms (in `components/ui/`).
|
||||
4. **Seiten implementieren:** In der Reihenfolge der Seitenstruktur (Abschnitt 4).
|
||||
5. **SEO & Metadata:** Für jede Seite `metadata` export mit title, description, og:tags.
|
||||
6. **Accessibility Check:** Semantisches HTML, ARIA, Keyboard-Navigation prüfen.
|
||||
7. **Performance Check:** Unnötige Client Components zu Server Components refactoren.
|
||||
8. **Build & Lint:** `npm run build && npm run lint` fehlerfrei.
|
||||
|
||||
## 7. Offene Fragen (mit Client klären)
|
||||
|
||||
**Die folgenden Informationen fehlen und müssen mit dem Client geklärt werden:**
|
||||
|
||||
- **technical.hosting** (technical): Welcher Hosting-Anbieter wird verwendet?
|
||||
- **technical.analytics** (technical): Welche Analytics-Lösung wird implementiert?
|
||||
|
||||
**WICHTIG:** Für diese Felder darfst du NICHT raten. Frage den Client oder nutze Platzhalter-Werte mit klarer Kennzeichnung (z.B. "PLACEHOLDER: ...").
|
||||
|
||||
---
|
||||
|
||||
## Vor dem Start
|
||||
## 8. Definition of Done (Abnahme-Checkliste)
|
||||
|
||||
**Pflichtlektüre** (in dieser Reihenfolge):
|
||||
**Bevor du die Implementierung als fertig markierst, MÜSSEN alle diese Punkte erfüllt sein:**
|
||||
|
||||
1. `/skills/SYSTEM_SKILLS.md` - Grundregeln
|
||||
2. `/skills/UI_GUIDELINES.md` - Qualitätsstandards
|
||||
3. `/skills/DEFINITION_OF_DONE.md` - Abnahmekriterien
|
||||
4. `/spec/ProjectSpec.json` - Projektanforderungen
|
||||
5. `/spec/design_tokens.json` - Design-System
|
||||
### Build & Code Quality
|
||||
- [ ] `npm run build` läuft fehlerfrei durch (0 Errors, 0 Warnings)
|
||||
- [ ] `npm run lint` meldet keine Fehler (0 Errors, Warnings OK)
|
||||
- [ ] TypeScript strict mode aktiv, keine `any` types
|
||||
- [ ] Alle Imports funktionieren, keine broken imports
|
||||
|
||||
### Funktionalität
|
||||
- [ ] Alle Seiten aus Seitenstruktur (Abschnitt 4) existieren und sind erreichbar
|
||||
- [ ] Navigation funktioniert zwischen allen Seiten
|
||||
- [ ] Alle CTAs ("Jetzt Termin buchen", "Mehr über unsere Angebote erfahren") funktional
|
||||
- [ ] Kontaktformular (falls vorhanden) validiert Eingaben
|
||||
|
||||
### Design & Styling
|
||||
- [ ] Alle Farben kommen aus `globals.css` Custom Properties (keine Hardcoded Colors)
|
||||
- [ ] Alle Spacings nutzen Design Tokens (keine Magic Numbers)
|
||||
- [ ] Typography nutzt Design Token Scales
|
||||
- [ ] Brand-konform (Farben, Fonts, Tonalität)
|
||||
|
||||
### Responsive & Cross-Browser
|
||||
- [ ] Mobile (320px - 767px): Layout funktioniert, Navigation collapsed
|
||||
- [ ] Tablet (768px - 1023px): Layout angepasst
|
||||
- [ ] Desktop (1024px+): Volle Breite, optimales Layout
|
||||
- [ ] Touch-Targets mindestens 44x44px (Mobile)
|
||||
|
||||
### Accessibility (WCAG AA)
|
||||
- [ ] Semantisches HTML5 (header, nav, main, section, article, footer)
|
||||
- [ ] Alle Bilder haben alt-Texte
|
||||
- [ ] Farbkontraste min. 4.5:1 für Text, 3:1 für UI (automatisch geprüft)
|
||||
- [ ] Keyboard-Navigation funktioniert (Tab, Enter, Escape)
|
||||
- [ ] Focus-States sichtbar
|
||||
- [ ] ARIA-Labels wo semantisches HTML nicht ausreicht
|
||||
|
||||
### Performance
|
||||
- [ ] Unnötige Client Components zu Server Components refactored
|
||||
- [ ] Bilder nutzen Next.js `<Image>` Component
|
||||
- [ ] Keine blocking Scripts in `<head>`
|
||||
- [ ] framer-motion nur sparsam eingesetzt (nicht überall)
|
||||
|
||||
### SEO
|
||||
- [ ] Jede Seite hat `metadata` export (title, description)
|
||||
- [ ] Open Graph Tags gesetzt (og:title, og:description, og:image)
|
||||
- [ ] Strukturierte Daten (JSON-LD) für Organisation (Homepage)
|
||||
|
||||
### Legal & Content
|
||||
- [ ] Impressum-Seite vorhanden (falls in Seitenstruktur)
|
||||
- [ ] Datenschutz-Seite vorhanden (falls in Seitenstruktur)
|
||||
- [ ] Alle Texte auf de
|
||||
|
||||
## 9. Stop Conditions
|
||||
|
||||
**In folgenden Situationen MUSST du stoppen und NICHT weitermachen:**
|
||||
|
||||
1. **Unklare Anforderungen:** Wenn Spec-Felder "Nicht angegeben" enthalten oder unklar sind → Frage den Client (siehe Abschnitt 7).
|
||||
2. **Widersprüche:** Wenn CLIENT_OVERRIDES gegen SYSTEM_SKILLS/UI_GUIDELINES verstoßen → Melde das Problem.
|
||||
3. **Fehlende Assets:** Wenn Logo, Bilder oder andere Assets fehlen → Nutze Platzhalter mit klarer Kennzeichnung.
|
||||
4. **Build Errors:** Wenn `npm run build` fehlschlägt und du es nicht beheben kannst → Melde den Fehler mit Stack Trace.
|
||||
|
||||
**NIEMALS:**
|
||||
- Raten bei unklaren Requirements
|
||||
- Globale Skills (SYSTEM_SKILLS/UI_GUIDELINES/DEFINITION_OF_DONE) ignorieren
|
||||
- Neue Dependencies ohne Begründung hinzufügen
|
||||
- UI-Templates oder Copy-Paste-Code nutzen
|
||||
|
||||
---
|
||||
|
||||
## Workflow
|
||||
|
||||
### 1. Analyse
|
||||
|
||||
- ProjectSpec.json vollständig lesen und verstehen
|
||||
- Design Tokens studieren
|
||||
- Zielgruppe und Ziele identifizieren
|
||||
- Technische Anforderungen erfassen
|
||||
|
||||
### 2. Konzeption
|
||||
|
||||
- Seitenstruktur planen
|
||||
- Komponenten identifizieren (keine vorgefertigten!)
|
||||
- Responsive Breakpoints berücksichtigen
|
||||
- Performance-Budget einplanen
|
||||
|
||||
### 3. Umsetzung
|
||||
|
||||
- Mobile-First entwickeln
|
||||
- Semantisches HTML verwenden
|
||||
- CSS Variables aus globals.css nutzen
|
||||
- Tailwind für Utility-Klassen
|
||||
- TypeScript strict mode
|
||||
|
||||
### 4. Qualitätssicherung
|
||||
|
||||
- Definition of Done prüfen
|
||||
- Alle Breakpoints testen
|
||||
- Accessibility validieren
|
||||
- Performance messen
|
||||
|
||||
### 5. Dokumentation
|
||||
|
||||
- Änderungen in `generation_log.json` festhalten
|
||||
- Entscheidungen dokumentieren
|
||||
|
||||
---
|
||||
|
||||
## Beispiel-Prompt für neue Website
|
||||
|
||||
```
|
||||
Erstelle eine Website für [Kunde] basierend auf:
|
||||
|
||||
1. ProjectSpec.json wurde aktualisiert mit:
|
||||
- Firmenname: [Name]
|
||||
- Branche: [Branche]
|
||||
- Zielgruppe: [Zielgruppe]
|
||||
- Gewünschte Seiten: [Liste]
|
||||
|
||||
2. design_tokens.json wurde aktualisiert mit:
|
||||
- Primärfarbe: [Farbe]
|
||||
- Schriftart: [Font]
|
||||
- [weitere Anpassungen]
|
||||
|
||||
Bitte lies zuerst /skills und /spec vollständig.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Verbote (Wiederholung)
|
||||
|
||||
- KEINE UI-Libraries
|
||||
- KEINE Templates kopieren
|
||||
- KEINE eigenmächtigen Design-Entscheidungen
|
||||
- KEINE hardcodierten Werte
|
||||
- KEIN Over-Engineering
|
||||
|
||||
---
|
||||
|
||||
## Ausgabe-Erwartung
|
||||
|
||||
Nach erfolgreicher Generierung:
|
||||
|
||||
- Lauffähige Website unter `npm run dev`
|
||||
- Build erfolgreich unter `npm run build`
|
||||
- Alle DoD-Kriterien erfüllt
|
||||
- generation_log.json aktualisiert
|
||||
*Generiert von website-prototype-generator v2 am 2026-01-29.*
|
||||
|
||||
@@ -1,152 +1,57 @@
|
||||
# CLIENT_OVERRIDES (Project-Specific)
|
||||
# CLIENT_OVERRIDES.md
|
||||
|
||||
Kundenspezifische Ergänzungen. Diese Datei darf globale Skills nicht überschreiben.
|
||||
> **WICHTIG:** Diese Overrides ergänzen die globalen Skills.
|
||||
> Sie dürfen SYSTEM_SKILLS, UI_GUIDELINES und DEFINITION_OF_DONE **nicht** überschreiben.
|
||||
> Hierarchie: SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
|
||||
|
||||
## Kunde
|
||||
|
||||
- **Name:** Sport
|
||||
- **Branche:** Sport / Fitness
|
||||
- **Locale:** de-AT
|
||||
- **Sprache:** de
|
||||
- **Kontakt:** Max Mustermann (kontakt@sport.at, +43 123 456 789)
|
||||
|
||||
## Markenidentität
|
||||
|
||||
- **Tonalität:** premium, exklusiv
|
||||
- **Primärfarbe:** #2563eb
|
||||
- **Sekundärfarbe:** #64748b
|
||||
- **Akzentfarbe:** #f59e0b
|
||||
- **Hintergrund:** #ffffff
|
||||
- **Vordergrund:** #0f172a
|
||||
- **Schrift Heading:** Inter (700)
|
||||
- **Schrift Body:** Inter (400)
|
||||
- **Logo:** https://sport.at/logo.png
|
||||
|
||||
## Inhaltsanforderungen
|
||||
|
||||
- **CTA primär:** Jetzt Termin buchen
|
||||
- **CTA sekundär:** Mehr über unsere Angebote erfahren
|
||||
|
||||
### SEO & Content-Strategie
|
||||
|
||||
- **SEO-Keywords:** Fitnessstudio Wien, Personal Training Österreich, Online Fitnesskurse, Gesunde Ernährung Tipps, Sportartikel kaufen, Yoga Kurse Wien, Fitness Community, Ernährungsberatung, Krafttraining für Anfänger, Lauftraining Tipps, Fitness Trends 2023, Gesundheitsbewusstsein, Sportevents in Österreich, Nachhaltige Sportmode, Wellness und Fitness
|
||||
- **Content-Richtlinien:** Die Website sollte in einem premium und exklusiven Ton kommunizieren, der Vertrauen und Expertise ausstrahlt. Botschaften sollten klar und ansprechend sein, mit einem Fokus auf die individuellen Bedürfnisse der Kunden. Das Wertversprechen sollte die Qualität der Dienstleistungen und Produkte betonen sowie die Vorteile einer Mitgliedschaft oder Nutzung der Angebote hervorheben.
|
||||
|
||||
### Seitenstruktur
|
||||
|
||||
- **Startseite** (`/`): Willkommen bei Sport – Ihre Anlaufstelle für Fitness und Wellness in Österreich.
|
||||
- **Über Uns** (`/ueber-uns`): Erfahren Sie mehr über unsere Philosophie und unser engagiertes Team.
|
||||
- **Kontakt** (`/kontakt`): Kontaktieren Sie uns für Anfragen oder Buchungen. Wir freuen uns auf Sie!
|
||||
|
||||
## Technische Anforderungen
|
||||
|
||||
- **Domain:** sport.at
|
||||
- **Hosting:** Nicht angegeben
|
||||
- **Analytics:** Nicht angegeben
|
||||
- **Features:** FAQ, Team-Seite, Buchungssystem für Kurse, Mitgliederbereich
|
||||
|
||||
## Offene Fragen
|
||||
|
||||
- **technical.hosting** (technical): Welcher Hosting-Anbieter wird verwendet?
|
||||
- **technical.analytics** (technical): Welche Analytics-Lösung wird implementiert?
|
||||
|
||||
---
|
||||
|
||||
## Scope
|
||||
|
||||
**Kunde:** TBD
|
||||
**Marke:** TBD
|
||||
**Branche:** TBD
|
||||
**Geschäftsmodell:** TBD
|
||||
**Kernleistung:** TBD
|
||||
**Zielgruppe (primär):** TBD
|
||||
**Zielgruppe (sekundär):** TBD
|
||||
**Kundentyp:** TBD
|
||||
**Region:** TBD
|
||||
|
||||
---
|
||||
|
||||
## Read Order
|
||||
|
||||
1. `skills/SYSTEM_SKILLS.md`
|
||||
2. `skills/UI_GUIDELINES.md`
|
||||
3. `skills/DEFINITION_OF_DONE.md`
|
||||
4. `skills/CLIENT_OVERRIDES.md` ← diese Datei
|
||||
5. `spec/project_spec.json`
|
||||
|
||||
---
|
||||
|
||||
## Non-Goals
|
||||
|
||||
Diese Datei definiert **NICHT**:
|
||||
- Globale Arbeitsweisen (siehe SYSTEM_SKILLS.md)
|
||||
- UI-Qualitätsstandards (siehe UI_GUIDELINES.md)
|
||||
- Abnahmekriterien (siehe DEFINITION_OF_DONE.md)
|
||||
- Konkrete Farbwerte, Layouts, Komponenten (kommen aus design_tokens.json)
|
||||
|
||||
---
|
||||
|
||||
## Brand Voice (Deutsch)
|
||||
|
||||
| Eigenschaft | Wert |
|
||||
|-------------|------|
|
||||
| Sprache | Deutsch |
|
||||
| Ansprache | TBD |
|
||||
| Formalität | TBD |
|
||||
| Markenpersönlichkeit | TBD |
|
||||
|
||||
**USPs:**
|
||||
- TBD
|
||||
|
||||
---
|
||||
|
||||
## Must-Haves
|
||||
|
||||
### Pflichtseiten
|
||||
- TBD
|
||||
|
||||
### Pflichtinhalte
|
||||
- TBD
|
||||
|
||||
### Pflicht-CTAs
|
||||
| Label | Ziel | Priorität |
|
||||
|-------|------|-----------|
|
||||
| TBD | TBD | TBD |
|
||||
|
||||
---
|
||||
|
||||
## Must-Not-Haves
|
||||
|
||||
### Verbotene Inhalte
|
||||
- TBD
|
||||
|
||||
### Verbotene Stilmittel
|
||||
- TBD
|
||||
|
||||
### Verbotene Technologien
|
||||
- TBD
|
||||
|
||||
---
|
||||
|
||||
## Content & SEO Notes
|
||||
|
||||
### SEO-Fokus-Keywords
|
||||
- TBD
|
||||
|
||||
### GEO-Fokus
|
||||
- TBD
|
||||
|
||||
### Content-Richtung
|
||||
- TBD
|
||||
|
||||
---
|
||||
|
||||
## Legal (DACH)
|
||||
|
||||
### Impressum
|
||||
- **Erforderlich:** Ja
|
||||
- **Details:** TBD
|
||||
|
||||
### Datenschutzerklärung
|
||||
- **Erforderlich:** Ja
|
||||
- **Details:** TBD
|
||||
|
||||
### Zusätzliche rechtliche Hinweise
|
||||
- TBD
|
||||
|
||||
---
|
||||
|
||||
## Assets & Links
|
||||
|
||||
### Logo
|
||||
- **Verfügbar:** TBD
|
||||
- **Pfad:** TBD
|
||||
- **Format:** TBD
|
||||
|
||||
### Brand Guidelines
|
||||
- **Verfügbar:** TBD
|
||||
- **Pfad:** TBD
|
||||
|
||||
### Weitere Assets
|
||||
- TBD
|
||||
|
||||
---
|
||||
|
||||
## References (Liked / Disliked)
|
||||
|
||||
### Gefällt (Inspiration)
|
||||
| URL | Grund |
|
||||
|-----|-------|
|
||||
| TBD | TBD |
|
||||
|
||||
### Gefällt nicht (Abgrenzung)
|
||||
| URL | Grund |
|
||||
|-----|-------|
|
||||
| TBD | TBD |
|
||||
|
||||
---
|
||||
|
||||
## Open Questions (TBD)
|
||||
|
||||
- TBD
|
||||
- Kundenname und Kontaktperson klären
|
||||
- Branche und Geschäftsmodell definieren
|
||||
- Zielgruppe spezifizieren
|
||||
- Tonalität festlegen (Du/Sie, formal/locker)
|
||||
- Seitenstruktur und Prioritäten bestimmen
|
||||
- CTAs und Conversion-Ziele definieren
|
||||
- Rechtliche Daten für Impressum sammeln
|
||||
- Assets (Logo, CI) bereitstellen
|
||||
- Referenz-Websites sammeln
|
||||
*Generiert von website-prototype-generator v2 am 2026-01-29.*
|
||||
|
||||
@@ -1,50 +1,133 @@
|
||||
{
|
||||
"$schema": "./ProjectSpec.schema.json",
|
||||
"meta": {
|
||||
"projectName": "",
|
||||
"client": "",
|
||||
"version": "1.0.0",
|
||||
"createdAt": "",
|
||||
"updatedAt": ""
|
||||
"specVersion": "1.0",
|
||||
"status": "final",
|
||||
"projectId": "071d9635-4d8e-4d22-ad69-220a290a4c30",
|
||||
"createdAt": "2026-01-29T15:31:42.298Z",
|
||||
"updatedAt": "2026-01-29T15:31:44.505Z"
|
||||
},
|
||||
"client": {
|
||||
"name": "Sport",
|
||||
"slug": "sport",
|
||||
"industry": "Sport / Fitness",
|
||||
"locale": "de-AT",
|
||||
"contact": {
|
||||
"name": "Max Mustermann",
|
||||
"email": "kontakt@sport.at",
|
||||
"phone": "+43 123 456 789"
|
||||
}
|
||||
},
|
||||
"brand": {
|
||||
"name": "",
|
||||
"tagline": "",
|
||||
"description": "",
|
||||
"tone": [],
|
||||
"values": []
|
||||
"colors": {
|
||||
"primary": "#2563eb",
|
||||
"secondary": "#64748b",
|
||||
"accent": "#f59e0b",
|
||||
"neutral": "#f3f4f6",
|
||||
"background": "#ffffff",
|
||||
"foreground": "#0f172a",
|
||||
"muted": "#e5e7eb",
|
||||
"mutedForeground": "#374151",
|
||||
"border": "#d1d5db",
|
||||
"success": "#4ade80",
|
||||
"warning": "#fbbf24",
|
||||
"error": "#ef4444"
|
||||
},
|
||||
"target": {
|
||||
"audience": [],
|
||||
"goals": [],
|
||||
"competitors": []
|
||||
"fonts": {
|
||||
"heading": {
|
||||
"family": "Inter",
|
||||
"fallback": "sans-serif",
|
||||
"weight": "700"
|
||||
},
|
||||
"pages": [],
|
||||
"features": [],
|
||||
"integrations": [],
|
||||
"seo": {
|
||||
"primaryKeywords": [],
|
||||
"secondaryKeywords": [],
|
||||
"localSeo": {
|
||||
"enabled": false,
|
||||
"regions": []
|
||||
"body": {
|
||||
"family": "Inter",
|
||||
"fallback": "sans-serif",
|
||||
"weight": "400"
|
||||
}
|
||||
},
|
||||
"logo": {
|
||||
"url": "https://sport.at/logo.png",
|
||||
"alt": "Sport Logo"
|
||||
}
|
||||
},
|
||||
"content": {
|
||||
"pages": [
|
||||
{
|
||||
"slug": "/",
|
||||
"title": "Startseite",
|
||||
"description": "Willkommen bei Sport – Ihre Anlaufstelle für Fitness und Wellness in Österreich.",
|
||||
"sections": []
|
||||
},
|
||||
{
|
||||
"slug": "/ueber-uns",
|
||||
"title": "Über Uns",
|
||||
"description": "Erfahren Sie mehr über unsere Philosophie und unser engagiertes Team.",
|
||||
"sections": []
|
||||
},
|
||||
{
|
||||
"slug": "/kontakt",
|
||||
"title": "Kontakt",
|
||||
"description": "Kontaktieren Sie uns für Anfragen oder Buchungen. Wir freuen uns auf Sie!",
|
||||
"sections": []
|
||||
}
|
||||
],
|
||||
"tone": "premium, exklusiv",
|
||||
"language": "de",
|
||||
"cta": {
|
||||
"primary": "Jetzt Termin buchen",
|
||||
"secondary": "Mehr über unsere Angebote erfahren"
|
||||
}
|
||||
},
|
||||
"technical": {
|
||||
"hosting": "",
|
||||
"domain": "",
|
||||
"analytics": [],
|
||||
"thirdParty": []
|
||||
"domain": "sport.at",
|
||||
"hosting": "Nicht angegeben",
|
||||
"analytics": "Nicht angegeben",
|
||||
"features": [
|
||||
"FAQ",
|
||||
"Team-Seite",
|
||||
"Buchungssystem für Kurse",
|
||||
"Mitgliederbereich"
|
||||
]
|
||||
},
|
||||
"content": {
|
||||
"languages": ["de"],
|
||||
"defaultLanguage": "de",
|
||||
"contentSources": []
|
||||
"notes": {
|
||||
"userNotes": "",
|
||||
"openQuestions": [
|
||||
{
|
||||
"field": "technical.hosting",
|
||||
"question": "Welcher Hosting-Anbieter wird verwendet?",
|
||||
"category": "technical"
|
||||
},
|
||||
"timeline": {
|
||||
"kickoff": "",
|
||||
"milestones": [],
|
||||
"launch": ""
|
||||
},
|
||||
"notes": ""
|
||||
{
|
||||
"field": "technical.analytics",
|
||||
"question": "Welche Analytics-Lösung wird implementiert?",
|
||||
"category": "technical"
|
||||
}
|
||||
],
|
||||
"llmResearch": {
|
||||
"industryInsights": "1. Digitalisierung im Fitnessbereich: Immer mehr Fitnessstudios und Sportanbieter setzen auf digitale Lösungen wie Apps und Online-Kurse. 2. Personalisierung von Fitnessangeboten: Individuelle Trainingspläne und Ernährungsberatung werden zunehmend nachgefragt. 3. Nachhaltigkeit im Sport: Umweltfreundliche Produkte und Dienstleistungen gewinnen an Bedeutung. 4. Wellness und mentale Gesundheit: Der Fokus auf ganzheitliches Wohlbefinden wird immer wichtiger. 5. Community-Building: Die Schaffung von Gemeinschaften durch soziale Medien und Events ist ein wachsender Trend.",
|
||||
"competitorAnalysis": "Wettbewerber in der Sport-/Fitnessbranche nutzen oft ein modernes, ansprechendes Design mit klaren Call-to-Action-Elementen. Häufige Features sind Buchungssysteme für Kurse, Mitgliederbereiche und Blogs. Viele Websites bieten auch interaktive Elemente wie Fitness-Tracker oder Ernährungspläne. Stärken der Wettbewerber sind die Benutzerfreundlichkeit und die Integration von Social-Media-Elementen. Eine Lücke besteht oft in der Personalisierung der Nutzererfahrung und der Bereitstellung von Inhalten, die über das Standardangebot hinausgehen.",
|
||||
"seoKeywords": [
|
||||
"Fitnessstudio Wien",
|
||||
"Personal Training Österreich",
|
||||
"Online Fitnesskurse",
|
||||
"Gesunde Ernährung Tipps",
|
||||
"Sportartikel kaufen",
|
||||
"Yoga Kurse Wien",
|
||||
"Fitness Community",
|
||||
"Ernährungsberatung",
|
||||
"Krafttraining für Anfänger",
|
||||
"Lauftraining Tipps",
|
||||
"Fitness Trends 2023",
|
||||
"Gesundheitsbewusstsein",
|
||||
"Sportevents in Österreich",
|
||||
"Nachhaltige Sportmode",
|
||||
"Wellness und Fitness"
|
||||
],
|
||||
"contentGuidelines": "Die Website sollte in einem premium und exklusiven Ton kommunizieren, der Vertrauen und Expertise ausstrahlt. Botschaften sollten klar und ansprechend sein, mit einem Fokus auf die individuellen Bedürfnisse der Kunden. Das Wertversprechen sollte die Qualität der Dienstleistungen und Produkte betonen sowie die Vorteile einer Mitgliedschaft oder Nutzung der Angebote hervorheben.",
|
||||
"generatedAt": "2026-01-29T15:32:14.385Z"
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"visibility": "public",
|
||||
"autoInit": false
|
||||
}
|
||||
}
|
||||
@@ -1,44 +1,29 @@
|
||||
{
|
||||
"$schema": "./design_tokens.schema.json",
|
||||
"specVersion": "1.0",
|
||||
"colors": {
|
||||
"primary": "#000000",
|
||||
"secondary": "#666666",
|
||||
"accent": "#0066cc",
|
||||
"primary": "#2563eb",
|
||||
"secondary": "#64748b",
|
||||
"accent": "#f59e0b",
|
||||
"neutral": "#f3f4f6",
|
||||
"background": "#ffffff",
|
||||
"foreground": "#000000",
|
||||
"muted": "#f5f5f5",
|
||||
"border": "#e5e5e5",
|
||||
"error": "#dc2626",
|
||||
"success": "#16a34a",
|
||||
"warning": "#ca8a04"
|
||||
"foreground": "#0f172a",
|
||||
"muted": "#e5e7eb",
|
||||
"mutedForeground": "#374151",
|
||||
"border": "#d1d5db",
|
||||
"success": "#4ade80",
|
||||
"warning": "#fbbf24",
|
||||
"error": "#ef4444"
|
||||
},
|
||||
"typography": {
|
||||
"fontFamilies": {
|
||||
"sans": "system-ui, -apple-system, sans-serif",
|
||||
"serif": "Georgia, serif",
|
||||
"mono": "ui-monospace, monospace"
|
||||
"fonts": {
|
||||
"heading": {
|
||||
"family": "Inter",
|
||||
"fallback": "sans-serif",
|
||||
"weight": "700"
|
||||
},
|
||||
"fontSizes": {
|
||||
"xs": "0.75rem",
|
||||
"sm": "0.875rem",
|
||||
"base": "1rem",
|
||||
"lg": "1.125rem",
|
||||
"xl": "1.25rem",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "3rem"
|
||||
},
|
||||
"fontWeights": {
|
||||
"normal": 400,
|
||||
"medium": 500,
|
||||
"semibold": 600,
|
||||
"bold": 700
|
||||
},
|
||||
"lineHeights": {
|
||||
"tight": 1.25,
|
||||
"normal": 1.5,
|
||||
"relaxed": 1.75
|
||||
"body": {
|
||||
"family": "Inter",
|
||||
"fallback": "sans-serif",
|
||||
"weight": "400"
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
@@ -48,20 +33,79 @@
|
||||
"lg": "1.5rem",
|
||||
"xl": "2rem",
|
||||
"2xl": "3rem",
|
||||
"3xl": "4rem"
|
||||
"3xl": "4rem",
|
||||
"4xl": "6rem",
|
||||
"5xl": "8rem",
|
||||
"6xl": "10rem",
|
||||
"section": "5rem",
|
||||
"container": "1200px",
|
||||
"containerPadding": "1.5rem"
|
||||
},
|
||||
"borderRadius": {
|
||||
"none": "0",
|
||||
"sm": "0.25rem",
|
||||
"md": "0.5rem",
|
||||
"lg": "1rem",
|
||||
"lg": "0.75rem",
|
||||
"xl": "1rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"shadows": {
|
||||
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||||
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
|
||||
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
|
||||
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
|
||||
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.1)",
|
||||
"md": "0 4px 8px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
||||
"lg": "0 10px 20px -3px rgb(0 0 0 / 0.15), 0 4px 8px -4px rgb(0 0 0 / 0.1)",
|
||||
"xl": "0 20px 30px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.15)"
|
||||
},
|
||||
"typography": {
|
||||
"xs": {
|
||||
"size": "0.75rem",
|
||||
"lineHeight": "1rem",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"sm": {
|
||||
"size": "0.875rem",
|
||||
"lineHeight": "1.25rem",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"base": {
|
||||
"size": "1rem",
|
||||
"lineHeight": "1.5rem",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"lg": {
|
||||
"size": "1.125rem",
|
||||
"lineHeight": "1.75rem",
|
||||
"letterSpacing": "0"
|
||||
},
|
||||
"xl": {
|
||||
"size": "1.5rem",
|
||||
"lineHeight": "2rem",
|
||||
"letterSpacing": "-0.01em"
|
||||
},
|
||||
"2xl": {
|
||||
"size": "1.75rem",
|
||||
"lineHeight": "2.25rem",
|
||||
"letterSpacing": "-0.015em"
|
||||
},
|
||||
"3xl": {
|
||||
"size": "2rem",
|
||||
"lineHeight": "2.5rem",
|
||||
"letterSpacing": "-0.02em"
|
||||
},
|
||||
"4xl": {
|
||||
"size": "2.5rem",
|
||||
"lineHeight": "2.75rem",
|
||||
"letterSpacing": "-0.025em"
|
||||
},
|
||||
"5xl": {
|
||||
"size": "3rem",
|
||||
"lineHeight": "1.1",
|
||||
"letterSpacing": "-0.03em"
|
||||
},
|
||||
"6xl": {
|
||||
"size": "3.75rem",
|
||||
"lineHeight": "1.1",
|
||||
"letterSpacing": "-0.03em"
|
||||
}
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
@@ -69,27 +113,5 @@
|
||||
"lg": "1024px",
|
||||
"xl": "1280px",
|
||||
"2xl": "1536px"
|
||||
},
|
||||
"transitions": {
|
||||
"duration": {
|
||||
"fast": "150ms",
|
||||
"normal": "300ms",
|
||||
"slow": "500ms"
|
||||
},
|
||||
"easing": {
|
||||
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
||||
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
||||
"inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
}
|
||||
},
|
||||
"zIndex": {
|
||||
"base": 0,
|
||||
"dropdown": 100,
|
||||
"sticky": 200,
|
||||
"fixed": 300,
|
||||
"modal": 400,
|
||||
"popover": 500,
|
||||
"tooltip": 600
|
||||
}
|
||||
}
|
||||
@@ -1,49 +1,63 @@
|
||||
@import "tailwindcss";
|
||||
@import "./stylesheet.css";
|
||||
|
||||
/*
|
||||
* CSS Variables - Single Source of Truth
|
||||
* These variables are placeholders. Override them per project via design_tokens.json
|
||||
*/
|
||||
/* ═══════════════════════════════════════════════════════════ */
|
||||
/* globals.css – Single Source of Truth (CSS Custom Props) */
|
||||
/* Generated by website-prototype-generator */
|
||||
/* DO NOT add layout or component styles here. */
|
||||
/* ═══════════════════════════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
/* Colors - Placeholders */
|
||||
--color-primary: #000000;
|
||||
--color-secondary: #666666;
|
||||
--color-accent: #0066cc;
|
||||
/* ── Colors ──────────────────────────────────────── */
|
||||
--color-primary: #2563eb;
|
||||
--color-secondary: #64748b;
|
||||
--color-accent: #f59e0b;
|
||||
--color-neutral: #f3f4f6;
|
||||
--color-background: #ffffff;
|
||||
--color-foreground: #000000;
|
||||
--color-muted: #f5f5f5;
|
||||
--color-border: #e5e5e5;
|
||||
--color-error: #dc2626;
|
||||
--color-success: #16a34a;
|
||||
--color-warning: #ca8a04;
|
||||
--color-foreground: #0f172a;
|
||||
--color-muted: #e5e7eb;
|
||||
--color-muted-foreground: #374151;
|
||||
--color-border: #d1d5db;
|
||||
--color-success: #4ade80;
|
||||
--color-warning: #fbbf24;
|
||||
--color-error: #ef4444;
|
||||
|
||||
/* Typography - Placeholders */
|
||||
--font-sans: system-ui, -apple-system, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
/* ── Typography – Families ────────────────────────── */
|
||||
--font-heading: 'Inter', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--font-heading-weight: 700;
|
||||
--font-body-weight: 400;
|
||||
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
--font-size-5xl: 3rem;
|
||||
/* ── Typography – Scale ───────────────────────────── */
|
||||
--text-xs: 0.75rem;
|
||||
--text-xs-line-height: 1rem;
|
||||
--text-xs-letter-spacing: 0;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm-line-height: 1.25rem;
|
||||
--text-sm-letter-spacing: 0;
|
||||
--text-base: 1rem;
|
||||
--text-base-line-height: 1.5rem;
|
||||
--text-base-letter-spacing: 0;
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg-line-height: 1.75rem;
|
||||
--text-lg-letter-spacing: 0;
|
||||
--text-xl: 1.5rem;
|
||||
--text-xl-line-height: 2rem;
|
||||
--text-xl-letter-spacing: -0.01em;
|
||||
--text-2xl: 1.75rem;
|
||||
--text-2xl-line-height: 2.25rem;
|
||||
--text-2xl-letter-spacing: -0.015em;
|
||||
--text-3xl: 2rem;
|
||||
--text-3xl-line-height: 2.5rem;
|
||||
--text-3xl-letter-spacing: -0.02em;
|
||||
--text-4xl: 2.5rem;
|
||||
--text-4xl-line-height: 2.75rem;
|
||||
--text-4xl-letter-spacing: -0.025em;
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl-line-height: 1.1;
|
||||
--text-5xl-letter-spacing: -0.03em;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl-line-height: 1.1;
|
||||
--text-6xl-letter-spacing: -0.03em;
|
||||
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.75;
|
||||
|
||||
/* Spacing - Placeholders */
|
||||
/* ── Spacing ─────────────────────────────────────── */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
@@ -51,75 +65,31 @@
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
--spacing-3xl: 4rem;
|
||||
--spacing-4xl: 6rem;
|
||||
--spacing-5xl: 8rem;
|
||||
--spacing-6xl: 10rem;
|
||||
--spacing-section: 5rem;
|
||||
--spacing-container: 1200px;
|
||||
--spacing-container-padding: 1.5rem;
|
||||
|
||||
/* Border Radius - Placeholders */
|
||||
/* ── Border Radius ───────────────────────────────── */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows - Placeholders */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
/* ── Shadows ─────────────────────────────────────── */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.15), 0 4px 8px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 30px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.15);
|
||||
|
||||
/* Transitions - Placeholders */
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 300ms;
|
||||
--duration-slow: 500ms;
|
||||
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Z-Index Scale */
|
||||
--z-base: 0;
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-fixed: 300;
|
||||
--z-modal: 400;
|
||||
--z-popover: 500;
|
||||
--z-tooltip: 600;
|
||||
}
|
||||
|
||||
/*
|
||||
* Base Resets
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
/* ── Breakpoints (reference) ─────────────────────── */
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1024px;
|
||||
--breakpoint-xl: 1280px;
|
||||
--breakpoint-2xl: 1536px;
|
||||
}
|
||||
|
||||
@@ -1,53 +1,70 @@
|
||||
/*
|
||||
* Stylesheet
|
||||
*
|
||||
* Project-specific styles go here.
|
||||
* This file is imported by globals.css.
|
||||
*
|
||||
* Structure:
|
||||
* 1. Component Styles
|
||||
* 2. Layout Styles
|
||||
* 3. Page-specific Styles
|
||||
* 4. Utility Classes
|
||||
* 5. Animations
|
||||
*/
|
||||
/* ═══════════════════════════════════════════════════════════ */
|
||||
/* stylesheet.css – Structural framework */
|
||||
/* Uses variables from globals.css (Single Source of Truth) */
|
||||
/* Generated by website-prototype-generator */
|
||||
/* ═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ==========================================================================
|
||||
1. Component Styles
|
||||
========================================================================== */
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Components are added per project */
|
||||
/* ── Base Resets ───────────────────────────────────── */
|
||||
|
||||
/* ==========================================================================
|
||||
2. Layout Styles
|
||||
========================================================================== */
|
||||
|
||||
/* Layout styles are added per project */
|
||||
|
||||
/* ==========================================================================
|
||||
3. Page-specific Styles
|
||||
========================================================================== */
|
||||
|
||||
/* Page styles are added per project */
|
||||
|
||||
/* ==========================================================================
|
||||
4. Utility Classes
|
||||
========================================================================== */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Animations
|
||||
========================================================================== */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Animations are added per project */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--font-body-weight);
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background);
|
||||
line-height: var(--text-base-line-height);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* ── Headings ─────────────────────────────────────── */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--font-heading-weight);
|
||||
}
|
||||
|
||||
/* ── Links ───────────────────────────────────────── */
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Images ──────────────────────────────────────── */
|
||||
|
||||
img, video, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* ── Focus ───────────────────────────────────────── */
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Selection ──────────────────────────────────── */
|
||||
|
||||
::selection {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user