126 lines
5.2 KiB
Plaintext
126 lines
5.2 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact Us — <%= businessName %></title>
|
|
<link rel="stylesheet" href="<%= baseUrl %>/assets/site.css">
|
|
<style>
|
|
:root {
|
|
--primary: <%= colorScheme.primary %>;
|
|
--primary-dark: <%= colorScheme.primaryDark %>;
|
|
--primary-light: <%= colorScheme.primaryLight %>;
|
|
--accent: <%= colorScheme.accent %>;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav">
|
|
<div class="nav-inner">
|
|
<a href="<%= baseUrl %>/" class="nav-brand">
|
|
<% if (logoUrl) { %>
|
|
<img src="<%= logoUrl %>" alt="<%= businessName %> logo">
|
|
<% } %>
|
|
<%= businessName %>
|
|
</a>
|
|
<button class="nav-mobile-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Toggle menu">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
|
|
</button>
|
|
<ul class="nav-links">
|
|
<li><a href="<%= baseUrl %>/">Home</a></li>
|
|
<li><a href="<%= baseUrl %>/#how-it-works">How It Works</a></li>
|
|
<li><a href="<%= baseUrl %>/#faq">FAQ</a></li>
|
|
<li><a href="<%= baseUrl %>/contact" class="nav-cta">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="contact-section">
|
|
<div class="container">
|
|
<div class="contact-grid">
|
|
|
|
<!-- Left: Info -->
|
|
<div class="contact-info">
|
|
<h2>Get In Touch</h2>
|
|
<p>Have a question or ready to get started? Fill out the form and we'll be in touch shortly.</p>
|
|
|
|
<div class="contact-detail">
|
|
<div class="contact-detail-icon">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
|
|
</div>
|
|
<span><%= businessPhone %></span>
|
|
</div>
|
|
|
|
<div class="contact-detail">
|
|
<div class="contact-detail-icon">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
|
</div>
|
|
<span><%= businessEmail %></span>
|
|
</div>
|
|
|
|
<div class="contact-detail">
|
|
<div class="contact-detail-icon">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
|
</div>
|
|
<span><%= businessAddress %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Form -->
|
|
<div class="contact-form-card">
|
|
<form class="contact-form" onsubmit="event.preventDefault(); alert('Thank you! We will be in touch shortly.');">
|
|
<div class="form-group">
|
|
<label for="name">Full Name</label>
|
|
<input type="text" id="name" name="name" placeholder="Your full name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" placeholder="you@example.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Phone Number</label>
|
|
<input type="tel" id="phone" name="phone" placeholder="(555) 123-4567" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Message (optional)</label>
|
|
<textarea id="message" name="message" rows="3" placeholder="How can we help you?"></textarea>
|
|
</div>
|
|
|
|
<!-- SMS Consent Checkbox — CRITICAL FOR A2P COMPLIANCE -->
|
|
<div class="consent-group">
|
|
<input type="checkbox" id="smsConsent" name="smsConsent">
|
|
<label for="smsConsent" class="consent-text">
|
|
<%= a2pPacket.consentText %>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-submit">Send Message</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand"><%= businessName %></div>
|
|
<ul class="footer-links">
|
|
<li><a href="<%= baseUrl %>/">Home</a></li>
|
|
<li><a href="<%= baseUrl %>/contact">Contact</a></li>
|
|
<li><a href="<%= baseUrl %>/privacy-policy">Privacy Policy</a></li>
|
|
<li><a href="<%= baseUrl %>/terms">Terms of Service</a></li>
|
|
</ul>
|
|
<div class="footer-copy">© <%= year %> <%= businessName %>. All rights reserved. | <%= businessAddress %></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|