The Blade Barber Shop About Page | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Blade | Premium Barber Shop</title>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500&family=Great+Vibes&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

</head>
<body>

<div class="cursor-dot"></div>
    <div class="cursor-outline"></div>

<div class="preloader">
        <i class="fas fa-cut"></i>
        <h2>SHARPENING BLADES...</h2>
    </div>

<header id="header">
        <a href="#" class="logo">The <span>Blade</span></a>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Gallery</a></li>
        </ul>
        <a href="#" class="hero-btn" style="padding: 8px 20px; font-size: 1.2rem;">Book Now</a>
    </header>

<section class="hero">
        <div class="hero-img"></div>
        <div class="hero-content">
            <span class="script-text">Est. 1998</span>
            
            <h1 class="hero-title" id="split-text">Tradition<br><span>Meets Precision</span></h1>
            <a href="#" class="hero-btn gs-fade">Discover Our Story</a>
        </div>
    </section>

<section class="section">
        <div class="intro-container">
            <div class="intro-text gs-up">
                <span class="script-text" style="font-size: 2.5rem;">Who we are</span>
                <h2>Masters of the <span>Blade</span></h2>
                <p>For over two decades, The Blade has been the sanctuary for the modern gentleman. We don't just cut hair; we craft identities. Blending old-school barbering techniques with contemporary styling, we provide an experience that goes beyond the chair.</p>
                <p>Grab a complimentary whiskey, sit back in our vintage leather chairs, and let our master barbers elevate your look. Sharp lines, hot towels, and flawless fades—that's our promise.</p>
            </div>
            <div class="intro-images gs-reveal-img">
                <div class="gold-border"></div>
                
                <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Barber Cutting Hair" class="img-reveal">
            </div>
        </div>
    </section>

<section class="stats">
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="25">0</h3>
            <p>Years Experience</p>
        </div>
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="50000">0</h3>
            <p>Sharp Cuts</p>
        </div>
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="15">0</h3>
            <p>Master Barbers</p>
        </div>
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="100">0</h3>
            <p>% Satisfaction</p>
        </div>
    </section>

<section class="section">
        <div style="text-align: center;" class="gs-up">
            <span class="script-text" style="font-size: 2.5rem;">Our Purpose</span>
            <h2 style="font-family: var(--font-head); font-size: 4rem; letter-spacing: 2px;">Vision & Mission</h2>
        </div>
        <div class="vm-grid">
            <div class="vm-card gs-up">
                <h3>Our Vision</h3>
                <p>To revive the classic gentleman's club atmosphere where men can gather, relax, and leave looking their absolute best. We aim to be the global standard for premium male grooming.</p>
            </div>
            <div class="vm-card gs-up">
                <h3>Our Mission</h3>
                <p>To deliver uncompromising quality through meticulous attention to detail, continuous training of our barbers, and using only the highest grade grooming products available.</p>
            </div>
        </div>
    </section>

<section class="marquee-wrapper">
        <div class="marquee marquee-1">
            <span class="outline-text">Fades</span> <span class="solid-text">•</span>
            <span class="solid-text">Hot Towel Shave</span> <span class="outline-text">•</span>
            <span class="outline-text">Beard Trim</span> <span class="solid-text">•</span>
            <span class="solid-text">Classic Scissor Cut</span> <span class="outline-text">•</span>
            
            <span class="outline-text">Fades</span> <span class="solid-text">•</span>
            <span class="solid-text">Hot Towel Shave</span> <span class="outline-text">•</span>
            <span class="outline-text">Beard Trim</span> <span class="solid-text">•</span>
            <span class="solid-text">Classic Scissor Cut</span> <span class="outline-text">•</span>
        </div>
        <div class="marquee marquee-2">
            <span class="solid-text">Pompadour</span> <span class="outline-text">•</span>
            <span class="outline-text">Buzz Cut</span> <span class="solid-text">•</span>
            <span class="solid-text">Straight Razor</span> <span class="outline-text">•</span>
            <span class="outline-text">Styling</span> <span class="solid-text">•</span>
            
            <span class="solid-text">Pompadour</span> <span class="outline-text">•</span>
            <span class="outline-text">Buzz Cut</span> <span class="solid-text">•</span>
            <span class="solid-text">Straight Razor</span> <span class="outline-text">•</span>
            <span class="outline-text">Styling</span> <span class="solid-text">•</span>
        </div>
    </section>

<section class="section">
        <div style="text-align: center;" class="gs-up">
            <span class="script-text" style="font-size: 2.5rem;">The Code</span>
            <h2 style="font-family: var(--font-head); font-size: 4rem; letter-spacing: 2px;">Our Values</h2>
        </div>
        <div class="values-grid">
            <div class="value-box gs-up">
                <i class="fas fa-cut"></i>
                <h4>Precision</h4>
                <p>Every millimeter matters. We don't rush; we craft.</p>
            </div>
            <div class="value-box gs-up">
                <i class="fas fa-handshake"></i>
                <h4>Respect</h4>
                <p>Every client is treated like royalty from the moment they walk in.</p>
            </div>
            <div class="value-box gs-up">
                <i class="fas fa-fire"></i>
                <h4>Passion</h4>
                <p>Barbering isn't a job for us; it's a lifelong calling and art form.</p>
            </div>
        </div>
    </section>

<section class="section">
        <div style="text-align: center;" class="gs-up">
            <span class="script-text" style="font-size: 2.5rem;">The Artists</span>
            <h2 style="font-family: var(--font-head); font-size: 4rem; letter-spacing: 2px;">Meet The Barbers</h2>
        </div>
        <div class="team-grid">
            <div class="barber-card gs-up">
                <img src="https://images.unsplash.com/photo-1567894340315-735d7c361db0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhcmJlcnxlbnwwfHwwfHx8MA%3D%3D" alt="Head Barber">
                <div class="barber-info">
                    <h4>Arthur Shelby</h4>
                    <p>Master Barber</p>
                </div>
            </div>
            <div class="barber-card gs-up">
                <img src="https://plus.unsplash.com/premium_photo-1661420297394-a8a9590e93a8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fGJhcmJlcnxlbnwwfHwwfHx8MA%3D%3D" alt="Beard Specialist">
                <div class="barber-info">
                    <h4>Tommy Stone</h4>
                    <p>Beard & Shave Specialist</p>
                </div>
            </div>
            <div class="barber-card gs-up">
                <img src="https://images.unsplash.com/photo-1635273051937-a0ddef9573b6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjR8fGJhcmJlcnxlbnwwfHwwfHx8MA%3D%3D" alt="Stylist">
                <div class="barber-info">
                    <h4>John Miller</h4>
                    <p>Fade Expert</p>
                </div>
            </div>
        </div>
    </section>

<section class="video-cta">
        <div class="video-content gs-up">
            <div class="play-btn"><i class="fas fa-play" style="margin-left: 5px;"></i></div>
            <h2 style="font-family: var(--font-head); font-size: 5rem; letter-spacing: 2px; line-height: 1;">Experience<br><span style="color: var(--gold);">The Craft</span></h2>
        </div>
    </section>

<footer>
        <div class="footer-grid">
            <div>
                <a href="#" class="footer-logo">The <span>Blade</span></a>
                <p style="color: #888; font-size: 0.95rem; margin-bottom: 20px;">Premium grooming for the modern man. Experience the tradition, precision, and passion.</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div>
                <h4>Services</h4>
                <ul>
                    <li><a href="#">Classic Haircut</a></li>
                    <li><a href="#">Skin Fade</a></li>
                    <li><a href="#">Hot Towel Shave</a></li>
                    <li><a href="#">Beard Sculpting</a></li>
                </ul>
            </div>
            <div>
                <h4>Links</h4>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Meet The Team</a></li>
                    <li><a href="#">Book Appointment</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4>Headquarters</h4>
                <p style="color: #888; margin-bottom: 10px;"><i class="fas fa-map-marker-alt" style="color: var(--gold); margin-right: 10px;"></i> 242 Vintage Street, NY</p>
                <p style="color: #888; margin-bottom: 10px;"><i class="fas fa-phone" style="color: var(--gold); margin-right: 10px;"></i> +1 (800) CUT-HAIR</p>
                <p style="color: #888;"><i class="fas fa-envelope" style="color: var(--gold); margin-right: 10px;"></i> info@theblade.com</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 The Blade Barber Shop. All rights reserved. | Stay Sharp.</p>
        </div>
    </footer>

</body>
</html>

CSS

/* ================= VARIABLES & RESET ================= */
        :root {
            --bg: #0b0b0b;         /* Deep Pitch Black */
            --bg-light: #161616;   /* Slightly lighter black for cards */
            --gold: #d4af37;       /* Vintage Barber Gold */
            --gold-dark: #aa8922;  
            --text: #e0e0e0;       /* Off-White */
            --font-head: 'Bebas Neue', cursive;
            --font-body: 'Poppins', sans-serif;
            --font-script: 'Great Vibes', cursive;
        }

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; /* Hiding default cursor for custom one */ }

body {
            font-family: var(--font-body);
            background-color: var(--bg);
            color: var(--text);
            overflow-x: hidden;
        }

/* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--gold); }

/* ================= CUSTOM CURSOR ================= */
        .cursor-dot, .cursor-outline {
            position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
            border-radius: 50%; z-index: 10000; pointer-events: none;
        }
        .cursor-dot { width: 8px; height: 8px; background-color: var(--gold); }
        .cursor-outline {
            width: 40px; height: 40px; border: 1px solid var(--gold);
            transition: width 0.2s, height 0.2s, background-color 0.2s;
        }

/* ================= 1. PRELOADER ================= */
        .preloader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg); display: flex; justify-content: center; align-items: center;
            z-index: 9999; flex-direction: column;
        }
        .preloader i { font-size: 4rem; color: var(--gold); animation: cut 1s infinite alternate; }
        .preloader h2 { font-family: var(--font-head); font-size: 3rem; margin-top: 20px; letter-spacing: 5px; color: var(--text); }
        @keyframes cut { 0% { transform: rotate(-20deg) scale(1); } 100% { transform: rotate(20deg) scale(1.2); } }

/* ================= 2. HEADER ================= */
        header {
            position: fixed; top: 0; width: 100%; padding: 30px 5%;
            display: flex; justify-content: space-between; align-items: center;
            z-index: 1000; transition: 0.4s ease;
        }
        header.scrolled {
            background: rgba(11, 11, 11, 0.95); padding: 15px 5%;
            border-bottom: 1px solid rgba(212, 175, 55, 0.2); backdrop-filter: blur(10px);
        }
        .logo { font-family: var(--font-head); font-size: 2.5rem; color: var(--text); text-decoration: none; letter-spacing: 2px; }
        .logo span { color: var(--gold); }
        
        .nav-links { display: flex; gap: 40px; list-style: none; }
        .nav-links li a {
            color: var(--text); text-decoration: none; font-size: 1.1rem;
            font-family: var(--font-head); letter-spacing: 2px; transition: 0.3s;
            position: relative;
        }
        .nav-links li a::after {
            content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px;
            background: var(--gold); transition: 0.3s;
        }
        .nav-links li a:hover::after { width: 100%; }
        .nav-links li a:hover { color: var(--gold); }

/* ================= 3. HERO SECTION (Split Text) ================= */
        .hero {
            position: relative; height: 100vh; display: flex; align-items: center; padding-left: 10%;
            background: var(--bg); overflow: hidden;
        }
        .hero-img {
            position: absolute; right: 0; top: 0; width: 60%; height: 100%;
            background: linear-gradient(to right, var(--bg) 0%, transparent 50%), 
                        url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            filter: grayscale(100%) contrast(1.2); z-index: 1;
        }
        .hero-content { position: relative; z-index: 2; width: 50%; }
        .script-text { font-family: var(--font-script); font-size: 3rem; color: var(--gold); transform: rotate(-5deg); display: inline-block; margin-bottom: -10px; }
        .hero-title {
            font-family: var(--font-head); font-size: 5rem; line-height: 0.9;
            color: var(--text); margin-bottom: 20px; letter-spacing: 2px;
        }
        /* Style for individual characters (JS generated) */
        .char { display: inline-block; transform: translateY(100px); opacity: 0; }
        
        .hero-btn {
            display: inline-block; padding: 15px 40px; background: transparent; color: var(--gold);
            font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 2px; border: 2px solid var(--gold);
            text-decoration: none; position: relative; overflow: hidden; transition: 0.4s;
        }
        .hero-btn::before {
            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
            background: var(--gold); transition: 0.4s; z-index: -1;
        }
        .hero-btn:hover::before { left: 0; }
        .hero-btn:hover { color: var(--bg); }

/* ================= 4. INTRO SECTION (Clip-Path Reveal) ================= */
        .section { padding: 120px 5%; }
        .intro-container { display: flex; align-items: center; gap: 50px; }
        .intro-text { flex: 1; }
        .intro-text h2 { font-family: var(--font-head); font-size: 4.5rem; color: var(--text); line-height: 1; margin-bottom: 20px; letter-spacing: 2px; }
        .intro-text h2 span { color: var(--gold); }
        .intro-text p { color: #aaa; font-size: 1.1rem; margin-bottom: 20px; font-weight: 300; }
        
        .intro-images { flex: 1; position: relative; height: 600px; }
        .img-reveal {
            position: absolute; width: 100%; height: 100%; object-fit: cover;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); /* Start hidden for GSAP */
            filter: grayscale(100%); transition: filter 0.5s;
        }
        .intro-images:hover .img-reveal { filter: grayscale(0%); }
        .gold-border {
            position: absolute; top: 20px; left: -20px; width: 100%; height: 100%;
            border: 3px solid var(--gold); z-index: -1;
        }

/* ================= 5. STATS (Animated Borders) ================= */
        .stats {
            display: flex; justify-content: space-around; padding: 80px 5%;
            background: var(--bg-light); border-top: 1px solid #222; border-bottom: 1px solid #222;
        }
        .stat-box { text-align: center; position: relative; padding: 20px; }
        .stat-box h3 { font-family: var(--font-head); font-size: 5rem; color: var(--gold); line-height: 1; }
        .stat-box p { font-size: 1rem; color: var(--text); letter-spacing: 3px; text-transform: uppercase; margin-top: 10px; }

/* ================= 6. VISION & MISSION (3D Hover Cards) ================= */
        .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; }
        .vm-card {
            background: var(--bg-light); padding: 60px 40px; border: 1px solid #222;
            position: relative; overflow: hidden; transition: transform 0.5s, border-color 0.5s;
        }
        .vm-card::before {
            content: '\f0c4'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; right: -20px; bottom: -30px; font-size: 10rem;
            color: rgba(212, 175, 55, 0.05); transform: rotate(-45deg); transition: 0.5s;
        }
        .vm-card:hover { transform: translateY(-10px); border-color: var(--gold); }
        .vm-card:hover::before { color: rgba(212, 175, 55, 0.15); transform: rotate(0deg); }
        .vm-card h3 { font-family: var(--font-head); font-size: 3rem; color: var(--gold); margin-bottom: 15px; letter-spacing: 2px; }
        .vm-card p { color: #aaa; font-size: 1.1rem; position: relative; z-index: 2; }

/* ================= 7. CORE VALUES ================= */
        .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
        .value-box { text-align: center; padding: 50px 30px; background: var(--bg); border: 1px solid #333; transition: 0.4s; }
        .value-box:hover { background: var(--gold); color: var(--bg); transform: scale(1.05); }
        .value-box i { font-size: 3rem; color: var(--gold); margin-bottom: 20px; transition: 0.4s; }
        .value-box:hover i { color: var(--bg); }
        .value-box h4 { font-family: var(--font-head); font-size: 2.5rem; margin-bottom: 10px; letter-spacing: 1px; }
        .value-box:hover p { color: #222; }
        .value-box p { color: #888; transition: 0.4s; }

/* ================= 8. DUAL OUTLINE MARQUEE ================= */
        .marquee-wrapper { padding: 80px 0; background: var(--bg); overflow: hidden; border-top: 1px solid #222; border-bottom: 1px solid #222; }
        .marquee { display: flex; white-space: nowrap; font-family: var(--font-head); font-size: 6rem; letter-spacing: 5px; text-transform: uppercase; }
        /* Outline Text Style */
        .outline-text { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2); margin-right: 30px; }
        .solid-text { color: var(--gold); margin-right: 30px; }
        .marquee-1 { animation: scrollLeft 20s linear infinite; margin-bottom: 10px; }
        .marquee-2 { animation: scrollRight 20s linear infinite; }
        @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

/* ================= 9. TEAM (THE BARBERS) ================= */
        .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
        .barber-card { position: relative; overflow: hidden; cursor: none; }
        .barber-card img { width: 100%; height: 500px; object-fit: cover; filter: grayscale(100%); transition: 0.6s ease; display: block; }
        .barber-card:hover img { filter: grayscale(0%); transform: scale(1.1); }
        .barber-info {
            position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px;
            background: linear-gradient(transparent, rgba(0,0,0,0.9));
            transform: translateY(30px); opacity: 0; transition: 0.4s ease; text-align: center;
        }
        .barber-card:hover .barber-info { transform: translateY(0); opacity: 1; }
        .barber-info h4 { font-family: var(--font-head); font-size: 2.5rem; color: var(--gold); letter-spacing: 1px; line-height: 1; }
        .barber-info p { font-size: 0.9rem; color: #fff; letter-spacing: 2px; text-transform: uppercase; margin-top: 5px; }

/* ================= 10. VIDEO CTA ================= */
        .video-cta {
            position: relative; height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center;
            background: url('https://images.unsplash.com/photo-1599351431202-1e0f0137899a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover fixed;
        }
        .video-cta::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(11,11,11,0.8); }
        .video-content { position: relative; z-index: 2; }
        .play-btn {
            width: 100px; height: 100px; border: 2px solid var(--gold); border-radius: 50%;
            display: flex; justify-content: center; align-items: center; font-size: 2rem; color: var(--gold);
            margin: 0 auto 20px; position: relative; transition: 0.4s;
        }
        .play-btn::before {
            content: ''; position: absolute; width: 120%; height: 120%; border: 1px solid var(--gold);
            border-radius: 50%; animation: pulseRing 2s infinite;
        }
        .play-btn:hover { background: var(--gold); color: var(--bg); }
        @keyframes pulseRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* ================= 11. FOOTER ================= */
        footer { background: var(--bg-light); padding: 80px 5% 20px; border-top: 2px solid var(--gold); }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
        .footer-logo { font-family: var(--font-head); font-size: 3rem; color: var(--text); text-decoration: none; display: block; margin-bottom: 20px; letter-spacing: 2px;}
        .footer-logo span { color: var(--gold); }
        footer h4 { font-family: var(--font-head); font-size: 1.8rem; color: var(--gold); letter-spacing: 2px; margin-bottom: 20px; }
        footer ul { list-style: none; }
        footer ul li { margin-bottom: 10px; }
        footer ul li a { color: #888; text-decoration: none; transition: 0.3s; }
        footer ul li a:hover { color: var(--text); padding-left: 10px; }
        .social-icons a { color: #888; font-size: 1.5rem; margin-right: 15px; transition: 0.3s; }
        .social-icons a:hover { color: var(--gold); transform: translateY(-5px); display: inline-block; }
        .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #333; color: #666; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

/* ================= RESPONSIVE ================= */
        @media (max-width: 1024px) {
            .hero { padding-left: 5%; justify-content: center; text-align: center; }
            .hero-img { width: 100%; opacity: 0.3; }
            .hero-content { width: 100%; }
            .hero-title { font-size: 6rem; }
            .intro-container { flex-direction: column; }
            .intro-images { width: 100%; height: 400px; margin-top: 50px; }
            .vm-grid, .values-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .hero-title { font-size: 4.5rem; }
            .stats { flex-direction: column; gap: 30px; }
            .vm-grid, .values-grid, .team-grid { grid-template-columns: 1fr; }
            .marquee { font-size: 4rem; }
            .footer-grid { grid-template-columns: 1fr; text-align: center; }
        }

JavaScript

document.addEventListener("DOMContentLoaded", () => {
            gsap.registerPlugin(ScrollTrigger);

// 1. Custom Cursor Logic
            const cursorDot = document.querySelector(".cursor-dot");
            const cursorOutline = document.querySelector(".cursor-outline");
            
            window.addEventListener("mousemove", (e) => {
                const posX = e.clientX;
                const posY = e.clientY;
                cursorDot.style.left = `${posX}px`;
                cursorDot.style.top = `${posY}px`;
                // Slight delay for the outline ring to create a smooth trailing effect
                cursorOutline.animate({
                    left: `${posX}px`,
                    top: `${posY}px`
                }, { duration: 500, fill: "forwards" });
            });

// Hover effect for links/buttons to expand the cursor
            document.querySelectorAll("a, .play-btn, .barber-card").forEach(el => {
                el.addEventListener("mouseenter", () => {
                    cursorOutline.style.width = "60px";
                    cursorOutline.style.height = "60px";
                    cursorOutline.style.backgroundColor = "rgba(212, 175, 55, 0.2)";
                });
                el.addEventListener("mouseleave", () => {
                    cursorOutline.style.width = "40px";
                    cursorOutline.style.height = "40px";
                    cursorOutline.style.backgroundColor = "transparent";
                });
            });

// 2. Text Splitting Function for Hero Title
            const titleEl = document.getElementById("split-text");
            // Wrap each character in a <span>
            let splitHTML = "";
            for(let i=0; i < titleEl.innerText.length; i++) {
                let char = titleEl.innerText[i];
                if(char === "\n") splitHTML += "<br>";
                else if(char === " ") splitHTML += "&nbsp;";
                else {
                    // Make the second line Gold based on logic (optional, we handled it with HTML <span> earlier, but for pure JS:)
                    splitHTML += `<span class="char">${char}</span>`;
                }
            }
            // Overwrite original HTML to maintain the gold span styling properly:
            titleEl.innerHTML = `
                <span class="char">T</span><span class="char">r</span><span class="char">a</span><span class="char">d</span><span class="char">i</span><span class="char">t</span><span class="char">i</span><span class="char">o</span><span class="char">n</span><br>
                <span style="color: var(--gold)">
                    <span class="char">M</span><span class="char">e</span><span class="char">e</span><span class="char">t</span><span class="char">s</span>&nbsp;
                    <span class="char">P</span><span class="char">r</span><span class="char">e</span><span class="char">c</span><span class="char">i</span><span class="char">s</span><span class="char">i</span><span class="char">o</span><span class="char">n</span>
                </span>
            `;

// 3. Preloader & Hero Animation Timeline
            const tl = gsap.timeline();
            tl.to(".preloader i", { rotation: 360, duration: 1, ease: "power2.inOut", delay: 0.5 })
              .to(".preloader", { yPercent: -100, duration: 1, ease: "power4.inOut" })
              .from(".hero-img", { scale: 1.2, filter: "brightness(0)", duration: 1.5, ease: "power3.out" }, "-=0.8")
              .from(".script-text", { y: 20, opacity: 0, duration: 0.8 }, "-=1")
              // Animate each character of the title
              .to(".char", { y: 0, opacity: 1, stagger: 0.05, duration: 0.8, ease: "back.out(1.7)" }, "-=0.5")
              .from(".gs-fade", { y: 30, opacity: 0, duration: 0.8 }, "-=0.2");

// 4. Header Scroll Change
            const header = document.getElementById("header");
            window.addEventListener("scroll", () => {
                if(window.scrollY > 50) header.classList.add("scrolled");
                else header.classList.remove("scrolled");
            });

// 5. Advanced Clip-Path Image Reveal on Scroll
            gsap.to(".img-reveal", {
                scrollTrigger: { trigger: ".intro-images", start: "top 75%" },
                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)", // Opens up like a curtain
                duration: 1.5, ease: "power4.out"
            });

// 6. Generic Up Reveal for Texts & Cards
            document.querySelectorAll(".gs-up").forEach((el) => {
                gsap.from(el, {
                    scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none reverse" },
                    y: 60, opacity: 0, duration: 0.8, ease: "power3.out"
                });
            });

// 7. Stats Counter Logic
            let countersRun = false;
            ScrollTrigger.create({
                trigger: ".stats", start: "top 85%",
                onEnter: () => {
                    if (!countersRun) {
                        document.querySelectorAll('.counter').forEach(counter => {
                            const target = +counter.getAttribute('data-target');
                            gsap.to(counter, {
                                innerHTML: target, duration: 2.5, snap: { innerHTML: 1 },
                                onUpdate: () => counter.innerHTML = Math.round(counter.innerHTML) + (target > 100 ? "+" : "")
                            });
                        });
                        countersRun = true;
                    }
                }
            });
        });

The Blade Barber Shop About Page Preview

Download Options