File size: 8,111 Bytes
39033c5 dcd6973 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | <!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>
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- Features 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>
<!-- How It Works -->
<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 -->
<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>
|