Luxury Parlor Spa 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>Aura | Luxury Salon & Spa</title>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&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="preloader">
        <div class="loader-text">Aura Salon...</div>
    </div>

<header id="header">
        <a href="#" class="logo">Aura <span>Spa</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="book-btn">Book Appointment</a>
    </header>

<section class="hero">
        <div class="hero-img"></div>
        <div class="hero-content">
            <h1 class="hero-title">
                <span style="display:block;">Unveil Your</span>
                <i>True Radiance</i>
            </h1>
            <p class="hero-subtitle">Luxury Hair, Skin & Wellness Retreat</p>
        </div>
    </section>

<section class="section">
        <div class="intro-container">
            <div class="intro-text gs-reveal">
                <span class="sub-heading">Welcome to Aura</span>
                <h2 class="heading">A Sanctuary for Beauty & Relaxation.</h2>
                <p>Established in 2010, Aura Salon & Spa is a premier destination designed to rejuvenate your body, mind, and soul. We believe that true beauty comes from within, and our goal is to enhance your natural elegance in a serene environment.</p>
                <p>Our team of internationally trained stylists and therapists use only the finest organic and luxury products to deliver a bespoke experience tailored entirely to your needs. Escape the ordinary and step into a world of pure indulgence.</p>
            </div>
            <div class="intro-images gs-reveal">
                <img src="https://plus.unsplash.com/premium_photo-1669675936121-6d3d42244ab5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YmVhdXR5JTIwcGFybG9yfGVufDB8fDB8fHww" alt="Spa Treatment" class="img-1">
                <img src="https://plus.unsplash.com/premium_photo-1669675936493-2bee8e35c0ac?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmVhdXR5JTIwcGFybG9yfGVufDB8fDB8fHww" alt="Beauty Products" class="img-2">
            </div>
        </div>
    </section>

<section class="stats">
        <div class="stat-box gs-reveal">
            <h3 class="counter" data-target="15">0</h3>
            <p>Years of Beauty</p>
        </div>
        <div class="stat-box gs-reveal">
            <h3 class="counter" data-target="25000">0</h3>
            <p>Happy Clients</p>
        </div>
        <div class="stat-box gs-reveal">
            <h3 class="counter" data-target="30">0</h3>
            <p>Expert Stylists</p>
        </div>
        <div class="stat-box gs-reveal">
            <h3 class="counter" data-target="12">0</h3>
            <p>Industry Awards</p>
        </div>
    </section>

<section class="section">
        <div style="text-align: center;" class="gs-reveal">
            <span class="sub-heading">Our Philosophy</span>
            <h2 class="heading">Vision & Mission</h2>
        </div>
        <div class="vm-grid">
            <div class="vm-card gs-reveal">
                <i class="fas fa-gem"></i>
                <h3>Our Vision</h3>
                <p>To redefine the standards of luxury beauty by creating a holistic space where artistry, wellness, and self-care blend seamlessly to empower every individual who walks through our doors.</p>
            </div>
            <div class="vm-card gs-reveal">
                <i class="fas fa-leaf"></i>
                <h3>Our Mission</h3>
                <p>To provide unparalleled salon and spa services using sustainable, cruelty-free, and premium products, ensuring our clients feel refreshed, confident, and absolutely beautiful.</p>
            </div>
        </div>
    </section>

<section class="section bg-light">
        <div style="text-align: center;" class="gs-reveal">
            <span class="sub-heading">Why Choose Us</span>
            <h2 class="heading">Our Core Values</h2>
        </div>
        <div class="values-grid">
            <div class="value-box gs-reveal">
                <div class="icon-circle"><i class="fas fa-magic"></i></div>
                <h4>Artistry</h4>
                <p>Beauty is an art. Our experts are passionate creators dedicated to perfecting your unique look.</p>
            </div>
            <div class="value-box gs-reveal">
                <div class="icon-circle"><i class="fas fa-spa"></i></div>
                <h4>Tranquility</h4>
                <p>We provide a peaceful escape from the hustle of daily life, offering pure relaxation.</p>
            </div>
            <div class="value-box gs-reveal">
                <div class="icon-circle"><i class="fas fa-hand-sparkles"></i></div>
                <h4>Hygiene</h4>
                <p>Your safety is our priority. We maintain the highest standards of sanitation and cleanliness.</p>
            </div>
        </div>
    </section>

<section class="marquee-section">
        <div class="marquee-container">
            <span>Bridal Makeup <i>✦</i></span>
            <span>Hair Styling <i>✦</i></span>
            <span>Skin Therapy <i>✦</i></span>
            <span>Nail Artistry <i>✦</i></span>
            <span>Massage Spa <i>✦</i></span>
            
            <span>Bridal Makeup <i>✦</i></span>
            <span>Hair Styling <i>✦</i></span>
            <span>Skin Therapy <i>✦</i></span>
            <span>Nail Artistry <i>✦</i></span>
            <span>Massage Spa <i>✦</i></span>
        </div>
    </section>

<section class="section">
        <div style="text-align: center;" class="gs-reveal">
            <span class="sub-heading">The Artists</span>
            <h2 class="heading">Meet Our Experts</h2>
        </div>
        <div class="team-grid">
            <div class="team-member gs-reveal">
                <div class="img-wrapper">
                    <img src="https://images.unsplash.com/photo-1595959183082-7b570b7e08e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Makeup Artist">
                </div>
                <h4>Sophia Laurent</h4>
                <p>Lead Bridal Artist</p>
            </div>
            <div class="team-member gs-reveal">
                <div class="img-wrapper">
                    <img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Hair Stylist">
                </div>
                <h4>Isabella Cruz</h4>
                <p>Master Hair Colorist</p>
            </div>
            <div class="team-member gs-reveal">
                <div class="img-wrapper">
                    <img src="https://images.unsplash.com/photo-1616279967983-ec413476e824?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Esthetician">
                </div>
                <h4>Emma Thompson</h4>
                <p>Senior Esthetician</p>
            </div>
        </div>
    </section>

<section class="video-cta">
        <div class="gs-reveal">
            <div class="play-btn"><i class="fas fa-play"></i></div>
            <h2>Experience The Serenity</h2>
            <p style="color: var(--blush); letter-spacing: 3px; text-transform: uppercase; font-weight: 300; margin-top: 10px;">Take a virtual tour of our spa</p>
        </div>
    </section>

<footer>
        <div class="footer-grid">
            <div>
                <a href="#" class="footer-logo">Aura <span>Spa</span></a>
                <p style="color: #aaa; margin-bottom: 20px; font-weight: 300;">Elevating beauty, inspiring confidence, and delivering an unforgettable experience of luxury.</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-pinterest-p"></i></a>
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                </div>
            </div>
            <div>
                <h4>Services</h4>
                <ul>
                    <li><a href="#">Hair Care & Styling</a></li>
                    <li><a href="#">Facial & Skin Therapy</a></li>
                    <li><a href="#">Bridal Packages</a></li>
                    <li><a href="#">Nail & Pedicure</a></li>
                </ul>
            </div>
            <div>
                <h4>Discover</h4>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Our Artists</a></li>
                    <li><a href="#">Gift Cards</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4>Visit Us</h4>
                <p style="color: #aaa; margin-bottom: 10px; font-weight: 300;"><i class="fas fa-map-marker-alt" style="color: var(--rose-gold); margin-right: 10px;"></i> 101 Rosewood Avenue, NY</p>
                <p style="color: #aaa; margin-bottom: 10px; font-weight: 300;"><i class="fas fa-phone" style="color: var(--rose-gold); margin-right: 10px;"></i> +1 (800) 555-AURA</p>
                <p style="color: #aaa; font-weight: 300;"><i class="fas fa-envelope" style="color: var(--rose-gold); margin-right: 10px;"></i> hello@auraspa.com</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 Aura Luxury Salon & Spa. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

CSS

/* ================= VARIABLES & RESET ================= */
        :root {
            --rose-gold: #b76e79;  /* Premium Accent Color */
            --blush: #fff0f5;      /* Soft Background */
            --cream: #fafafa;      /* Pure Light Background */
            --charcoal: #2a2528;   /* Soft Black for Text */
            --gray: #7a7074;       /* Lighter Text */
            --font-head: 'Cormorant Garamond', serif;
            --font-body: 'Jost', sans-serif;
        }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
            font-family: var(--font-body);
            background-color: var(--cream);
            color: var(--charcoal);
            overflow-x: hidden;
            line-height: 1.7;
        }

/* Custom Soft Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--blush); }
        ::-webkit-scrollbar-thumb { background: var(--rose-gold); border-radius: 10px; }

/* ================= 1. PRELOADER ================= */
        .preloader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--cream); display: flex; justify-content: center; align-items: center;
            z-index: 9999; color: var(--rose-gold); font-family: var(--font-head);
            font-size: 3.5rem; font-style: italic; letter-spacing: 2px;
        }

/* ================= 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.6s ease;
        }
        header.scrolled {
            background: rgba(250, 250, 250, 0.95); backdrop-filter: blur(10px);
            padding: 15px 5%; box-shadow: 0 5px 20px rgba(183, 110, 121, 0.05);
        }
        .logo {
            font-family: var(--font-head); font-size: 2.2rem; color: var(--charcoal);
            text-decoration: none; letter-spacing: 2px; font-weight: 500;
            transition: 0.4s;
        }
        .logo span { color: var(--rose-gold); font-style: italic; }
        header.scrolled .logo { color: var(--charcoal); }
        
        .nav-links { display: flex; gap: 40px; list-style: none; }
        .nav-links li a {
            color: var(--cream); text-decoration: none; font-size: 1rem;
            text-transform: uppercase; letter-spacing: 2px; transition: 0.4s;
        }
        header.scrolled .nav-links li a { color: var(--charcoal); }
        .nav-links li a:hover { color: var(--rose-gold); }
        
        .book-btn {
            background: transparent; color: var(--cream); padding: 10px 25px;
            border: 1px solid var(--cream); font-family: var(--font-body);
            text-transform: uppercase; letter-spacing: 1px; text-decoration: none;
            border-radius: 30px; transition: 0.4s;
        }
        header.scrolled .book-btn { border-color: var(--rose-gold); color: var(--rose-gold); }
        .book-btn:hover { background: var(--rose-gold); color: var(--cream); border-color: var(--rose-gold); }

/* ================= 3. HERO SECTION ================= */
        .hero {
            position: relative; height: 100vh; display: flex;
            align-items: center; justify-content: center; overflow: hidden;
            background: var(--charcoal);
        }
        .hero-img {
            position: absolute; top: 0; left: 0; width: 100%; height: 120%;
            background: linear-gradient(rgba(42, 37, 40, 0.4), rgba(42, 37, 40, 0.6)), url('https://images.unsplash.com/photo-1560066984-138dadb4c035?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            z-index: 1;
        }
        .hero-content { position: relative; z-index: 2; text-align: center; color: var(--cream); }
        .hero-content h1 {
            font-family: var(--font-head); font-size: 6vw; line-height: 1.1;
            font-weight: 300; margin-bottom: 20px;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
        .hero-content h1 i { font-style: italic; color: var(--rose-gold); }
        .hero-content p {
            font-size: 1.1rem; letter-spacing: 4px; text-transform: uppercase;
            font-weight: 300; margin-top: 10px;
        }

/* ================= 4. INTRO SECTION (Arch Design) ================= */
        .section { padding: 120px 5%; }
        .intro-container { display: flex; align-items: center; gap: 60px; }
        .intro-text { flex: 1; }
        .sub-heading { color: var(--rose-gold); font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 15px; display: block; }
        .heading { font-family: var(--font-head); font-size: 3.5rem; font-weight: 400; line-height: 1.2; margin-bottom: 30px; color: var(--charcoal); }
        .intro-text p { color: var(--gray); margin-bottom: 25px; font-size: 1.1rem; }
        
        .intro-images { flex: 1; position: relative; height: 650px; }
        .img-1 { 
            width: 65%; height: 80%; object-fit: cover; position: absolute; right: 0; top: 0; 
            border-radius: 150px 150px 0 0; /* Trendy Arch Shape */
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }
        .img-2 { 
            width: 50%; height: 50%; object-fit: cover; position: absolute; left: 0; bottom: 0; 
            border-radius: 50%; /* Circle Shape */
            border: 15px solid var(--cream); box-shadow: 0 15px 30px rgba(0,0,0,0.05);
        }

/* ================= 5. STATS COUNTER ================= */
        .stats {
            background: var(--blush); padding: 80px 5%;
            display: flex; justify-content: space-around; text-align: center;
        }
        .stat-box { position: relative; }
        .stat-box::after {
            content: ''; position: absolute; right: -50%; top: 20%; height: 60%; width: 1px;
            background: rgba(183, 110, 121, 0.3);
        }
        .stat-box:last-child::after { display: none; }
        .stat-box h3 { font-family: var(--font-head); font-size: 4rem; color: var(--rose-gold); font-weight: 300; margin-bottom: 5px; }
        .stat-box p { text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; color: var(--charcoal); }

/* ================= 6. VISION & MISSION ================= */
        .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; }
        .vm-card {
            background: var(--cream); padding: 50px; border-radius: 20px;
            border: 1px solid rgba(183, 110, 121, 0.2); transition: 0.5s;
        }
        .vm-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(183, 110, 121, 0.08); border-color: var(--rose-gold); }
        .vm-card i { font-size: 2.5rem; color: var(--rose-gold); margin-bottom: 20px; }
        .vm-card h3 { font-family: var(--font-head); font-size: 2.5rem; font-weight: 400; margin-bottom: 15px; }
        .vm-card p { color: var(--gray); font-size: 1.1rem; }

/* ================= 7. CORE VALUES ================= */
        .bg-light { background-color: #fff; }
        .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
        .value-box { text-align: center; padding: 40px 20px; }
        .icon-circle {
            width: 80px; height: 80px; background: var(--blush); border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            margin: 0 auto 25px; transition: 0.4s;
        }
        .value-box:hover .icon-circle { background: var(--rose-gold); color: var(--cream); transform: scale(1.1); }
        .value-box i { font-size: 2rem; color: var(--rose-gold); transition: 0.4s; }
        .value-box:hover i { color: var(--cream); }
        .value-box h4 { font-family: var(--font-head); font-size: 1.8rem; font-weight: 500; margin-bottom: 15px; }
        .value-box p { color: var(--gray); }

/* ================= 8. INFINITE MARQUEE ================= */
        .marquee-section { padding: 50px 0; background: var(--rose-gold); overflow: hidden; white-space: nowrap; }
        .marquee-container { display: inline-block; animation: marquee 25s linear infinite; }
        .marquee-container span {
            color: var(--cream); font-family: var(--font-head); font-size: 2.5rem; font-style: italic; margin: 0 40px;
        }
        .marquee-container span i { font-size: 1rem; vertical-align: middle; margin: 0 20px; color: rgba(255,255,255,0.5); }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ================= 9. TEAM (OUR STYLISTS) ================= */
        .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
        .team-member { text-align: center; cursor: pointer; }
        .img-wrapper {
            width: 100%; height: 400px; overflow: hidden; border-radius: 150px 150px 0 0;
            margin-bottom: 20px; position: relative;
        }
        .team-member img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s ease; }
        .team-member:hover img { transform: scale(1.08); }
        .team-member h4 { font-family: var(--font-head); font-size: 1.8rem; color: var(--charcoal); }
        .team-member p { font-size: 0.9rem; color: var(--rose-gold); text-transform: uppercase; letter-spacing: 2px; margin-top: 5px; }

/* ================= 10. VIDEO CTA ================= */
        .video-cta {
            height: 60vh;
            background: linear-gradient(rgba(42,37,40,0.3), rgba(42,37,40,0.5)), url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover fixed;
            display: flex; align-items: center; justify-content: center; text-align: center;
        }
        .play-btn {
            width: 90px; height: 90px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            font-size: 2rem; color: var(--cream); margin: 0 auto 20px; cursor: pointer;
            transition: 0.5s; padding-left: 5px;
        }
        .play-btn:hover { background: var(--cream); color: var(--rose-gold); transform: scale(1.1); }
        .video-cta h2 { font-family: var(--font-head); font-size: 3.5rem; color: var(--cream); font-weight: 400; }

/* ================= 11. FOOTER ================= */
        footer { background: var(--charcoal); padding: 80px 5% 20px; color: var(--cream); }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 50px; }
        .footer-logo { font-family: var(--font-head); font-size: 2.5rem; color: var(--cream); text-decoration: none; display: block; margin-bottom: 20px; }
        .footer-logo span { color: var(--rose-gold); font-style: italic; }
        footer h4 { font-family: var(--font-body); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; color: var(--rose-gold); }
        footer ul { list-style: none; }
        footer ul li { margin-bottom: 15px; }
        footer ul li a { color: #aaa; text-decoration: none; transition: 0.3s; font-weight: 300; }
        footer ul li a:hover { color: var(--cream); padding-left: 5px; }
        .social-icons a { display: inline-block; width: 40px; height: 40px; border: 1px solid #555; color: var(--cream); text-align: center; line-height: 40px; border-radius: 50%; margin-right: 10px; transition: 0.4s; }
        .social-icons a:hover { background: var(--rose-gold); border-color: var(--rose-gold); transform: translateY(-5px); }
        .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid #333; color: #777; font-size: 0.9rem; letter-spacing: 1px; }

/* ================= RESPONSIVE ================= */
        @media (max-width: 1024px) {
            .intro-container { flex-direction: column; }
            .intro-images { width: 100%; height: 500px; margin-top: 40px; }
            .img-1 { width: 60%; }
            .stat-box::after { display: none; }
            .stats { flex-wrap: wrap; gap: 40px; }
            .stat-box { width: 40%; }
            .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, .book-btn { display: none; }
            .heading { font-size: 2.8rem; }
            .vm-grid, .values-grid, .team-grid { grid-template-columns: 1fr; }
            .stat-box { width: 100%; }
            .footer-grid { grid-template-columns: 1fr; text-align: center; }
            .hero-content h1 { font-size: 12vw; }
            .intro-images { height: 400px; }
        }

JavaScript

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

// 1. Elegant Preloader Fade Out
            const tlPreloader = gsap.timeline();
            tlPreloader.to(".loader-text", { opacity: 0, duration: 1.5, delay: 0.5, ease: "power2.inOut" })
                       .to(".preloader", { opacity: 0, duration: 1, ease: "power2.inOut", onComplete: () => document.querySelector('.preloader').style.display = 'none' })
                       .from(".hero-title span", { y: 50, opacity: 0, duration: 1.5, ease: "power3.out" }, "-=0.5")
                       .from(".hero-title i", { y: 50, opacity: 0, duration: 1.5, ease: "power3.out" }, "-=1.2")
                       .from(".hero-subtitle", { opacity: 0, duration: 2 }, "-=1");

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

// 3. Very Slow Parallax Effect
            gsap.to(".hero-img", {
                yPercent: 20, ease: "none",
                scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: 1 } // scrub: 1 makes it smooth
            });

// 4. Graceful Reveal Elements
            document.querySelectorAll(".gs-reveal").forEach((el) => {
                gsap.from(el, {
                    scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none reverse" },
                    y: 40, opacity: 0, duration: 1.2, ease: "power2.out"
                });
            });

// 5. Image Arch Reveal
            gsap.from(".img-1", { scrollTrigger: { trigger: ".intro-images", start: "top 80%" }, x: 50, opacity: 0, duration: 1.5, ease: "power3.out" });
            gsap.from(".img-2", { scrollTrigger: { trigger: ".intro-images", start: "top 80%" }, y: 50, opacity: 0, duration: 1.5, delay: 0.3, ease: "power3.out" });

// 6. Stats Counter Animation
            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 > 50 ? "+" : "")
                            });
                        });
                        countersRun = true;
                    }
                }
            });
        });

Luxury Parlor Spa About Page Preview

Download Options