File size: 10,058 Bytes
1380c1d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | The Code Company</title>
<meta name="description" content="Get in touch with our team to discuss your project.">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-navy-900 text-ivory-100 font-sans">
<custom-navbar></custom-navbar>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Contact Us</h1>
<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
Let's discuss how we can help design and implement your intelligent systems.
</p>
</div>
</section>
<!-- Contact Form -->
<section class="py-20 bg-navy-900">
<div class="container mx-auto px-6 max-w-4xl">
<div class="grid md:grid-cols-2 gap-12">
<div>
<h2 class="text-3xl font-serif font-bold mb-6 text-gold-500">Get in Touch</h2>
<p class="text-platinum-400 mb-8">
Whether you're exploring AI implementation, need infrastructure guidance, or require government advisory services, our team can help.
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i data-feather="mail" class="text-gold-500 w-5 h-5"></i>
</div>
<div>
<h3 class="text-lg font-bold mb-1">Email</h3>
<a href="mailto:contact@thecodecompany.ai" class="text-platinum-400 hover:text-gold-500 transition-colors">contact@thecodecompany.ai</a>
</div>
</div>
<div class="flex items-start">
<div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i data-feather="phone" class="text-gold-500 w-5 h-5"></i>
</div>
<div>
<h3 class="text-lg font-bold mb-1">Phone</h3>
<a href="tel:+18005551234" class="text-platinum-400 hover:text-gold-500 transition-colors">+1 (800) 555-1234</a>
</div>
</div>
<div class="flex items-start">
<div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i data-feather="map-pin" class="text-gold-500 w-5 h-5"></i>
</div>
<div>
<h3 class="text-lg font-bold mb-1">Office</h3>
<p class="text-platinum-400">123 Engineering Lane<br>San Francisco, CA 94107</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
<i data-feather="clock" class="text-gold-500 w-5 h-5"></i>
</div>
<div>
<h3 class="text-lg font-bold mb-1">Hours</h3>
<p class="text-platinum-400">Monday - Friday<br>9:00 AM - 5:00 PM PST</p>
</div>
</div>
</div>
<div class="mt-10">
<h3 class="text-lg font-bold mb-4 text-gold-500">Follow Us</h3>
<div class="flex gap-4">
<a href="#" class="bg-navy-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gold-500 hover:text-navy-900 transition-colors">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="bg-navy-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gold-500 hover:text-navy-900 transition-colors">
<i data-feather="twitter"></i>
</a>
<a href="#" class="bg-navy-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gold-500 hover:text-navy-900 transition-colors">
<i data-feather="github"></i>
</a>
</div>
</div>
</div>
<div class="bg-navy-800 p-8 rounded-sm">
<form class="space-y-6">
<div>
<label for="name" class="block text-platinum-400 mb-2">Full Name</label>
<input type="text" id="name" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
</div>
<div>
<label for="email" class="block text-platinum-400 mb-2">Email</label>
<input type="email" id="email" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
</div>
<div>
<label for="company" class="block text-platinum-400 mb-2">Company</label>
<input type="text" id="company" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
</div>
<div>
<label for="service" class="block text-platinum-400 mb-2">Service Interest</label>
<select id="service" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
<option>Select a service</option>
<option>AI & Data Systems</option>
<option>Cloud Infrastructure</option>
<option>Technical Strategy</option>
<option>Government Advisory</option>
<option>Other</option>
</select>
</div>
<div>
<label for="message" class="block text-platinum-400 mb-2">Message</label>
<textarea id="message" rows="4" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500"></textarea>
</div>
<button type="submit" class="w-full bg-gold-500 hover:bg-gold-600 text-navy-900 font-bold py-3 px-8 rounded-sm transition-all duration-300 transform hover:scale-[1.02]">
Submit Message
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<section class="relative h-96 bg-navy-800 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-navy-900/70 to-navy-900/30 z-10"></div>
<div class="absolute inset-0 flex items-center justify-center z-20">
<div class="text-center px-6">
<h3 class="text-2xl font-serif font-bold mb-4 text-gold-500">Visit Our Office</h3>
<p class="text-platinum-400 mb-6 max-w-md mx-auto">Schedule a meeting with our team in San Francisco.</p>
<a href="#" class="inline-block border border-gold-500 text-gold-500 hover:bg-gold-500/10 font-bold py-3 px-8 rounded-sm transition-all duration-300">
Request Meeting
</a>
</div>
</div>
<div class="absolute inset-0 bg-gray-800">
<!-- Map placeholder -->
<div class="w-full h-full flex items-center justify-center text-platinum-400">
<i data-feather="map" class="w-16 h-16 opacity-20"></i>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html> |