Merge pull request #59 from Diyashibu/main

contact and partners
Excel2024Web · Nov 28, 2024 · 733945c · 733945c
2 parents 5facf96 + e08fecf
commit 733945c
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 100 deletions.
diff --git a/src/components/Contact/ContactCard.css b/src/components/Contact/ContactCard.css
@@ -14,8 +14,14 @@
   align-items: center;
   transition: 0.3s ease-in-out;
   border-radius: 3rem;
+  opacity: 0;
+  transform: translateY(50px);
+  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
+}
+.card-container.visible {
+  opacity: 1;
+  transform: translateY(0);
 }
-
 .card-container img {
   border-radius: 2rem;
 }

diff --git a/src/components/Contact/ContactCard.jsx b/src/components/Contact/ContactCard.jsx
@@ -1,140 +1,118 @@
 "use client";
 
-import React, {useState} from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import {FaLinkedinIn} from "react-icons/fa";
-import {FaEnvelope, FaPhone} from "react-icons/fa6";
-import {motion} from "framer-motion";
+import { FaLinkedinIn, FaEnvelope, FaPhone } from "react-icons/fa6";
+import { motion } from "framer-motion";
 import "./ContactCard.css";
 
-const ContactCard = ({details}) => {
-  const [isHovered, setIsHovered] = useState(false);
+const ContactCard = ({ details }) => {
+  const cardRef = useRef(null);
 
-  const cardVariants = {
-    hidden: {opacity: 0, y: 50},
-    visible: {opacity: 1, y: 0, transition: {duration: 0.4}},
-    exit: {opacity: 0, y: -50, transition: {duration: 0.4}},
-  };
+  useEffect(() => {
+    const observerOptions = {
+      threshold: 0.3, // Trigger animation when 30% of the element is visible
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+        } else {
+          entry.target.classList.remove("visible");
+        }
+      });
+    }, observerOptions);
+
+    if (cardRef.current) {
+      observer.observe(cardRef.current);
+    }
+
+    return () => {
+      if (cardRef.current) observer.unobserve(cardRef.current);
+    };
+  }, []);
+
+  const [isHovered, setIsHovered] = useState(false);
 
   const containerVariants = {
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: 0.3,
+        staggerChildren: 0.3, // Delay between children animations
       },
     },
-    hidden: {opacity: 0},
+    hidden: { opacity: 0 },
   };
 
   const childVariants = {
     visible: {
       opacity: 1,
       y: -5,
-      transition: {duration: 0.5},
+      transition: { duration: 0.5 },
     },
     hidden: {
       opacity: 0,
       y: 20,
-      transition: {duration: 0.5},
+      transition: { duration: 0.5 },
     },
   };
 
   return (
-    <>
-      {/* <motion.div
-        className="card-container"
-        variants={cardVariants}
-
-        exit="exit"
-        viewport={{ once: false }}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <div className="logowrapper">
-          <Image
-            className="logoimg"
-            src={details.img}
-            alt="Logo"
-          />
-        </div>
-        <div className="text-field">
-          <h2>{details.name}</h2>
-          <p>{details.title}</p>
-        </div>
-
+    <motion.div
+      className="card-container"
+      ref={cardRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="background-image">
+        <Image
+          src={details.img}
+          alt="background"
+          fill={true}
+          style={{ objectFit: "cover" }}
+        />
+      </div>
+      <div className="text-field z-10 flex flex-col justify-end items-start w-full h-full p-5">
+        <motion.div
+          className="text-field-inner p-0"
+          variants={containerVariants}
+          animate={isHovered ? "hidden" : "visible"}
+        >
+          <h2 className="font-syne-medium">{details.name}</h2>
+          <p className="font-syne-medium">{details.title}</p>
+        </motion.div>
         <motion.div
           className="socials"
           variants={containerVariants}
-
-          animate={isHovered ? 'visible' : 'visible'}
+          animate={isHovered ? "visible" : "hidden"}
         >
-          <motion.a href={details.linkedin} variants={childVariants} target='blank'>
+          <motion.a
+            className="social-linkedin"
+            href={details.linkedin}
+            variants={childVariants}
+            target="_blank"
+          >
             <FaLinkedinIn />
           </motion.a>
-          <motion.a href={`https://mail.google.com/mail/?view=cm&fs=1&to=${details.email}`} variants={childVariants} target='blank'>
-            <LuMails />
+          <motion.a
+            className="social-mail"
+            href={`https://mail.google.com/mail/?view=cm&fs=1&to=${details.email}`}
+            variants={childVariants}
+            target="_blank"
+          >
+            <FaEnvelope />
           </motion.a>
-          <motion.a href={`tel:${details.phone}`} variants={childVariants}>
+          <motion.a
+            className="social-phone"
+            href={`tel:${details.phone}`}
+            variants={childVariants}
+          >
             <FaPhone />
           </motion.a>
         </motion.div>
-      </motion.div> */}
-      <div
-        className="card-container"
-        data-aos="fade-up"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        onClick={() => setIsHovered(!isHovered)}
-      >
-        <div className="background-image">
-          <Image
-            src={details.img}
-            alt="background"
-            fill={true}
-            style={{objectFit: "cover"}}
-          />
-        </div>
-        <div className="text-field z-10 flex flex-col justify-end items-start w-full h-full p-5">
-          <motion.div
-            className="text-field-inner p-0"
-            variants={containerVariants}
-            animate={isHovered ? "hidden" : "visible"}
-          >
-            <h2 className="font-syne-medium">{details.name}</h2>
-            <p className="font-syne-medium">{details.title}</p>
-          </motion.div>
-          <motion.div
-            className="socials"
-            variants={containerVariants}
-            animate={isHovered ? "visible" : "hidden"}
-          >
-            <motion.a
-              className="social-linkedin"
-              href={details.linkedin}
-              variants={childVariants}
-              target="blank"
-            >
-              <FaLinkedinIn />
-            </motion.a>
-            <motion.a
-              className="social-mail"
-              href={`https://mail.google.com/mail/?view=cm&fs=1&to=${details.email}`}
-              variants={childVariants}
-              target="blank"
-            >
-              <FaEnvelope />
-            </motion.a>
-            <motion.a
-              className="social-phone"
-              href={`tel:${details.phone}`}
-              variants={childVariants}
-            >
-              <FaPhone />
-            </motion.a>
-          </motion.div>
-        </div>
       </div>
-    </>
+    </motion.div>
   );
 };
 

diff --git a/src/components/Partners/partners.css b/src/components/Partners/partners.css
@@ -90,3 +90,14 @@
     font-size: 1.5rem;
   }
 }
+@media (max-width: 768px) {
+  .partners-row:nth-child(2) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .partners-row:nth-child(2) .partner:nth-child(2) {
+    order: -1; 
+  }
+}