# MUST OBEY — Mobile-first build requirements This app's PRIMARY surface is a mobile phone. Build it impeccably on mobile FIRST, then verify on tablet and desktop. Treat the rules below as non-negotiable hard constraints, not suggestions. ## Viewports to verify (every screen, every state) - 320 px, 360 px, 375 px, 390 px, 414 px, 480 px - 768 px, 834 px (iPad portrait / Pro 11) - 1024 px, 1280 px, 1440 px, 1920 px, 2560 px - Plus: 200% browser zoom, landscape orientation on every mobile width, iPhone with safe-area insets visible ## Hard layout rules - Mobile-first CSS. Default styles target mobile; `@media (min-width: ...)` for larger viewports. - Use `dvh` and `svh` instead of `vh` for full-height surfaces (iOS Safari URL-bar bug). - Use `clamp()` for fluid typography across all viewports. - Prefer container queries (`@container`) over media queries for component-level responsiveness. - Use `min(100%, ...)` widths so content never overflows. Zero horizontal overflow at any viewport. - Add `` to every page. - Apply `padding: max(safe-area-inset-X, fallback)` on every edge-bleeding container so notched iPhones in landscape never clip content. - Wide tables and code blocks scroll INSIDE their container (`overflow-x: auto`), never push the body. - Use `background-attachment: scroll` on mobile, not `fixed` (iOS Safari repaint bug). - Avoid `backdrop-filter` on animated elements. Use it sparingly on static surfaces only. - **Canvas Scaling**: Canvases must dynamically scale with window resize events and properly handle high-DPI screens (`window.devicePixelRatio`). Set physical dimensions (`canvas.width`/`canvas.height`) using pixel ratio and render relative to this grid, using CSS to control responsive viewport scaling. - **Robust Storage**: Every access to `localStorage`/`sessionStorage` (especially `JSON.parse` of loaded state or writes) MUST be wrapped in a `try-catch` block to handle disabled storage, private browsing mode, quota limits, or corrupted JSON gracefully. Fall back to a robust in-memory object store. ## Touch & accessibility - Tap targets ≥ 44 × 44 px on touch (Apple HIG). Increase to 48 px under `@media (hover: none) and (pointer: coarse)`. - All interactive controls reachable by keyboard with a visible focus ring; respect `:focus-visible`. - Color contrast ≥ 4.5:1 for body text, 3:1 for UI components. - All images have meaningful `alt`. Decorative images use `alt=""`. - Respect `prefers-reduced-motion: reduce` — zero animation durations under that query. - Forms validate inline; error messages are specific, not "Invalid input". - Modals: focus trap, `Esc` closes, `role="dialog"`, `aria-modal="true"`, focus restored on close. ## Performance bar (Lighthouse mobile, throttled 3G/4G) - LCP < 2.5 s · INP < 200 ms · CLS < 0.1 - JS bundle gzip < 200 KB mobile-first; lazy-load non-critical screens via `React.lazy` / dynamic imports. - No render-blocking resources above the fold. - Images: WebP/AVIF preferred, `loading="lazy"`, explicit `width`/`height` attributes (zero CLS), `srcset` for retina. - Videos: `preload="metadata"`, low-resolution poster, max 720p mobile fallback. Never autoplay with audio. - Fonts: `font-display: swap`; preload only the one used above the fold. - Smooth scroll honoured via CSS `scroll-behavior: smooth` with reduced-motion fallback. ## Pre-ship mobile checklist (the deployer MUST verify before declaring done) 1. Open at 375 px in DevTools — every screen scrolls vertically only; zero horizontal scroll. 2. Browser zoom 200% — layout reflows without overlap. 3. iPhone Safari with the URL bar visible AND landscape — no content under the home indicator; no notch clipping. 4. iPad portrait (768 px) and landscape (1024 px) — no awkward gaps; tablet-specific breakpoints land cleanly. 5. Tap every interactive element with a thumb at real-device size — every target is easy to hit. 6. `prefers-reduced-motion: reduce` — every transition / animation skips cleanly, scroll-behavior becomes instant. 7. Lighthouse mobile score ≥ 90 across all 4 categories. 8. Zero `console.error` and zero CLS shift in real-device testing on a mid-tier Android (e.g. Pixel 6a) and an iPhone SE. --- The original template starts below. All rules above apply on TOP of whatever this template specifies. --- # Build Prompt — Bold Love Wedding Site Paste this into Google AI Studio's **Build** function. It is self-contained — every section below is part of the instructions. _Source reference: https://lovable.dev/templates/websites/events/wedding-template-4_ --- ## 1. Project Build a **Events** named **Bold Love Wedding Site**. One-line description: _Launch a bold, poster-inspired wedding website without hiring a developer. Perfect for couples who want something unique or professionals delivering custom sites fast._ **What it is:** This template gives you a wedding website that looks professionally designed and you don't need design skills to make it work. The bold typography, dramatic animations, and poster-inspired layout create impact without requiring you to understand technical details. You focus on your wedding story and details while the template handles looking professional and working flawlessly. The technical parts are already handled. Mobile responsiveness, smooth animations, photo galleries, dark mode support—all done. You can focus on personalizing the content for your event, adding your photos, and sharing the URL with guests. The visual effects and dramatic typography work right out of the box. Whether you're announcing your own wedding or building sites for clients, you can customize without technical barriers. Change colors to match your theme, upload your images, customize the text, and deploy. Everything functions properly from day one without code changes or technical debugging. ## 2. Target audience - Couples who want a wedding website that doesn't look like every other template they've seen—without hiring a web developer or settling for generic designs - Wedding planners who want to offer custom websites without hiring developers for each client or losing proposals to competitors with better digital experiences - Photographers and videographers showcasing wedding work with portfolio-quality presentation - Event venues providing branded wedding sites for couples booking their space - Design agencies who need to deliver custom wedding sites without the development bottlenecks that lose you clients or kill your margins - Boutique event companies competing with big agencies who need websites that prove you're just as professional—without their developer budgets ## 3. Core value propositions Surface these clearly through copy, visual emphasis, and section ordering — they are the reasons users pick this product. - **Ship Client Sites in Hours** — Wedding template that agencies can rebrand and deploy for multiple clients without custom development. - **Bold Editorial Design System** — Poster-quality typography and dramatic layouts that justify premium pricing and impress clients immediately. - **Mobile-Optimized Responsive Design** — Fluid viewport scaling and touch-friendly interactions deliver pixel-perfect experiences across all device sizes. - **Developer-Friendly TypeScript Codebase** — Clean architecture with GitHub sync enables technical teams to extend and maintain without vendor lock-in. - **Instant Backend Integration Ready** — React Query and form validation configured for seamless Supabase or API connections without refactoring. ## 4. Features to build **Product features:** Production-ready features built with modern tech stack for exceptional performance and user experience - Bold Graphic Design System - Comprehensive Animation Library - Infinite Scroll Marquee - Interactive Photo Gallery - Mobile-First Responsive Architecture - Form Validation Infrastructure - Dark Mode Theme System - TypeScript Development Foundation - React Query Integration - Customizable Design Token System - Accessibility-First Components ## 4b. Required services & integrations List the back-end services this template needs to function. If a service is not needed, say so explicitly — silence is ambiguous. - **Auth — Optional.** Account-less ticket purchase by email is the default; full accounts only for ticket-holder dashboards. - **Database — Required.** Events, ticket types, attendees, RSVPs, dietary/accessibility notes. - **File storage — Optional.** Event photos, speaker headshots, downloadable schedule PDFs. - **Payments — Not needed.** - **Transactional email — Required.** Ticket confirmation with QR, calendar invite (.ics), 7-day-before reminder, day-of reminder. - **External APIs / third-party services:** - Calendar (Google/iCal) for .ics generation - Maps for venue - Apple Wallet / Google Wallet for tickets **Environment variables to expose in the build:** mark every secret (API key, DB URL, JWT secret, Stripe key, S3 credential) as a clearly named `.env` variable — never hard-code. Include a `.env.example` with the full list. **Auth + data privacy reminders:** never log secrets · never store passwords in plain text · use HTTPS everywhere · hash + salt with bcrypt or argon2 · refresh tokens with rotation · honor a 'delete my account' request inside the UI. ## 5. Use cases & content to include Build dedicated UI sections or pages for each of these — they tell you what content the page must support. - **Wedding Announcements and Invitations** — Create a central hub where guests find all event details, dates, venues, and dress codes. The bold typography and clean layout make information easy to find, which matters when guests are checking details on their phones while getting ready. The dramatic design creates excitement that matches the significance of the occasion without looking generic. - **Save the Date Campaigns** — Launch early with couple photos, your story, and preliminary date information. The photo gallery with elegant effects lets you showcase engagement photos or meaningful moments in your relationship. The professional presentation builds anticipation and gives guests a branded destination they can bookmark and return to as you add venue details and RSVP information. - **Wedding Professional Portfolios** — Show your wedding work the way high-end clients expect to see it. When couples are comparing photographers or planners, they judge you in seconds based on how professional your portfolio looks. This template gives you that instant credibility without hiring a designer. Your images get the spotlight with elegant layouts and smooth interactions that make clients pause and really look at your work. Without a developer budget or technical skills, you can finally compete with agencies 10x your size on portfolio quality alone. The design adapts to your brand colors while keeping the premium feel that justifies your pricing. - **Client Deliverables for Agencies** — Deliver custom wedding websites for multiple clients without rebuilding from scratch each time. Customize colors, fonts, and content for each client while maintaining the professional quality that justifies your rates and wins repeat business. Speed matters when clients have tight deadlines, and this template lets you launch polished sites in hours instead of weeks. ## 6. Recommended page structure Generate the following sections in this order. Adjust labels to fit the brand voice, but keep the structural intent. 1. Hero with event name, date, location, primary CTA. 2. Schedule / agenda. 3. Speakers or guests (if applicable). 4. Venue / location section with map. 5. RSVP or ticketing form. 6. Gallery (if appropriate). 7. Footer. ## 6b. First-visit onboarding Show a **first-visit onboarding** the first time a visitor lands on the site (detect via `localStorage` flag; do not show on return visits). Keep it short — three steps maximum — and respectful: visitors can dismiss at any time and revisit later from a `?` icon in the header. **Format:** a polished modal *or* a 3-step inline tour, designed to match the overall visual style of the template (don't bolt on a generic stepper UI). On mobile, full-screen sheet that slides up. **Required content — three slides:** 1. **What this is.** - One-line headline: "Welcome to *Bold Love Wedding Site* — a template for Launch a bold, poster-inspired wedding website without hiring a developer. Perfect for couples who want something unique or professionals delivering custom sites fast." - One paragraph (max 60 words) explaining what the template demonstrates, who it's for, and what you'd typically use it for. - Visual: a small annotated screenshot of the page they're about to see, OR a 4-frame storyboard of key sections. 2. **What to try.** - 2–3 specific things the visitor should look at to understand the design (e.g. "Open a section to see the booking flow", "Hover the gallery for captions", "Resize the window — every layout is fluid"). - Reference real elements on the actual page so the visitor learns by doing, not by reading. 3. **How to remix this.** - A direct CTA: "Use this template" → links to Lovable / AI Studio Build remix entry point. - Below: 3 short bullets on how to make it yours — e.g. • "Swap the copy in `data/content.{ts,json}` for your own." • "Replace the imagery in `/public/images/` (we use AVIF + WebP)." • "Connect your services using the env-var list in section 4b above." - Plus a quieter secondary action: "Just looking — close" (closes modal, remembers preference in localStorage, never auto-shows again). **Persistent re-entry point:** A small "?" icon in the top-right header next to the primary nav. Click → reopens the onboarding from slide 1. Tooltip: "How this template works". **Accessibility:** - Trap focus inside the modal while open - `Esc` closes - All controls reachable by keyboard, visible focus ring - Heading hierarchy: modal title is `h1` inside the dialog - `role="dialog"` + `aria-modal="true"` + `aria-labelledby` - Restore focus to the trigger (or to `
`) on close - Respect `prefers-reduced-motion` — fade in/out only, no large transforms **Copy tone:** Warm and direct, not corporate. Avoid "Welcome to your dashboard" language. Avoid all caps. Use the same voice as the rest of the template's copy. **Don't:** - Don't gate content behind the modal. The page below must be fully scrollable. - Don't show the modal again on return visits. Use `localStorage['onboarding-seen']`. - Don't include marketing CTAs unrelated to remixing (no newsletter signup, no "follow us on X" — those live elsewhere). ## 7. Design language - **Mood:** Celebratory or focused depending on event type; always image-first. - **Typography:** Display serif or expressive sans for event name; clean body sans. Use a clear modular scale (e.g. 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 px) and tight tracking on display sizes. - **Palette:** Aligned with event vibe — warm for weddings, technical for conferences. - **Spacing:** consistent 4-px base. Generous whitespace — let the content breathe. - **Radius:** consistent token set (e.g. 6 / 12 / 20 px). Don't mix arbitrary values. - **Shadows:** subtle, layered. Avoid heavy drop-shadows. - **Imagery:** Aspirational hero imagery matching the event genre. - **Motion:** purposeful — entrance fades, hover lifts, page transitions. Respect `prefers-reduced-motion`. No bouncing splash animations. ## 8. Content generation rules - Write **realistic, specific copy**. NO Lorem Ipsum. NO generic placeholders like 'Your tagline here'. - Invent plausible names, dates, locations, prices, quotes, testimonials and product details that fit the domain. - Tone should match the audience above — confident, specific, free of buzzwords. - Headlines: punchy and concrete. No 'Empower your business' filler. - Body copy: short paragraphs (2–4 sentences). Use lists where appropriate. - All numbers, stats, and metrics must look plausible for the domain. ## 8a. Seed content (use these specific examples) Anchor the generated copy in the concrete data below. Use these names, numbers, dates, and snippets verbatim where helpful, or generate close variants that sit in the same world. **Couple:** Yara Chen & Jordan Park **Date:** Saturday, August 8, 2026 **Venue:** "The Foundry — Long Island City, NY" **Hero statement:** "This is not a soft wedding. Wear color. Bring noise. Dance until your shoes break. — Yara + Jordan, August 8" **Schedule:** - 17:00 · arrival · neon cocktail hour - 18:00 · ceremony — short, sharp, no aisle - 18:30 · first toast · oysters + martinis - 19:30 · dinner · long communal tables · family-style - 21:00 · live band — Tomás G. Brass Collective (10 piece) - 22:30 · DJ Aisha Bello · 4 hours - 02:00 · late-night dumplings + carriages **Dress code:** "Bold. Wear what makes you taller. Sequins, bright suits, statement everything. No black tie. No 'wedding-appropriate'." **RSVP form:** Name · Plus-one · Will you stay past midnight (Y/N — affects late-night catering count) · Song you'll dance to like nobody's watching **Travel info:** "LGA 12 min · Manhattan 25 min · valet on-site" **No registry:** "We have everything we need. Bring presence, not presents. (If you must — Doctors Without Borders.)" **Hashtag:** #YaraJordanLoud ## 9. Media & assets Every ``, `background-image`, gallery tile, thumbnail, and decorative figure on the page must come from ONE of the three buckets below. Do NOT reference any image path that is not specified here. Do NOT ship stock-photo placeholders. ### Bucket 1 — Runtime-generated via Nano Banana Pro (`gemini-3-pro-image`) Generate at build time, cache to Firebase Storage at the path listed, serve via signed URL. Each call uses model `gemini-3-pro-image`, output format `image/webp`, dimensions as listed. - **Hero image** → `/public/generated/hero.webp` · 2400×1500 · prompt: "Editorial poster-style photograph capturing the couple's hero statement — bold, joyful, anti-traditional wedding mood (refer to section 8a 'Hero statement' and 'Dress code'). A wide-frame moment from the seed couple's celebration named in section 8a, golden-hour light, sequins / bright suits / statement colour, slightly over-exposed highlights, no on-image text, no logos, faces partially turned or in motion to keep the moment universal. Composition leaves a clean upper-third for headline overlay. Real-photo aesthetic, not stylised render." - **Schedule moment images (7 cards, one per agenda row in section 8a)** → `/public/generated/schedule/{slug}.webp` · 1200×1200 · one prompt per row, derived from the section 8a schedule. Example: for `21:00 · live band` → "Tight 10-piece brass band on a low riser, warm tungsten side-light, a sliver of dance-floor crowd in foreground, motion blur on a horn, no on-image text, 35mm look." Generate one image per agenda row using its literal description. - **Venue exterior (used on the Venue/location section)** → `/public/generated/venue.webp` · 1800×1200 · prompt: "Wide editorial photograph of the venue named in section 8a (e.g. 'The Foundry, Long Island City'), evening light, industrial warehouse character, string-lights catching the lens, no on-image text or signage rendered as readable letters." - **Gallery tiles (12 images for the photo gallery section)** → `/public/generated/gallery/g-01.webp` … `g-12.webp` · 1600×1200 (mix of portrait and landscape) · per-tile prompt template: "Editorial wedding documentary photograph in the visual register of section 8a (bold, sequined, defiant). Subject: [one of: dance-floor close-up · communal-table toast · oyster bar · brass-band horn · sparkler send-off · couple laughing at a private joke · empty champagne flute on a tile floor · sequined sleeve detail · neon signage out of focus · valet at the kerb · late-night dumpling tray · empty venue at dawn]. No on-image text. Real-photo aesthetic." - **Wordmark / monogram** → `/public/generated/wordmark.svg` (SVG export from the model's raster, traced) · prompt: "A simple two-letter monogram for the couple named in section 8a, set in the display serif of section 7, no flourishes, suitable for a wedding programme cover." Also export a 256×256 WebP favicon to `/public/generated/favicon-256.webp`. ### Bucket 2 — Seed assets shipped with the deliverable Static files committed to `/public/samples/` for the offline preview and as fallback when generation fails. Generated once via Nano Banana 2 (`gemini-3.1-flash-image`), 1024×1024 WebP, with these prompts: - `/public/samples/empty-state-rsvp.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty RSVP card on a flat surface, single-stroke outline, no colour fill, suitable as an empty-state." - `/public/samples/empty-state-gallery.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty photo album with one photo corner exposed, single-stroke outline, no colour fill." - `/public/samples/hero-fallback.webp` — 1600×1000 — same prompt as the Bucket-1 hero, encoded once at build and committed so the page renders identically if Gemini quota is exhausted. ### Bucket 3 — User-supplied (when the template is remixed by a real couple) The page surfaces a small "Replace with your photos" hint in the onboarding modal. Uploads land via the file input → Firebase Storage path `weddings/{coupleSlug}/uploads/`. The build ships with Bucket-1 + Bucket-2 only; no user-supplied images at first paint. ### Hard rules - Every `` tag MUST have a `src` that resolves to a path listed above. Build fails CI if any `` references a path not in this section. - No bare `image.jpg` / `hero.jpg` / `placeholder.png` references anywhere in the code. - Icons: `lucide-react` only; use sparingly and consistently — never decorative-only. - Optimisation: WebP or AVIF, `loading="lazy"` on everything below the fold, explicit `width`/`height` to prevent layout shift. ## 10. Interactivity & states - Every interactive element has a hover, focus, active, and disabled state. - Forms validate inline and show specific error messages. - Loading states (skeletons, not spinners where possible). - Empty states with helpful next-action guidance. - Smooth scroll for in-page anchors. ## 11. Tech & responsive requirements - **File downloads on Safari / Firefox:** when offering local-disk save of any export (PDF, CSV, MP3, ZIP, JSON, image, `.ics` calendar invite), fall back to `` with a blob URL — the File System Access API (`showSaveFilePicker()`) is Chromium-only. Detect with `'showSaveFilePicker' in window`; otherwise use the anchor-download path. - **Stack:** React + TypeScript + Tailwind CSS. Use functional components and hooks. - **Mobile-first.** Verify layouts at 375 px (iPhone SE), 768 px (iPad), 1024 px, 1440 px+. - Use `clamp()` for fluid typography where appropriate. - Prefer container queries over media queries for component-level responsiveness. - Use `dvh` / `svh` units instead of `vh` to handle mobile viewport chrome. - Zero horizontal overflow at any width. Zero layout shift on load. - Respect safe-area insets on iOS. ## 12. Accessibility (WCAG 2.2 AA) - Semantic HTML — `header`, `nav`, `main`, `section`, `article`, `footer`. - All interactive controls reachable by keyboard with a visible focus ring. - Color contrast ≥ 4.5:1 for body, 3:1 for large text and UI components. - All images have meaningful `alt` text. Decorative images use `alt=""`. - Form fields have associated `