meet the team section test 5

siddharth-narayan-mishra · Dec 11, 2024 · 125e9fe · 125e9fe
1 parent d1415bd
commit 125e9fe
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 23 deletions.
diff --git a/src/components/Meet the Team/MeetTheTeam.jsx b/src/components/Meet the Team/MeetTheTeam.jsx
@@ -13,15 +13,15 @@ const MeetTheTeam = () => {
       photo:
         'https://res.cloudinary.com/dqcrkrtyr/image/upload/v1733908269/surya_v5ojeq.png',
       rotateFrom: '0',
-      rotateTo: '8.07',
+      rotateTo: '4.07',
     },
     {
       name: 'Prapti P Pradhan',
       post: 'Vice President',
       photo:
         'https://res.cloudinary.com/dqcrkrtyr/image/upload/v1733908321/prapti_usrcux.png',
       rotateFrom: '0',
-      rotateTo: '-4.17',
+      rotateTo: '-2.17',
     },
     {
       name: 'Riya Pojage',
@@ -37,7 +37,7 @@ const MeetTheTeam = () => {
       photo:
         'https://res.cloudinary.com/dqcrkrtyr/image/upload/v1733908286/sristy_dxorna.png',
       rotateFrom: '0',
-      rotateTo: '6.73',
+      rotateTo: '3.36',
     },
   ]);
   gsap.registerPlugin(useGSAP);
@@ -68,26 +68,26 @@ const MeetTheTeam = () => {
     const photoTL = gsap.timeline(setupConfig);
     photoTL
       .from('#photo0', {
-        top: '100%',
+        top: '200%',
         rotate: 0,
         duration: 2,
         delay: 1,
         ease: 'power4.out',
       })
       .from('#photo1', {
-        top: '100%',
+        top: '200%',
         rotate: 0.56,
         duration: 2,
         ease: 'power4.out',
       })
       .from('#photo2', {
-        top: '100%',
+        top: '200%',
         rotate: -9.23,
         duration: 2,
         ease: 'power4.out',
       })
       .from('#photo3', {
-        top: '100%',
+        top: '200%',
         rotate: 3.93,
         duration: 2,
         ease: 'power4.out',
@@ -250,15 +250,15 @@ const MeetTheTeam = () => {
         className="absolute top-0 h-1/2"
       />
 
-      <div className="flex justify-center items-center flex-col h-full">
+      <div className="flex justify-center items-center flex-col h-full relative">
         {/* heading */}
         <h1 className="playfair-display text-5xl sm:text-7xl mt-12 mb-20">
           Meet The Team
         </h1>
 
         {/* gallery section */}
         <div
-          className=" flex  w-full gap-8 relative h-full min-[1000px]:flex-row flex-col"
+          className=" flex w-full gap-8 relative h-full min-[1000px]:flex-row flex-col py-4"
           id="gallery"
         >
           <div
@@ -268,7 +268,7 @@ const MeetTheTeam = () => {
           {/* names */}
           <div
             id="name"
-            className="min-[1000px]:basis-full items-center justify-center text-4xl flex-col flex my-10 sm:my-0 "
+            className="min-[1000px]:basis-full items-center justify-center text-4xl flex-col flex my-10 sm:my-0"
           >
             <div className="h-10 text-center relative min-[1000px]:w-[40%] min-[1300px]:w-full px-8 roboto-mono w-full">
               {meetTheTeam.map((item, idx) => {
@@ -288,15 +288,14 @@ const MeetTheTeam = () => {
           {/* photos */}
           <div
             id="photos"
-            className="basis-full relative flex justify-center items-center"
+            className="md:basis-full relative max-h-full w-full h-full"
           >
             {meetTheTeam.map((item, id) => {
               return (
                 <Photo
                   color={item.photo}
                   rotate={item.rotateTo}
                   z={id}
-                  top={0}
                   key={id}
                   id={`photo${id}`}
                 />
@@ -307,7 +306,7 @@ const MeetTheTeam = () => {
           {/* post */}
           <div
             id="post"
-            className="min-[1000px]:basis-full min-[1000px]:static absolute bottom-12 left-1/2 w-screen -translate-x-1/2 translate-y-1/2 min-[1000px]:translate-x-0 min-[1000px]:translate-y-0 text-4xl playfair-display flex justify-center items-center"
+            className="min-[1000px]:basis-full min-[1000px]:static w-screen text-4xl playfair-display flex justify-center items-center"
           >
             <div className="h-10 text-center relative min-[1000px]:w-[40%] min-[1300px]:w-full w-full">
               {meetTheTeam.map((item, idx) => {

diff --git a/src/components/Meet the Team/Photo.jsx b/src/components/Meet the Team/Photo.jsx
@@ -1,20 +1,21 @@
-const Photo = ({ color, rotate, z, top, id }) => {
+const Photo = ({ color, rotate, z, id }) => {
   return (
     <div
-      className="lg:w-[60vh] lg:h-[70vh] md:w-[55vh] md:[65vh] sm:w-[50vh] sm:h-[60vh] h-[100vw] w-[80vw] bg-white flex justify-center items-center absolute team-photo flex-col mtt-xs-photo-frame pt-4"
+      className="2xl:h-[40vw] 2xl:w-[30vw] lg:h-[50vw] lg:w-[40vw] md:h-[60vw] md:w-[50vw] h-[100vw] w-[80vw] flex flex-col justify-center items-center absolute bg-white team-photo mtt-xs-photo-frame ishlt800px top-1/2 left-1/2"
       id={id}
       style={{
         transform:
-          rotate > 0 ? `rotate(-${rotate}deg)` : `rotate(${-rotate}deg)`,
+          rotate > 0
+            ? `rotate(-${rotate}deg) translateX(-50%) translateY(-50%)`
+            : `rotate(${-rotate}deg) translateX(-50%) translateY(-50%)`,
         zIndex: z,
-        top: top,
       }}
     >
       <div
         className="absolute h-full w-full top-0 left-0 shadow-black bg-black shadow-xl opacity-0"
         id={`${id}-film`}
       ></div>
-      <div className="lg:h-[50vh] md:h-[45vh] sm:h-[40vh] xs:h-[70vw] max-w-[90%] aspect-square text-3xl justify-center items-center flex">
+      <div className="aspect-square max-w-[90%] w-full justify-center items-center flex">
         <img src={color} className="h-full w-full" alt="" />
       </div>
       <div id="spacer" className="h-1/6"></div>

diff --git a/src/index.css b/src/index.css
@@ -23,8 +23,8 @@
     scrollbar-width: none;
   }
 
-  .mtt-xs-photo-frame {
-    @media (max-height: 700px) {
+  .ishlt800px {
+    @media (max-height: 800px) {
       height: 70vw;
       width: 60vw;
     }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,9 +2,6 @@
 export default {
   content: ['./index.html', './src/**/*.{js,jsx}'],
   theme: {
-    screens: {
-      xs: '400px',
-    },
     extend: {},
   },
   plugins: [],