Refactor project structure: remove React integration and ContactForm component, update package dependencies, and enhance Footer and Header components with improved styling and layout. Change project name from "Omoluabi Foundation" to "Omoluabi Association" across various files.
This commit is contained in:
becarta
@@ -1,75 +1,71 @@
|
||||
---
|
||||
// Footer.astro - Modern Nigerian-themed footer
|
||||
// Footer.astro - Modern Nigerian-themed footer with custom CSS
|
||||
---
|
||||
|
||||
<footer class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white relative overflow-hidden">
|
||||
<footer class="footer">
|
||||
<!-- Background Pattern -->
|
||||
<div class="absolute inset-0 opacity-5">
|
||||
<div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.1\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
</div>
|
||||
<div class="footer-bg-pattern"></div>
|
||||
|
||||
<!-- Decorative Top Border -->
|
||||
<div class="h-2 bg-gradient-to-r from-nigerian-green-500 via-kente-gold-500 to-ankara-red-500"></div>
|
||||
<div class="footer-top-border"></div>
|
||||
|
||||
<div class="container mx-auto px-4 py-16 relative z-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
<div class="footer-container">
|
||||
<div class="footer-grid">
|
||||
|
||||
<!-- Brand Section -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo-section">
|
||||
<!-- Logo -->
|
||||
<div class="relative">
|
||||
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-nigerian-green-500 via-white to-nigerian-green-500 p-0.5 shadow-xl">
|
||||
<div class="w-full h-full rounded-full bg-gray-800 flex items-center justify-center">
|
||||
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-nigerian-green-500 to-kente-gold-500 flex items-center justify-center">
|
||||
<span class="text-white font-bold text-xl">O</span>
|
||||
<div class="footer-logo-container">
|
||||
<div class="footer-logo-flag">
|
||||
<div class="footer-logo-inner">
|
||||
<div class="footer-logo-symbol">
|
||||
<span>O</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -top-1 -right-1 w-5 h-5 bg-kente-gold-400 rounded-full animate-pulse"></div>
|
||||
<div class="footer-logo-accent"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline text-3xl font-bold bg-gradient-to-r from-nigerian-green-400 to-kente-gold-400 bg-clip-text text-transparent">
|
||||
Omoluabi Foundation
|
||||
</h3>
|
||||
<p class="text-gray-400 text-sm">Building Bridges, Celebrating Heritage</p>
|
||||
<div class="footer-brand-text">
|
||||
<h3 class="footer-brand-title">Omoluabi Association</h3>
|
||||
<p class="footer-brand-subtitle">Building Bridges, Celebrating Heritage</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-300 leading-relaxed mb-6 max-w-md">
|
||||
<p class="footer-description">
|
||||
Connecting Nigerian hearts in the Netherlands through culture, community, and compassion.
|
||||
Together, we preserve our heritage while embracing our future.
|
||||
</p>
|
||||
|
||||
<!-- Nigerian Flag Colors Accent -->
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="flex gap-1">
|
||||
<div class="w-4 h-6 bg-nigerian-green-500 rounded-sm"></div>
|
||||
<div class="w-4 h-6 bg-white rounded-sm"></div>
|
||||
<div class="w-4 h-6 bg-nigerian-green-500 rounded-sm"></div>
|
||||
<div class="footer-flag-section">
|
||||
<div class="footer-flag">
|
||||
<div class="flag-stripe flag-green"></div>
|
||||
<div class="flag-stripe flag-white"></div>
|
||||
<div class="flag-stripe flag-green"></div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400">Proudly Nigerian 🇳🇬 in the Netherlands 🇳🇱</span>
|
||||
<span class="footer-flag-text">Proudly Nigerian 🇳🇬 in the Netherlands 🇳🇱</span>
|
||||
</div>
|
||||
|
||||
<!-- Social Media Links -->
|
||||
<div class="flex gap-4">
|
||||
<a href="#" class="group bg-gray-800 hover:bg-nigerian-green-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
|
||||
<svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
|
||||
<div class="footer-social">
|
||||
<a href="#" class="social-link social-twitter">
|
||||
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="group bg-gray-800 hover:bg-kente-gold-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
|
||||
<svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
|
||||
<a href="#" class="social-link social-facebook">
|
||||
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="group bg-gray-800 hover:bg-ankara-red-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
|
||||
<svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
|
||||
<a href="#" class="social-link social-instagram">
|
||||
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.097.118.112.221.083.343-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="group bg-gray-800 hover:bg-adire-blue-500 p-3 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-6">
|
||||
<svg class="w-5 h-5 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
|
||||
<a href="#" class="social-link social-linkedin">
|
||||
<svg class="social-icon" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -77,93 +73,74 @@
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div>
|
||||
<h4 class="font-headline text-xl font-bold mb-6 text-white flex items-center gap-2">
|
||||
<span class="w-1 h-6 bg-gradient-to-b from-nigerian-green-400 to-kente-gold-400 rounded-full"></span>
|
||||
<div class="footer-section">
|
||||
<h4 class="footer-section-title">
|
||||
<span class="footer-section-accent"></span>
|
||||
Quick Links
|
||||
</h4>
|
||||
<nav class="space-y-3">
|
||||
<a href="/" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
|
||||
Home
|
||||
</a>
|
||||
<a href="/events" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
|
||||
Events
|
||||
</a>
|
||||
<a href="/members" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
|
||||
Members
|
||||
</a>
|
||||
<a href="/orphanage" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
|
||||
Orphanage
|
||||
</a>
|
||||
<a href="/contact" class="block text-gray-300 hover:text-nigerian-green-400 transition-colors duration-200 hover:translate-x-1 transform">
|
||||
Contact
|
||||
</a>
|
||||
<a href="/join" class="block text-kente-gold-400 hover:text-kente-gold-300 transition-colors duration-200 hover:translate-x-1 transform font-semibold">
|
||||
Join Us →
|
||||
</a>
|
||||
<nav class="footer-nav">
|
||||
<a href="/home" class="footer-nav-link">Home</a>
|
||||
<a href="/events" class="footer-nav-link">Events</a>
|
||||
<a href="/members" class="footer-nav-link">Members</a>
|
||||
<a href="/orphanage" class="footer-nav-link">Orphanage</a>
|
||||
<a href="/contact" class="footer-nav-link">Contact</a>
|
||||
<a href="/join" class="footer-nav-link footer-nav-cta">Join Us →</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div>
|
||||
<h4 class="font-headline text-xl font-bold mb-6 text-white flex items-center gap-2">
|
||||
<span class="w-1 h-6 bg-gradient-to-b from-ankara-red-400 to-nigerian-green-400 rounded-full"></span>
|
||||
<div class="footer-section">
|
||||
<h4 class="footer-section-title">
|
||||
<span class="footer-section-accent footer-section-accent-alt"></span>
|
||||
Get in Touch
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="bg-nigerian-green-500/20 p-2 rounded-lg mt-1">
|
||||
<svg class="w-4 h-4 text-nigerian-green-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<div class="footer-contact">
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon contact-location">
|
||||
<svg class="contact-icon-svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-300 text-sm leading-relaxed">
|
||||
Amsterdam, Netherlands<br/>
|
||||
Various locations across NL
|
||||
</p>
|
||||
<div class="contact-text">
|
||||
<p>Amsterdam, Netherlands<br/>Various locations across NL</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="bg-kente-gold-500/20 p-2 rounded-lg mt-1">
|
||||
<svg class="w-4 h-4 text-kente-gold-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon contact-phone">
|
||||
<svg class="contact-icon-svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-300 text-sm">
|
||||
+31 (0) 123 456 789
|
||||
</p>
|
||||
<div class="contact-text">
|
||||
<p>+31 (0) 123 456 789</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="bg-ankara-red-500/20 p-2 rounded-lg mt-1">
|
||||
<svg class="w-4 h-4 text-ankara-red-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<div class="contact-item">
|
||||
<div class="contact-icon contact-email">
|
||||
<svg class="contact-icon-svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-300 text-sm">
|
||||
info@omoluabi.nl
|
||||
</p>
|
||||
<div class="contact-text">
|
||||
<p>info@omoluabi.nl</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Signup -->
|
||||
<div class="mt-8 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
|
||||
<h5 class="font-semibold mb-3 text-white">Stay Updated</h5>
|
||||
<div class="flex gap-2">
|
||||
<div class="footer-newsletter">
|
||||
<h5 class="newsletter-title">Stay Updated</h5>
|
||||
<div class="newsletter-form">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
class="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm text-white placeholder-gray-400 focus:border-nigerian-green-400 focus:outline-none"
|
||||
class="newsletter-input"
|
||||
/>
|
||||
<button class="bg-nigerian-green-500 hover:bg-nigerian-green-600 px-4 py-2 rounded-lg transition-colors duration-200">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<button class="newsletter-button">
|
||||
<svg class="newsletter-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -173,34 +150,510 @@
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<div class="border-t border-gray-700 mt-12 pt-8">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-bottom-content">
|
||||
<!-- Copyright -->
|
||||
<div class="text-gray-400 text-sm">
|
||||
<span>© {new Date().getFullYear()} Omoluabi Foundation Netherlands. </span>
|
||||
<span class="text-nigerian-green-400">Made with ❤️ </span>
|
||||
<div class="footer-copyright">
|
||||
<span>© {new Date().getFullYear()} Omoluabi Association Netherlands. </span>
|
||||
<span class="copyright-heart">Made with ❤️ </span>
|
||||
<span>for the Nigerian community.</span>
|
||||
</div>
|
||||
|
||||
<!-- Additional Links -->
|
||||
<div class="flex gap-6 text-sm">
|
||||
<a href="/privacy" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
|
||||
<a href="/terms" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a>
|
||||
<a href="/sitemap" class="text-gray-400 hover:text-white transition-colors">Sitemap</a>
|
||||
<div class="footer-links">
|
||||
<a href="/privacy" class="footer-link">Privacy Policy</a>
|
||||
<a href="/terms" class="footer-link">Terms of Service</a>
|
||||
<a href="/sitemap" class="footer-link">Sitemap</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cultural Quote -->
|
||||
<div class="mt-6 text-center">
|
||||
<p class="text-gray-500 italic text-sm">
|
||||
"Omoluabi ni wa" - We are people of good character
|
||||
</p>
|
||||
<div class="flex justify-center mt-2 gap-1">
|
||||
<span class="text-nigerian-green-400">🌟</span>
|
||||
<span class="text-kente-gold-400">🌟</span>
|
||||
<span class="text-ankara-red-400">🌟</span>
|
||||
<div class="footer-quote">
|
||||
<p class="quote-text">"Omoluabi ni wa" - We are people of good character</p>
|
||||
<div class="quote-stars">
|
||||
<span class="star star-green">🌟</span>
|
||||
<span class="star star-gold">🌟</span>
|
||||
<span class="star star-red">🌟</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
/* Footer Styles */
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-bg-pattern {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.05;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.footer-top-border {
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #16a34a, #f59e0b, #dc2626);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 2rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Brand Section */
|
||||
.footer-brand {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.footer-brand {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-logo-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-logo-flag {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(45deg, #16a34a, #ffffff, #16a34a);
|
||||
padding: 2px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.footer-logo-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-logo-symbol {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #16a34a, #f59e0b);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-logo-symbol span {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.footer-logo-accent {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: #f59e0b;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.footer-brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-brand-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(45deg, #16a34a, #f59e0b);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.footer-brand-subtitle {
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
color: #d1d5db;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.footer-flag-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-flag {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.flag-stripe {
|
||||
width: 1rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.flag-green {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.flag-white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.footer-flag-text {
|
||||
font-size: 0.875rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
background: #374151;
|
||||
padding: 0.75rem;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
transform: scale(1.1) rotate(6deg);
|
||||
}
|
||||
|
||||
.social-twitter:hover {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.social-facebook:hover {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.social-instagram:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.social-linkedin:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #9ca3af;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover .social-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Footer Sections */
|
||||
.footer-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-section-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-section-accent {
|
||||
width: 4px;
|
||||
height: 1.5rem;
|
||||
background: linear-gradient(180deg, #16a34a, #f59e0b);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.footer-section-accent-alt {
|
||||
background: linear-gradient(180deg, #dc2626, #16a34a);
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.footer-nav-link {
|
||||
color: #d1d5db;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.footer-nav-link:hover {
|
||||
color: #16a34a;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.footer-nav-cta {
|
||||
color: #f59e0b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-nav-cta:hover {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.footer-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.contact-location {
|
||||
background: rgba(22, 163, 74, 0.2);
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.contact-email {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
.contact-icon-svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.contact-location .contact-icon-svg {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.contact-phone .contact-icon-svg {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.contact-email .contact-icon-svg {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.contact-text p {
|
||||
color: #d1d5db;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Newsletter */
|
||||
.footer-newsletter {
|
||||
padding: 1rem;
|
||||
background: rgba(55, 65, 81, 0.5);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
.newsletter-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.newsletter-input {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #374151;
|
||||
border: 1px solid #4b5563;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.newsletter-input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.newsletter-input:focus {
|
||||
border-color: #16a34a;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.newsletter-button {
|
||||
background: #16a34a;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.newsletter-button:hover {
|
||||
background: #15803d;
|
||||
}
|
||||
|
||||
.newsletter-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Bottom Section */
|
||||
.footer-bottom {
|
||||
border-top: 1px solid #4b5563;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer-bottom-content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer-copyright {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-heart {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #9ca3af;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-quote {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.quote-stars {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.star-green {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.star-gold {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.star-red {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user