Video Landing Page - Copy this Html, Bootstrap 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>OVERTIMESTAFF - Hospitality Job Marketplace</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"> <style> .gradient-background { background: linear-gradient(135deg, #0077be 0%, #00a99d 100%); } .role-card { transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; } .role-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .cta-button { background-color: #ff6b35; border: none; } .cta-button:hover { background-color: #ff8c35; } .icon-circle { width: 80px; height: 80px; background-color: rgba(0,119,190,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .icon-circle i { font-size: 2rem; color: #0077be; } </style> </head> <body> <!-- Header --> <header class="gradient-background text-white py-5"> <div class="container"> <h1 class="display-4 text-center mb-4">OVERTIMESTAFF</h1> <p class="lead text-center mb-0">Connect with the right hospitality talent and opportunities instantly</p> </div> </header> <!-- Main Role Selection Section --> <section class="py-5"> <div class="container"> <div class="row g-4"> <!-- Staff Card --> <div class="col-md-4"> <div class="card role-card"> <div class="card-body text-center p-4"> <div class="icon-circle"> <i class="fas fa-user-tie"></i> </div> <h3 class="card-title h4 mb-3">Hospitality Staff</h3> <p class="card-text mb-4">Find flexible shifts that match your schedule. Set your availability, skills, and preferred venues.</p> <a href="#" class="btn btn-lg cta-button text-white w-100">Join as Staff</a> </div> </div> </div> <!-- Business Card --> <div class="col-md-4"> <div class="card role-card"> <div class="card-body text-center p-4"> <div class="icon-circle"> <i class="fas fa-building"></i> </div> <h3 class="card-title h4 mb-3">Business Owner</h3> <p class="card-text mb-4">Post shifts and find reliable staff quickly. Access a pool of verified hospitality professionals.</p> <a href="#" class="btn btn-lg cta-button text-white w-100">Register Business</a> </div> </div> </div> <!-- Agency Card --> <div class="col-md-4"> <div class="card role-card"> <div class="card-body text-center p-4"> <div class="icon-circle"> <i class="fas fa-users"></i> </div> <h3 class="card-title h4 mb-3">Staffing Agency</h3> <p class="card-text mb-4">Manage your talent pool and connect with businesses. Streamline your staffing operations.</p> <a href="#" class="btn btn-lg cta-button text-white w-100">Agency Portal</a> </div> </div> </div> </div> </div> </section> <!-- Features Section --> <section class="bg-light py-5"> <div class="container"> <h2 class="text-center mb-5">Why Choose OVERTIMESTAFF?</h2> <div class="row g-4"> <div class="col-md-3"> <div class="text-center"> <i class="fas fa-bolt fa-2x text-primary mb-3"></i> <h3 class="h5">Instant Matching</h3> <p>Find shifts or staff within minutes</p> </div> </div> <div class="col-md-3"> <div class="text-center"> <i class="fas fa-shield-alt fa-2x text-primary mb-3"></i> <h3 class="h5">Verified Profiles</h3> <p>All users are vetted and verified</p> </div> </div> <div class="col-md-3"> <div class="text-center"> <i class="fas fa-mobile-alt fa-2x text-primary mb-3"></i> <h3 class="h5">Mobile-First</h3> <p>Manage everything from your phone</p> </div> </div> <div class="col-md-3"> <div class="text-center"> <i class="fas fa-chart-line fa-2x text-primary mb-3"></i> <h3 class="h5">Smart Analytics</h3> <p>Track performance and trends</p> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-dark text-white py-5"> <div class="container"> <div class="row g-4"> <div class="col-md-4"> <h4 class="mb-3">For Staff</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white-50 text-decoration-none">Find Shifts</a></li> <li><a href="#" class="text-white-50 text-decoration-none">Skills Training</a></li> <li><a href="#" class="text-white-50 text-decoration-none">Staff Resources</a></li> </ul> </div> <div class="col-md-4"> <h4 class="mb-3">For Businesses</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white-50 text-decoration-none">Post Jobs</a></li> <li><a href="#" class="text-white-50 text-decoration-none">Business Dashboard</a></li> <li><a href="#" class="text-white-50 text-decoration-none">Pricing</a></li> </ul> </div> <div class="col-md-4"> <h4 class="mb-3">For Agencies</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white-50 text-decoration-none">Agency Tools</a></li> <li><a href="#" class="text-white-50 text-decoration-none">Staff Management</a></li> <li><a href="#" class="text-white-50 text-decoration-none">Integration APIs</a></li> </ul> </div> </div> <hr class="my-4"> <div class="text-center text-white-50"> <small>© 2025 OVERTIMESTAFF. All rights reserved.</small> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script> </body> </html>