portfolio/.planning/phases/02-content/02-02-PLAN.md

---
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>