docs(02): create phase 2 content plans

2026-04-11 03:58:21 +02:00
parent 308f1a3179
commit 4fc78bd414
4 changed files with 756 additions and 2 deletions
@@ -0,0 +1,208 @@
+---
+phase: 02-content
+plan: 02
+type: execute
+wave: 2
+depends_on: [02-01]
+files_modified:
+  - app/components/sections/HeroSection.vue
+  - app/components/sections/TestimonialsSection.vue
+  - app/components/layout/AppHeader.vue
+  - app/pages/index.vue
+autonomous: true
+requirements: [CONT-01, CONT-04]
+
+must_haves:
+  truths:
+    - "Homepage H1 contains 'Hytale' via i18n key"
+    - "Hero CTAs are Discord + Contact per D-02"
+    - "Badge uses i18n key, not hardcoded string"
+    - "TestimonialsSection accepts featured prop and filters accordingly"
+    - "Homepage shows 2-3 featured testimonials only"
+    - "Nav includes /hytale link"
+  artifacts:
+    - path: "app/components/sections/HeroSection.vue"
+      provides: "Hytale-branded hero with i18n"
+      contains: "t('home.title')"
+    - path: "app/components/sections/TestimonialsSection.vue"
+      provides: "Filterable testimonials with featured prop"
+      contains: "featured"
+    - path: "app/components/layout/AppHeader.vue"
+      provides: "Nav with /hytale link"
+      contains: "hytale"
+  key_links:
+    - from: "app/components/sections/HeroSection.vue"
+      to: "i18n/locales/fr.json"
+      via: "t('home.title')"
+      pattern: "t\\('home\\."
+    - from: "app/components/sections/TestimonialsSection.vue"
+      to: "app/data/testimonials.ts"
+      via: "import testimonials + filter on featured"
+      pattern: "featured"
+---
+
+<objective>
+Refonte hero homepage for Hytale branding, testimonials featured filtering, and nav update.
+
+Purpose: The homepage must immediately communicate that Killian is a Hytale developer (CONT-01), show featured client testimonials (CONT-04), and provide navigation to the new /hytale page.
+
+Output: Updated HeroSection, TestimonialsSection with featured prop, AppHeader with /hytale nav link.
+</objective>
+
+<execution_context>
+@$HOME/.claude/get-shit-done/workflows/execute-plan.md
+@$HOME/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/phases/02-content/02-CONTEXT.md
+@.planning/phases/02-content/02-RESEARCH.md
+@.planning/phases/02-content/02-UI-SPEC.md
+@.planning/phases/02-content/02-01-SUMMARY.md
+
+@app/components/sections/HeroSection.vue
+@app/components/sections/TestimonialsSection.vue
+@app/components/layout/AppHeader.vue
+@app/pages/index.vue
+@i18n/locales/fr.json
+@i18n/locales/en.json
+
+<interfaces>
+<!-- From shared/types/index.ts (created in plan 01): -->
+export interface Testimonial {
+  name: string; role: string; company: string; avatar: string;
+  rating: number; content: string; date: string; platform: string;
+  featured?: boolean; project_type: string; results?: string[];
+}
+
+<!-- From app/data/testimonials.ts (updated in plan 01): -->
+export const testimonials: Testimonial[]  // 5 items, 3 with featured: true
+export const testimonialsStats: TestimonialsStats  // totalReviews: 5
+
+<!-- i18n keys available from plan 01: -->
+home.title, home.subtitle, home.badge.available, home.cta.discord, home.cta.contact,
+home.stats.projects, home.stats.rating, home.terminal.role, nav.hytale
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Refonte HeroSection.vue for Hytale branding + i18n</name>
+  <files>app/components/sections/HeroSection.vue</files>
+  <read_first>app/components/sections/HeroSection.vue, i18n/locales/fr.json</read_first>
+  <action>
+Modify HeroSection.vue to rebrand for Hytale per D-01 through D-07 and UI-SPEC:
+
+1. **H1 text** — Replace current title with `{{ t('home.title') }}` (renders "Hytale Plugin Developer"). Keep the existing gradient text styling from UI-SPEC: `bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent`.
+
+2. **Subtitle** — Replace with `{{ t('home.subtitle') }}` (per D-04).
+
+3. **Badge "Available for projects"** — The hardcoded string (around line 31) must become `{{ t('home.badge.available') }}` (per D-03). Keep the animated ping dot and existing styling.
+
+4. **CTAs** — Replace existing CTA buttons with exactly 2 buttons per D-02:
+   - Primary: Discord link — `UButton` with `color="primary"`, icon `i-simple-icons-discord`, text `{{ t('home.cta.discord') }}`, links to Discord URL from siteConfig.social (find Discord entry). Add `target="_blank" rel="noopener"`.
+   - Secondary: Contact — `UButton` with `variant="outline"`, text `{{ t('home.cta.contact') }}`, links to `localePath('/contact')`.
+
+5. **Floating stats cards** — Replace hardcoded "50+ projects" and "5.0 rating" strings (around lines 148-153) with `{{ t('home.stats.projects') }}` and `{{ t('home.stats.rating') }}`.
+
+6. **Terminal role** — If the hero has a terminal/code block showing a role string (like 'Full Stack Dev'), replace with `{{ t('home.terminal.role') }}` or the literal 'Hytale Plugin Developer'.
+
+7. **Right column** — Per D-05 and D-06, keep the existing 2-column grid layout. Keep whatever is on the right side (placeholder/illustration) as-is. Do NOT add an image.
+
+8. Import `siteConfig` from `~/data/site` to get the Discord URL: `siteConfig.social.find(s => s.name === 'Discord')?.url`.
+  </action>
+  <verify>
+    <automated>grep -q "t('home.title')" app/components/sections/HeroSection.vue && grep -q "t('home.badge.available')" app/components/sections/HeroSection.vue && grep -q "t('home.cta.discord')" app/components/sections/HeroSection.vue && grep -q "t('home.cta.contact')" app/components/sections/HeroSection.vue && echo "PASS" || echo "FAIL"</automated>
+  </verify>
+  <acceptance_criteria>
+    - `grep "Available for projects" app/components/sections/HeroSection.vue` returns NO matches (hardcoded string removed)
+    - `grep "t('home.title')" app/components/sections/HeroSection.vue` matches
+    - `grep "t('home.badge.available')" app/components/sections/HeroSection.vue` matches
+    - `grep "discord" app/components/sections/HeroSection.vue` shows Discord CTA
+    - `grep "t('home.cta.contact')" app/components/sections/HeroSection.vue` matches
+    - No hardcoded English/French strings remain in visible text areas
+  </acceptance_criteria>
+  <done>HeroSection displays "Hytale Plugin Developer" H1, Hytale subtitle, i18n badge, Discord+Contact CTAs, i18n stats — all via t() keys</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: TestimonialsSection featured prop + AppHeader nav + index.vue wiring</name>
+  <files>app/components/sections/TestimonialsSection.vue, app/components/layout/AppHeader.vue, app/pages/index.vue</files>
+  <read_first>app/components/sections/TestimonialsSection.vue, app/components/layout/AppHeader.vue, app/pages/index.vue</read_first>
+  <action>
+1. **TestimonialsSection.vue** — Add `featured` prop for homepage filtering (per D-15, D-17):
+   ```typescript
+   const props = defineProps<{
+     featured?: boolean
+   }>()
+   ```
+   Use a computed to filter: `const displayed = computed(() => props.featured ? testimonials.filter(t => t.featured) : testimonials)`.
+   Replace direct `testimonials` usage in the template with `displayed`. Keep existing carousel/scroll pattern (`overflow-x-auto snap-x snap-mandatory`). Keep all existing styling and structure.
+
+   Also ensure any hardcoded testimonial-related strings use i18n keys from plan 01:
+   - Section label should use `t('testimonials.label')`
+   - Section title should use `t('testimonials.title')`
+   - Stats labels: `t('testimonials.stats.reviews')`, `t('testimonials.stats.rating')`, `t('testimonials.stats.projects')`
+
+2. **AppHeader.vue** — Add /hytale nav link (per D-19). Insert after 'home' in navLinks:
+   ```typescript
+   { key: 'hytale', path: '/hytale' },
+   ```
+   This single line addition makes it appear in both desktop nav and mobile drawer (same navLinks array drives both).
+
+3. **index.vue** — Pass `featured` prop to TestimonialsSection:
+   ```html
+   <TestimonialsSection featured />
+   ```
+   This makes the homepage show only 2-3 featured testimonials instead of all 5.
+  </action>
+  <verify>
+    <automated>grep -q "featured" app/components/sections/TestimonialsSection.vue && grep -q "hytale" app/components/layout/AppHeader.vue && grep -q "featured" app/pages/index.vue && echo "PASS" || echo "FAIL"</automated>
+  </verify>
+  <acceptance_criteria>
+    - `grep "defineProps" app/components/sections/TestimonialsSection.vue` shows featured prop
+    - `grep "hytale" app/components/layout/AppHeader.vue` shows nav entry
+    - `grep "TestimonialsSection" app/pages/index.vue` shows featured prop passed
+    - Existing carousel scroll pattern preserved in TestimonialsSection
+  </acceptance_criteria>
+  <done>TestimonialsSection filters by featured prop on homepage (3 shown), all 5 shown by default. Nav includes /hytale. index.vue passes featured prop.</done>
+</task>
+
+</tasks>
+
+<threat_model>
+## Trust Boundaries
+
+| Boundary | Description |
+|----------|-------------|
+| External Discord link | Hero CTA opens external Discord URL |
+
+## STRIDE Threat Register
+
+| Threat ID | Category | Component | Disposition | Mitigation Plan |
+|-----------|----------|-----------|-------------|-----------------|
+| T-02-03 | S (Spoofing) | Discord link in HeroSection | mitigate | Use `rel="noopener"` on external link, URL from siteConfig (not user input) |
+| T-02-04 | T (Tampering) | i18n keys | accept | Static JSON files, no runtime modification |
+</threat_model>
+
+<verification>
+- Homepage H1 renders "Hytale Plugin Developer" (check via `curl localhost:3000 | grep -i hytale`)
+- Homepage shows exactly 3 featured testimonials, not all 5
+- /hytale link visible in nav (desktop and mobile)
+- No hardcoded English/French strings in HeroSection or TestimonialsSection
+- Badge shows i18n text, not "Available for projects" literal
+</verification>
+
+<success_criteria>
+- Hero communicates Hytale positioning immediately
+- Testimonials section is reusable with featured filter
+- Navigation includes /hytale link
+- All visible text uses i18n t() function
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/02-content/02-02-SUMMARY.md`
+</output>