Загрузка...
Адаптивный темный футер для сайта фотографа на Tailwind CSS. Включает контакты, ссылки, соцсети, CTA. Идеально для портфолио.
<section class="mt-20">
<div class="relative w-full max-w-4xl mr-auto ml-auto">
<div class="relative overflow-hidden bg-neutral-900 rounded-3xl">
<div class="relative z-10 sm:p-8 md:p-10 pt-6 pr-6 pb-6 pl-6">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
<!-- Left Column - Brand & Contact -->
<div class="lg:col-span-7">
<div class="flex items-center gap-3 mb-6">
<div class="h-12 w-12 rounded-full bg-white/10 ring-1 ring-white/20 flex items-center justify-center">
<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="h-6 w-6 text-white" style="stroke-width: 1.5;">
<path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" class=""></path>
<circle cx="12" cy="13" r="3" class=""></circle>
</svg>
</div>
<div class="">
<h3 class="text-xl font-medium text-white tracking-tight font-geist">Sarah Chen Photography</h3>
<p class="text-white/60 text-sm font-geist">Capturing life's precious moments</p>
</div>
</div>
<div class="space-y-4 mb-8">
<div class="flex items-center gap-3">
<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="h-4 w-4 text-white/60" style="stroke-width: 1.5;">
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path>
<circle cx="12" cy="10" r="3" class=""></circle>
</svg>
<span class="text-white/80 text-sm font-geist">New York, NY • Available Worldwide</span>
</div>
<div class="flex items-center gap-3">
<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="h-4 w-4 text-white/60" style="stroke-width: 1.5;">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
<rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
</svg>
<a href="mailto:hello@sarahchenphotography.com" class="text-white/80 hover:text-white transition-colors text-sm font-geist">hello@sarahchenphotography.com</a>
</div>
<div class="flex items-center gap-3">
<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="h-4 w-4 text-white/60" style="stroke-width: 1.5;">
<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path>
</svg>
<a href="tel:+12125551234" class="text-white/80 hover:text-white transition-colors text-sm font-geist">(212) 555-1234</a>
</div>
</div>
<!-- CTA Button -->
<a href="#contact" class="inline-flex items-center justify-center gap-2 bg-amber-500 hover:bg-amber-400 text-neutral-900 px-6 py-3 rounded-xl text-sm font-medium transition-colors font-geist">
Let's Work Together
<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="h-4 w-4" style="stroke-width: 1.5;">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
<!-- Right Column - Links & Social -->
<div class="lg:col-span-5">
<div class="grid grid-cols-2 gap-8">
<!-- Services Links -->
<div class="">
<h4 class="text-white font-medium mb-4 font-geist">Services</h4>
<ul class="space-y-2">
<li><a href="#services" class="text-white/60 hover:text-white transition-colors text-sm font-geist">Wedding Photography</a></li>
<li><a href="#services" class="text-white/60 hover:text-white transition-colors text-sm font-geist">Portrait Sessions</a></li>
<li><a href="#services" class="text-white/60 hover:text-white transition-colors text-sm font-geist">Event Photography</a></li>
<li><a href="#services" class="text-white/60 hover:text-white transition-colors text-sm font-geist">Commercial Work</a></li>
</ul>
</div>
<!-- Quick Links -->
<div class="">
<h4 class="text-white font-medium mb-4 font-geist">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#portfolio" class="text-white/60 hover:text-white transition-colors text-sm font-geist">Portfolio</a></li>
<li><a href="#about" class="text-white/60 hover:text-white transition-colors text-sm font-geist">About</a></li>
<li><a href="#pricing" class="text-white/60 hover:text-white transition-colors text-sm font-geist">Investment</a></li>
<li><a href="#contact" class="text-white/60 hover:text-white transition-colors text-sm font-geist">Contact</a></li>
</ul>
</div>
</div>
<!-- Social Media -->
<div class="mt-8">
<h4 class="text-white font-medium mb-4 font-geist">Follow Along</h4>
<div class="flex gap-3">
<a href="#" class="flex items-center justify-center h-10 w-10 rounded-full bg-white/10 ring-1 ring-white/20 text-white/80 hover:text-white hover:bg-white/20 transition-all">
<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="h-4 w-4" style="stroke-width: 1.5;">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
<path d="m16 11.37-2.5-1.87-2.5 1.87V4h5z" class=""></path>
</svg>
</a>
<a href="#" class="flex items-center justify-center h-10 w-10 rounded-full bg-white/10 ring-1 ring-white/20 text-white/80 hover:text-white hover:bg-white/20 transition-all">
<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="h-4 w-4" style="stroke-width: 1.5;">
<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" class=""></path>
</svg>
</a>
<a href="#" class="flex items-center justify-center h-10 w-10 rounded-full bg-white/10 ring-1 ring-white/20 text-white/80 hover:text-white hover:bg-white/20 transition-all">
<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="h-4 w-4" style="stroke-width: 1.5;">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path>
</svg>
</a>
<a href="#" class="flex items-center justify-center h-10 w-10 rounded-full bg-white/10 ring-1 ring-white/20 text-white/80 hover:text-white hover:bg-white/20 transition-all">
<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="h-4 w-4" style="stroke-width: 1.5;">
<circle cx="12" cy="12" r="4" class=""></circle>
<path d="m12 1 3 6 6 3-6 3-3 6-3-6-6-3 6-3z" class=""></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="border-t border-white/10 mt-10 pt-6">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-white/50 text-xs font-geist">© 2024 Sarah Chen Photography. All rights reserved.</p>
<div class="flex items-center gap-6 text-xs">
<a href="#" class="text-white/50 hover:text-white/80 transition-colors font-geist">Privacy Policy</a>
<a href="#" class="text-white/50 hover:text-white/80 transition-colors font-geist">Terms of Service</a>
<a href="#" class="text-white/50 hover:text-white/80 transition-colors font-geist">Print Release</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>