# 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 — Charity Auction Platform 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/bidforgood-charity-auction-platform-template_ --- ## 1. Project Build a **Events** named **Charity Auction Platform**. One-line description: _Professional online charity auction platform_ **What it is:** This template gives you a charity auction platform that looks polished and credible—and you don't need design skills or coding knowledge to make it work. Whether you're raising money for a local cause or running an organization-wide fundraiser, the entire bidding experience is built and ready for your audience. The technical parts are already handled. Mobile-responsive layouts, animated countdown timers, real-time bid interfaces, and a category-based catalog system—all done. You can focus on curating auction items, rallying your community, and hitting your fundraising goal. Five pages come ready to go: a homepage with a hero countdown, impact metrics, and featured items; a full catalog with search, category filtering, and sorting; individual item detail pages with a bid panel and bid history; a results page showcasing post-event stats, top items sold, and community impact; and a 404 page. Every page includes smooth animations, a fixed navigation bar, and a mobile-optimized layout with a hamburger menu and sticky bid bar. Instead of paying monthly fees for auction software you'll only use a few times a year or stitching together a form builder with a spreadsheet tracker, you get a fully branded auction experience in one place—customizable, professional, and free to start. This Template Typical Paid Tools Cost Free to start $20–100/month Setup time Hours Days to weeks Customization Full control Limited to plan tier Lock-in None—export anytime Subscription required ## 2. Target audience - Nonprofit founders who can't justify expensive auction software—get a professional fundraising platform without the subscription - Charity event organizers whose spreadsheet-based auctions look amateur—this gives donors a real bidding experience that builds trust - Agency teams building for nonprofit clients on tight budgets—deliver a custom auction site without weeks of development - School or community group leaders who need to raise funds fast—launch an auction page your supporters can actually use - Small business owners sponsoring charity events who want branded, credible presentation—not a generic donation link - Freelancers who serve the nonprofit space and need a reusable foundation—rebrand the color system and ship for each client ## 3. Core value propositions Surface these clearly through copy, visual emphasis, and section ordering — they are the reasons users pick this product. - **Professional Auction Experience** — Launch a credible, branded fundraiser that builds donor trust and encourages higher bids. - **Live Countdown Urgency** — Animated timers on every item create bidding urgency that drives participation and revenue. - **Complete Five-Page Platform** — Homepage, catalog, item details, results page, and 404—all built and ready to customize. - **Mobile-Optimized Bidding** — Sticky bid bars and responsive layouts let donors bid confidently from any device. - **Impact Transparency Built In** — Show donors exactly where their bids go with cause progress tracking and impact metrics. ## 4. Features to build **Product features:** Production-ready features built with modern tech stack for exceptional performance and user experience - Animated Countdown Timers - Category-Based Catalog System - Preset and Custom Bid Options - Bid Confirmation Modal - Impact Metrics Dashboard - Cause Progress Tracking - Post-Event Results Page - Mobile-First Responsive Design - Easy Color Customization - Smooth Page Animations - Watchlist Heart Buttons - Structured Data Model ## 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 — Required.** Bidder accounts with credit-card-on-file to prevent fraud. - **Database — Required.** Events, ticket types, attendees, RSVPs, dietary/accessibility notes. - **File storage — Optional.** Event photos, speaker headshots, downloadable schedule PDFs. - **Payments — Required.** Authorize on bid, capture on win. - **Transactional email — Required.** Ticket confirmation with QR, calendar invite (.ics), 7-day-before reminder, day-of reminder. - **External APIs / third-party services:** - Real-time bid updates via WebSocket (Ably/Pusher/Supabase Realtime) **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. - **Charity Fundraiser Auctions** — Launch a complete online auction for your next fundraiser event. The catalog page lets donors browse items by category, search by name, and sort by ending time or bid amount—so they find what they care about fast. A polished auction experience encourages higher bids and more participation, which directly increases the money you raise. - **Gala and Event Pre-Bidding** — Open bidding before your in-person gala so attendees can browse and place bids ahead of time. The countdown timers on every item create urgency, and the bid confirmation modal gives donors confidence their bid went through. Pre-bidding typically increases total auction revenue because donors engage before and during the event. - **Community Cause Campaigns** — Rally your community around specific causes with the built-in impact section that shows where bids go. The homepage includes cause progress cards with funding goals and progress bars, connecting every dollar to a visible outcome. Donors who see where their money goes are more likely to bid—and bid higher. - Post-Event Impact Reporting - After your auction closes, use the results page to share what your community accomplished. It includes event stats, top items sold, impact allocation breakdowns, and testimonial cards—giving donors proof that their participation mattered. Sharing results builds long-term donor relationships and makes your next fundraiser easier to promote. - See yourself in one of these? Remix this template and start building. - What You Can Build - This template gives you the foundation for: - A branded charity auction site where donors browse items, place bids with preset or custom amounts, and track countdown timers—all from their phone or desktop - A fundraising event hub with a hero countdown, animated impact metrics, featured auction items, and cause progress tracking on a single homepage - A post-event results showcase with community stats, top items sold, impact breakdowns, and donor testimonials that you can share to build momentum for next year ## 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 *Charity Auction Platform* — a template for Professional online charity auction platform." - 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. **Auction identity:** BidForGood · Spring Auction 2026 · benefiting Sanctuary Animal Rescue · live 7 days **Featured lots (8 cards):** 1. **Weekend at Aspen mountain cabin** — donated by Tomás G. · current bid $1,840 · 23 bids · ends in 2d 14h 2. **Private dinner for 8 by Chef Maya Reyes (Michelin starred)** — donated by Bellanova · current bid $3,200 · 41 bids 3. **Signed Lewis Hamilton 2024 race helmet** — donated by Mercedes F1 · current bid $14,800 · 88 bids · ends in 6d 04h 4. **Original print by photographer Diego Oviedo** — current bid $620 · 12 bids 5. **Surf lesson + lunch with pro surfer Adriana Souza** — current bid $480 · 18 bids 6. **One-year Masterclass All-Access pass (donated)** — current bid $240 · 6 bids 7. **Custom suit by tailor Ben Okafor, Savile Row** — current bid $2,200 8. **Pet portrait commission by artist Hana Kim** — current bid $340 · 9 bids **Auction stats (live counter strip):** "$148,420 raised · 1,840 bidders · 7 days remaining" **Beneficiary panel:** "100% of proceeds support Sanctuary Animal Rescue's medical fund — last year you funded 312 surgeries." **How it works steps:** "Browse → Bid → Outbid notification → Win → Pay → We ship (or arrange) the item" **Anonymous bidding:** "Outbids are public; bidders can stay anonymous in the display." ## 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. The visual register matches section 7 (Design language) and the specific seed content in section 8a. - **Hero image** → `/public/generated/hero.webp` · 2400×1500 · prompt: "Editorial hero photograph of the event named in section 8a at the venue described in section 8a, palette and tone consistent with section 7. For a conference: keynote-room atmosphere with lighting rig and front-row audience silhouettes; for a charity auction: gala-room atmosphere with table service and chandelier light. No on-image text, no readable signage rendered as letters. Real-photo aesthetic, 35mm look." - **Schedule moment images (one per row in section 8a's agenda)** → `/public/generated/schedule/{slug}.webp` · 1200×1200 · prompt: "per-row prompt built from each agenda row literal text (e.g. "keynote: AI safety" → "speaker on stage in dimmed auditorium, single key light, audience silhouetted, 35mm look, no readable signage")." - **Speaker / guest headshots (one per name in section 8a's speaker list)** → `/public/generated/speakers/{speaker-slug}.webp` · 800×800 · prompt: "Per-speaker prompt: editorial head-and-shoulders portrait of the named speaker, neutral background consistent with section 7's palette, natural light, slight smile or neutral expression, no on-image text." - **Venue photograph** → `/public/generated/venue.webp` · 1800×1200 · prompt: "Wide editorial photograph of the venue described in section 8a, no readable signage, no on-image text." - **Past-event gallery tiles (8 images, if section 6 includes a gallery)** → `/public/generated/gallery/g-01.webp … g-08.webp` · 1600×1200 · prompt: "Per-tile prompt template: editorial documentary photograph at a past edition of the event. Subject: [stage close-up · audience laughter · networking-break candid · keynote applause · sponsor booth detail in soft focus · panel discussion · empty auditorium at dawn · closing-night drink]. No on-image text." - **Wordmark / monogram** → `/public/generated/wordmark.svg` · prompt: "A simple event wordmark for the event named in section 8a, set in the display font of section 7, suitable for badge headers and email subjects." Favicon export to `/public/generated/favicon-256.webp` (256×256). ### Bucket 2 — Seed assets shipped with the deliverable Static files committed to `/public/samples/` as fallbacks when generation fails. Generated once via Nano Banana 2 (`gemini-3.1-flash-image`), 1024×1024 WebP unless noted. - `/public/samples/empty-state-tickets.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of a single perforated ticket stub, single-stroke outline, no colour fill." - `/public/samples/empty-state-schedule.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty schedule grid with one row dashed, 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) Onboarding modal surfaces a "Replace with your photos" hint. Uploads land via the file input → Firebase Storage path `events/{eventSlug}/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. Any `` referencing a path not in this section is a build error. - 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 `