<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dani's Barbershop - Savannah & Garden City</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
}
.hero-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://googleusercontent.com/file_content/0');
background-size: cover;
background-position: center;
}
.call-button {
transition: all 0.3s ease;
animation: pulse 2s infinite;
}
.call-button:hover {
transform: scale(1.05);
animation: none;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
.sticky-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 50;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- Header & Hero Section -->
<header class="hero-bg">
<div class="container mx-auto px-6 py-20 text-center">
<!-- Name and Address Added Here -->
<div class="mb-8 bg-black bg-opacity-50 inline-block p-4 rounded-lg">
<h2 class="text-3xl md:text-4xl font-bold text-white uppercase tracking-wider">Dani's Barbershop</h2>
<p class="text-md md:text-lg text-gray-300 mt-1">5548 Ogeechee Rd suite f, Savannah, GA 31405</p>
</div>
<h1 class="text-4xl md:text-6xl font-black text-white uppercase tracking-tight leading-tight mb-4">The Best Haircut in Savannah</h1>
<p class="text-lg md:text-xl text-gray-200 mb-10 max-w-2xl mx-auto">Expert Fades, Sharp Lineups, and Modern Styles. Your search for the perfect barber is over.</p>
<a href="tel:912-755-9904" class="call-button inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-5 px-12 rounded-lg text-2xl uppercase tracking-wider">
<i class="fas fa-phone mr-3"></i>
Call Now: (912) 755-9904
</a>
</div>
</header>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-800">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-12">Services For The Modern Gentleman</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Service 1 -->
<div class="bg-gray-900 p-8 rounded-lg">
<i class="fas fa-signature text-4xl text-red-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Skin Fades</h3>
<p class="text-gray-400">Perfectly blended for a clean, sharp finish.</p>
</div>
<!-- Service 2 -->
<div class="bg-gray-900 p-8 rounded-lg">
<i class="fas fa-cut text-4xl text-red-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Classic Cuts</h3>
<p class="text-gray-400">Timeless styles, tailored to your preference.</p>
</div>
<!-- Service 3 -->
<div class="bg-gray-900 p-8 rounded-lg">
<i class="fas fa-beard text-4xl text-red-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Beard Trims</h3>
<p class="text-gray-400">Expert shaping and line-ups for a polished look.</p>
</div>
<!-- Service 4 -->
<div class="bg-gray-900 p-8 rounded-lg">
<i class="fas fa-palette text-4xl text-red-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Hair Designs</h3>
<p class="text-gray-400">Custom art and color to express your style.</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">See Our Work</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="rounded-lg overflow-hidden h-64">
<img src="http://googleusercontent.com/file_content/1" alt="Slicked back hair cut" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden h-64">
<img src="http://googleusercontent.com/file_content/2" alt="Fade haircut with beard" class="w-full h-full object-cover">
</div>
<div class="rounded-lg overflow-hidden h-64 col-span-2 md:col-span-1">
<img src="http://googleusercontent.com/file_content/3" alt="Creative hair design with color" class="w-full h-full object-cover">
</div>
</div>
</div>
</section>
<!-- Location Section -->
<section id="location" class="py-20 bg-gray-800">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-4">Visit Us Today</h2>
<p class="text-gray-400 mb-8">Walk-ins are always welcome!</p>
<div class="text-xl space-y-4">
<p><i class="fas fa-map-marker-alt text-red-500 w-6"></i> 5548 Ogeechee Rd suite f, Savannah, GA 31405</p>
<p><i class="fas fa-phone text-red-500 w-6"></i> (912) 755-9904</p>
<p><i class="fas fa-clock text-red-500 w-6"></i> Mon - Sat: 9am - 7pm | Sun: Closed</p>
</div>
</div>
</section>
<!-- Spacer for sticky footer -->
<div class="h-24"></div>
<!-- Sticky Footer Call Button (Mobile) -->
<div class="sticky-footer bg-gray-900 bg-opacity-90 p-4 border-t border-gray-700">
<a href="tel:912-755-9904" class="w-full call-button flex items-center justify-center bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-6 rounded-lg text-xl uppercase tracking-wider">
<i class="fas fa-phone mr-3"></i>
Click to Call Now
</a>
</div>
</body>
</html>