diff --git a/contact.jsx b/contact.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f68219716dd0eadb1d44eada671200ed8fe5b0d
--- /dev/null
+++ b/contact.jsx
@@ -0,0 +1,96 @@
+import React from "react";
+import copai from "./Gopal_Women.svg";
+import jassi from "./Jessi.svg";
+import ema from "./Ema_Grey.svg";
+import emacity from "./Elsa_Mills.svg";
+import gopal from "./Gopal.svg";
+import phone from "./phone-call.png";
+const team=[
+  { name: "Gopal", role: "Payment Support", image: copai},
+  { name: "Jessi", role: "Customer Support", image: jassi },
+  { name: "Ema Gray", role: "Shipping Support", image: ema },
+  { name: "Gopal", role: "seller Support", image: gopal },
+  { name: "Elsa Mills", role: "Payment Support", image: emacity },
+];
+function Contact() {
+  return (
+    <div className="relative p-4 bg-[#E9FAFF]">
+      <h2 className="text-2xl sm:text-3xl font-extrabold text-center mb-4 text-[#28409C]">
+        CONTACT US
+      </h2>
+      <p className="text-center text-black">
+        <span className="block text-xl sm:text-3xl font-extrabold">
+          Our team of experts are here to help
+        </span>
+        <span className="block text-lg sm:text-2xl text-gray-700 font-medium mt-2">
+          Get support 24/7, with our support network of growth experts
+        </span>
+      </p>
+      <div className="flex justify-center my-6">
+        <button className="bg-[#FFBD69] text-black font-semibold w-[15rem] md:w-[18rem] border-none rounded-[2rem] h-[3rem] flex items-center justify-center gap-2 hover:bg-yellow-500 cursor-pointer">
+          <img src={phone} alt="phone" className="w-5 h-5" /> Contact Us
+        </button>
+      </div>
+      <div>
+      <div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-5 gap-8 p-4">
+      {team.map((member, index) => (
+        <div
+          key={index}
+          className="group relative size-[250px] md:size-[250px] object-contain place-items-center   overflow-hidden"
+        >
+          <img
+            src={member.image}
+            alt={member.name}
+            className="size-[300px] inline-flex  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
+          />
+          <div className="absolute bottom-2 left-1 right-2 bg-[#F6F6F6F2] bg-opacity-80 p-2 rounded-xl backdrop-blur-md overflow-x-hidden">
+            <h3 className="text-lg font-semibold">{member.name}</h3>
+            <p className="text-gray-600 text-sm">{member.role}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  
+      </div>
+      {/*<div className="flex flex-col md:flex-row justify-center items-center sm:object-cover gap-4 p-4">
+        <div className="group relative size-[300px] md:size-[250px]">
+          <img
+            src={copai}
+            alt="copai"
+            className="w-full h-full   grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
+          />
+        </div>
+        <div className="group relative size-[300px] md:size-[300px]">
+          <img
+            src={jassi}
+            alt="jassi"
+            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
+          />
+        </div>
+        <div className="group relative size-[300px] md:size-[300px]">
+          <img
+            src={ema}
+            alt="ema"
+            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
+          />
+        </div>
+        <div className="group relative  size-[300px] md:size-[300px]">
+          <img
+            src={gopal}
+            alt="gopal"
+            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
+          />
+        </div>
+        <div className="group relative size-[300px] md:size-[260.88px]">
+          <img
+            src={emacity}
+            alt="emacity"
+            className="w-full h-full  grayscale transition duration-1000 ease-in-out group-hover:grayscale-0"
+          />
+        </div>
+      </div>*/}
+    </div>
+  );
+}
+
+export default Contact;