|
|
<!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> |
|
|
|
