remove get in touch and add in Get In Touch linkedin and github and email and lock like more professional

index.html

@@ -154,31 +154,36 @@ View My GitHub Projects <i data-feather="external-link" class="w-4 h-4"></i>
                 </div>
             </div>
         </section>
-
         <!-- Contact Section -->
         <section id="contact" class="mb-20">
             <h2 class="text-3xl font-bold mb-8 text-center">Get In Touch</h2>
             <div class="bg-white p-8 rounded-xl shadow-md max-w-2xl mx-auto">
-                <form class="space-y-6">
-                    <div>
-                        <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
-                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
-                    </div>
-                    <div>
-                        <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
-                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
-                    </div>
-                    <div>
-                        <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
-                        <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea>
-                    </div>
-                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition w-full">
-                        Send Message
-                    </button>
-                </form>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <a href="mailto:kamran@example.com" class="bg-white p-6 rounded-lg border border-gray-200 hover:border-indigo-500 transition-all text-center">
+                        <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i>
+                        </div>
+                        <h3 class="font-semibold mb-1">Email</h3>
+                        <p class="text-gray-600 text-sm">kamran@example.com</p>
+                    </a>
+                    <a href="https://linkedin.com/in/alihamas" target="_blank" class="bg-white p-6 rounded-lg border border-gray-200 hover:border-indigo-500 transition-all text-center">
+                        <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="linkedin" class="text-indigo-600 w-6 h-6"></i>
+                        </div>
+                        <h3 class="font-semibold mb-1">LinkedIn</h3>
+                        <p class="text-gray-600 text-sm">in/alihamas</p>
+                    </a>
+                    <a href="https://github.com/Ali-Hamas" target="_blank" class="bg-white p-6 rounded-lg border border-gray-200 hover:border-indigo-500 transition-all text-center">
+                        <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="github" class="text-indigo-600 w-6 h-6"></i>
+                        </div>
+                        <h3 class="font-semibold mb-1">GitHub</h3>
+                        <p class="text-gray-600 text-sm">@Ali-Hamas</p>
+                    </a>
+                </div>
             </div>
         </section>
-    </main>
+</main>
 
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>