Vibe Code an Event Planner Website

Build a one-page event / wedding planner portfolio 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
═══════════════════════════════════════════════════════════════
- Planner name: [FULL NAME] or [STUDIO NAME]
- City / region served: [CITY], available for travel
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + Pinterest (open in new tab, rel="noopener")
- Specialty: weddings / corporate / private dinners (pick 1-2)
- Currency: [USD / EUR / etc.]
- Booking: inquiry form + click-to-email
- Inquiry response time: 24-48 hours
- Founded year: [YEAR]

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: dusty blush (#dfb8a8), ivory (#f7f0e3), deep ink (#13110f),
 single muted-sage accent (#a4b599), gold accent for italics (#b88a3a).
 Override if user provides; derive variants for AA contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Romantic editorial. Magazine-spread feel. Refined, image-led, NEVER
 cliched-wedding-blogger pink-and-sparkles.
- Type pairing: high-contrast display serif for headings (Cormorant
 Garamond, Fraunces) + Inter for body. ONE italic accent in italic serif.
 NO script fonts, NO Allura, NO Pacifico.
- Eyebrow labels: uppercase, tracked .26em (extra-wide), gold, prefixed
 by a 32px CSS ::before line in muted-sage.
- Headlines: short, refined, with ONE italic accent ("Beautifully
 *orchestrated*. Effortlessly *enjoyed*."). Italic words in gold-foil
 gradient.
- Generous whitespace, asymmetric photo grids, soft transitions on hover.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.4 (thin for elegance), round caps. Cover: ring, flower
 (geometric line), table, candle, calendar, clock, pin, phone, mail,
 envelope-letter, star, arrow-right.
- Icon containers: 44x44 thin-outline squares with gold border (1px), flip
 to filled blush with ink icon on hover.
- Motion: very slow scroll fade-ins (0.7s ease-out), subtle Ken Burns on
 hero, soft hover lifts (4px) on portfolio cards.

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

1. FIXED NAV (glass ivory translucent + backdrop blur)
 - Wordmark (large serif, all-lowercase) left | anchor nav center |
 "Inquire" gold pill CTA right
 - Mobile: hamburger to slide-in full-width menu

2. HERO
 - Full-bleed photo top (cover, 85vh on desktop, Unsplash search:
 "wedding tablescape candles" or "garden party reception") with subtle
 blush gradient overlay bottom
 - Overlay text bottom-left on translucent ivory pill: eyebrow with
 line marker, large headline ("Beautifully *orchestrated*. Effortlessly
 *enjoyed*."), 2-line subhead, primary "Inquire" gold CTA
 - Ken Burns very-slow zoom (15s loop)

3. SERVICES
 - Eyebrow + headline ("Three *ways* I plan")
 - 4-card horizontal row (stack mobile): Full Planning / Partial Planning
 / Month-of Coordination / Corporate Events
 - Each: 44x44 gold-outline icon badge + service name (serif italic) +
 starting price (large serif gold) + 3-line "what's included" in prose
 with check icons + "Inquire about this" link
 - Middle card visually elevated (subtle drop shadow + 1px ink border)

4. FEATURED EVENTS / REAL WEDDINGS
 - Eyebrow + headline ("Selected *celebrations*")
 - 4 vertical case-study cards in 2x2 grid (stack mobile, 1-column)
 - Each: full-bleed hero photo top (rounded 8px), couple names ("Maria
 & Tomás"), location, season, "View story →" gold link
 - Subtle hover: photo zooms 1.04, link underline animates

5. ABOUT
 - Two-column: portrait left (rounded 16px, gold border 1px), text right
 - Right: eyebrow, headline ("I'm *[FIRST NAME]*"), 3-paragraph bio (the
 event that started this work, total events planned, education /
 credentials), philosophy line in italic serif

6. PROCESS
 - 6-step illustrated timeline (horizontal desktop, vertical mobile)
 - Each: large outlined gold numeral (01-06) in serif italic + step
 title + 1-sentence description
 - Steps: Consult → Sign → Design → Vendor coordination → Rehearsal →
 Event day
 - Thin sage connector line between steps on desktop

7. VENDORS & PARTNERS
 - Thin ivory section, borders top/bottom
 - "TRUSTED *PARTNERS*" label left + 8 typeset partner names right (mix
 of italic serif and uppercase sans, florists, caterers, DJs,
 venues, names only, NO logos)

8. TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation in muted ink, quote body (specific
 moment from the day, "She found a backup venue at 4am during the
 hurricane warning", varied lengths), separator, gradient-circle
 initials avatar + couple names + location + year ("Maria & Tomás - 
 Tuscany, 2024")
 - NO fake stock photos

9. PRESS / FEATURED IN
 - Thin section, borders top/bottom
 - "AS FEATURED IN" label left + 6 typeset publication names right
 (Brides, Style Me Pretty, Martha Stewart, typeset only, no logos)

10. INQUIRY FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Tell me about *your event*"), small
 paragraph about response time + how it starts
 - Right: ivory card with thin ink border (1px)
 • Fields: name(s) of host(s), email, phone, event type (select:
 Wedding / Engagement Party / Anniversary / Corporate / Other),
 event date (or "not set"), location (city or "TBD"), guest count
 (select: <50, 50-100, 100-200, 200+), package interest, budget
 range, vision (textarea)
 • Honeypot field (visually hidden)
 • Submit gold button, full-width
 • Inline JS success message (preventDefault)

11. INSTAGRAM STRIP
 - "ON INSTAGRAM @[HANDLE]" label center + 8-image masonry grid below
 (Unsplash search: "wedding details", "floral arrangement", "table
 setting")
 - Each rounded 8px, hover slight desaturate
 - "Follow for daily inspiration →" Instagram link at bottom

12. FOOTER (ivory)
 - Centered wordmark (large serif, lowercase)
 - Italic serif tagline below (NOT handwritten, e.g., "Available for
 travel worldwide")
 - Social row: ink real SVG icons in gold-bordered circles (Instagram
 + Pinterest)
 - Bottom: contact email + city + copyright + small print "Site by
 [DESIGNER]" placeholder

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `EventPlanner` + `Person` schema in <head> with name, address,
 telephone, areaServed, image
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=1200&q=85&auto=format&fit=crop for
 hero/portfolio, ?w=600 for thumbnails
- Hero loading="eager", everything else "lazy", decoding="async"
- Image alt text describes the specific moment, not "wedding" generic
- tel:/mailto: links; mailto with prefilled subject
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- Favicon: inline SVG data URI (ring or floral mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
First-person, intimate, observational. Treats events as living moments,
not "packages". Specific over generic ("Twelve courses for a wedding of
thirty, plated outside under string lights", not "memorable celebration").
Headlines short with ONE italic word. Body copy avoids cliches ("magical
day", "fairytale event"), uses sensory specifics. Testimonials should
feel like real reviews, specific event moments, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (rings, hearts, sparkles)
- No script/handwritten fonts (no Allura, no Caveat)
- No "fairytale", "magical day", "your perfect day" filler
- No fake stock photos of generic models in wedding attire
- No real "Best of Weddings" badge graphics, typeset press names
- No bright bridal-pink gradients
- No exclamation marks in body copy
- No client photos in testimonials (initials avatars only)
- No spinning ring cursors or floating heart particles


═══════════════════════════════════════════════════════════════
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: "ProfessionalService" 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. Include JSON-LD
schema. Show the file as a single code block and briefly summarize the
design decisions made.