cloud-hosting-platform/site-builder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add templates, tests, and miscellaneous project files

Browse Source 
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:
Josh Knapp
2026-03-01 14:15:58 -08:00
parent 03f573b451
commit b511a6684d
61 changed files with 6919 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
templates/travel-blog/about.html Normal file
View File

@@ -0,0 +1,76 @@
<!-- 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>
<!-- About Hero -->
<section style="padding:80px 48px;background-color:#1e293b;">
<div style="max-width:900px;margin:0 auto;display:flex;gap:48px;align-items:center;flex-wrap:wrap;">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500" alt="Maya - Travel Blogger" style="width:300px;height:360px;object-fit:cover;border-radius:12px;flex-shrink:0;" />
<div style="flex:1;min-width:280px;">
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">The Blogger</p>
<h1 style="font-family:'Playfair Display',serif;font-size:44px;font-weight:700;color:#ffffff;margin-bottom:16px;">About Maya</h1>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.8;">Writer, photographer, and incurable wanderer. I left a desk job in 2021 to see the world and never looked back. This blog is where I share the stories, lessons, and moments that make travel the greatest education.</p>
</div>
</div>
</section>
<!-- Story Section -->
<section style="padding:80px 48px;background-color:#fffbeb;">
<div style="max-width:900px;margin:0 auto;display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap;">
<div style="flex:1;min-width:280px;">
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#1e293b;margin-bottom:20px;">Hi, I'm Maya!</h2>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.8;margin-bottom:16px;">Five years ago, I was sitting in a corporate office in San Francisco, staring at a spreadsheet and dreaming about the Amalfi Coast. One day I bought a one-way ticket to Rome and the rest became this blog.</p>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.8;margin-bottom:16px;">I travel slowly, stay with locals when I can, and believe the best meals are always found down side streets. My writing focuses on the human connections that make travel meaningful -- not just the pretty backdrops.</p>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.8;">Whether it's hitchhiking through Patagonia or learning to cook pad thai in Bangkok, every trip teaches me something new. And I share it all here, honestly and without filters.</p>
</div>
<div style="flex:0 0 280px;min-width:260px;">
<div style="padding:32px;background-color:#ffffff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);text-align:center;">
<div style="margin-bottom:28px;">
<p style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#f59e0b;margin-bottom:4px;">40+</p>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:1px;">Countries Visited</p>
</div>
<div style="margin-bottom:28px;padding-top:28px;border-top:1px solid #f1f5f9;">
<p style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#f59e0b;margin-bottom:4px;">6</p>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:1px;">Continents</p>
</div>
<div style="padding-top:28px;border-top:1px solid #f1f5f9;">
<p style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#f59e0b;margin-bottom:4px;">5</p>
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:1px;">Years Blogging</p>
</div>
</div>
</div>
</div>
</section>
<!-- Travel Philosophy -->
<section style="padding:80px 48px;background-color:#ffffff;">
<div style="max-width:720px;margin:0 auto;text-align:center;">
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">My Approach</p>
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#1e293b;margin-bottom:24px;">Travel Philosophy</h2>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#475569;line-height:1.8;margin-bottom:16px;">I believe travel should be slow, intentional, and respectful. I choose buses over planes when I can, local guesthouses over chains, and street food over tourist menus. The point is not to check boxes -- it's to truly feel a place.</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#475569;line-height:1.8;">I also believe in honest storytelling. Not every trip is perfect, and the mishaps often make the best stories. You'll find bug bites and missed trains alongside the sunsets on this blog.</p>
</div>
</section>
<!-- Work With Me CTA -->
<section style="padding:80px 48px;background-color:#1e293b;">
<div style="max-width:720px;margin:0 auto;text-align:center;">
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#ffffff;margin-bottom:16px;">Work With Me</h2>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.8;margin-bottom:12px;">I collaborate with tourism boards, hotels, outdoor brands, and travel companies whose values align with authentic, responsible travel. My audience is 80% women aged 25-40 who are active, curious travelers.</p>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.8;margin-bottom:36px;">Services include sponsored content, destination features, social media campaigns, and photography partnerships.</p>
<a href="#" style="display:inline-block;padding:16px 40px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;text-decoration:none;border-radius:6px;">Get in Touch</a>
</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>

104
templates/travel-blog/contact.html Normal file
View File

@@ -0,0 +1,104 @@
<!-- 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>
<!-- Contact Header -->
<section style="padding:64px 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;">Say Hello</p>
<h1 style="font-family:'Playfair Display',serif;font-size:48px;font-weight:700;color:#ffffff;margin-bottom:16px;">Get in Touch</h1>
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#94a3b8;max-width:540px;margin:0 auto;">Have a question, collaboration idea, or just want to share your own travel story? I'd love to hear from you.</p>
</section>
<!-- Contact Two-Column -->
<section style="padding:80px 48px;background-color:#fffbeb;">
<div style="max-width:1000px;margin:0 auto;display:flex;gap:56px;flex-wrap:wrap;">
<!-- Left: Contact Info -->
<div style="flex:1;min-width:280px;">
<h2 style="font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:#1e293b;margin-bottom:24px;">Contact Info</h2>
<div style="margin-bottom:28px;">
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Email</p>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">maya@wanderlustdiaries.com</p>
</div>
<div style="margin-bottom:28px;">
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Instagram</p>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">@wanderlustdiaries</p>
</div>
<div style="margin-bottom:28px;">
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Twitter / X</p>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">@mayatravels</p>
</div>
<div style="margin-bottom:28px;">
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">YouTube</p>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">Wanderlust Diaries</p>
</div>
<div style="padding:24px;background-color:#ffffff;border-radius:10px;border-left:4px solid #f59e0b;margin-top:32px;">
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;"><strong style="color:#1e293b;">Collaborations:</strong> I'm open to working with travel brands, tourism boards, and outdoor companies. Please include your budget range and timeline in your message.</p>
</div>
</div>
<!-- Right: Contact Form -->
<div style="flex:1;min-width:320px;">
<form style="padding:36px;background-color:#ffffff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:24px;">Send a Message</h3>
<div style="margin-bottom:20px;">
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Your Name</label>
<input type="text" placeholder="Full name" style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;box-sizing:border-box;" />
</div>
<div style="margin-bottom:20px;">
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Email Address</label>
<input type="email" placeholder="you@example.com" style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;box-sizing:border-box;" />
</div>
<div style="margin-bottom:20px;">
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Subject</label>
<select style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;background-color:#ffffff;box-sizing:border-box;">
<option value="">Select a topic</option>
<option value="collaboration">Collaboration</option>
<option value="question">Question</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div style="margin-bottom:24px;">
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Message</label>
<textarea rows="5" placeholder="Tell me what's on your mind..." style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;resize:vertical;box-sizing:border-box;"></textarea>
</div>
<button type="submit" style="width:100%;padding:14px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;border-radius:6px;cursor:pointer;">Send Message</button>
</form>
</div>
</div>
</section>
<!-- FAQ Section -->
<section style="padding:80px 48px;background-color:#ffffff;">
<div style="max-width:760px;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;">Common Questions</p>
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:48px;">FAQ</h2>
<!-- Question 1 -->
<div style="padding:28px 0;border-bottom:1px solid #e2e8f0;">
<h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">How do you fund your travels?</h3>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">I earn through a mix of brand partnerships, affiliate links, freelance writing, and photography licensing. I started while still working part-time and transitioned to full-time blogging after two years.</p>
</div>
<!-- Question 2 -->
<div style="padding:28px 0;border-bottom:1px solid #e2e8f0;">
<h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">Can I use your photos?</h3>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">All photos on this blog are my own work and are copyrighted. If you'd like to license a photo for commercial or editorial use, please reach out with details about your project and intended usage.</p>
</div>
<!-- Question 3 -->
<div style="padding:28px 0;">
<h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">How far in advance should I reach out for collaborations?</h3>
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">Ideally 4-6 weeks before your campaign start date. For destination trips, 2-3 months is best to coordinate schedules and plan content. Reach out early and we can find the right fit together.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer style="padding:48px;background-color:#1e293b;text-align:center;">
<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>

117
templates/travel-blog/destinations.html Normal file
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>

93
templates/travel-blog/home.html Normal file
View File

@@ -0,0 +1,93 @@
<!-- 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>
<!-- Hero Section -->
<section style="position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1600');background-size:cover;background-position:center;">
<div class="bg-overlay" style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(30,41,59,0.6);"></div>
<div style="position:relative;z-index:1;text-align:center;max-width:800px;padding:40px 24px;">
<p style="font-family:'Inter',sans-serif;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:16px;">Travel Blog & Stories</p>
<h1 style="font-family:'Playfair Display',serif;font-size:56px;font-weight:700;color:#ffffff;line-height:1.15;margin-bottom:24px;">Explore the World, One Story at a Time</h1>
<p style="font-family:'Inter',sans-serif;font-size:18px;color:#fffbeb;line-height:1.7;margin-bottom:40px;">Personal tales from far-flung corners of the globe, travel tips you can actually use, and photos that will fuel your wanderlust.</p>
<a href="#" style="display:inline-block;padding:16px 40px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;text-decoration:none;border-radius:6px;">Start Reading</a>
</div>
</section>
<!-- Featured Posts -->
<section style="padding:96px 48px;background-color:#fffbeb;">
<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;">Latest Stories</p>
<h2 style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:56px;">Featured Posts</h2>
<div style="display:flex;gap:32px;flex-wrap:wrap;">
<!-- Card 1: Santorini -->
<div style="flex:1;min-width:280px;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-1570077188670-e3a8d69ac5ff?w=600" alt="Santorini" style="width:100%;height:240px;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:8px;">Greece</p>
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Santorini Sunsets & Hidden Gems</h3>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Beyond the iconic blue domes lies a quieter island waiting to be explored. My week wandering through villages untouched by crowds.</p>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More &rarr;</a>
</div>
</div>
<!-- Card 2: Kyoto -->
<div style="flex:1;min-width:280px;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-1493976040374-85c8e12f0c0e?w=600" alt="Kyoto" style="width:100%;height:240px;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:8px;">Japan</p>
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Kyoto in Cherry Blossom Season</h3>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Temples draped in pink, quiet tea ceremonies, and the art of slowing down in Japan's ancient capital during its most magical season.</p>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More &rarr;</a>
</div>
</div>
<!-- Card 3: Patagonia -->
<div style="flex:1;min-width:280px;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-1531761535209-180857e963b9?w=600" alt="Patagonia" style="width:100%;height:240px;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:8px;">Argentina</p>
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Trekking Through Patagonia</h3>
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Glaciers, granite towers, and endless windswept plains. A 10-day trek through one of the last true wildernesses on Earth.</p>
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More &rarr;</a>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section style="padding:80px 48px;background-color:#1e293b;">
<div style="max-width:640px;margin:0 auto;text-align:center;">
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#ffffff;margin-bottom:12px;">Join 10,000+ Travelers</h2>
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.7;margin-bottom:32px;">Get destination guides, travel tips, and story updates delivered to your inbox every week. No spam, just wanderlust.</p>
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
<input type="email" placeholder="Your email address" style="flex:1;min-width:240px;padding:14px 20px;border:2px solid #334155;background-color:#0f172a;color:#fffbeb;font-family:'Inter',sans-serif;font-size:15px;border-radius:6px;outline:none;" />
<button style="padding:14px 32px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
</div>
</div>
</section>
<!-- Instagram-Style Grid -->
<section style="padding:64px 48px;background-color:#fffbeb;">
<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;">@wanderlustdiaries</p>
<h2 style="font-family:'Playfair Display',serif;font-size:32px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:40px;">Follow the Journey</h2>
<div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center;">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400" alt="Beach" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=400" alt="Mountains" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
<img src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400" alt="Market" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
<img src="https://images.unsplash.com/photo-1528127269322-539801943592?w=400" alt="Temple" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
</div>
</div>
</section>
<!-- Footer -->
<footer style="padding:48px;background-color:#1e293b;text-align:center;">
<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>