Pool Tables Homepage - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Execute Technologies - Innovation Meets Execution</title> <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> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Enhanced Navigation --> <nav class="navbar"> <div class="navbar-content"> <a href="#" class="logo">Execute<span class="logo-dot">.</span></a> <div class="nav-links"> <a href="#hero" class="nav-link">Home</a> <a href="#services" class="nav-link">Services</a> <a href="#portfolio" class="nav-link">Portfolio</a> <a href="#contact" class="nav-link">Contact</a> <a href="#contact" class="nav-link highlight">Get Started</a> </div> <button class="mobile-menu-btn"> <span></span> <span></span> <span></span> </button> </div> </nav> <!-- New Hero Section --> <section id="hero" class="hero"> <div class="hero-content"> <h1 class="hero-title">Innovate. Create. <span class="gradient-text">Execute</span></h1> <p class="hero-subtitle">Transforming your digital vision into reality</p> <div class="hero-cta"> <a href="#services" class="primary-btn">Explore Services</a> <a href="#portfolio" class="secondary-btn">View Our Work</a> </div> </div> <div class="hero-graphics"> <div class="floating-shapes"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> </div> </div> </section> <!-- Enhanced Services Section --> <section id="services" class="services"> <div class="section-header"> <h2>Our Services</h2> <p>Comprehensive solutions for your digital needs</p> </div> <div class="service-grid"> <!-- Service cards will be populated by JavaScript --> </div> </section> <!-- Rest of the sections remain the same but with enhanced styling --> <!-- ... --> </body> </html>
