feat: added lots of work to landing page

This commit is contained in:
Blake Ridgway
2025-11-19 09:03:29 -06:00
parent 57e09ceea9
commit ac1d18f3a3
8 changed files with 1704 additions and 339 deletions

171
templates/contact.html Normal file
View File

@@ -0,0 +1,171 @@
{{define "contact"}}
<div class="contact-about-page">
<div class="hero-section">
<h1>Get in Touch</h1>
<p>We'd love to hear from you. Send us a message!</p>
</div>
<div class="about-content">
<div class="about-text">
<h2>Let's Connect</h2>
<p>
Have a question about RideAware? Want to collaborate?
Reach out and let us know how we can help.
</p>
<ul>
<li>Fast response times</li>
<li>Friendly support team</li>
<li>Multiple contact options</li>
<li>Always here to help</li>
</ul>
</div>
<form class="contact-form" id="contactForm">
<div class="form-success" id="successMessage">
<strong>Thank you!</strong> We've received your message
and will get back to you soon.
</div>
<h2>Send us a message</h2>
<div class="form-group">
<label for="name">
Full Name <span class="required">*</span>
</label>
<input
type="text"
id="name"
name="name"
required
autocomplete="name"
/>
</div>
<div class="form-group">
<label for="email">
Email Address <span class="required">*</span>
</label>
<input
type="email"
id="email"
name="email"
required
autocomplete="email"
/>
<small>We'll respond to this email address</small>
</div>
<div class="form-group">
<label for="subject">Subject <span class="required">*</span></label>
<select id="subject" name="subject" required>
<option value="">-- Select a subject --</option>
<option value="general">General Inquiry</option>
<option value="support">Support</option>
<option value="partnership">Partnership</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="message">
Message <span class="required">*</span>
</label>
<textarea
id="message"
name="message"
required
placeholder="Your message here..."
></textarea>
</div>
<div class="newsletter-opt-in">
<label for="subscribe" class="checkbox-label">
<input
type="checkbox"
id="subscribe"
name="subscribe"
class="checkbox-input"
/>
<span class="checkbox-text">
<i class="fas fa-bell"></i>
Subscribe to our newsletter for training tips and updates
</span>
</label>
</div>
<button type="submit" class="form-submit">
<i class="fas fa-paper-plane"></i>
Send Message
</button>
</form>
</div>
<div class="contact-info">
<div class="info-card">
<div class="info-card-icon">
<i class="fas fa-envelope"></i>
</div>
<h3>Email</h3>
<p>
<a href="mailto:hello@rideaware.com"
>hello@rideaware.com</a
>
</p>
</div>
<div class="info-card">
<div class="info-card-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Address</h3>
<p>1909 W Owen K Garriott Rd<br />Enid, OK 73703</p>
</div>
</div>
</div>
<script>
document.getElementById('contactForm').addEventListener(
'submit',
async (e) => {
e.preventDefault();
const form = e.target;
const formData = new FormData(form);
console.log('Form submitted');
console.log('Form data:', Object.fromEntries(formData));
try {
const response = await fetch('/contact', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(formData),
});
console.log('Response status:', response.status);
const data = await response.json();
console.log('Response data:', data);
if (response.ok) {
document.getElementById('successMessage')
.classList.add('show');
form.reset();
setTimeout(() => {
document.getElementById('successMessage')
.classList.remove('show');
}, 5000);
} else {
alert('Error: ' + (data.error || 'Failed to send message'));
}
} catch (error) {
console.error('Error:', error);
alert('Failed to send message: ' + error.message);
}
}
);
</script>
{{end}}