Fine Dining Restaurant 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>Saffron & Smoke | Fine Dining Experience</title>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;1,300&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">
        <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="50" cy="50" r="45" stroke="rgba(229,169,61,0.2)"/>
            <path d="M50 5 a45 45 0 0 1 45 45" stroke="var(--gold)" stroke-linecap="round"/>
        </svg>
        <h2>PREPARING TABLE...</h2>
    </div>

<header id="header">
        <a href="#" class="logo">Saffron </a>
        <ul class="nav-links">
            <li><a href="#">Menu</a></li>
            <li><a href="#">The Chef</a></li>
            <li><a href="#">Our Story</a></li>
            <li><a href="#">Private Dining</a></li>
        </ul>
        <a href="#" class="reserve-btn">Book A Table</a>
    </header>

<section class="hero">
        <div class="hero-bg"></div>
        <div class="hero-overlay"></div>
        
        <div class="hero-content gs-hero">
            <span class="hero-subtitle">Taste The Art</span>
            <h1 class="hero-title">Culinary<br>Masterpiece</h1>
            <a href="#" class="reserve-btn" style="padding: 15px 40px;">Explore Menu</a>
        </div>
        
        <i class="fas fa-chevron-down scroll-down"></i>
    </section>

<section class="section">
        
        <i class="fas fa-leaf leaf" style="top: 10%; right: 5%; font-size: 4rem; transform: rotate(45deg);"></i>
        <i class="fas fa-pepper-hot leaf" style="bottom: 10%; left: 5%; font-size: 3rem; transform: rotate(-20deg);"></i>
        
        <div class="story-container">
            <div class="story-text gs-up">
                <span class="sec-subtitle">A Heritage of Flavor</span>
                <h2 class="sec-title">Where Tradition Meets Innovation.</h2>
                <p>Founded in 1995, Saffron & Smoke was born from a simple desire: to elevate local, seasonal ingredients into unforgettable dining experiences. We don't just cook food; we tell stories on a plate.</p>
                <p>Every dish is a carefully crafted symphony of flavors, drawing inspiration from classic culinary techniques while embracing modern gastronomy. From farm to fire, and from kitchen to table, we promise an evening of pure indulgence.</p>
                
              
            </div>
            <div class="story-images gs-up">
                <img src="https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Restaurant Interior" class="img-1">
                <img src="https://images.unsplash.com/photo-1600891964092-4316c288032e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Plating Food" class="img-2 gs-parallax">
            </div>
        </div>
    </section>

<section>
        <div class="scroll-reveal-text" id="revealText">
            "Dining is not merely about eating; it is a ritual of senses. A perfect balance of aroma, texture, heat, and emotion."
        </div>
    </section>

<section class="stats">
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="28">0</h3>
            <p>Years of Service</p>
        </div>
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="3">0</h3>
            <p>Michelin Stars</p>
        </div>
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="150">0</h3>
            <p>Signature Dishes</p>
        </div>
        <div class="stat-box gs-up">
            <h3 class="counter" data-target="1200">0</h3>
            <p>Wine Selections</p>
        </div>
    </section>

<section class="section">
        <div style="text-align: center;" class="gs-up">
            <span class="sec-subtitle">The Pillars of Taste</span>
            <h2 class="sec-title">Our Philosophy</h2>
        </div>
        <div class="phil-grid">
            <div class="phil-card gs-up">
                <i class="fas fa-seedling"></i>
                <h4>Farm to Table</h4>
                <p>We source only the freshest, organic ingredients daily from trusted local farmers and artisans.</p>
            </div>
            <div class="phil-card gs-up">
                <i class="fas fa-fire-alt"></i>
                <h4>Wood & Smoke</h4>
                <p>Harnessing the primal power of open-fire cooking to infuse deep, complex flavors into every bite.</p>
            </div>
            <div class="phil-card gs-up">
                <i class="fas fa-wine-glass-alt"></i>
                <h4>Perfect Pairing</h4>
                <p>Our award-winning sommeliers curate global wines specifically chosen to elevate your meal.</p>
            </div>
        </div>
    </section>

<section style="padding-top: 50px;">
        <div style="text-align: center;" class="gs-up">
            <span class="sec-subtitle">A Glimpse of the Menu</span>
            <h2 class="sec-title">Chef's Signatures</h2>
        </div>
        <div class="gallery-grid gs-up">
            <div class="dish-card">
                <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Ribeye">
                <div class="dish-info">
                    <h4>Smoked Wagyu Ribeye</h4>
                    <p>Truffle butter, charred asparagus, red wine reduction</p>
                    <span class="dish-price">$85</span>
                </div>
            </div>
            <div class="dish-card">
                <img src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Salmon">
                <div class="dish-info">
                    <h4>Pan-Seared Scallops</h4>
                    <p>Cauliflower purée, golden caviar, lemon zest</p>
                    <span class="dish-price">$42</span>
                </div>
            </div>
            <div class="dish-card">
                <img src="https://images.unsplash.com/photo-1628840042765-356cda07504e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Pasta">
                <div class="dish-info">
                    <h4>Hand-Rolled Truffle Pasta</h4>
                    <p>Wild mushrooms, 24-month parmesan, gold leaf</p>
                    <span class="dish-price">$38</span>
                </div>
            </div>
            <div class="dish-card">
                <img src="https://plus.unsplash.com/premium_photo-1695868328902-b8a3b093da74?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fHZhbmlsbGF8ZW58MHx8MHx8fDA%3D" alt="Dessert">
                <div class="dish-info">
                    <h4>Dark Chocolate Dome</h4>
                    <p>Madagascar vanilla bean, raspberry coulis, espresso smoke</p>
                    <span class="dish-price">$24</span>
                </div>
            </div>
        </div>
    </section>

<section class="section">
        <div class="chef-section gs-up">
            <div class="chef-text">
                <span class="sec-subtitle">The Maestro</span>
                <h2 style="color: var(--gold);">Chef Julian Rossi</h2>
                <span>Executive Chef & Founder</span>
                <p>"Cooking is an art form that speaks directly to the soul. My mission is to take you on a journey where every ingredient plays a vital role in creating a memory."</p>
                <p>Trained in Paris and Tokyo, Chef Rossi brings over two decades of culinary mastery to Saffron & Smoke, blending classic French techniques with bold international flavors.</p>
                
            </div>
            <div class="chef-img"></div>
        </div>
    </section>

<footer>
        <a href="#" class="footer-logo">Saffron <span>&</span> Smoke</a>
        <ul class="footer-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu & Wine</a></li>
            <li><a href="#">Our Story</a></li>
            <li><a href="#">Reservations</a></li>
            <li><a href="#">Gift Cards</a></li>
        </ul>
        <div class="address-box">
            <p>124 Grand Avenue, Culinary District, NY</p>
            <p>Open Tuesday - Sunday | 5:00 PM - 11:00 PM</p>
            <p class="gold-text">+1 (212) 555-DINE</p>
        </div>
        <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-twitter"></i></a>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 Saffron & Smoke Fine Dining. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

CSS

/* ================= VARIABLES ================= */
        :root {
            --bg-dark: #111111;      /* Truffle Black */
            --bg-light: #1a1a1a;     /* Charcoal */
            --gold: #E5A93D;         /* Saffron Gold */
            --text-light: #F7F5F0;   /* Creamy White */
            --text-muted: #A0A0A0;
            --font-head: 'Cinzel', serif;
            --font-body: 'Lato', sans-serif;
        }

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

body {
            font-family: var(--font-body);
            background-color: var(--bg-dark);
            color: var(--text-light);
            overflow-x: hidden;
            line-height: 1.6;
        }

/* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-dark); }
        ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }

/* ================= 1. PRELOADER ================= */
        .preloader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-dark); display: flex; justify-content: center; align-items: center;
            z-index: 9999; flex-direction: column; color: var(--gold);
        }
        .preloader svg { width: 80px; height: 80px; animation: spin 2s linear infinite; margin-bottom: 20px; }
        .preloader h2 { font-family: var(--font-head); font-size: 2rem; letter-spacing: 5px; font-weight: 400; }
        @keyframes spin { 100% { transform: rotate(360deg); } }

/* ================= 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: all 0.5s ease; border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        header.scrolled {
            background: rgba(17, 17, 17, 0.95); padding: 20px 5%;
            backdrop-filter: blur(10px); border-bottom-color: rgba(229, 169, 61, 0.2);
        }
        .logo { font-family: var(--font-head); font-size: 2rem; color: var(--text-light); text-decoration: none; letter-spacing: 3px; font-weight: 600; }
        .logo span { color: var(--gold); }
        
        .nav-links { display: flex; gap: 40px; list-style: none; }
        .nav-links li a {
            color: var(--text-light); text-decoration: none; font-size: 0.9rem; font-weight: 400;
            text-transform: uppercase; letter-spacing: 2px; transition: 0.3s;
        }
        .nav-links li a:hover { color: var(--gold); }
        
        .reserve-btn {
            background: transparent; color: var(--gold); padding: 12px 30px; border: 1px solid var(--gold);
            font-family: var(--font-head); text-decoration: none; transition: 0.4s; text-transform: uppercase; letter-spacing: 1px;
            position: relative; overflow: hidden;
        }
        .reserve-btn::before {
            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
            background: var(--gold); transition: 0.4s; z-index: -1;
        }
        .reserve-btn:hover::before { left: 0; }
        .reserve-btn:hover { color: var(--bg-dark); }

/* ================= 3. FULL WIDTH CINEMATIC HERO ================= */
        .hero {
            position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;
            overflow: hidden; background: #000;
        }
        .hero-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            opacity: 0.7; animation: slowZoom 25s infinite alternate; z-index: 1;
        }
        @keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }
        
        .hero-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle, rgba(17,17,17,0.3) 0%, rgba(17,17,17,0.8) 100%); z-index: 2;
        }
        
        .hero-content { position: relative; z-index: 3; text-align: center; color: var(--text-light); width: 100%; padding: 0 20px; }
        .hero-subtitle { font-family: var(--font-body); font-style: italic; color: var(--gold); font-size: 1.5rem; letter-spacing: 4px; margin-bottom: 20px; display: block; }
        .hero-title { font-family: var(--font-head); font-size: 6vw; line-height: 1; margin-bottom: 30px; font-weight: 500; text-transform: uppercase; letter-spacing: 5px; }
        /* Down Arrow Animation */
        .scroll-down { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--gold); font-size: 2rem; animation: bounce 2s infinite; }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } }

/* ================= 4. OUR STORY (Image Overlap) ================= */
        .section { padding: 120px 5%; position: relative; }
        .story-container { display: flex; align-items: center; gap: 80px; }
        
        .story-images { flex: 1; position: relative; height: 600px; }
        .img-1 { width: 70%; height: 80%; object-fit: cover; position: absolute; left: 0; top: 0; filter: contrast(1.1); box-shadow: -15px 15px 0 rgba(229, 169, 61, 0.2); }
        .img-2 { width: 60%; height: 50%; object-fit: cover; position: absolute; right: 0; bottom: 0; border: 10px solid var(--bg-dark); }
        
        .story-text { flex: 1; }
        .sec-subtitle { color: var(--gold); font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; display: block; margin-bottom: 15px; }
        .sec-title { font-family: var(--font-head); font-size: 4rem; color: var(--text-light); margin-bottom: 30px; line-height: 1.1; font-weight: 500; }
        .story-text p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 25px; font-weight: 300; }
        .signature { margin-top: 30px; width: 150px; filter: invert(0.8) sepia(1) saturate(3) hue-rotate(3deg); } /* Golden Signature Look */

/* ================= 5. APPLE-STYLE SCROLL REVEAL TEXT ================= */
        .scroll-reveal-text {
            padding: 150px 10%; background: var(--bg-light); text-align: center;
            font-family: var(--font-head); font-size: 3.5rem; line-height: 1.4; color: rgba(247, 245, 240, 0.1);
            background-image: linear-gradient(to right, var(--text-light), var(--text-light));
            background-repeat: no-repeat; background-size: 0% 100%;
            -webkit-background-clip: text; background-clip: text;
        }

/* ================= 6. STATS (Minimalist) ================= */
        .stats { display: flex; justify-content: space-around; padding: 60px 5%; border-top: 1px solid #333; border-bottom: 1px solid #333; background: var(--bg-dark); }
        .stat-box { text-align: center; }
        .stat-box h3 { font-family: var(--font-head); font-size: 4rem; color: var(--gold); margin-bottom: 10px; font-weight: 400; }
        .stat-box p { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); }

/* ================= 7. PHILOSOPHY CARDS ================= */
        .phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
        .phil-card { background: var(--bg-light); padding: 50px 30px; text-align: center; border: 1px solid #222; transition: 0.4s; cursor: default; }
        .phil-card:hover { border-color: var(--gold); transform: translateY(-10px); }
        .phil-card i { font-size: 2.5rem; color: var(--gold); margin-bottom: 20px; transition: 0.4s; }
        .phil-card:hover i { transform: scale(1.2) rotate(5deg); }
        .phil-card h4 { font-family: var(--font-head); font-size: 1.8rem; margin-bottom: 15px; font-weight: 500; }
        .phil-card p { color: var(--text-muted); font-weight: 300; }

/* ================= 8. CHEF'S SIGNATURE GALLERY (Hover Reveal) ================= */
        .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 50px; }
        .dish-card { position: relative; height: 350px; overflow: hidden; cursor: crosshair; }
        .dish-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease, filter 0.8s ease; filter: brightness(0.7); }
        .dish-card:hover img { transform: scale(1.1); filter: brightness(0.3); }
        
        .dish-info {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            text-align: center; width: 90%; opacity: 0; transition: 0.5s ease;
        }
        .dish-card:hover .dish-info { opacity: 1; }
        .dish-info h4 { font-family: var(--font-head); font-size: 1.5rem; color: var(--gold); margin-bottom: 10px; letter-spacing: 1px; }
        .dish-info p { font-style: italic; color: var(--text-light); font-size: 0.9rem; margin-bottom: 15px; }
        .dish-price { font-family: var(--font-head); font-size: 1.2rem; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 10px; display: inline-block; }

/* ================= 9. MEET THE CHEF ================= */
        .chef-section { background: var(--bg-light); display: flex; align-items: center; border-radius: 5px; overflow: hidden; }
        .chef-text { flex: 1; padding: 80px; }
        .chef-text h2 { font-family: var(--font-head); font-size: 3.5rem; margin-bottom: 10px; }
        .chef-text span { color: var(--gold); text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; display: block; margin-bottom: 30px; }
        .chef-text p { color: var(--text-muted); margin-bottom: 20px; font-weight: 300; font-style: italic; }
        .chef-img { flex: 1; height: 100%; min-height: 600px; background: url('https://images.unsplash.com/photo-1701878198293-d1f3641efdb3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Q2hlZiUyMEp1bGlhbnxlbnwwfHwwfHx8MA%3D%3D') center/cover; filter: grayscale(100%); transition: 0.5s; }
        .chef-section:hover .chef-img { filter: grayscale(0%); }

/* ================= 10. FOOTER ================= */
        footer { background: var(--bg-dark); padding: 80px 5% 40px; border-top: 1px solid #222; text-align: center; }
        .footer-logo { font-family: var(--font-head); font-size: 2.5rem; color: var(--text-light); text-decoration: none; letter-spacing: 3px; display: block; margin-bottom: 30px; }
        .footer-logo span { color: var(--gold); }
        .footer-nav { display: flex; justify-content: center; gap: 40px; margin-bottom: 40px; list-style: none; }
        .footer-nav a { color: var(--text-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; transition: 0.3s; }
        .footer-nav a:hover { color: var(--gold); }
        .address-box { margin-bottom: 40px; }
        .address-box p { color: var(--text-muted); font-weight: 300; margin-bottom: 5px; }
        .address-box .gold-text { color: var(--gold); font-family: var(--font-head); font-size: 1.2rem; margin-top: 10px; }
        .social-icons a { display: inline-block; width: 45px; height: 45px; border: 1px solid #333; color: var(--text-light); line-height: 45px; border-radius: 50%; margin: 0 10px; transition: 0.3s; }
        .social-icons a:hover { background: var(--gold); border-color: var(--gold); color: var(--bg-dark); transform: translateY(-5px); }
        .footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid #222; color: #555; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }

/* Floating Parallax Leaves (Optional UI touch) */
        .leaf { position: absolute; opacity: 0.1; filter: blur(2px); z-index: 0; pointer-events: none; }

/* ================= RESPONSIVE ================= */
        @media (max-width: 1024px) {
            .hero-title { font-size: 8vw; }
            .story-container { flex-direction: column; }
            .story-images { width: 100%; height: 500px; margin-bottom: 40px; }
            .img-1 { width: 80%; }
            .phil-grid { grid-template-columns: repeat(2, 1fr); }
            .gallery-grid { grid-template-columns: repeat(2, 1fr); }
            .chef-section { flex-direction: column; }
            .chef-img { width: 100%; min-height: 400px; }
            .scroll-reveal-text { font-size: 2.5rem; padding: 100px 5%; }
        }
        @media (max-width: 768px) {
            .nav-links, .reserve-btn { display: none; }
            .hero-title { font-size: 10vw; margin-top: 20px; }
            .sec-title { font-size: 3rem; }
            .stats { flex-wrap: wrap; gap: 30px; }
            .stat-box { width: 45%; }
            .phil-grid, .gallery-grid { grid-template-columns: 1fr; }
            .footer-nav { flex-direction: column; gap: 20px; }
            .chef-text { padding: 40px 20px; text-align: center; }
        }

JavaScript

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

// 1. Preloader Animation
            const tlPreloader = gsap.timeline();
            tlPreloader.to(".preloader svg", { opacity: 0, duration: 0.5, delay: 1 })
                       .to(".preloader", { opacity: 0, duration: 1, ease: "power2.inOut", onComplete: () => document.querySelector('.preloader').style.display='none' })
                       .from(".hero-subtitle", { y: 20, opacity: 0, duration: 1, ease: "power3.out" }, "-=0.5")
                       .from(".hero-title", { y: 50, opacity: 0, duration: 1.2, ease: "power3.out" }, "-=0.8")
                       .from(".hero .reserve-btn", { y: 20, opacity: 0, duration: 1 }, "-=0.5");

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

// 3. APPLE STYLE TEXT REVEAL ON SCROLL (Section 5)
            // As you scroll down, the background-size increases from 0% to 100%, coloring the text.
            gsap.to("#revealText", {
                backgroundSize: "100% 100%",
                ease: "none",
                scrollTrigger: {
                    trigger: "#revealText",
                    start: "top 80%",    // Animation starts when element is 80% from top
                    end: "bottom 50%",   // Ends when element reaches middle of screen
                    scrub: true          // Links animation directly to scrollbar movement
                }
            });

// 4. Parallax Image in Story Section
            gsap.to(".gs-parallax", {
                yPercent: -15,
                ease: "none",
                scrollTrigger: { trigger: ".story-images", start: "top bottom", end: "bottom top", scrub: true }
            });
            
            // 5. Parallax Floating Leaves
            gsap.utils.toArray('.leaf').forEach((leaf, i) => {
                gsap.to(leaf, {
                    yPercent: i % 2 === 0 ? -150 : 150, // Move opposite directions
                    rotation: i % 2 === 0 ? 90 : -90,
                    ease: "none",
                    scrollTrigger: { trigger: ".story-container", start: "top bottom", end: "bottom top", scrub: true }
                });
            });

// 6. Generic Up Reveal for sections
            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: 1, ease: "power3.out"
                });
            });

// 7. 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;
                    }
                }
            });
        });

Fine Dining Restaurant Page Preview

Download Options