Josh Knapp
b511a6684d
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>
105 lines
8.5 KiB
HTML
105 lines
8.5 KiB
HTML
<!-- 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;">© 2026 Wanderlust Diaries. All rights reserved.</p>
|
|
</footer>
|