<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background-color:#1e293b;position:sticky;top:0;z-index:100;">
  <a href="#" style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#f59e0b;text-decoration:none;">Wanderlust Diaries</a>
  <div style="display:flex;gap:32px;align-items:center;">
    <a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Destinations</a>
    <a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">About</a>
    <a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Contact</a>
  </div>
</nav>

<!-- Page Header -->
<section style="padding:80px 48px;background-color:#1e293b;text-align:center;">
  <p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">Explore</p>
  <h1 style="font-family:'Playfair Display',serif;font-size:52px;font-weight:700;color:#ffffff;margin-bottom:16px;">Destinations</h1>
  <p style="font-family:'Inter',sans-serif;font-size:18px;color:#94a3b8;max-width:520px;margin:0 auto;">Places that stole our hearts and stories worth telling from every corner of the world.</p>
</section>

<!-- Destination Cards Grid -->
<section style="padding:80px 48px;background-color:#fffbeb;">
  <div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:36px;">
    <!-- Bali -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=700" alt="Bali" style="width:100%;height:280px;object-fit:cover;display:block;" />
      <div style="padding:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Indonesia</p>
        <h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Bali</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Terraced rice paddies, sacred temples, and sunsets that paint the sky in shades of amber. Bali is where the soul comes to breathe.</p>
        <a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore &rarr;</a>
      </div>
    </div>
    <!-- Iceland -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1504829857797-ddff29c27927?w=700" alt="Iceland" style="width:100%;height:280px;object-fit:cover;display:block;" />
      <div style="padding:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Nordic</p>
        <h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Iceland</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Waterfalls, glaciers, and the northern lights. Iceland is raw, untamed nature at its most dramatic and unforgettable.</p>
        <a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore &rarr;</a>
      </div>
    </div>
    <!-- Morocco -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?w=700" alt="Morocco" style="width:100%;height:280px;object-fit:cover;display:block;" />
      <div style="padding:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">North Africa</p>
        <h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Morocco</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Spice-scented souks, mosaic-tiled riads, and the endless Sahara. Morocco is a feast for every sense you have.</p>
        <a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore &rarr;</a>
      </div>
    </div>
    <!-- Japan -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=700" alt="Japan" style="width:100%;height:280px;object-fit:cover;display:block;" />
      <div style="padding:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">East Asia</p>
        <h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Japan</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Ancient tradition meets neon-lit modernity. From zen gardens to bustling Tokyo streets, Japan never stops surprising.</p>
        <a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore &rarr;</a>
      </div>
    </div>
    <!-- Peru -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1526392060635-9d6019884377?w=700" alt="Peru" style="width:100%;height:280px;object-fit:cover;display:block;" />
      <div style="padding:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">South America</p>
        <h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Peru</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Machu Picchu is only the beginning. Explore the Sacred Valley, rainbow mountains, and one of the world's greatest food scenes.</p>
        <a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore &rarr;</a>
      </div>
    </div>
    <!-- Greece -->
    <div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
      <img src="https://images.unsplash.com/photo-1533105079780-92b9be482077?w=700" alt="Greece" style="width:100%;height:280px;object-fit:cover;display:block;" />
      <div style="padding:28px;">
        <p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Europe</p>
        <h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Greece</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Crystal-clear Aegean waters, whitewashed villages, and the birthplace of civilization. Greece is timeless beauty personified.</p>
        <a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore &rarr;</a>
      </div>
    </div>
  </div>
</section>

<!-- Travel Tips -->
<section style="padding:80px 48px;background-color:#1e293b;">
  <div style="max-width:1100px;margin:0 auto;">
    <p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">Helpful Advice</p>
    <h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#ffffff;text-align:center;margin-bottom:48px;">Travel Tips</h2>
    <div style="display:flex;gap:32px;flex-wrap:wrap;">
      <!-- Packing -->
      <div style="flex:1;min-width:260px;padding:36px;background-color:rgba(255,251,235,0.05);border:1px solid #334155;border-radius:12px;text-align:center;">
        <div style="font-size:36px;margin-bottom:16px;">&#127890;</div>
        <h3 style="font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fffbeb;margin-bottom:12px;">Packing Smart</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;line-height:1.7;">Roll your clothes, pack versatile layers, and always leave room for souvenirs. One carry-on can take you around the world.</p>
      </div>
      <!-- Budget -->
      <div style="flex:1;min-width:260px;padding:36px;background-color:rgba(255,251,235,0.05);border:1px solid #334155;border-radius:12px;text-align:center;">
        <div style="font-size:36px;margin-bottom:16px;">&#128176;</div>
        <h3 style="font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fffbeb;margin-bottom:12px;">Budget Travel</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;line-height:1.7;">Eat where the locals eat, travel in shoulder season, and use points wisely. Luxury experiences don't always need a luxury budget.</p>
      </div>
      <!-- Safety -->
      <div style="flex:1;min-width:260px;padding:36px;background-color:rgba(255,251,235,0.05);border:1px solid #334155;border-radius:12px;text-align:center;">
        <div style="font-size:36px;margin-bottom:16px;">&#128737;</div>
        <h3 style="font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fffbeb;margin-bottom:12px;">Staying Safe</h3>
        <p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;line-height:1.7;">Keep digital copies of documents, share your itinerary with someone at home, and trust your instincts. Preparation is empowerment.</p>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer style="padding:48px;background-color:#1e293b;text-align:center;border-top:1px solid #334155;">
  <p style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#f59e0b;margin-bottom:8px;">Wanderlust Diaries</p>
  <p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;margin-bottom:24px;">Follow the journey. Fuel the wanderlust.</p>
  <p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;">&copy; 2026 Wanderlust Diaries. All rights reserved.</p>
</footer>
