From a105d33bb8c8da65f7e7d6d613cc407b5ef28457 Mon Sep 17 00:00:00 2001
From: Raydo M <126121348+burnt-exe@users.noreply.github.com>
Date: Fri, 4 Oct 2024 16:12:56 +0200
Subject: [PATCH] Update index.html

Signed-off-by: Raydo M <126121348+burnt-exe@users.noreply.github.com>
---
 index.html | 152 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 98 insertions(+), 54 deletions(-)

diff --git a/index.html b/index.html
index 5c176ee3..0e5fd3df 100644
--- a/index.html
+++ b/index.html
@@ -63,8 +63,7 @@
         <div class="welcome-section-content">
             <h4>Welcome to Skunkworks</h4>
             <h5>Innovative Technology, Education Solutions, and Placement Services for Tomorrow's Businesses.</h5>
-            <p><a href="mailto:info@skunkworks.africa">info@skunkworks.africa</a></p>
-            <p><a href="tel:(+27)87 164 5398">(+27)87 164 5398</a></p>
+            <p><a href="mailto:info@skunkworks.africa">info@skunkworks.africa</a></p><p><a href="tel:(+27)87 164 5398">(+27)87 164 5398</a></p>
         </div>
     </section>
 
@@ -184,20 +183,20 @@ <h1>Our Partners</h1>
             </a>
             <a class="partner-item" data-name="Dell" href="dell.html">
                 <img alt="Dell Logo" src="https://raw.githubusercontent.com/skunkworksza/www/a1d437d3c21c968aa69d146b04703d7cecf5d838/assets/dell/strategic-partner-logo-dell-technologies-1.svg" />
-                </a>
-                <a class="partner-item" data-name="GitHub" href="github.html">
-                    <img alt="GitHub Logo" src="https://raw.githubusercontent.com/skunkworksza/www/c16c5586c66061112ffe4012073f564d9daa927d/assets/github/github-mark.svg" />
-                </a>
-                <a class="partner-item" data-name="Google Cloud" href="googlecloud.html">
-                    <img alt="Google Cloud Logo" src="https://raw.githubusercontent.com/skunkworksza/www/c16c5586c66061112ffe4012073f564d9daa927d/assets/google/google-cloud-logo-new.svg" />
-                </a>
-                <a class="partner-item" data-name="IBM" href="./ibm/index.html">
-                    <img alt="IBM Logo" src="https://github.com/skunkworksza/www/blob/main/assets/ibm/IBM_Partner_Plus_silver_partner_mark_pos_black_RGB(103x80).jpg?raw=true" />
-                </a>
-                <a class="partner-item" data-name="Red Hat" href="./redhat/index.html">
-                    <img alt="Red Hat Logo" src="https://github.com/skunkworksza/www/blob/main/assets/redhat/redhat_logo.png?raw=true" />
-                </a>
-                <a class="partner-item" data-name="Microsoft" href="./microsoft/index.html">
+            </a>
+            <a class="partner-item" data-name="GitHub" href="github.html">
+                <img alt="GitHub Logo" src="https://raw.githubusercontent.com/skunkworksza/www/c16c5586c66061112ffe4012073f564d9daa927d/assets/github/github-mark.svg" />
+            </a>
+            <a class="partner-item" data-name="Google Cloud" href="googlecloud.html">
+                <img alt="Google Cloud Logo" src="https://raw.githubusercontent.com/skunkworksza/www/c16c5586c66061112ffe4012073f564d9daa927d/assets/google/google-cloud-logo-new.svg" />
+            </a>
+            <a class="partner-item" data-name="IBM" href="./ibm/index.html">
+                <img alt="IBM Logo" src="https://github.com/skunkworksza/www/blob/main/assets/ibm/IBM_Partner_Plus_silver_partner_mark_pos_black_RGB(103x80).jpg?raw=true" />
+            </a>
+            <a class="partner-item" data-name="Red Hat" href="./redhat/index.html">
+                <img alt="Red Hat Logo" src="https://github.com/skunkworksza/www/blob/main/assets/redhat/redhat_logo.png?raw=true" />
+            </a>
+            <a class="partner-item" data-name="Microsoft" href="./microsoft/index.html">
                 
                 <img alt="Microsoft Logo" src="https://github.com/skunkworksza/www/blob/main/assets/microsoft/RWEDnc.png?raw=true" />
             </a>
@@ -229,49 +228,94 @@ <h1>Our Partners</h1>
         <div class="divider"></div>
 </section>
 
-<!-- Statistics Section -->
-<section class="section" id="statistics">
-    <h1 class="centered-heading">Our Achievements</h1>
-    <div class="grid-container framed-grid">
-        <a href="./instructors.html" class="framed-tile">
-            <div class="achievement-icon" aria-label="Instructors"></div>
-            <h2>+100 Instructors &amp; Experts</h2>
-        </a>
-        <a href="./partnerships.html" class="framed-tile">
-            <div class="achievement-icon" aria-label="Partnerships"></div>
-            <h2>+40 Strategic Partnerships</h2>
-        </a>
-        <a href="./courses.html" class="framed-tile">
-            <div class="achievement-icon" aria-label="Courses"></div>
-            <h2>+1000 Courses Offered</h2>
-        </a>
-    </div>
-</section>
-
+    <!-- Statistics Section -->
+    <section class="bg-gray-100 py-16" id="statistics">
+      <div class="container mx-auto px-4">
+        <h2 class="text-3xl font-bold mb-12 text-center">Our Achievements</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <a href="./instructors.html" class="block bg-white rounded-lg shadow-md hover:shadow-lg transition duration-300 p-6 text-center">
+            <div class="mb-4">
+              <svg class="w-16 h-16 mx-auto text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+              </svg>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">+100 Instructors &amp; Experts</h3>
+            <p class="text-gray-600">Learn from the best in the industry</p>
+          </a>
+          <a href="./partnerships.html" class="block bg-white rounded-lg shadow-md hover:shadow-lg transition duration-300 p-6 text-center">
+            <div class="mb-4">
+              <svg class="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+              </svg>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">+40 Strategic Partnerships</h3>
+            <p class="text-gray-600">Collaborating for success</p>
+          </a>
+          <a href="./courses.html" class="block bg-white rounded-lg shadow-md hover:shadow-lg transition duration-300 p-6 text-center">
+            <div class="mb-4">
+              <svg class="w-16 h-16 mx-auto text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
+                <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
+              </svg>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">+1000 Courses Offered</h3>
+            <p class="text-gray-600">Diverse learning opportunities</p>
+          </a>
+        </div>
+      </div>
+    </section>
 
-<!-- About Us Section -->
-<section class="section" id="about">
-    <div class="centered-container">
-        <h4>About Us</h4>
-        <p>Our team is dedicated to providing top-notch services, and our expertise spans various domains including education, technology, and business development.</p>
-        <p>Approach: We take a collaborative approach to every project, working closely with our clients to understand their needs and goals. We are committed to delivering solutions that meet or exceed our clients' expectations. Our team is responsive and accessible, and we pride ourselves on delivering exceptional customer service.</p>
+  <!-- About Us Section -->
+  <section class="bg-gray-100 py-16" id="about">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl font-bold mb-8 text-center">About Us</h2>
+      <div class="max-w-3xl mx-auto">
+        <p class="mb-4 text-lg">Our team is dedicated to providing top-notch services, and our expertise spans various domains including education, technology, and business development.</p>
+        <h3 class="text-xl font-semibold mb-2">Our Approach</h3>
+        <p class="text-lg">We take a collaborative approach to every project, working closely with our clients to understand their needs and goals. We are committed to delivering solutions that meet or exceed our clients' expectations. Our team is responsive and accessible, and we pride ourselves on delivering exceptional customer service.</p>
+      </div>
     </div>
-</section>
+  </section>
 
-<!-- Contact Us Section -->
-<section class="section" id="contact">
-    <h1>Contact Us</h1>
-<iframe width="640px" height="480px" src="https://forms.office.com/Pages/ResponsePage.aspx?id=5I0ul2Xjo0OZ7MhqDMJJ6EpjwRy2-BFGo8O-br_aZGZUMTBBRkU3UEVPTVQ5QlEwOFVJV1kwTUowVC4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
-</section>
+  <!-- Contact Us Section -->
+  <section class="py-16" id="contact">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl font-bold mb-8 text-center">Contact Us</h2>
+      <div class="max-w-3xl mx-auto">
+        <iframe 
+          title="Contact Form"
+          width="100%" 
+          height="600px" 
+          src="https://forms.office.com/Pages/ResponsePage.aspx?id=5I0ul2Xjo0OZ7MhqDMJJ6EpjwRy2-BFGo8O-br_aZGZUMTBBRkU3UEVPTVQ5QlEwOFVJV1kwTUowVC4u&embed=true" 
+          frameborder="0" 
+          style="border: none; max-width:100%; max-height:80vh" 
+          allowfullscreen>
+        </iframe>
+      </div>
+    </div>
+  </section>
 
 <!-- Footer -->
-<footer>
-    <p>© 2024 Skunkworks. All rights reserved.</p>
-    <p>Address:</p>
-    <p>26 Second Avenue</p>
-    <p>Germiston, Gauteng 1401.</p>
-    <p>South Africa</p>
-    <p><a href="https://blog.skunkworks.africa/" target="_blank">Visit our blog</a></p>
+<footer class="bg-gray-800 text-white py-6">
+    <div class="container mx-auto px-4">
+        <div class="flex flex-wrap justify-between items-center">
+            <div class="w-full md:w-1/3 mb-4 md:mb-0">
+                <p class="text-sm">&copy; 2024 Skunkworks. All rights reserved.</p>
+            </div>
+            <div class="w-full md:w-1/3 mb-4 md:mb-0">
+                <p class="text-sm">26 Second Avenue, Germiston, Gauteng. South Africa 1401</p>
+            </div>
+            <div class="w-full md:w-1/3 text-center md:text-right">
+                <a href="https://blog.skunkworks.africa/" 
+                   target="_blank" 
+                   rel="noopener noreferrer" 
+                   class="text-sm text-gray-300 hover:text-white transition duration-300">
+                    Visit our blog
+                </a>
+            </div>
+        </div>
+    </div>
 </footer>
 
 <!-- JavaScript for Functionality -->