red/.planning/phases/02-marketing-site/02-01-PLAN.md

---
phase: 02-marketing-site
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - teressa-copeland-homes/app/page.tsx
  - teressa-copeland-homes/app/_components/SiteNav.tsx
  - teressa-copeland-homes/app/_components/HeroSection.tsx
  - teressa-copeland-homes/app/_components/TestimonialsSection.tsx
  - teressa-copeland-homes/app/_components/ListingsPlaceholder.tsx
  - teressa-copeland-homes/app/_components/SiteFooter.tsx
  - teressa-copeland-homes/app/globals.css
autonomous: true
requirements:
  - MKTG-01
  - MKTG-02
  - MKTG-04

must_haves:
  truths:
    - "Visitor sees a split-panel hero with Teressa's photo on the left and bio copy on the right"
    - "Visitor sees an auto-scrolling testimonials carousel that rotates every 5 seconds and pauses on hover"
    - "Visitor sees a 'Listings Coming Soon' placeholder section with brand styling"
    - "Sticky nav stays visible on scroll and anchor links smooth-scroll to each section"
    - "Footer shows Teressa's name, license number (with verify comment), and copyright year"
  artifacts:
    - path: "teressa-copeland-homes/app/page.tsx"
      provides: "Homepage route — composes all section components in correct order"
    - path: "teressa-copeland-homes/app/_components/SiteNav.tsx"
      provides: "Sticky nav with wordmark, desktop links, mobile hamburger"
    - path: "teressa-copeland-homes/app/_components/HeroSection.tsx"
      provides: "Split-panel hero with next/image + placeholder copy"
    - path: "teressa-copeland-homes/app/_components/TestimonialsSection.tsx"
      provides: "Auto-scrolling carousel — useState/useEffect, arrows, dots"
    - path: "teressa-copeland-homes/app/_components/ListingsPlaceholder.tsx"
      provides: "Listings coming soon section with brand colors"
    - path: "teressa-copeland-homes/app/_components/SiteFooter.tsx"
      provides: "Footer with name, license number, copyright, nav links"
  key_links:
    - from: "teressa-copeland-homes/app/page.tsx"
      to: "app/_components/*.tsx"
      via: "named imports, composed in section order"
      pattern: "import.*from.*_components"
    - from: "teressa-copeland-homes/app/_components/SiteNav.tsx"
      to: "section ids (hero, about, listings, contact)"
      via: "href anchor links + CSS scroll-behavior: smooth"
      pattern: "href=\"#"
    - from: "teressa-copeland-homes/app/_components/TestimonialsSection.tsx"
      to: "interval cleanup"
      via: "useEffect return clearInterval"
      pattern: "clearInterval"
---

<objective>
Build the static visual shell of the public homepage: sticky nav, hero section, testimonials carousel, listings placeholder, and footer. No external services — pure React/Next.js components styled with brand colors.

Purpose: Establishes the public face of teressacopelandhomes.com with Teressa's professional brand presence.
Output: Six component files + updated page.tsx and globals.css.
</objective>

<execution_context>
@/Users/ccopeland/.claude/get-shit-done/workflows/execute-plan.md
@/Users/ccopeland/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@/Users/ccopeland/temp/red/.planning/PROJECT.md
@/Users/ccopeland/temp/red/.planning/ROADMAP.md
@/Users/ccopeland/temp/red/.planning/phases/02-marketing-site/02-CONTEXT.md
@/Users/ccopeland/temp/red/.planning/phases/02-marketing-site/02-RESEARCH.md

Brand colors: navy #1B2B4B, gold #C9A84C, cream #FAF9F7
Hero photo: public/red.jpg (already in project)
</context>

<tasks>

<task type="auto">
  <name>Task 1: Scaffold page route and section components (nav, hero, listings, footer)</name>
  <files>
    teressa-copeland-homes/app/page.tsx
    teressa-copeland-homes/app/_components/SiteNav.tsx
    teressa-copeland-homes/app/_components/HeroSection.tsx
    teressa-copeland-homes/app/_components/ListingsPlaceholder.tsx
    teressa-copeland-homes/app/_components/SiteFooter.tsx
    teressa-copeland-homes/app/globals.css
  </files>
  <action>
1. Add `html { scroll-behavior: smooth; }` and `section[id] { scroll-margin-top: 72px; }` to globals.css.

2. Create `app/_components/SiteNav.tsx` — 'use client'. Sticky nav (position: sticky, top: 0, z-index: 50, background #1B2B4B, color #FAF9F7). Left: wordmark "Teressa Copeland" bold. Right: desktop anchor links (Home→#hero, About→#about, Listings→#listings, Contact→#contact) hidden on mobile. Mobile: hamburger Menu/X icon from lucide-react toggles a dropdown drawer with the same links. On mobile link click, close the drawer. Check if lucide-react is installed (`grep lucide teressa-copeland-homes/package.json`); if absent, run `npm install lucide-react` first from the teressa-copeland-homes directory.

3. Create `app/_components/HeroSection.tsx` — server component. Section id="hero". Split-panel layout: left half = `<div style={{ position: 'relative', minHeight: '500px' }}>` with `<Image src="/red.jpg" alt="Teressa Copeland" fill style={{ objectFit: 'cover', objectPosition: 'center top' }} priority />`. Right half = flex column: headline, subheading, bio paragraph, and "Get in Touch" button (href="#contact", background #C9A84C, color #1B2B4B). ALL copy must be wrapped in clearly labelled comments:
   ```
   {/* PLACEHOLDER HEADLINE — replace before launch */}
   {/* PLACEHOLDER BIO — replace before launch */}
   ```
   Sample copy: headline "Your Trusted Utah Real Estate Partner", subheading "Helping Utah families find the home they deserve", bio paragraph (~3 sentences about Teressa's experience, Utah market expertise, commitment to clients). Use next/image for the photo.

4. Create `app/_components/ListingsPlaceholder.tsx` — server component. Section id="listings", background #1B2B4B, color #FAF9F7. Center-aligned: Home icon (lucide-react) at ~48px, heading "Listings Coming Soon", brief description ("Teressa is actively curating listings in your area. Check back soon or reach out directly."). A "Contact Teressa" link button (href="#contact", border #C9A84C, color #C9A84C).

5. Create `app/_components/SiteFooter.tsx` — server component. Background #1B2B4B, color #FAF9F7, padding 2rem. Three rows: (1) "Teressa Copeland Homes" bold, (2) license line with comment `{/* TODO: Verify license number before launch — last two chars may be "00" (zeros) or "OO" (letters O) */}` then text "Utah Real Estate License: 14196185-SA00", (3) copyright `© {new Date().getFullYear()} Teressa Copeland Homes. All rights reserved.` Repeated nav links row (same four anchors).

6. Update `app/page.tsx` to import and render components in order: `<SiteNav />` → `<HeroSection />` → (TestimonialsSection placeholder) → `<ListingsPlaceholder />` → (ContactSection placeholder — just a `<section id="contact" />` stub) → `<SiteFooter />`. Page is a server component; client islands are the individual components. Remove any existing placeholder content from the Phase 1 dashboard stub if it is in page.tsx (it likely is not — check first).
  </action>
  <verify>
    <automated>cd /Users/ccopeland/temp/red/teressa-copeland-homes && npm run build 2>&1 | tail -20</automated>
  </verify>
  <done>Build succeeds with no TypeScript errors. All six files exist. `npm run dev` serves a page at localhost:3000 that shows the navy nav, hero split panel with photo, listings placeholder section, and footer.</done>
</task>

<task type="auto">
  <name>Task 2: Build testimonials carousel component</name>
  <files>
    teressa-copeland-homes/app/_components/TestimonialsSection.tsx
    teressa-copeland-homes/app/page.tsx
  </files>
  <action>
Create `app/_components/TestimonialsSection.tsx` — 'use client'.

State: `useState(0)` for activeIndex, `useState(false)` for paused. `useRef` for interval ID.

useEffect: When not paused, set a 5000ms interval that advances activeIndex via `setActive(i => (i + 1) % TESTIMONIALS.length)`. Cleanup MUST return `clearInterval(intervalRef.current)` — prevents memory leak on re-render.

Handlers: `prev()` decrements index with wraparound. `next()` increments. Dot buttons call `setActive(i)` directly.

Mouse events: `onMouseEnter` sets paused=true, `onMouseLeave` sets paused=false on the outer section.

TESTIMONIALS array — 5 entries, clearly commented as placeholders:
```
// PLACEHOLDER TESTIMONIALS — replace with real client reviews before launch
{ quote: "Working with Teressa made buying our first home in Salt Lake County feel effortless. She guided us through every step with patience and expertise.", name: "Sarah Mitchell" },
{ quote: "Teressa sold our Provo home in under a week — above asking price. Her knowledge of the Utah market is exceptional.", name: "James & Karen Olsen" },
{ quote: "As first-time buyers, we had so many questions. Teressa answered every one and found us the perfect home in our budget.", name: "Tyler Reeves" },
{ quote: "Relocating from out of state is stressful, but Teressa made our transition to Utah smooth and seamless.", name: "Michelle Torres" },
{ quote: "Teressa's negotiating skills saved us thousands. We couldn't be happier with our new home in Herriman.", name: "David & Pam Christensen" },
```

Layout: Section id="about", background #FAF9F7, padding generous (4rem 2rem). Center-aligned. Gold quote mark decorative. Blockquote with quote text, em dash + name attribution. Below: left ChevronLeft arrow button + right ChevronRight arrow button (from lucide-react). Below arrows: dot row — one small circle per testimonial, full opacity for active, 0.3 opacity for inactive.

Wire into page.tsx: replace the TestimonialsSection placeholder with `<TestimonialsSection />`.
  </action>
  <verify>
    <automated>cd /Users/ccopeland/temp/red/teressa-copeland-homes && npm run build 2>&1 | tail -20</automated>
  </verify>
  <done>Build succeeds. TestimonialsSection renders in correct position between hero and listings on the homepage. Five placeholder testimonials cycle every 5 seconds. Arrow and dot controls are present.</done>
</task>

</tasks>

<verification>
- `npm run build` exits 0 with no TypeScript errors
- `app/page.tsx` renders sections in correct order: SiteNav → HeroSection → TestimonialsSection → ListingsPlaceholder → ContactSection stub → SiteFooter
- All placeholder copy has clear `// PLACEHOLDER` comments
- Footer license number has `// TODO: Verify` comment
- No link to `/agent/login` anywhere on the public page
</verification>

<success_criteria>
- Hero section shows split panel with photo on left, bio copy + "Get in Touch" CTA on right
- Testimonials rotate automatically; arrow and dot controls work; hover pauses rotation
- Listings placeholder section is visible with brand navy background
- Sticky nav stays fixed on scroll; anchor links reference correct section IDs
- Footer shows license number with verification comment
- Build passes with zero errors
</success_criteria>

<output>
After completion, create `/Users/ccopeland/temp/red/.planning/phases/02-marketing-site/02-01-SUMMARY.md`
</output>