259 lines
12 KiB
HTML
259 lines
12 KiB
HTML
<!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 -->
|
|
{% with
|
|
title="Get in Touch",
|
|
description="We're here to help with your enterprise document management needs",
|
|
title_size="4",
|
|
description_size="5"
|
|
%}
|
|
{% include 'components/hero_section.html' %}
|
|
{% endwith %}
|
|
|
|
<!-- 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> |