not flashy i mean shiny and put the email, phone, and address up the page

contact.html

@@ -62,12 +62,44 @@
     <div class="relative z-10 py-16 sm:py-24 animate-pulse">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center">
-                <h2 class="text-4xl font-extrabold tracking-tight text-transparent bg-clip-text magic-gradient sm:text-5xl md:text-6xl">
-                    GET IN TOUCH NOW!
+                <h2 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
+                    Contact Information
                 </h2>
-                <p class="mt-6 max-w-2xl text-2xl text-gray-700 font-medium mx-auto bg-white/80 p-4 rounded-lg shadow-sm">
-                    ✨ Have an amazing project idea? Let's make magic happen! ✨
-                </p>
+                <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                        <div class="flex items-center">
+                            <div class="p-3 bg-purple-100 rounded-full">
+                                <i data-feather="mail" class="h-6 w-6 text-purple-600"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-gray-900">Email</h3>
+                                <p class="mt-1 text-gray-600">hello@wizzyweb.com</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                        <div class="flex items-center">
+                            <div class="p-3 bg-purple-100 rounded-full">
+                                <i data-feather="phone" class="h-6 w-6 text-purple-600"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-gray-900">Phone</h3>
+                                <p class="mt-1 text-gray-600">+1 (555) 123-4567</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+                        <div class="flex items-center">
+                            <div class="p-3 bg-purple-100 rounded-full">
+                                <i data-feather="map-pin" class="h-6 w-6 text-purple-600"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-medium text-gray-900">Address</h3>
+                                <p class="mt-1 text-gray-600">123 Web Wizard Way, SF</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 </div>
 
             <div class="mt-16 grid grid-cols-1 gap-y-10 lg:grid-cols-2 lg:gap-x-8 lg:gap-y-0">
@@ -98,34 +130,6 @@
                     <div class="bg-white py-10 px-6 sm:px-10 rounded-2xl contact-card">
                         <h3 class="text-lg font-medium text-gray-900">Contact information</h3>
                 <div class="mt-6 space-y-6">
-                    <div class="flex items-center p-4 bg-purple-50 rounded-lg transform transition hover:scale-105 hover:shadow-lg">
-                        <div class="flex-shrink-0 p-3 bg-purple-100 rounded-full">
-                            <i data-feather="mail" class="h-8 w-8 text-purple-600"></i>
-                        </div>
-                        <div class="ml-4">
-                            <p class="text-sm font-medium text-gray-500">Email</p>
-                            <p class="text-xl font-bold text-purple-600">hello@wizzyweb.com</p>
-                        </div>
-                    </div>
-                    <div class="flex items-center p-4 bg-purple-50 rounded-lg transform transition hover:scale-105 hover:shadow-lg">
-                        <div class="flex-shrink-0 p-3 bg-purple-100 rounded-full">
-                            <i data-feather="phone" class="h-8 w-8 text-purple-600"></i>
-                        </div>
-                        <div class="ml-4">
-                            <p class="text-sm font-medium text-gray-500">Phone</p>
-                            <p class="text-xl font-bold text-purple-600">+1 (555) 123-4567</p>
-                        </div>
-                    </div>
-                    <div class="flex items-center p-4 bg-purple-50 rounded-lg transform transition hover:scale-105 hover:shadow-lg">
-                        <div class="flex-shrink-0 p-3 bg-purple-100 rounded-full">
-                            <i data-feather="map-pin" class="h-8 w-8 text-purple-600"></i>
-                        </div>
-                        <div class="ml-4">
-                            <p class="text-sm font-medium text-gray-500">Address</p>
-                            <p class="text-xl font-bold text-purple-600">123 Web Wizard Way</p>
-                            <p class="text-xl font-bold text-purple-600">San Francisco, CA 94107</p>
-                        </div>
-                    </div>
 </div>
                     </div>