<!--
@type: Footer
@industry: E-commerce
@style: Modern
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<footer class="w-full py-12 md:py-16 bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div class="space-y-6">
<div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-package h-8 w-8 text-orange-500">
<path d="m7.5 4.27 9 5.15"></path>
<path
d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z">
</path>
<path d="m3.3 7 8.7 5 8.7-5"></path>
<path d="M12 22V12"></path>
</svg>
<span class="text-2xl font-bold text-gray-900">StyleHub</span>
</div>
<p class="text-gray-600 text-base leading-relaxed">
Your destination for curated fashion and a seamless shopping experience. Discover quality, style, and convenience.
</p>
<div class="flex gap-4">
<a href="#" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-facebook h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</a>
<a href="#" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-instagram h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</a>
<a href="#" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
<a href="#" aria-label="YouTube"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-youtube h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17">
</path>
<path d="m10 15 5-3-5-3z"></path>
</svg>
</a>
</div>
</div>
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900">Quick Links</h3>
<ul class="space-y-3 text-gray-600">
<li><a href="#" class="hover:text-orange-500 transition-colors">Shop All</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">New Arrivals</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Best Sellers</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Sale</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Gift Cards</a></li>
</ul>
</div>
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900">Customer Service</h3>
<ul class="space-y-3 text-gray-600">
<li><a href="#" class="hover:text-orange-500 transition-colors">Contact Us</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">FAQ</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Shipping & Returns</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Order Tracking</a></li>
<li><a href="#" class="hover:text-orange-500 transition-colors">Size Guide</a></li>
</ul>
</div>
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900">Stay Connected</h3>
<p class="text-gray-600">Subscribe to our newsletter for exclusive offers and updates.</p>
<form class="flex gap-2">
<input class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex-grow border-gray-300 focus:border-orange-500 focus:ring-orange-500"
placeholder="Your email address" type="email">
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs h-9 has-[>svg]:px-3 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-send h-5 w-5">
<path d="m22 2-7 20-4-9-9-4Z"></path>
<path d="M22 2 11 13"></path>
</svg>
<span class="sr-only">Subscribe</span>
</button>
</form>
<div class="text-gray-600">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-mail h-5 w-5 text-gray-500">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
<span>[email protected]</span>
</div>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
<p>© 2025 StyleHub. All rights reserved.</p>
<div class="flex justify-center gap-4 mt-2">
<a href="#" class="hover:text-orange-500 transition-colors">Privacy Policy</a>
|
<a href="#" class="hover:text-orange-500 transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>
