# 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 `<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">` 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 — Travel Blog

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/blog/wanderlust-editorial-travel-blog-destination-guide-template_

---

## 1. Project
Build a **Blog** named **Travel Blog**.
One-line description: _Magazine-style travel content platform_

**What it is:**
This template gives you a full editorial travel blog with destination guides, itinerary pages, and a digital shop—and you don't need design skills or coding knowledge to make it work. The warm earth-tone palette, serif headings, and magazine-style layouts make your content look like it belongs in a professional travel publication from the moment you remix it.
The technical parts are already handled. Mobile-responsive grids, smooth scroll animations, an auto-advancing hero carousel, a mega menu with geographic navigation, breadcrumb trails, category filtering, pagination, cookie consent—all done. You can focus on writing destination guides, uploading your photography, and building an audience that keeps coming back.
Ten pages come ready to go: a homepage with a hero carousel and featured articles, a destinations hub, continent pages, country pages with category filters and region navigation, individual article pages with social sharing, a travel routes section with detailed day-by-day itineraries, route detail pages, a digital product shop, product detail pages, and a 404 page. That's an entire content ecosystem—not just a blog.
Instead of stitching together a basic blogging platform with a separate shop plugin and spending weeks configuring geographic navigation, you get a complete editorial system in hours—fully customizable, with a content hierarchy that organizes stories across 7 continents and 26 countries out of the box.

## 2. Target audience
- Travel bloggers losing readers to cluttered, slow websites
- —this gives you magazine-quality layouts that keep people scrolling through your stories
- Destination content creators who need more than a basic blog
- —the continent-to-country-to-article hierarchy organizes hundreds of posts so readers find what they want
- Travel consultants whose generic site costs them credibility
- —the editorial design and itinerary pages build trust that converts browsers into clients
- Tour operators juggling a blog, route guides, and digital products
- —combine all three without stitching together separate tools or paying for multiple platforms
- Travel influencers who want to monetize beyond sponsorships
- —the built-in digital shop section is ready for selling travel guides and ebooks
- Agency teams building sites for tourism clients
- —remix once, customize the content, and deliver a professional travel site without starting from scratch

## 3. Core value propositions
Surface these clearly through copy, visual emphasis, and section ordering — they are the reasons users pick this product.

- **Magazine-Quality Editorial Design** — Warm earth-tone palette and serif typography make your content look professionally published from day one.
- **Geographic Content Organization** — Mega menu navigation across continents and countries helps readers explore destinations the way they plan trips.
- **Complete Content Ecosystem** — Ten ready-to-go pages including destination guides, itineraries, articles, and a digital product shop.
- **Mobile-Responsive Everything** — Grids, navigation, and layouts adapt flawlessly from desktop to mobile without any configuration.
- **Shop-Ready Product Pages** — Built-in digital product section with ratings and feature lists ready for your travel guide sales.

## 4. Features to build
**Product features:**
Production-ready features built with modern tech stack for exceptional performance and user experience

- Auto-Advancing Hero Carousel
- Mega Menu Navigation
- Category Filtering System
- Day-by-Day Itinerary Pages
- Best-Visit Month Selector
- Newsletter Signup Forms
- Digital Product Shop
- Breadcrumb Navigation
- Social Share Buttons
- Cookie Consent Modal
- Related Content Suggestions
- Scroll Animations

## 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.** Only for paid-subscriber paywalls or comment posting. Many blogs ship fully public + serverless.
- **CMS / content store — Required.** Headless CMS (Sanity, Contentful, Strapi) or MDX-in-repo. Posts, authors, categories, tags.
- **Image CDN — Required.** Cloudinary, Imgix, or Vercel Image for responsive images.
- **Payments — Optional.** Stripe + paywall (Ghost / Substack-style) if subscriptions.
- **Newsletter — Required.** Beehiiv / ConvertKit / Buttondown for newsletter, double opt-in.
- **External APIs / third-party services:**
  - Analytics (Plausible/Fathom — privacy-respecting)

**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.

- **Destination Travel Blogs** — Publish in-depth guides organized by continent, country, and region with category filtering for culture, nature, food, and more. The geographic navigation hierarchy—mega menu, flag emoji pills, region pills, and breadcrumbs—helps readers drill down to exactly the destination they're researching. Travel blogs with strong content organization keep readers on-site longer, which means more page views and more opportunities to monetize through affiliates or digital products.
- **Multi-Week Travel Itineraries** — Share detailed day-by-day route plans with highlights, tips, difficulty levels, budget ranges, and best seasons to visit. The route detail pages give your audience the kind of structured, actionable content that builds loyalty and positions you as a planning resource—not just another travel diary. Readers who trust your itineraries are far more likely to purchase your paid guides.
- **Digital Travel Guide Sales** — Sell ebooks and downloadable travel guides directly from your site using the built-in shop section with product grids, star ratings, feature checklists, and tables of contents. The product detail pages are designed to present your guides professionally—complete with pricing cards and related product suggestions. The shop UI is structured and ready for a payment processor when you're ready to connect one.
- Country & Culture Showcases
- Create rich country pages with hero photography, local phrases, best-visit-month selectors, and categorized article collections. The interactive month selector and category icon filters let readers plan trips based on when they want to travel and what they want to experience. This level of content depth is what separates a serious travel resource from a casual blog—and it's what attracts brand partnerships.
- See yourself in one of these? Remix this template and start building.
- What You Can Build
- This template gives you the foundation for:
- **A professional editorial travel blog** — with geographic navigation across continents and countries—organized so readers explore your content the way they plan trips, not the way most blogs dump posts in reverse chronological order
- **A travel itinerary hub** — with structured route pages featuring day-by-day breakdowns, difficulty ratings, and budget guidance—the kind of resource readers bookmark and share
- **A digital travel guide shop** — with product pages, ratings, and feature lists—ready for you to connect a payment processor and start selling your expertise

## 6. Recommended page structure
Generate the following sections in this order. Adjust labels to fit the brand voice, but keep the structural intent.

1. Magazine-style homepage with a featured story and a grid of secondary posts.
2. Category navigation.
3. Article detail layout — generous typography, pull quotes, captioned images.
4. Author page.
5. Newsletter signup CTA.
6. 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 *Travel Blog* — a template for Magazine-style travel content 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 `<main>`) 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:** Editorial, readable, image-friendly. Magazine, not corporate.
- **Typography:** Serif for headlines (Fraunces, Tiempos), sans for UI. Use a clear modular scale (e.g. 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 px) and tight tracking on display sizes.
- **Palette:** Paper/cream + ink + 1 accent.
- **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:** Lifestyle / travel / food photography appropriate to the niche.
- **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.

**Blog identity:** Trail · "Slow travel notes from people who actually go." · founded 2019 · 38 contributors · ~1.2M monthly readers

**Featured story (hero):**
"Three Weeks Walking the Camino Portugués — and What I Got Wrong"
By Maya Reyes · published May 4, 2026 · 14 min read · cover photo by Diego Oviedo

**Latest posts grid (8 cards):**
1. "The Lisbon No One Photographs" — Karim H. — May 8 · destination
2. "What I Learned Eating Alone in Tokyo for 30 Days" — Hana K. — May 6 · food + travel
3. "Slow Train: Berlin to Athens by Rail" — Lucas B. — May 2 · transit
4. "How to Pack for Patagonia in 8 kg" — Petra S. — Apr 28 · gear
5. "Bali Without the Bali" — Aisha B. — Apr 24 · destination
6. "What 12 Years of Travel Taught Me About Money" — Tomás G. — Apr 18 · essay
7. "The Quiet Beaches of the Algarve" — Marisa Q. — Apr 14 · destination guide
8. "Solo Female Travel: A Sober Account" — Iris P. — Apr 8 · essay

**Categories nav:** Destinations · Slow travel · Solo · Food · Trains · Hiking · Photography · Money · Essays

**Newsletter:** "Trail Letter — fortnightly Tuesday — 32,800 subscribers · field reports + one obsession"
**Contributor strip:** "We pay our writers — $0.80/word, photos extra · pitch via trail.guide/contribute"
**Sponsor disclosure:** "Some links are affiliate. We only recommend places we paid for."

## 9. Media & assets

Every `<img>`, `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 magazine cover-style lead image for the featured story named in section 8a. Visual register of section 7. Either a documentary photograph or an editorial illustration — pick whichever matches the publication's voice in section 7. No on-image text, no logos, no readable signage. Composition leaves clean space for the headline + standfirst."
- **Featured-story grid thumbnails (one per story tile in section 8a)** → `/public/generated/stories/{story-slug}.webp` · 1200×900 · prompt: "per-story prompt built from each story title in section 8a. e.g. for a travel-magazine story about Naoshima → "editorial photograph of a concrete art-island courtyard at golden hour, single visitor in frame, 35mm look, no on-image text". One image per story."
- **Category banners (one per category nav item in section 8a)** → `/public/generated/categories/{cat}.webp` · 2000×600 · prompt: "Wide horizontal editorial banner for the category, in the visual register of section 7. e.g. Travel → wide landscape with single figure; Food → low-angle plate-on-linen detail. No on-image text."
- **Author portraits (one per writer in section 8a)** → `/public/generated/authors/{author-slug}.webp` · 640×640 · prompt: "Editorial head-and-shoulders portrait of the writer named in section 8a, neutral background, natural light, no on-image text."
- **Article inline imagery (4-6 captioned figures per article detail page)** → `/public/generated/articles/{article-slug}/fig-01.webp … fig-06.webp` · 1600×1067 · prompt: "Per-figure prompt built from the figure caption in section 8a's article seed. Real-photo or illustration as the article's voice demands. No on-image text."
- **Wordmark / monogram** → `/public/generated/wordmark.svg` · prompt: "A simple publication wordmark for the magazine named in section 8a, set in the display font of section 7, masthead-quality." 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-archive.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty magazine stack, single-stroke outline, no colour fill."
- `/public/samples/empty-state-newsletter.webp` — 1024×1024 — prompt: "Minimal hand-drawn line illustration of an empty envelope with a pencil mark, 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 `publications/{publicationSlug}/articles/{articleSlug}/uploads/`. The build ships with Bucket-1 + Bucket-2 only; no user-supplied images at first paint.

### Hard rules

- Every `<img>` tag MUST have a `src` that resolves to a path listed above. Any `<img>` 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 `<a download>` 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 `<label>`s; errors announced via `aria-describedby`.
- Respect `prefers-reduced-motion`.
- Tap targets ≥ 44 × 44 px on touch.

## 13. Quality bar — avoid AI clichés
Do **not** ship any of the following unless the design explicitly calls for it:
- Hero with a gradient background and floating geometric / orb shapes.
- A row of 4 'by the numbers' stat cards (e.g. '10k+ users / 99.9% / 24/7 / 4.9★') below the hero.
- Emoji bullets in body copy.
- 'Lorem ipsum' or 'Your headline here' placeholders.
- A pricing table with three identical-looking tiers when the product has no real pricing.
- Faux testimonials with stock-photo headshots that all look like the same person.
- Generic 'features grid' of 6 cards with the same icon style and 1-line description each.
- Hero CTA labelled 'Get started' with no second action.

Aim for the polish of a hand-crafted production site — specific, considered, with real domain knowledge in the copy.

## 14. Deliverables
A single working site that I can preview immediately, with all sections populated, all images placed, all interactions wired up, and no TODOs.