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

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
02-marketing-site	01	execute	1		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	true	MKTG-01 MKTG-02 MKTG-04	truths artifacts key_links 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 path provides teressa-copeland-homes/app/page.tsx Homepage route — composes all section components in correct order path provides teressa-copeland-homes/app/_components/SiteNav.tsx Sticky nav with wordmark, desktop links, mobile hamburger path provides teressa-copeland-homes/app/_components/HeroSection.tsx Split-panel hero with next/image + placeholder copy path provides teressa-copeland-homes/app/_components/TestimonialsSection.tsx Auto-scrolling carousel — useState/useEffect, arrows, dots path provides teressa-copeland-homes/app/_components/ListingsPlaceholder.tsx Listings coming soon section with brand colors path provides teressa-copeland-homes/app/_components/SiteFooter.tsx Footer with name, license number, copyright, nav links from to via pattern teressa-copeland-homes/app/page.tsx app/_components/*.tsx named imports, composed in section order import.*from.*_components from to via pattern teressa-copeland-homes/app/_components/SiteNav.tsx section ids (hero, about, listings, contact) href anchor links + CSS scroll-behavior: smooth href="# from to via pattern teressa-copeland-homes/app/_components/TestimonialsSection.tsx interval cleanup useEffect return clearInterval clearInterval

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.

<execution_context> @/Users/ccopeland/.claude/get-shit-done/workflows/execute-plan.md @/Users/ccopeland/.claude/get-shit-done/templates/summary.md </execution_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)

Task 1: Scaffold page route and section components (nav, hero, listings, footer) 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 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). 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 <TestimonialsSection />. 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

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

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