117 lines
6.1 KiB
HTML
117 lines
6.1 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 | Apex Solutions</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
|
|
|
|
<nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-20">
|
|
<div class="flex items-center">
|
|
<a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-10 flex items-baseline space-x-4">
|
|
<a href="about.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">About Us</a>
|
|
<a href="careers.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Careers</a>
|
|
<a href="contact.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="flex-grow max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 w-full">
|
|
<div class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
|
|
<div class="bg-slate-900 px-8 py-10 text-white">
|
|
<h2 class="text-3xl font-bold mb-2">Get in Touch</h2>
|
|
<p class="text-slate-300">Have a question or want to work together? Leave your details below and we will get back to you.</p>
|
|
</div>
|
|
|
|
<form id="contactForm" class="p-8 space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
|
|
<input type="text" id="firstName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
|
|
</div>
|
|
<div>
|
|
<label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
|
|
<input type="text" id="lastName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="you@example.com" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company / Subject</label>
|
|
<input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
|
|
<textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="How can we help you?" required></textarea>
|
|
</div>
|
|
|
|
<div id="formStatus" class="hidden rounded-md p-4 mb-4 text-sm font-medium"></div>
|
|
|
|
<button type="submit" id="submitBtn" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
Send Message
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="bg-slate-900 text-slate-400 py-12 text-center">
|
|
<p>© 2026 Apex Solutions. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
document.getElementById('contactForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('submitBtn');
|
|
const statusDiv = document.getElementById('formStatus');
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = 'Sending...';
|
|
statusDiv.classList.add('hidden');
|
|
|
|
const data = {
|
|
firstName: document.getElementById('firstName').value,
|
|
lastName: document.getElementById('lastName').value,
|
|
email: document.getElementById('email').value,
|
|
company: document.getElementById('company').value,
|
|
message: document.getElementById('message').value,
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
statusDiv.classList.remove('hidden', 'bg-red-50', 'text-red-800');
|
|
statusDiv.classList.add('bg-green-50', 'text-green-800');
|
|
statusDiv.textContent = result.message;
|
|
e.target.reset();
|
|
} catch (err) {
|
|
statusDiv.classList.remove('hidden', 'bg-green-50', 'text-green-800');
|
|
statusDiv.classList.add('bg-red-50', 'text-red-800');
|
|
statusDiv.textContent = 'Connection error. Please try again later.';
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = 'Send Message';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |