docs(02-02): complete contact form plan — SUMMARY, STATE, plans tracked
- Create 02-02-SUMMARY.md: contact form outcomes, decisions, deviations - Update STATE.md: position, decisions (nodemailer v7 pin, useActionState React 19, honeypot pattern) - Add 02-01-PLAN.md, 02-02-PLAN.md, 02-03-PLAN.md to version control - Mark MKTG-03 requirement complete Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Chandler Copeland
172
.planning/phases/02-marketing-site/02-01-PLAN.md
Normal file
172
.planning/phases/02-marketing-site/02-01-PLAN.md
Normal file
@@ -0,0 +1,172 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user