Travel Blog Page

Create a stunning, editorial-style travel blog page for a travel content site called "Wanderlust Chronicles" — a multi-author travel blog covering destinations, culture, food, adventure, and practical travel tips. The design should feel immersive and magazine-quality, drawing readers into the stories with large photography and clean typography.

1. NAVIGATION BAR
- Logo: "Wanderlust Chronicles" in an elegant serif font with a small compass rose icon before the text
- Links: Destinations, Adventure, Culture, Food & Drink, Budget Travel, Tips
- Right side: search icon (magnifying glass), "Subscribe" CTA button (solid #0F766E teal)
- White background with a thin 1px bottom border (#E5E7EB), sticky on scroll
- Mobile: hamburger menu with full-screen overlay on white background, categories listed vertically with destination count badges

2. HERO — FEATURED POST (full-width editorial spread)
- Full-viewport-width hero image of a golden-hour shot over Santorini rooftops, overlaid with a dark gradient from bottom (rgba(0,0,0,0.5))
- Overlay content (bottom-left aligned, max-width 680px):
  - Category tag pill: "Destinations" (solid #0F766E teal, white text, 6px border-radius)
  - Headline: "48 Hours in Santorini: Beyond the Instagram Spots"
  - Author byline: avatar thumbnail + "By Elena Vasquez · March 8, 2026 · 12 min read"
  - Excerpt: "We skipped the crowded caldera viewpoints and found hidden cliff-side tavernas, volcanic hot springs, and a winery that's been family-run since 1947."
  - "Read Article →" link in white with underline on hover
- Right side: subtle scroll-down arrow animation
- Height: 85vh on desktop, 70vh on mobile

3. CATEGORY NAVIGATION BAR (sticky below main nav on scroll)
- Horizontal pill row, scrollable on mobile:
  - All (selected default, teal background) | Destinations (42) | Adventure (28) | Culture (19) | Food & Drink (24) | Budget Travel (16) | Travel Tips (31)
- Each pill shows post count in lighter text
- Active category: solid #0F766E teal background with white text
- Inactive: #F1F5F9 slate-50 background with #334155 text
- Hover: subtle background darken
- Background: white with bottom shadow on scroll

4. BLOG POST GRID (3-column masonry-style layout)
- Section headline: "Latest Stories" with a "Most Popular" / "Recent" toggle on the right
- 9 post cards in the initial view:

  Card 1: "The Complete Japan Rail Pass Guide for 2026"
  - Cover: cherry blossom-framed Shinkansen photo
  - Category: "Travel Tips" (pill badge)
  - Excerpt: "Everything you need to know about the JR Pass — routes, pricing, where to buy, and the 7 mistakes first-timers make."
  - Author: "Marcus Chen · Feb 28, 2026 · 8 min read"
  - Bookmark icon (top-right corner)

  Card 2: "Street Food Markets of Bangkok: A Neighborhood-by-Neighborhood Guide"
  - Cover: vibrant night market with steaming woks
  - Category: "Food & Drink"
  - Excerpt: "From Chinatown's legendary Yaowarat Road to the hidden alley stalls of Ari — where locals actually eat."
  - Author: "Priya Sharma · Feb 25, 2026 · 10 min read"

  Card 3: "Backpacking Patagonia on $50 a Day"
  - Cover: hiker silhouetted against Torres del Paine
  - Category: "Budget Travel"
  - Excerpt: "Yes, it's possible. Here's exactly how we spent 3 weeks in one of the world's most expensive hiking destinations — without breaking the bank."
  - Author: "Diego Morales · Feb 22, 2026 · 14 min read"
  - Badge: "Editor's Pick" (amber #F59E0B)

  Card 4: "Learning to Surf in Sri Lanka: A Beginner's Honest Diary"
  - Cover: sunrise surf session at Arugam Bay
  - Category: "Adventure"
  - Excerpt: "Day 1: swallowed half the Indian Ocean. Day 7: stood up for 3 glorious seconds. Day 14: hooked for life."
  - Author: "Elena Vasquez · Feb 18, 2026 · 9 min read"

  Card 5: "The Ceramics Villages of Portugal Nobody Talks About"
  - Cover: artisan painting azulejo tiles
  - Category: "Culture"
  - Excerpt: "In Alcobaça, São Pedro do Corval, and Bordallo Pinheiro's hometown, centuries-old pottery traditions are alive and thriving."
  - Author: "Sophie Laurent · Feb 15, 2026 · 7 min read"

  Card 6: "How to Fly Business Class for Economy Prices"
  - Cover: flat-bed airline seat with champagne
  - Category: "Travel Tips"
  - Excerpt: "Award flights, positioning fares, mistake fares, and the 5 credit cards that actually deliver. No clickbait — real strategies we've used."
  - Author: "Marcus Chen · Feb 12, 2026 · 11 min read"
  - Badge: "Popular" (teal)

  Card 7: "48 Hours in Marrakech: Medina, Mountains & Mint Tea"
  - Cover: Jardin Majorelle blue walls and cacti
  - Category: "Destinations"
  - Excerpt: "A whirlwind weekend itinerary covering the souk, Atlas Mountains day trip, and the best riad rooftop dinners."
  - Author: "Priya Sharma · Feb 8, 2026 · 8 min read"

  Card 8: "Oaxaca's Mezcal Trail: Farm to Glass"
  - Cover: agave fields with dusty mountain backdrop
  - Category: "Food & Drink"
  - Excerpt: "We visited 5 family palenques and tasted mezcal made from wild agave species you'll never find in a bar."
  - Author: "Diego Morales · Feb 5, 2026 · 6 min read"

  Card 9: "Solo Female Travel in Jordan: What I Wish I'd Known"
  - Cover: woman at Petra's Treasury at dawn
  - Category: "Adventure"
  - Excerpt: "From Amman's street art scene to floating in the Dead Sea — safety tips, packing advice, and the moments that made it unforgettable."
  - Author: "Elena Vasquez · Feb 1, 2026 · 13 min read"

- Each card: white background, 12px border-radius, subtle shadow (0 1px 3px rgba(0,0,0,0.08)), full-width cover image (aspect-ratio 16:9), category pill, title (bold, hover color change to teal), excerpt (2-line clamp), author row with avatar + date + read time
- Hover: card lifts with enhanced shadow, image scales up slightly (1.03)
- "Load More Stories" button at bottom (outline teal, full-width on mobile)

5. DESTINATION SPOTLIGHT (editorial feature section)
- Background: #F8FAFC (cool gray tint)
- Section headline: "Destination Deep Dive" with subtitle "This Month: Portugal"
- Layout: large hero image (left 60%) + content stack (right 40%)
- Hero image: Lisbon's Alfama district at golden hour with terracotta rooftops and tram 28
- Content stack:
  - "Why Portugal, Why Now" — brief editorial intro (3-4 sentences about Portugal's appeal in 2026)
  - 4 related post links with thumbnails:
    - "Lisbon's Hidden Miradores: 8 Viewpoints the Guidebooks Miss"
    - "Porto Wine Tasting: A Route Through the Douro Valley"
    - "Algarve Coast on a Budget: Camping, Hiking & Beach Life"
    - "The Ceramics Villages of Portugal Nobody Talks About"
  - "Explore All Portugal Posts →" link
- Destination changes monthly — design should accommodate any country

6. AUTHOR SPOTLIGHT (horizontal scroll)
- Section headline: "Meet the Writers"
- 4 author cards:
  - Elena Vasquez — "Senior Writer · 89 articles" — "Former architect turned full-time nomad. Currently based in Lisbon. Specializes in Mediterranean & Latin America." — avatar photo
  - Marcus Chen — "Travel Hacker · 64 articles" — "Points & miles obsessive. Flies 100K+ miles a year on airline rewards. Based in Singapore." — avatar photo
  - Priya Sharma — "Food & Culture Editor · 52 articles" — "Culinary school graduate who traded the kitchen for the road. If it's fermented, she's tried it." — avatar photo
  - Diego Morales — "Adventure & Budget Editor · 41 articles" — "Former Peace Corps volunteer. Believes the best travel costs the least. Based nowhere specific." — avatar photo
- Each card: circular avatar (80px), name, role, article count, short bio
- Hover: "View All Posts →" link appears
- Cards: white background, 16px border-radius, subtle border

7. POPULAR POSTS SIDEBAR (appears on desktop alongside grid on wider screens, becomes horizontal scroll section on mobile)
- Headline: "Trending This Week"
- 5 numbered posts (1-5 ranking):
  - 1. "How to Fly Business Class for Economy Prices" — Marcus Chen — 24K reads
  - 2. "48 Hours in Santorini: Beyond the Instagram Spots" — Elena Vasquez — 18K reads
  - 3. "Backpacking Patagonia on $50 a Day" — Diego Morales — 15K reads
  - 4. "Street Food Markets of Bangkok" — Priya Sharma — 12K reads
  - 5. "Solo Female Travel in Jordan" — Elena Vasquez — 11K reads
- Each entry: large rank number (#0F766E teal, 32px bold), title, author, read count
- Compact card design with thin dividers between entries

8. NEWSLETTER SIGNUP (full-width CTA section)
- Background: #0F766E teal with subtle topographic map pattern overlay (low opacity)
- Headline (white): "Get Stories Worth Reading"
- Subheadline (white/80): "Every Thursday — one destination deep-dive, one travel hack, and one story that'll make you book a flight. No spam, no fluff. 28,000+ readers."
- Email input (large, rounded, white background) + "Subscribe" button (solid #F59E0B amber, dark text)
- Below: "Trusted by readers in 120+ countries · Unsubscribe anytime"
- Social proof: "As featured in: Condé Nast Traveler, Lonely Planet, BBC Travel" (small logos in white/muted)

9. INSTAGRAM / PHOTO FEED
- Headline: "@WanderlustChron — Follow the Journey"
- 6-image grid (3x2 on desktop, 2x3 on mobile):
  - Each image: travel photography with location overlay on hover (e.g., "Kyoto, Japan", "Marrakech, Morocco")
  - Slight gap between images (4px)
- "Follow on Instagram" link below
- Images have 4px border-radius

10. FOOTER
- 4 columns on warm white background (#FAFAF9):
  - Explore: Destinations, Adventure, Culture, Food & Drink, Budget Travel, Travel Tips
  - About: Our Story, Write for Us, Editorial Guidelines, Press Kit, Advertise
  - Resources: Packing Lists, Budget Calculators, Travel Insurance Guide, Visa Information, Flight Deals
  - Connect: Newsletter, Instagram, YouTube, Twitter/X, Pinterest, RSS Feed
- Bottom bar: "© 2026 Wanderlust Chronicles. All rights reserved." + Privacy Policy, Terms, Cookie Settings links
- Small text: "We independently select everything we recommend. When you buy through our links, we may earn a commission."

Design: Editorial, immersive, magazine-quality. Primary: #0F766E (teal), secondary: #334155 (slate-700 for text), accent: #F59E0B (amber for highlights and badges). Backgrounds: white (#FFFFFF) alternating with #F8FAFC (cool gray) and one teal (#0F766E) section for newsletter CTA. Typography: Playfair Display for headlines (elegant serif, sets editorial tone), Inter for body text and UI elements. Cards with 12px border-radius, subtle shadows, generous photography. Large hero images with editorial-quality overlays. Reading-focused design with comfortable line lengths (max 680px for article excerpts).

Responsive: Mobile-first. Hero shrinks to 70vh with left-aligned overlay. Category nav becomes horizontal scroll. Blog grid collapses from 3-column to 2-column (tablet) to single column (mobile). Destination spotlight stacks vertically (image on top). Author cards become horizontal scroll. Popular posts sidebar moves below grid as horizontal scroll on mobile. Newsletter CTA stacks input and button vertically. Instagram grid becomes 2x3. Sticky mobile header with condensed nav. "Back to top" floating button on long scroll.