` with `
`. 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: `
` → `
` → (TestimonialsSection placeholder) → `
` → (ContactSection placeholder — just a `
` stub) → `
`. 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).
cd /Users/ccopeland/temp/red/teressa-copeland-homes && npm run build 2>&1 | tail -20
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.
Task 2: Build testimonials carousel component
teressa-copeland-homes/app/_components/TestimonialsSection.tsx
teressa-copeland-homes/app/page.tsx
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 ``.
cd /Users/ccopeland/temp/red/teressa-copeland-homes && npm run build 2>&1 | tail -20
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.
- `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
- 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