84 lines
No EOL
5.1 KiB
HTML
84 lines
No EOL
5.1 KiB
HTML
<footer class="bg-kh3-black text-white/70">
|
|
<!-- Section 1: Call to Action -->
|
|
<div class="py-20 px-8 bg-black">
|
|
<div class="container mx-auto max-w-6xl text-center">
|
|
<h2 class="text-3xl md:text-5xl font-bold text-white mb-6 opacity-0" data-anim="fade-in-up"
|
|
data-anim-delay="200">
|
|
Let's Build Something Inspiring Together
|
|
</h2>
|
|
<p class="text-lg md:text-xl text-neutral-400 max-w-3xl mx-auto mb-10 opacity-0" data-anim="fade-in-up"
|
|
data-anim-delay="300">
|
|
Ready to start your next project? We're here to turn your vision into a stunning reality.
|
|
</p>
|
|
<a href="contact.html"
|
|
class="inline-block bg-kh3-red text-white font-semibold uppercase tracking-wider px-8 py-4 rounded-md transition-transform transform hover:scale-105 hover:shadow-lg hover:shadow-red-500/30 opacity-0"
|
|
data-trans="crossfade" data-anim="fade-in-up" data-anim-delay="400">
|
|
Get In Touch
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Main Footer Content -->
|
|
<div class="py-16 px-8">
|
|
<div class="container mx-auto max-w-7xl">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 text-center md:text-left">
|
|
|
|
<!-- Column 1: Brand -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="200">
|
|
<a href="index.html" class="inline-block mb-4">
|
|
<img src="assets/images/kh3_logo.webp" alt="KH3 Logo" class="w-14 h-14 mx-auto md:mx-0">
|
|
</a>
|
|
<p class="text-sm leading-relaxed max-w-xs mx-auto md:mx-0">
|
|
Building inspiring spaces through innovative construction and design solutions since 2014.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Column 2: Navigate -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="300">
|
|
<h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Navigate</h3>
|
|
<ul class="space-y-3">
|
|
<li><a href="index.html" class="hover:text-kh3-red transition-colors">Home</a></li>
|
|
<li><a href="about.html" class="hover:text-kh3-red transition-colors">Why KH3</a></li>
|
|
<li><a href="services.html" class="hover:text-kh3-red transition-colors">How We Work</a>
|
|
</li>
|
|
<li><a href="projects.html" class="hover:text-kh3-red transition-colors">Our What</a></li>
|
|
<li><a href="who.html" class="hover:text-kh3-red transition-colors">Who We Are</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Column 3: Connect -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="400">
|
|
<h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Connect</h3>
|
|
<ul class="space-y-3">
|
|
<li><a href="tel:+233303969970" class="hover:text-kh3-red transition-colors">+233 30 396
|
|
9970</a></li>
|
|
<li><a href="mailto:info@kh3group.com"
|
|
class="hover:text-kh3-red transition-colors">info@kh3group.com</a></li>
|
|
</ul>
|
|
<!-- Social Icons (add your links) -->
|
|
<div class="flex justify-center md:justify-start space-x-4 mt-6">
|
|
<a href="https://linkedin.com" aria-label="LinkedIn"
|
|
class="hover:text-kh3-red transition-colors">LinkedIn</a>
|
|
<a href="https://instagram.com" aria-label="Instagram"
|
|
class="hover:text-kh3-red transition-colors">Instagram</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 4: Location -->
|
|
<div class="opacity-0" data-anim="fade-in-up" data-anim-delay="500">
|
|
<h3 class="text-lg font-semibold text-white mb-4 uppercase tracking-wider">Location</h3>
|
|
<p class="text-sm leading-relaxed">29 Labone Crescent, Accra, Ghana</p>
|
|
<div class="mt-4 rounded-lg overflow-hidden border border-neutral-800 h-32">
|
|
<iframe title="KH3 Office Location" width="100%" height="100%"
|
|
style="border:0; filter: invert(90%) grayscale(80%);" loading="lazy" allowfullscreen
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.835158882042!2d-0.1741!3d5.5898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9a7c0f1b4c6b%3A0x8f7c9e0f3b4c9a3!2s29%20Labone%20Cres%2C%20Accra%2C%20Ghana!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="mt-16 pt-8 border-t border-neutral-800 text-center text-sm text-neutral-500">
|
|
<p>© <span id="current-year"></span> KH3 Group. All Rights Reserved.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer> |