Spaces:
Running
Running
File size: 8,711 Bytes
3740caf b44b5f1 3740caf f82fd57 b44b5f1 067565c f82fd57 3ca7ee6 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Commitment - Y-I.T.</title>
<meta name="description" content="Y-I.T.'s commitment to cybersecurity and data protection in Durban. Professional security solutions for businesses.">
<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>
.security-gradient {
background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(53,56,57,0.8) 100%);
}
.security-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(192, 192, 192, 0.2);
}
.shield-icon {
background: linear-gradient(135deg, rgba(192,192,192,0.1) 0%, rgba(192,192,192,0.2) 100%);
}
</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="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="#" class="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 security-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">Security <span class="text-silver">Commitment</span></h1>
</div>
<p class="text-xl text-silver mb-8">Protecting South African and International Businesses in an increasingly complex digital world for over 25 years.</p>
</div>
</div>
</section>
<!-- Security Focus Section -->
<section class="py-20 bg-gunmetal">
<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">Security</span> Focus</h2>
<p class="text-silver mb-6">At Y-I.T., we understand that cybersecurity is not just about technology—it's about protecting your business, your reputation, and your customers' trust.</p>
<p class="text-silver">Our team of certified security professionals stays ahead of emerging threats to provide you with the most effective protection available.</p>
</div>
<div>
<img src="http://static.photos/technology/640x360/2" alt="Security Image" class="rounded-lg shadow-xl w-full">
</div>
</div>
</div>
</section>
<!-- Security Solutions -->
<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">Comprehensive <span class="text-silver">Security Solutions</span></h2>
<p class="max-w-2xl mx-auto text-silver">Multi-layered protection for your digital assets.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="security-card bg-onyx rounded-lg p-8 transition duration-300">
<div class="shield-icon w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i data-feather="lock" class="w-8 h-8 text-silver"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-4">Network Security</h3>
<p class="text-silver">Firewalls, intrusion prevention, and secure network architecture to protect your infrastructure.</p>
</div>
<div class="security-card bg-onyx rounded-lg p-8 transition duration-300">
<div class="shield-icon w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i data-feather="user" class="w-8 h-8 text-silver"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-4">Endpoint Protection</h3>
<p class="text-silver">Advanced threat detection and response for all devices accessing your network.</p>
</div>
<div class="security-card bg-onyx rounded-lg p-8 transition duration-300">
<div class="shield-icon w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i data-feather="database" class="w-8 h-8 text-silver"></i>
</div>
<h3 class="text-xl font-semibold text-white mb-4">Data Protection</h3>
<p class="text-silver">Encryption, backup solutions and access controls to safeguard your critical information.</p>
</div>
</div>
</div>
</section>
<!-- Compliance 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">Regulatory <span class="text-silver">Compliance</span></h2>
<p class="max-w-2xl mx-auto text-silver">Helping you meet industry standards and legal requirements.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="flex flex-col items-center p-4">
<div class="shield-icon w-16 h-16 rounded-full flex items-center justify-center mb-4">
<i data-feather="shield" class="w-8 h-8 text-silver"></i>
</div>
<span class="text-white">POPIA</span>
</div>
<div class="flex flex-col items-center p-4">
<div class="shield-icon w-16 h-16 rounded-full flex items-center justify-center mb-4">
<i data-feather="shield" class="w-8 h-8 text-silver"></i>
</div>
<span class="text-white">GDPR</span>
</div>
<div class="flex flex-col items-center p-4">
<div class="shield-icon w-16 h-16 rounded-full flex items-center justify-center mb-4">
<i data-feather="shield" class="w-8 h-8 text-silver"></i>
</div>
<span class="text-white">ISO 27001</span>
</div>
<div class="flex flex-col items-center p-4">
<div class="shield-icon w-16 h-16 rounded-full flex items-center justify-center mb-4">
<i data-feather="shield" class="w-8 h-8 text-silver"></i>
</div>
<span class="text-white">PCI DSS</span
</body>
</html> |