Add templates, tests, and miscellaneous project files

Includes new page templates (fitness-gym, nonprofit, online-course,
photography-studio, real-estate, startup-company, travel-blog,
wedding-invitation) with thumbnail SVGs, test specs, documentation
files, and minor updates to index.html, router.php, and playwright config.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 14:15:58 -08:00
parent 03f573b451
commit b511a6684d
61 changed files with 6919 additions and 6 deletions

View File

@@ -0,0 +1,117 @@
<!-- 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>