Vibe Code a Real Estate Agent Website

Build a one-page real estate agent website as a single self-contained HTML
file (inline CSS and JS, no external dependencies except Google Fonts and
Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Agent name: [FULL NAME], REALTOR®
- Brokerage: [BROKERAGE NAME], license #[NUMBER], [STATE]
- Region / market: [CITY / METRO AREA / NEIGHBORHOODS]
- Phone: [PHONE]
- Email: [EMAIL]
- Office address: [FULL ADDRESS]
- Social: Instagram + LinkedIn URLs (open in new tab, rel="noopener")
- Years in real estate: [N]+
- Specialty: luxury / first-time buyers / relocation / investment (pick one)
- Booking: contact form + click-to-call

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: deep charcoal (#1a1a1a), off-white (#f6f4ef), gold accent
 (#bf9b56). Override if user provides hex values; derive deeper variants
 for AA contrast.
- Editorial luxury palette, never garish.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Magazine-editorial, luxury, restrained. Think the back pages of a high-end
 real estate magazine, generous whitespace, full-bleed photography,
 asymmetric grids.
- Type pairing: high-contrast serif for headings (Cormorant Garamond,
 Playfair Display) + clean sans for body (Inter Tight). NO script fonts.
- Eyebrow labels: uppercase, tracked .22em (extra wide for editorial feel),
 prefixed by a 32px CSS ::before line in gold.
- Headlines: short, declarative, with ONE italic accent ("Move with
 *confidence*"). Italic word uses subtle gold-foil gradient text fill.
- Generous gutters (96-120px on desktop). Asymmetric two-column rhythms.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.5 (thinner for elegance), round caps. Cover at minimum: home,
 key, map-pin, bed, bath, sqft, dollar, calendar, phone, mail, star,
 arrow-up-right, chat, signature.
- Icon containers: 44x44 thin-outline squares with gold border (1px), flip
 to filled charcoal with off-white icon on hover.
- Motion: slow scroll fade-ins (0.6s ease-out), subtle hover lifts on cards
 (6-8px), Ken Burns zoom only on hero image. No bouncy transitions.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. FIXED NAV (glass effect off-white translucent bg + backdrop blur)
 - Logo (badge SVG + agent's full name in serif) | nav links |
 "Schedule a Call" gold-outline pill CTA
 - Mobile: hamburger to slide-in full-width menu

2. HERO
 - Full-bleed split: agent portrait left (~45% width), text right
 - Right: eyebrow with line marker, large two-line headline with italic
 accent, 2-line subhead, two CTAs ("View Listings" gold, "Schedule a
 Call" outlined)
 - Floating pill on portrait: "Top 1% in [MARKET], [YEAR]" with star icon
 - Ken Burns slow zoom on portrait

3. ABOUT / BIO
 - Two-column: large portrait left (rounded 24px, gold-foil border), text
 right
 - Right: eyebrow, headline ("Real estate is about *people*"), 2-paragraph
 long-form bio, 3-stat row separated by border-top, homes sold, total
 volume, average days on market

4. FEATURED LISTINGS
 - Eyebrow + headline ("Currently *on the market*") + subhead
 - Auto-fit grid (minmax 360px, gap 32px) of 6 listing cards
 - Each card: large photo (cover, 320px tall, rounded 16px), status badge
 overlay top-left ("For Sale", "Sold", "Coming Soon", gold for active,
 muted for sold), price (serif, gold), address (sans), bed/bath/sqft row
 with icons, "View details →" link
 - Hover: lift 8px + subtle shadow deepen
 - Use real Unsplash interior shots (search: "luxury home interior",
 "modern kitchen")

5. NEIGHBORHOODS GUIDE
 - Eyebrow + headline ("The *neighborhoods* I know")
 - 4 cards in horizontal row (stack on mobile)
 - Each: hero photo (rounded 20px, full-bleed top), name (serif), avg home
 price, 2-line lifestyle description, "Explore →" link

6. SERVICES
 - Eyebrow + headline
 - 4-column grid: Buyers, Sellers, Investors, Relocation
 - Each: 44x44 gold-outline icon badge + service title (serif) + 2-line
 description in prose

7. STATS STRIP (dark charcoal section)
 - Off-white text, subtle gold radial accents
 - 4-column row of big numbers: homes sold, total volume sold, avg days on
 market, 5-star reviews
 - Each: oversized serif number in gold (56-72px) + small uppercase label
 below

8. CLIENT TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation mark in muted charcoal, quote body
 (specific to a transaction moment, first home, relocation, sale story - 
 varied lengths), 5 gold SVG stars, separator, gradient-circle initials
 avatar + client first name + last initial + transaction type ("Bought
 in [NEIGHBORHOOD], 2024")
 - NO photos of fake clients, initials avatars only

9. PRESS / RECOGNITION STRIP
 - Thin off-white section with subtle borders top/bottom
 - "AS FEATURED IN" or "RECOGNIZED BY" label left + 5 typographic
 publication names right (mix of italic serif and condensed uppercase
 sans, muted color, hover to gold)
 - NO real publication logos, typeset names only

10. CONTACT
 - Two-column: contact info left, schedule card right
 - Left: eyebrow, headline ("Let's *talk*"), 3-item list with gold-square
 icon badges (pin/phone/mail), each with uppercase label above value
 - Right: charcoal gradient card with gold radial accents
 • Eyebrow + headline + supporting copy
 • Form: full name, email, phone, interest (Buying / Selling /
 Investing / Relocation, select), timeline (Now / 3 months / 6 months
 / Just looking, select), message (textarea)
 • Submit gold button, full width
 • Inline JS success message (preventDefault)

11. GOOGLE MAP
 - Full-width, max-width 1300px, rounded 24px container, deep shadow
 - Iframe via Google Maps embed URL (no API key)
 - Floating overlay card top-left: small uppercase label with pulsing gold
 dot, agent name, office address, "Get directions →" link

12. STICKY MOBILE BOTTOM BAR
 - Two split buttons: "Call" + "Schedule a Tour" (gold)

13. FOOTER (dark charcoal)
 - Centered logo + serif wordmark
 - Italic serif tagline below (NOT handwritten)
 - Social row: glass-circle icons (only platforms user provides)
 - Bottom legal block: brokerage name, license number, "Equal Housing
 Opportunity" text (NOT the logo image), address, copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `RealEstateAgent` schema in <head> with name, telephone, address,
 areaServed, image (portrait URL)
- CSS custom properties for palette/gradients at top
- Smooth scroll with scroll-padding-top to clear fixed nav
- Real Unsplash images via CDN with ?w=1200&q=80&auto=format&fit=crop for
 hero/listings, ?w=600 for cards
- Hero loading="eager", everything else "lazy"
- tel:/mailto: links; mailto with prefilled subject
- Responsive at 900px and 500px breakpoints; no horizontal scroll
- Currency formatted with locale-appropriate commas
- Semantic HTML5; aria-label on icon-only links
- WCAG AA contrast on body text
- Favicon: inline SVG data URI (key or home mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Confident, restrained, editorial, never salesy. Headlines short, with ONE
italic word. Body copy specific to local geography and lifestyle ("Twenty
minutes from downtown, ten from the ridgeline", not "great location").
Speak as the agent to a sophisticated buyer or seller. Testimonials should
feel like real reviews from real transactions: specific neighborhood, specific
moment, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including the house emoji) anywhere
- No fake stock photos of agents holding "SOLD" signs
- No animated "JUST LISTED!" ribbons or pulsing badges that scream sales
- No script/handwritten fonts
- No real "Top Agent" or "Coldwell Banker" logos (use typeset names)
- No "I'm passionate about real estate" filler, be specific
- No client photos in testimonials (initials avatars only)
- No exclamation marks anywhere
- No gradient orange/yellow color schemes that scream discount-broker


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "RealEstateAgent" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~75-85KB), production-ready, that I can open in a
browser and immediately deploy. Include JSON-LD schema. Show the file as a
single code block and briefly summarize the design decisions made.