contact us styling

src/app/contact-us/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { useState } from "react";
+import Image from "next/image";
 
 const ContactUs = () => {
   const [formData, setFormData] = useState({
@@ -15,31 +16,33 @@ const ContactUs = () => {
   const handleSubmit = (e) => {
     e.preventDefault();
     console.log("Form submitted with data:", formData);
-    // Handle form submission, like sending data to a server
     alert("Thank you for reaching out! We will get back to you soon.");
-    setFormData({ name: "", email: "", message: "" }); // Clear form
+    setFormData({ name: "", email: "", message: "" });
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center py-10">
+    <div
-      <div className="max-w-4xl mx-auto p-5 bg-white shadow-md rounded-lg">
+      className="h-screen relative text-white py-10 border border-black">
-        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
+       <Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg"/>
+    
+      {/* Overlay for readability */}
+      <div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20">
+        {/* Container */}
+        <div className="max-w-4xl mx-auto p-5">
+          {/* Header */}
+          <h1 className="text-4xl font-bold text-center text-white mb-6">
             Contact Us
           </h1>
-        <p className="text-lg text-gray-600 text-center mb-6">
+          <p className="text-lg text-center text-gray-300 mb-6">
             Have questions or concerns about earthquake preparedness? Contact us
             using the form below or through the provided contact details.
           </p>
 
-        {/* Flexbox Layout for Form and Contact Details */}
+          {/* Content Section */}
-        <div className="flex flex-col md:flex-row">
+          <div className="flex flex-col md:flex-row gap-6">
-          
+            {/* Contact Form Section */}
-          {/* Contact Form */}
+            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
-          <div className="flex-1 mb-6 md:mb-0 md:mr-4">
+              <form onSubmit={handleSubmit}>
-            <form
-              onSubmit={handleSubmit}
-              className="bg-gray-50 p-6 rounded-lg shadow-lg"
-            >
                 <div className="mb-4">
                   <label
                     htmlFor="name"
@@ -106,8 +109,8 @@ const ContactUs = () => {
               </form>
             </div>
 
-          {/* Contact Details */}
+            {/* Contact Details Section */}
-          <div className="flex-1 bg-gray-50 p-6 rounded-lg shadow-lg">
+            <div className="flex-1 bg-white bg-opacity-90 text-gray-800 rounded-lg shadow-lg p-6">
               <h2 className="text-xl font-bold text-gray-800 mb-4">
                 Get in Touch
               </h2>
@@ -129,54 +132,41 @@ const ContactUs = () => {
               <h2 className="text-xl font-bold text-gray-800 mb-4 mt-6">
                 Follow Us
               </h2>
-            <div className="flex space-x-4">
+              <div className="flex justify-around items-center">
                 <a
                   href="#"
-                className="text-blue-600 hover:text-blue-800 transition duration-200"
+                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
                 >
-                <span className="sr-only">Twitter</span>
+                  <span className="sr-only">Instagram</span>
-                <svg
+                  <Image height={200} width={200} alt="Logo" className="z-10" src="/insta.webp"/>
-                  className="h-6 w-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M24 4.56a9.83 9.83..." />
-                </svg>
                 </a>
                 <a
                   href="#"
-                className="text-blue-600 hover:text-blue-800 transition duration-200"
+                  className="w-20 h-20 text-blue-600 hover:text-blue-800 transition duration-200"
                 >
                   <span className="sr-only">Facebook</span>
-                <svg
+                  <Image height={200} width={200} alt="Logo" className="z-10" src="/facebook.webp"/>
-                  className="h-6 w-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M22.675 0h-21.35..." />
-                </svg>
                 </a>
                 <a
                   href="#"
-                className="text-blue-600 hover:text-blue-800 transition duration-200"
+                  className="w-20 h-20 p-4 text-blue-600 hover:text-blue-800 transition duration-200"
+                >
+                  <span className="sr-only">X</span>
+                  <Image height={200} width={200} alt="Logo" className="z-10 rounded-lg" src="/x_logo.jpg"/>
+                </a>
+                <a
+                  href="#"
+                  className="w-20 h-20 flex items-center text-blue-600 hover:text-blue-800 transition duration-200"
                 >
                   <span className="sr-only">LinkedIn</span>
-                <svg
+                  <Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png"/>
-                  className="h-6 w-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M22.23 0H1.77C0.8..." />
-                </svg>
                 </a>
               </div>
             </div>
           </div>
         </div>
       </div>
+    </div>
   );
 };