Merge pull request #16 from n1ved/main

Update contact page grid layout
Excel2024Web · Nov 16, 2024 · 05c2a31 · 05c2a31
2 parents 9170222 + 1e48678
commit 05c2a31
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 80 deletions.
diff --git a/src/components/Contact/ContactCard.css b/src/components/Contact/ContactCard.css
@@ -69,7 +69,7 @@
       rgba(255, 255, 255, 0) 50%
     );
   /* backdrop-filter: blur(10.5px); */
-  color: #1e1e1e;
+  color: #000;
 }
 
 .text-field h2 {

diff --git a/src/components/Contact/ContactCard.jsx b/src/components/Contact/ContactCard.jsx
@@ -83,6 +83,7 @@ const ContactCard = ({ details }) => {
         className="card-container"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
+        onClick={() => setIsHovered(!isHovered)}
       >
         <div className="background-image">
           <Image

diff --git a/src/components/Contact/ContactPage.jsx b/src/components/Contact/ContactPage.jsx
@@ -1,84 +1,83 @@
 import ContactCard from "./ContactCard";
-import chairperson from "../../assets/contacts/sreeparvathy_crop.jpg"
-import gensec from "../../assets/contacts/arif.jpg"
-import jointsec from "../../assets/contacts/akash.jpg"
-import sim from "../../assets/contacts/laya.jpg"
-import eventhead from "../../assets/contacts/Athul.png"
-import eventhead2 from "../../assets/contacts/aleena.jpg"
+import chairperson from "../../assets/contacts/sreeparvathy_crop.jpg";
+import gensec from "../../assets/contacts/arif.jpg";
+import jointsec from "../../assets/contacts/akash.jpg";
+import sim from "../../assets/contacts/laya.jpg";
+import eventhead from "../../assets/contacts/Athul.png";
+import eventhead2 from "../../assets/contacts/aleena.jpg";
 
-export default function Contact (){
-    const contactDetails = [
-        {
-            name: "Sreeparvathy S Nair",
-            title: "Chairperson",
-            email: "sreeparvathynair.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/sreeparvathy-nair-b29a6326b/",
-            img: chairperson
-        },
-
-        {
-            name: "Arif Basheer",
-            title: "General Secretary",
-            email: "arifbasheer.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/arif-basheer-b20491258/",
-            img: gensec
-        },
+export default function Contact() {
+  const contactDetails = [
+    {
+      name: "Sreeparvathy S Nair",
+      title: "Chairperson",
+      email: "sreeparvathynair.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/sreeparvathy-nair-b29a6326b/",
+      img: chairperson,
+    },
 
-        {
-            name: "Akash V P",
-            title: "Joint Secretary",
-            email: "akashvp.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/akashvp/",
-            img: jointsec
-        },
+    {
+      name: "Arif Basheer",
+      title: "General Secretary",
+      email: "arifbasheer.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/arif-basheer-b20491258/",
+      img: gensec,
+    },
 
-        {
-            name: "Laya Sara Joy",
-            title: "Social Initiatives Manager",
-            email: "layasarajoy.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/laya-sara-joy/",
-            img: sim
-        },
+    {
+      name: "Akash V P",
+      title: "Joint Secretary",
+      email: "akashvp.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/akashvp/",
+      img: jointsec,
+    },
 
-        {
-            name: "Athul Babu",
-            title: "Event Head",
-            email: "athulbabu5088@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/athul-babu-9b55362a5/",
-            img: eventhead
-        },
+    {
+      name: "Laya Sara Joy",
+      title: "Social Initiatives Manager",
+      email: "layasarajoy.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/laya-sara-joy/",
+      img: sim,
+    },
 
-        {
-            name: "Aleena Prince",
-            title: "Event Head",
-            email: "aleenaprince.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/aleena-prince-b85244230/",
-            img: eventhead2
-        }
-    ]
-    return (
-        <>
-        <div className="w-[100vw] flex justify-center items-center flex-col overflow-hidden h-full pb-10">
-            <h1 className="mt-10 text-4xl text-center">Contact Us</h1>
-            <p className="text-center md:w-[30vw] w-[90vw] mt-5 mb-10 font-sans bg-gradient-to-r  bg-clip-text text-white text-[18px]" >We’d love to hear from you! Whether you have questions, feedback, or just want to chat, feel free to reach out to us. Your thoughts and inquiries are valuable to us, and we’re here to help in any way we can.</p>
-            <div className="flex flex-wrap justify-center flex-row items-center  h-fit w-[80vw] gap-[120px] align-middle">
+    {
+      name: "Athul Babu",
+      title: "Event Head",
+      email: "athulbabu5088@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/athul-babu-9b55362a5/",
+      img: eventhead,
+    },
 
-                {contactDetails.map((cd, index) => (
-                    <ContactCard
-                        key={index}
-                        details = {cd}
-                    />
-                ))}
-
-
-            </div>
+    {
+      name: "Aleena Prince",
+      title: "Event Head",
+      email: "aleenaprince.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/aleena-prince-b85244230/",
+      img: eventhead2,
+    },
+  ];
+  return (
+    <>
+      <div className="w-[100vw] flex justify-center items-center flex-col overflow-hidden h-full pb-10">
+        <h1 className="mt-10 text-4xl text-center">Contact Us</h1>
+        <p className="text-center md:w-[30vw] w-[90vw] mt-5 mb-10 font-sans bg-gradient-to-r  bg-clip-text text-white text-[18px]">
+          We’d love to hear from you! Whether you have questions, feedback, or
+          just want to chat, feel free to reach out to us. Your thoughts and
+          inquiries are valuable to us, and we’re here to help in any way we
+          can.
+        </p>
+        <div className="grid grid-cols-3 max-sm:grid-cols-1 max-md:grid-cols-2 gap-[50px]">
+          {contactDetails.map((cd, index) => (
+            <ContactCard key={index} details={cd} />
+          ))}
         </div>
-        </>
-    )
-}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/FAQ/FAQCard.css b/src/components/FAQ/FAQCard.css
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");
-
 .faq {
   width: 100%;
   min-height: 100vh;
@@ -16,7 +14,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: "Syne", sans-serif;
+  font-family: "Syne Medium", sans-serif;
   font-weight: 400;
   /* Set color to be inverted based on background*/
   color: #fff;