Spaces:
Running
Running
File size: 11,003 Bytes
3740caf b44b5f1 3740caf f82fd57 b44b5f1 067565c f82fd57 3ca7ee6 3740caf a512f1d 3740caf ff0e6e2 a512f1d 3740caf ff0e6e2 bd15454 a512f1d 3740caf ff0e6e2 b98a171 a512f1d ff0e6e2 a512f1d ff0e6e2 a512f1d ff0e6e2 a512f1d 3740caf a512f1d 3740caf 441ae95 3740caf bd18a0a 3740caf | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Y-I.T.</title>
<meta name="description" content="Learn about Y-I.T., Durban's premier IT support company. Our mission, values and team.">
<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>
tailwind.config = {
theme: {
extend: {
colors: {
'silver': '#C0C0C0',
'onyx': '#353839',
'gunmetal': '#2C3539'
}
}
}
}
</script>
<style>
.about-gradient {
background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(53,56,57,0.8) 100%);
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(192, 192, 192, 0.2);
}
</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">
<a href="index.html"><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"></a>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="text-silver hover:text-white px-3 py-2">Home</a>
<a href="#" class="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 class="pt-32 pb-20 about-gradient relative">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<div class="flex flex-col items-center">
<img src="https://huggingface.co/spaces/Nadeemk2801/undefined/resolve/main/images/New_Logo-removebg-preview.png" alt="Y-IT Logo" class="h-24 mb-6 object-contain">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">About <span class="text-silver">Y-I.T.</span></h1>
</div>
<p class="text-xl text-silver mb-8">Delivering professional IT solutions to South African and International Businesses for over 25 years.</p>
</div>
</div>
</section>
<!-- Mission Section -->
<section class="py-20 bg-gunmetal pb-32">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-bold text-white mb-6">Our <span class="text-silver">Mission</span></h2>
<p class="text-silver mb-6">To provide reliable, innovative and professional IT services that empower businesses to operate efficiently and securely in the digital landscape.</p>
<p class="text-silver">We believe technology should be an enabler, not a barrier, to business success. Our team is committed to understanding your unique needs and delivering tailored solutions that drive growth.</p>
</div>
<div>
<img src="http://static.photos/technology/640x360/1" alt="Mission Image" class="rounded-lg shadow-xl w-full">
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section 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">Core Values</span></h2>
<p class="max-w-2xl mx-auto text-silver">The principles that guide everything we do.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-onyx p-8 rounded-lg">
<div class="text-silver mb-4">
<i data-feather="check-circle" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-4">Integrity</h3>
<p class="text-silver">We believe in transparent, honest communication and ethical business practices.</p>
</div>
<div class="bg-onyx p-8 rounded-lg">
<div class="text-silver mb-4">
<i data-feather="users" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-4">Client Focus</h3>
<p class="text-silver">Your success is our success. We listen carefully and respond quickly.</p>
</div>
<div class="bg-onyx p-8 rounded-lg">
<div class="text-silver mb-4">
<i data-feather="award" class="w-10 h-10"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-4">Excellence</h3>
<p class="text-silver">We strive for the highest standards in all aspects of our service delivery.</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="py-20 bg-gunmetal">
<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">Meet Our <span class="text-silver">Team</span></h2>
<p class="max-w-2xl mx-auto text-silver">The skilled professionals behind Y-I.T.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="team-card bg-onyx rounded-lg p-6 transition duration-300 text-center">
<img src="https://avatars.dicebear.com/api/male/wyattrowe.svg?background=%23808080" alt="Wyatt Rowe" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Wyatt Rowe</h3>
<p class="text-silver mb-2">Founder & CEO</p>
<p class="text-silver text-sm">20+ years in IT infrastructure and security</p>
</div>
<div class="team-card bg-onyx rounded-lg p-6 transition duration-300 text-center">
<img src="https://avatars.dicebear.com/api/male/nadeemkhan.svg?background=%23808080" alt="Nadeem Khan" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Nadeem Khan</h3>
<p class="text-silver mb-2">Technical Manager</p>
<p class="text-silver text-sm">Digital transformation and enterprise solutions expert</p>
</div>
<div class="team-card bg-onyx rounded-lg p-6 transition duration-300 text-center">
<img src="https://avatars.dicebear.com/api/female/jessicanormallewis.svg?background=%23808080" alt="Jessica Normal Lewis" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Jessica Normal Lewis</h3>
<p class="text-silver mb-2">IT Support Specialist</p>
<p class="text-silver text-sm">10+ years experience in IT support and customer service</p>
</div>
<div class="team-card bg-onyx rounded-lg p-6 transition duration-300 text-center">
<img src="https://avatars.dicebear.com/api/male/emilelee.svg?background=%23808080" alt="Emile Lee" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Emile Lee</h3>
<p class="text-silver mb-2">Account Manager & Solutions Architect</p>
<p class="text-silver text-sm">Client relationship expert with technical solution design</p>
</div>
<div class="team-card bg-onyx rounded-lg p-6 transition duration-300 text-center">
<img src="https://avatars.dicebear.com/api/male/caleanwarren.svg?background=%23808080" alt="Calean Warren" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Calean Warren</h3>
<p class="text-silver mb-2">Sales Manager</p>
<p class="text-silver text-sm">Driving business growth through strategic partnerships</p>
</div>
<div class="team-card bg-onyx rounded-lg p-6 transition duration-300 text-center">
<img src="https://avatars.dicebear.com/api/female/chantellenaidoo.svg?background=%23808080" alt="Chantelle Naidoo" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Chantelle Naidoo</h3>
<p class="text-silver mb-2">Accounts Manager</p>
<p class="text-silver text-sm">Financial operations and client account management</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>
<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>
<script>
feather.replace();
</script>
</body>
</html>
|