barbershop

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

Other

Author Ishimwe Shadad

Tailwind v3.4 648

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

Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

wavy kits

11 months ago

1.4k
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

2.8k
Responsive Multi-Step Registration Form with Progress Stepper

JUGENDRA GANGWAR

1 month ago

99
blog component
good blog

Uwera Dorcas

1 year ago

1.4k
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

593
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Tofayel Islam

9 months ago

792
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Nick Girga

1 year ago

2k
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Ahita Bisma Adlula

1 year ago

1.2k
machine
tell you how your MAC pc work

gidy

10 months ago

746
Verify OTP
Verify OTP

Tanvir Hasan Bappy (Tanvir)

8 months ago

766
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.6k