| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Customer Support Portal</title> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> |
| <style> |
| .hero-section { |
| background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); |
| color: white; |
| padding: 5rem 0; |
| } |
| .feature-icon { |
| font-size: 2.5rem; |
| margin-bottom: 1rem; |
| color: #0d6efd; |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| transition: all 0.3s ease; |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
| <div class="container"> |
| <a class="navbar-brand" href="#">SupportHub</a> |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> |
| <span class="navbar-toggler-icon"></span> |
| </button> |
| <div class="collapse navbar-collapse" id="navbarNav"> |
| <ul class="navbar-nav ms-auto"> |
| <li class="nav-item"> |
| <a class="nav-link active" href="index.html">Home</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="submit-ticket.php">Submit Ticket</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="track-ticket.php">Track Ticket</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link" href="login.php">Login</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-section"> |
| <div class="container text-center"> |
| <h1 class="display-4 fw-bold mb-4">We're Here to Help</h1> |
| <p class="lead mb-5">24/7 customer support for all your needs. Submit a ticket and our team will get back to you shortly.</p> |
| <a href="submit-ticket.php" class="btn btn-light btn-lg px-4 me-2">Submit a Ticket</a> |
| <a href="track-ticket.php" class="btn btn-outline-light btn-lg px-4">Track Existing Ticket</a> |
| </div> |
| </section> |
|
|
| |
| <section class="py-5"> |
| <div class="container"> |
| <div class="row g-4"> |
| <div class="col-md-4"> |
| <div class="card h-100 card-hover"> |
| <div class="card-body text-center p-4"> |
| <i class="bi bi-headset feature-icon"></i> |
| <h3 class="h4 mb-3">24/7 Support</h3> |
| <p class="text-muted">Our team is available round the clock to assist you with any issues or questions.</p> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4"> |
| <div class="card h-100 card-hover"> |
| <div class="card-body text-center p-4"> |
| <i class="bi bi-speedometer2 feature-icon"></i> |
| <h3 class="h4 mb-3">Fast Response</h3> |
| <p class="text-muted">Average response time under 2 hours for all priority tickets.</p> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4"> |
| <div class="card h-100 card-hover"> |
| <div class="card-body text-center p-4"> |
| <i class="bi bi-shield-check feature-icon"></i> |
| <h3 class="h4 mb-3">Secure Platform</h3> |
| <p class="text-muted">All your data is encrypted and protected with industry-standard security measures.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-5 bg-light"> |
| <div class="container"> |
| <h2 class="text-center mb-5">How It Works</h2> |
| <div class="row g-4"> |
| <div class="col-md-3"> |
| <div class="text-center"> |
| <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;"> |
| <span class="h4 mb-0">1</span> |
| </div> |
| <h4 class="my-3">Submit Ticket</h4> |
| <p>Fill out our simple form with details about your issue.</p> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <div class="text-center"> |
| <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;"> |
| <span class="h4 mb-0">2</span> |
| </div> |
| <h4 class="my-3">Receive Ticket ID</h4> |
| <p>Get a unique reference number to track your ticket.</p> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <div class="text-center"> |
| <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;"> |
| <span class="h4 mb-0">3</span> |
| </div> |
| <h4 class="my-3">Expert Review</h4> |
| <p>Our team analyzes and prioritizes your request.</p> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <div class="text-center"> |
| <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;"> |
| <span class="h4 mb-0">4</span> |
| </div> |
| <h4 class="my-3">Resolution</h4> |
| <p>We provide a solution and follow up for feedback.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-dark text-white py-4"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-6"> |
| <h5>SupportHub</h5> |
| <p>Your trusted partner for all customer support needs.</p> |
| </div> |
| <div class="col-md-3"> |
| <h5>Quick Links</h5> |
| <ul class="list-unstyled"> |
| <li><a href="submit-ticket.php" class="text-white">Submit Ticket</a></li> |
| <li><a href="track-ticket.php" class="text-white">Track Ticket</a></li> |
| <li><a href="faq.php" class="text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div class="col-md-3"> |
| <h5>Contact</h5> |
| <ul class="list-unstyled"> |
| <li><i class="bi bi-envelope me-2"></i> support@example.com</li> |
| <li><i class="bi bi-telephone me-2"></i> +1 (555) 123-4567</li> |
| </ul> |
| </div> |
| </div> |
| <hr> |
| <div class="text-center"> |
| <p class="mb-0">© 2023 SupportHub. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
| </body> |
| </html> |
|
|
