Spaces:
Running
Running
File size: 15,668 Bytes
3740caf b44b5f1 3740caf 3ca7ee6 3740caf bd18a0a c844ede bd18a0a c844ede 3740caf 441ae95 3740caf c844ede 3740caf c844ede bd18a0a 3740caf c844ede 3740caf 598e63d | 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 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Y-I.T. - Think about IT. Professionally.</title>
<meta name="description" content="Professional IT Support Services in Durban. 24/7 Support, Cybersecurity, Cloud Solutions and more.">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'silver': '#C0C0C0',
'onyx': '#353839',
'gunmetal': '#2C3539'
}
}
}
}
</script>
<style>
.hero-gradient {
background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(53,56,57,0.8) 100%);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(192, 192, 192, 0.2);
}
.form-input {
background-color: rgba(255,255,255,0.05);
border: 1px solid rgba(192, 192, 192, 0.3);
}
.form-input:focus {
background-color: rgba(255,255,255,0.1);
}
</style>
</head>
<body class="bg-black text-silver font-sans">
<!-- Navigation -->
<nav class="bg-onyx shadow-lg fixed w-full z-10">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<img src="https://huggingface.co/spaces/Nadeemk2801/undefined/resolve/main/images/New_Logo-removebg-preview.png" alt="Y-IT Logo" class="h-12 object-contain">
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-silver hover:text-white px-3 py-2">Home</a>
<a href="about.html" class="text-silver hover:text-white px-3 py-2">About Us</a>
<a href="services.html" class="text-silver hover:text-white px-3 py-2">Services</a>
<a href="security.html" class="text-silver hover:text-white px-3 py-2">Security</a>
<a href="contact.html" class="text-silver hover:text-white px-3 py-2">Contact</a>
</div>
<div class="md:hidden">
<button class="text-silver focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="hero" class="pt-32 pb-20 hero-gradient relative overflow-hidden">
<div id="vanta-background" class="absolute inset-0"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Think about IT. <span class="text-silver">Professionally.</span></h1>
<p class="text-xl text-silver mb-8">Your trusted IT partner serving South African and International Businesses for over 25 years.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#services" class="bg-silver text-black px-8 py-3 rounded-md font-semibold hover:bg-white transition duration-300">Our Services</a>
<a href="#contact" class="border border-silver text-silver px-8 py-3 rounded-md font-semibold hover:bg-silver hover:text-black transition duration-300">Contact Us</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-black">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Our <span class="text-silver">Services</span></h2>
<p class="max-w-2xl mx-auto text-silver">Comprehensive IT solutions tailored to your business needs.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1 -->
<div class="service-card bg-gunmetal rounded-lg p-6 transition duration-300">
<div class="text-silver mb-4">
<i data-feather="clock" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-2">24/7 IT Support</h3>
<p class="text-silver">Round-the-clock technical assistance to keep your business running smoothly.</p>
</div>
<!-- Service Card 2 -->
<div class="service-card bg-gunmetal rounded-lg p-6 transition duration-300">
<div class="text-silver mb-4">
<i data-feather="shield" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Cybersecurity</h3>
<p class="text-silver">Protect your business from evolving digital threats with our security solutions.</p>
</div>
<!-- Service Card 3 -->
<div class="service-card bg-gunmetal rounded-lg p-6 transition duration-300">
<div class="text-silver mb-4">
<i data-feather="cloud" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Cloud Computing</h3>
<p class="text-silver">Scalable cloud solutions to enhance your business flexibility and efficiency.</p>
</div>
<!-- Service Card 4 -->
<div class="service-card bg-gunmetal rounded-lg p-6 transition duration-300">
<div class="text-silver mb-4">
<i data-feather="hard-drive" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Hosting Services</h3>
<p class="text-silver">Reliable hosting solutions with maximum uptime and performance.</p>
</div>
<!-- Service Card 5 -->
<div class="service-card bg-gunmetal rounded-lg p-6 transition duration-300">
<div class="text-silver mb-4">
<i data-feather="mail" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Mimecast Security</h3>
<p class="text-silver">Advanced email protection against phishing, malware and data leaks.</p>
</div>
<!-- Service Card 6 -->
<div class="service-card bg-gunmetal rounded-lg p-6 transition duration-300">
<div class="text-silver mb-4">
<i data-feather="briefcase" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-2">IT Consulting</h3>
<p class="text-silver">Strategic guidance to align your technology with business objectives.</p>
</div>
</div>
</div>
</section>
<a href="https://wa.me/27820934198" target="_blank" class="fixed bottom-8 right-8 bg-silver text-black p-4 rounded-full shadow-lg z-40 hover:bg-white transition duration-300">
<i data-feather="message-square"></i>
</a>
<!-- Ticket Section -->
<section id="ticket" class="py-20 bg-gunmetal hovered-element">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Log a <span class="text-silver">Support Ticket</span></h2>
<p class="text-silver">Our team is ready to assist with your technical issues.</p>
</div>
<form id="ticketForm" class="bg-onyx rounded-lg p-8 shadow-xl">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="name" class="block text-silver mb-2">Full Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded form-input text-white" required>
</div>
<div>
<label for="email" class="block text-silver mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded form-input text-white" required>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="phone" class="block text-silver mb-2">Contact Number</label>
<input type="tel" id="phone" class="w-full px-4 py-3 rounded form-input text-white" required>
</div>
<div>
<label for="priority" class="block text-silver mb-2">Priority Level</label>
<select id="priority" class="w-full px-4 py-3 rounded form-input text-white">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="mb-6">
<label for="issue" class="block text-silver mb-2">Issue Description</label>
<textarea id="issue" rows="5" class="w-full px-4 py-3 rounded form-input text-white" required></textarea>
</div>
<button type="submit" class="w-full bg-silver text-black py-3 rounded-md font-semibold hover:bg-white transition duration-300">
Submit Ticket
</button>
</form>
</div>
</div>
</section>
<!-- Contact Info Section -->
<section id="contact" class="py-20 bg-black">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center md:text-left">
<h3 class="text-xl font-semibold text-white mb-4">Contact Us</h3>
<p class="text-silver mb-2"><i data-feather="map-pin" class="inline mr-2"></i> 87 Adelaide Tambo Drive, Durban North, 4051</p>
<p class="text-silver mb-2"><i data-feather="phone" class="inline mr-2"></i> 087 997 0948</p>
<p class="text-silver"><i data-feather="mail" class="inline mr-2"></i> yitsupport@y-it.co.za</p>
</div>
<div class="text-center">
<h3 class="text-xl font-semibold text-white mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-silver hover:text-white">Home</a></li>
<li><a href="about.html" class="text-silver hover:text-white">About Us</a></li>
<li><a href="services.html" class="text-silver hover:text-white">Services</a></li>
<li><a href="security.html" class="text-silver hover:text-white">Security</a></li>
</ul>
</div>
<div class="text-center md:text-right">
<h3 class="text-xl font-semibold text-white mb-4">Business Hours</h3>
<p class="text-silver">Monday - Friday: 8:00 AM - 5:00 PM</p>
<p class="text-silver">Emergency Support: 24/7</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-onyx py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-silver mb-4 md:mb-0">© 2023 Y-IT. All rights reserved.</p>
<div class="flex space-x-4">
<a href="#" class="text-silver hover:text-white"><i data-feather="facebook"></i></a>
<a href="#" class="text-silver hover:text-white"><i data-feather="twitter"></i></a>
<a href="#" class="text-silver hover:text-white"><i data-feather="linkedin"></i></a>
</div>
</div>
</div>
</footer>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-background",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x808080,
backgroundColor: 0x0,
points: 12.00,
maxDistance: 25.00
});
// Handle form submission with email
document.getElementById('ticketForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
phone: document.getElementById('phone').value,
priority: document.getElementById('priority').value,
issue: document.getElementById('issue').value
};
// Send email via Formspree or similar service
fetch('https://formspree.io/f/yitsupport@y-it.co.za', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: formData.name,
email: formData.email,
phone: formData.phone,
priority: formData.priority,
issue: formData.issue,
_subject: `Support Ticket (${formData.priority} priority)`
})
})
.then(response => {
if (response.ok) {
alert('Your support ticket has been logged successfully! An engineer will reach out as soon as they are available.');
this.reset();
} else {
throw new Error('Failed to submit ticket');
}
})
.catch(error => {
console.error('Error:', error);
alert('There was an error submitting your ticket. Please try again or contact us directly.');
});
});
// Initialize feather icons
feather.replace();
// Add this to your head section or before the closing body tag
<link href="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.css" rel="stylesheet">
</script>
</body>
</html>
|