Home
Ishimwe Shadad
barbershop

barbershop

This tailwind example is contributed by Ishimwe Shadad, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Ishimwe Shadad

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AFRO CUTS | Premium African Barbershop</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0a0a0a;
            color: #fff;
            overflow-x: hidden;
        }
        
        .gold-accent {
            color: #d4af37;
        }
        
        .gold-border {
            border-color: #d4af37;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 3rem;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 3px;
            background: #d4af37;
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #d4af37;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover:after {
            width: 100%;
        }
        
        .service-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #222;
            background: rgba(20, 20, 20, 0.7);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
            border-color: #d4af37;
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(212, 175, 55, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .barber-card {
            position: relative;
            overflow: hidden;
        }
        
        .barber-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1.5rem;
            background: linear-gradient(transparent, rgba(0,0,0,0.9));
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .barber-card:hover .barber-info {
            transform: translateY(0);
        }
        
        .btn-gold {
            background: #d4af37;
            color: #000;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-gold:hover {
            background: #b8941f;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
        }
        
        .btn-outline-gold {
            border: 2px solid #d4af37;
            color: #d4af37;
            background: transparent;
            transition: all 0.3s ease;
        }
        
        .btn-outline-gold:hover {
            background: #d4af37;
            color: #000;
        }
        
        .hero-slider {
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        
        .slide.active {
            opacity: 1;
        }
        
        .slide-content {
            position: absolute;
            bottom: 20%;
            left: 10%;
            max-width: 600px;
            opacity: 0;
            transform: translateY(50px);
            transition: all 1s ease;
        }
        
        .slide.active .slide-content {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.5s;
        }
        
        .testimonial-card {
            background: rgba(30, 30, 30, 0.7);
            border-left: 3px solid #d4af37;
        }
        
        .form-input {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid #333;
            color: #fff;
            transition: border-color 0.3s ease;
        }
        
        .form-input:focus {
            border-color: #d4af37;
            outline: none;
        }
        
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 50px;
            border: 2px solid #d4af37;
            border-radius: 15px;
            display: flex;
            justify-content: center;
        }
        
        .scroll-indicator:before {
            content: '';
            position: absolute;
            top: 10px;
            width: 4px;
            height: 10px;
            background: #d4af37;
            border-radius: 2px;
            animation: scroll 2s infinite;
        }
        
        @keyframes scroll {
            0% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(15px); opacity: 0; }
        }
        
        .hair-style-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .hair-style-card {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            height: 300px;
        }
        
        .hair-style-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .hair-style-card:hover img {
            transform: scale(1.1);
        }
        
        .style-name {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            font-weight: 600;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .hair-style-card:hover .style-name {
            transform: translateY(0);
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-black text-white">
    
    <nav class="fixed w-full z-50 bg-black/90 backdrop-blur-sm py-4">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <div class="text-2xl font-bold">
                <span class="gold-accent">AFRO</span> CUTS
            </div>
            
            <div class="hidden md:flex space-x-8">
                <a href="#home" class="nav-link">Home</a>
                <a href="#services" class="nav-link">Services</a>
                <a href="#styles" class="nav-link">Hair Styles</a>
                <a href="#gallery" class="nav-link">Gallery</a>
                <a href="#barbers" class="nav-link">Our Barbers</a>
                <a href="#contact" class="nav-link">Contact</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <a href="#contact" class="btn-gold px-6 py-2 rounded-full text-sm">Book Now</a>
                <button class="md:hidden text-white" id="mobileMenuButton">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        
        <div class="md:hidden hidden bg-black/95 absolute w-full left-0 top-16 py-4" id="mobileMenu">
            <div class="container mx-auto px-6 flex flex-col space-y-4">
                <a href="#home" class="nav-link py-2">Home</a>
                <a href="#services" class="nav-link py-2">Services</a>
                <a href="#styles" class="nav-link py-2">Hair Styles</a>
                <a href="#gallery" class="nav-link py-2">Gallery</a>
                <a href="#barbers" class="nav-link py-2">Our Barbers</a>
                <a href="#contact" class="nav-link py-2">Contact</a>
            </div>
        </div>
    </nav>

<section id="home" class="hero-slider">
        
        <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1580618672591-eb180b1a973f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80')">
            <div class="slide-content">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    PRECISION <span class="gold-accent">CUTS</span><br>FOR THE MODERN AFRICAN MAN
                </h1>
                <p class="text-gray-300 mb-8 text-lg">
                    Experience the art of traditional African barbering with a modern twist. Our master barbers deliver precision cuts, fades, and grooming services in a sophisticated atmosphere.
                </p>
                <div class="flex space-x-4">
                    <a href="#contact" class="btn-gold px-8 py-3 rounded-full">Book Appointment</a>
                    <a href="#services" class="btn-outline-gold px-8 py-3 rounded-full">Our Services</a>
                </div>
            </div>
        </div>
        
        
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1567899378493-507a38f6c4c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
            <div class="slide-content">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    MASTER <span class="gold-accent">BARBERS</span><br>WITH YEARS OF EXPERIENCE
                </h1>
                <p class="text-gray-300 mb-8 text-lg">
                    Our skilled barbers specialize in all African hair types and styles, from traditional cuts to contemporary fades and designs.
                </p>
                <div class="flex space-x-4">
                    <a href="#barbers" class="btn-gold px-8 py-3 rounded-full">Meet Our Barbers</a>
                    <a href="#gallery" class="btn-outline-gold px-8 py-3 rounded-full">View Gallery</a>
                </div>
            </div>
        </div>
        
        
        <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1598706640393-8bc6bcd2ab6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80')">
            <div class="slide-content">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    PREMIUM <span class="gold-accent">GROOMING</span><br>FOR THE DISCERNING GENTLEMAN
                </h1>
                <p class="text-gray-300 mb-8 text-lg">
                    From beard shaping to hot towel shaves, we offer a complete grooming experience using the finest products.
                </p>
                <div class="flex space-x-4">
                    <a href="#styles" class="btn-gold px-8 py-3 rounded-full">View Styles</a>
                    <a href="#contact" class="btn-outline-gold px-8 py-3 rounded-full">Get Directions</a>
                </div>
            </div>
        </div>
        
        <div class="scroll-indicator"></div>
        
        
        <div class="absolute bottom-10 right-10 flex space-x-4">
            <button class="slider-control bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center" id="prevSlide">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="slider-control bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center" id="nextSlide">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </section>

<section id="services" class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">OUR SERVICES</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-cut"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Classic African Cut</h3>
                    <p class="text-gray-400 mb-4">Precision cut with clippers and scissors, tailored for African hair texture and styles.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">35,000 RWF</span>
                        <span class="text-gray-400">45 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-user"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Beard Trim & Design</h3>
                    <p class="text-gray-400 mb-4">Expert beard shaping, trimming and creative designs for a sharp, defined look.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">20,000 RWF</span>
                        <span class="text-gray-400">30 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-spa"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Royal Shave</h3>
                    <p class="text-gray-400 mb-4">Traditional straight razor shave with hot towels and premium African shea products.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">30,000 RWF</span>
                        <span class="text-gray-400">40 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-air-freshener"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Hair Coloring</h3>
                    <p class="text-gray-400 mb-4">Professional hair coloring services using premium products designed for African hair.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">50,000 RWF</span>
                        <span class="text-gray-400">90 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-child"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Kids Cut</h3>
                    <p class="text-gray-400 mb-4">Specialized cuts for young gentlemen in a comfortable, friendly environment.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">25,000 RWF</span>
                        <span class="text-gray-400">35 min</span>
                    </div>
                </div>
                
                <div class="service-card p-8 rounded-lg fade-in">
                    <div class="text-4xl gold-accent mb-4">
                        <i class="fas fa-crown"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Executive Package</h3>
                    <p class="text-gray-400 mb-4">The complete grooming experience: haircut, shave, and facial treatment.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-2xl gold-accent font-bold">70,000 RWF</span>
                        <span class="text-gray-400">120 min</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="styles" class="py-20 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">AFRICAN HAIR STYLES</h2>
            <p class="text-gray-400 max-w-3xl mb-12 fade-in">We specialize in all types of African hair styles, from traditional cuts to contemporary designs. Browse our portfolio of popular styles.</p>
            
            <div class="hair-style-grid">
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="High Top Fade">
                    <div class="style-name">High Top Fade</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Taper Fade">
                    <div class="style-name">Taper Fade</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Curly Fro">
                    <div class="style-name">Curly Fro</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Twist Out">
                    <div class="style-name">Twist Out</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Line Up">
                    <div class="style-name">Precision Line Up</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Design Fade">
                    <div class="style-name">Design Fade</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Cornrows">
                    <div class="style-name">Cornrows</div>
                </div>
                
                <div class="hair-style-card fade-in">
                    <img src="https://images.unsplash.com/photo-1531384441138-2736e62e0919?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Dreadlocks">
                    <div class="style-name">Dreadlocks</div>
                </div>
            </div>
        </div>
    </section>

<section id="gallery" class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">OUR GALLERY</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-12">
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80" 
                         alt="Barber at work" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                         alt="Beard trimming" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80" 
                         alt="Barbershop interior" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                         alt="Hair styling" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Haircut process" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1598706640393-8bc6bcd2ab6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Barber tools" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1633144332628-c13503661e8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Finished style" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
                
                <div class="gallery-item rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1622287162716-f311baa1a2b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                         alt="Barber portrait" class="w-full h-64 object-cover">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus text-3xl text-black"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="barbers" class="py-20 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">MEET OUR BARBERS</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                <div class="barber-card rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1562164986-3e6c8d41e0e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                         alt="Kwame Osei" class="w-full h-96 object-cover">
                    <div class="barber-info">
                        <h3 class="text-xl font-bold">Kwame Osei</h3>
                        <p class="gold-accent mb-2">Master Barber / Owner</p>
                        <p class="text-gray-300 text-sm">15+ years of experience specializing in traditional African cuts and modern fades.</p>
                    </div>
                </div>
                
                <div class="barber-card rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                         alt="Chijioke Adebayo" class="w-full h-96 object-cover">
                    <div class="barber-info">
                        <h3 class="text-xl font-bold">Chijioke Adebayo</h3>
                        <p class="gold-accent mb-2">Senior Barber</p>
                        <p class="text-gray-300 text-sm">Expert in creative designs, beard artistry, and contemporary African styles.</p>
                    </div>
                </div>
                
                <div class="barber-card rounded-lg overflow-hidden fade-in">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                         alt="Tendai Moyo" class="w-full h-96 object-cover">
                    <div class="barber-info">
                        <h3 class="text-xl font-bold">Tendai Moyo</h3>
                        <p class="gold-accent mb-2">Style Specialist</p>
                        <p class="text-gray-300 text-sm">Specializes in precision cuts, hair coloring, and braiding techniques.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">CLIENT TESTIMONIALS</h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
                <div class="testimonial-card p-6 rounded-lg fade-in">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
                        <div>
                            <h4 class="font-bold">Samuel Nkosi</h4>
                            <div class="gold-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-300">"Best barbershop in Kigali. Kwame gave me the perfect fade and my beard has never looked better. The atmosphere is premium and the service is exceptional."</p>
                </div>
                
                <div class="testimonial-card p-6 rounded-lg fade-in">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
                        <div>
                            <h4 class="font-bold">David Mugisha</h4>
                            <div class="gold-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-300">"Chijioke is a true artist. He transformed my look completely. The attention to detail is unmatched. I won't go anywhere else for my haircuts."</p>
                </div>
                
                <div class="testimonial-card p-6 rounded-lg fade-in">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
                        <div>
                            <h4 class="font-bold">Robert Uwimana</h4>
                            <div class="gold-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-300">"The Royal Shave experience is worth every franc. Hot towels, premium products, and the closest shave I've ever had. This is luxury grooming at its finest."</p>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-4xl font-bold fade-in">BOOK YOUR APPOINTMENT</h2>
            
            <div class="grid md:grid-cols-2 gap-12 mt-12">
                <div class="fade-in">
                    <h3 class="text-2xl font-bold mb-6">CONTACT INFORMATION</h3>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">OUR LOCATION</h4>
                                <p class="text-gray-300">123 KN Street, Kiyovu<br>Kigali, Rwanda</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">PHONE NUMBER</h4>
                                <p class="text-gray-300">+250 788 123 456</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">EMAIL ADDRESS</h4>
                                <p class="text-gray-300">hello@afrocuts.rw</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="gold-accent text-xl mr-4 mt-1">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">OPENING HOURS</h4>
                                <p class="text-gray-300">
                                    Mon - Fri: 8:00 AM - 8:00 PM<br>
                                    Saturday: 9:00 AM - 6:00 PM<br>
                                    Sunday: 10:00 AM - 4:00 PM
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="fade-in">
                    <h3 class="text-2xl font-bold mb-6">BOOK NOW</h3>
                    
                    <form class="space-y-6">
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <input type="text" placeholder="First Name" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                            <div>
                                <input type="text" placeholder="Last Name" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                        </div>
                        
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <input type="email" placeholder="Email Address" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                            <div>
                                <input type="tel" placeholder="Phone Number" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                        </div>
                        
                        <div>
                            <select class="form-input w-full px-4 py-3 rounded-lg">
                                <option value="">Select Service</option>
                                <option value="haircut">Classic African Cut - 35,000 RWF</option>
                                <option value="beard">Beard Trim & Design - 20,000 RWF</option>
                                <option value="shave">Royal Shave - 30,000 RWF</option>
                                <option value="color">Hair Coloring - 50,000 RWF</option>
                                <option value="kids">Kids Cut - 25,000 RWF</option>
                                <option value="executive">Executive Package - 70,000 RWF</option>
                            </select>
                        </div>
                        
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <input type="date" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                            <div>
                                <input type="time" class="form-input w-full px-4 py-3 rounded-lg">
                            </div>
                        </div>
                        
                        <div>
                            <textarea placeholder="Additional Notes" rows="4" class="form-input w-full px-4 py-3 rounded-lg"></textarea>
                        </div>
                        
                        <button type="submit" class="btn-gold w-full py-3 rounded-lg font-bold">BOOK APPOINTMENT</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-black py-12 border-t border-gray-800">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-4">
                        <span class="gold-accent">AFRO</span> CUTS
                    </h3>
                    <p class="text-gray-400 mb-4">Precision cuts for the modern African gentleman. Experience the art of traditional barbering with a contemporary edge.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">QUICK LINKS</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#home" class="hover:text-white transition-colors">Home</a></li>
                        <li><a href="#services" class="hover:text-white transition-colors">Services</a></li>
                        <li><a href="#styles" class="hover:text-white transition-colors">Hair Styles</a></li>
                        <li><a href="#gallery" class="hover:text-white transition-colors">Gallery</a></li>
                        <li><a href="#barbers" class="hover:text-white transition-colors">Our Barbers</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">SERVICES</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors">Classic African Cut</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Beard Trim & Design</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Royal Shave</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Hair Coloring</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">Kids Cut</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">NEWSLETTER</h4>
                    <p class="text-gray-400 mb-4">Subscribe to receive updates on special offers and grooming tips.</p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="form-input flex-grow px-4 py-2 rounded-l-lg">
                        <button class="btn-gold px-4 rounded-r-lg">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; 2023 AFRO CUTS. All rights reserved.</p>
            </div>
        </div>
    </footer>

Related Examples