STEP 1 — CREATIVE DIRECTION Mood: Athletic luxury — Nike meets private members club Reference: Apple launch energy + luxury car commercial drama Animation: Dramatic, weighted, confident reveals STEP 2 — ARCHITECTURE Hero: Full-screen entrance, text reveals word-by-word About: Pinned scroll with counting stats Services: Staggered card reveals Testimonials: Parallax quote reveal CTA: Pulsing gold button, final reveal STEP 3 — AI IMAGE PROMPTS HERO: "Cinematic photo of confident executive mid-workout, minimalist black gym, dramatic gold rim lighting, low angle, shallow DOF, moody fog, premium editorial style, deep blacks with warm gold highlights, 8K, hyperrealistic, shot on Hasselblad Aspect ratio: 16:9, min 3840x2160" ABOUT: "Close-up hands wrapping athletic tape, dramatic side lighting, black background, single gold light source, macro style, high contrast Aspect ratio: 4:5" Style consistency: Deep black backgrounds, single gold light source, dramatic shadows throughout STEP 4 — HTML STRUCTURE ```html <section class="hero" id="hero"> <div class="hero-bg"> <img src="assets/hero-bg.jpg" alt="Executive training"> </div> <div class="hero-content"> <h1 class="hero-title"> <span>ASCEND</span> <span class="accent">BEYOND</span> <span>LIMITS</span> </h1> <p class="hero-subtitle">Executive performance coaching</p> <button class="cta-primary">Begin Your Ascent</button> </div> </section> <section class="about" id="about"> <h2 class="section-title">Built for Executives Who Demand Results</h2> <div class="stats-row"> <div class="stat" data-count="500"> <span class="stat-number">0</span> <span class="stat-label">Executives Transformed</span> </div> </div> </section> <section class="services" id="services"> <div class="services-grid"> <div class="service-card"> <h3>1:1 Executive Coaching</h3> </div> </div> </section> <section class="cta-final" id="cta"> <h2 class="cta-title">Your Ascent Starts Now</h2> <button class="cta-primary cta-pulse">Schedule Consultation</button> </section> ``` STEP 5 — CSS FOUNDATION ```css :root { --color-black: #0a0a0a; --color-gold: #d4af37; --font-display: 'Helvetica Neue', sans-serif; } .hero-title span { opacity: 0; transform: translateY(40px); } .hero-title .accent { color: var(--color-gold); } .cta-primary { background: var(--color-gold); color: var(--color-black); padding: 18px 48px; opacity: 0; transform: translateY(30px); } .cta-pulse { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.4); } 50% { box-shadow: 0 0 0 20px rgba(212,175,55,0); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } } ``` STEP 6 — GSAP CODE ```javascript gsap.registerPlugin(ScrollTrigger); const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!reduced) { gsap.timeline({ delay: 0.3 }) .to('.hero-title span', { opacity: 1, y: 0, duration: 1, stagger: 0.15, ease: 'power3.out' }) .to('.hero-subtitle, .cta-primary', { opacity: 1, y: 0, duration: 0.8, ease: 'power2.out' }, '-=0.4'); document.querySelectorAll('.stat').forEach(stat => { const target = parseInt(stat.dataset.count); ScrollTrigger.create({ trigger: stat, start: 'top 85%', once: true, onEnter: () => gsap.to({val:0}, { val: target, duration: 2, onUpdate: function() { stat.querySelector('.stat-number').textContent = Math.round(this.targets()[0].val); } }) }); }); gsap.to('.service-card', { opacity: 1, y: 0, duration: 0.8, stagger: 0.15, scrollTrigger: { trigger: '.services-grid', start: 'top 75%' } }); } else { gsap.set('.hero-title span, .cta-primary, .service-card', { opacity: 1, y: 0 }); } ``` STEP 7 — CLOUDFLARE DEPLOYMENT /ascend-athletics ├── index.html ├── styles.css ├── animations.js └── assets/hero-bg.jpg Deploy: dash.cloudflare.com → Workers & Pages → Direct Upload → drag folder → deploy CLI alternative: ```bash wrangler pages deploy ./ --project-name=ascend-athletics ``` SCORE: 45/50 ✅ Top fix: Compress hero image to WebP before deploying — 4K images need optimization for load speed.