starting public section
This commit is contained in:
257
templates/public/contact.html
Normal file
257
templates/public/contact.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact Us - DocuPulse</title>
|
||||
<meta name="description" content="Get in touch with the DocuPulse team. We're here to help with your enterprise document management needs.">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
|
||||
<style>
|
||||
.contact-section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
.contact-card {
|
||||
background: var(--white);
|
||||
border-radius: 15px;
|
||||
padding: 40px 30px;
|
||||
box-shadow: 0 5px 15px var(--shadow-color);
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
.contact-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
padding: 120px 0 80px 0;
|
||||
}
|
||||
.form-control {
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 12px 15px;
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-opacity-15);
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header_nav.html' %}
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">Get in Touch</h1>
|
||||
<p class="lead fs-5">We're here to help with your enterprise document management needs</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<section class="contact-section">
|
||||
<div class="container">
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="contact-card text-center">
|
||||
<div class="contact-icon">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">Email Us</h4>
|
||||
<p class="text-muted mb-3">Get in touch with our support team</p>
|
||||
<a href="mailto:info@docupulse.com" class="text-decoration-none" style="color: var(--primary-color);">
|
||||
info@docupulse.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="contact-card text-center">
|
||||
<div class="contact-icon">
|
||||
<i class="fas fa-phone"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">Call Us</h4>
|
||||
<p class="text-muted mb-3">Speak with our sales team</p>
|
||||
<a href="tel:+15551234567" class="text-decoration-none" style="color: var(--primary-color);">
|
||||
+1 (555) 123-4567
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="contact-card text-center">
|
||||
<div class="contact-icon">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">Support Hours</h4>
|
||||
<p class="text-muted mb-3">We're here when you need us</p>
|
||||
<span style="color: var(--primary-color);">24/7 Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="contact-card">
|
||||
<h2 class="text-center mb-4">Send us a Message</h2>
|
||||
<form>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="firstName" class="form-label">First Name *</label>
|
||||
<input type="text" class="form-control" id="firstName" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="lastName" class="form-label">Last Name *</label>
|
||||
<input type="text" class="form-control" id="lastName" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">Email Address *</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone" class="form-label">Phone Number</label>
|
||||
<input type="tel" class="form-control" id="phone">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="company" class="form-label">Company</label>
|
||||
<input type="text" class="form-control" id="company">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="subject" class="form-label">Subject *</label>
|
||||
<select class="form-control" id="subject" required>
|
||||
<option value="">Select a subject</option>
|
||||
<option value="sales">Sales Inquiry</option>
|
||||
<option value="support">Technical Support</option>
|
||||
<option value="demo">Request Demo</option>
|
||||
<option value="pricing">Pricing Questions</option>
|
||||
<option value="partnership">Partnership</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="message" class="form-label">Message *</label>
|
||||
<textarea class="form-control" id="message" rows="5" required placeholder="Tell us how we can help you..."></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="newsletter">
|
||||
<label class="form-check-label" for="newsletter">
|
||||
Subscribe to our newsletter for updates and insights
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<button type="submit" class="btn btn-primary btn-lg px-5">
|
||||
<i class="fas fa-paper-plane me-2"></i>Send Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Office Locations -->
|
||||
<section class="contact-section" style="background-color: var(--bg-color);">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-5 fw-bold mb-3">Our Offices</h2>
|
||||
<p class="lead text-muted">Visit us at one of our locations</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<div class="contact-card">
|
||||
<h4 class="fw-bold mb-3">
|
||||
<i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>
|
||||
Headquarters
|
||||
</h4>
|
||||
<p class="text-muted mb-3">
|
||||
123 Business Street<br>
|
||||
Suite 100<br>
|
||||
San Francisco, CA 94105<br>
|
||||
United States
|
||||
</p>
|
||||
<a href="tel:+15551234567" class="text-decoration-none" style="color: var(--primary-color);">
|
||||
<i class="fas fa-phone me-2"></i>+1 (555) 123-4567
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="contact-card">
|
||||
<h4 class="fw-bold mb-3">
|
||||
<i class="fas fa-map-marker-alt me-2" style="color: var(--primary-color);"></i>
|
||||
European Office
|
||||
</h4>
|
||||
<p class="text-muted mb-3">
|
||||
456 Innovation Avenue<br>
|
||||
Floor 3<br>
|
||||
London, UK SW1A 1AA<br>
|
||||
United Kingdom
|
||||
</p>
|
||||
<a href="tel:+442071234567" class="text-decoration-none" style="color: var(--primary-color);">
|
||||
<i class="fas fa-phone me-2"></i>+44 20 7123 4567
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-5">
|
||||
<div class="container text-center">
|
||||
<h2 class="display-5 fw-bold mb-4">Ready to Get Started?</h2>
|
||||
<p class="lead text-muted mb-5">Join thousands of businesses using DocuPulse for their document management needs</p>
|
||||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||
<a href="{{ url_for('public.pricing') }}" class="btn btn-primary btn-lg px-5 py-3">
|
||||
<i class="fas fa-rocket me-2"></i>View Pricing
|
||||
</a>
|
||||
<a href="{{ url_for('public.features') }}" class="btn btn-outline-primary btn-lg px-5 py-3">
|
||||
<i class="fas fa-play me-2"></i>Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include 'components/footer_nav.html' %}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Form submission handling
|
||||
document.querySelector('form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const formData = new FormData(this);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
// Show success message (in a real app, this would send to server)
|
||||
alert('Thank you for your message! We\'ll get back to you soon.');
|
||||
this.reset();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user