style: Animations for About page

UoaWDCC · Oct 21, 2024 · d307702 · d307702
1 parent 73edfe9
commit d307702
Showing 1 changed file with 46 additions and 14 deletions.
diff --git a/web/src/pages/About.tsx b/web/src/pages/About.tsx
@@ -6,6 +6,8 @@ import { useState, useEffect } from "react";
 import axios from "axios";
 import { ExecType } from "../utils/FrontendTypes";
 import { Loader } from "@mantine/core";
+import { motion } from "framer-motion";
+import { cardVariant, parentVariant } from "@utils/AnimationUtils";
 
 export default function About() {
   const [execs, setExecs] = useState<ExecType[]>([]);
@@ -30,7 +32,13 @@ export default function About() {
       <Navbar />
 
       <div className="max-w-screen h-auto bg-light-pink overflow-hidden">
-        <div className="w-full h-auto md:min-h-[500px] px-6 md:px-14 py-4 flex flex-col md:flex-row justify-between items-center">
+        <motion.div
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 15 }}
+          transition={{ delay: 0.15 }}
+          className="w-full h-auto md:min-h-[500px] px-6 md:px-14 py-4 flex flex-col md:flex-row justify-between items-center"
+        >
           <div
             className="w-full md:w-1/2 text-brown font-bold mb-10 md:mb-0"
             data-testid="aboutSection"
@@ -68,49 +76,73 @@ export default function About() {
               alt="ice-cream photo"
             />
           </div>
-        </div>
+        </motion.div>
 
-        <div className="w-full h-auto bg-pink text-light-pink flex flex-col items-center pt-8">
+        <motion.div
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 15 }}
+          transition={{ delay: 0.5 }}
+          className="w-full h-auto bg-pink text-light-pink flex flex-col items-center pt-8"
+        >
           <h1 className="text-2xl font-bold md:text-3xl">The Executive Team</h1>
           {loading ? (
             <div className="flex justify-center py-10">
               <Loader size="lg" color="blue" />
             </div>
           ) : (
-            <div className="w-full h-auto flex flex-wrap justify-evenly">
+            <motion.div
+              variants={parentVariant}
+              initial="hidden"
+              animate="show"
+              className="w-full h-auto flex flex-wrap justify-evenly"
+            >
               {execs.map((exec, index) => (
-                <div
+                <motion.div
+                  variants={cardVariant}
                   key={index}
                   className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 flex flex-col items-center justify-center py-6 md:py-10"
                   data-testid="execTitleContainer"
                 >
                   <h2 className="font-bold">{exec.role}</h2>
                   <p>{exec.name}</p>
-                </div>
+                </motion.div>
               ))}
-            </div>
+            </motion.div>
           )}
-        </div>
+        </motion.div>
 
-        <div className="w-full h-auto bg-light-pink text-light-pink flex flex-col items-center">
+        <motion.div
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 15 }}
+          transition={{ delay: 0.5 }}
+          className="w-full h-auto bg-light-pink text-light-pink flex flex-col items-center"
+        >
           {loading ? (
             <div className="flex justify-center py-10">
               <Loader size="lg" color="blue" />
             </div>
           ) : (
-            <div className="w-full h-auto flex flex-wrap justify-center my-10">
+            <motion.div
+              variants={parentVariant}
+              initial="hidden"
+              animate="show"
+              className="w-full h-auto flex flex-wrap justify-center my-10"
+            >
               {execs.map((exec, index) => (
-                <div
+                <motion.div
+                  variants={cardVariant}
                   key={index}
                   className="flex justify-center px-10"
                   data-testid="execCardContainer"
                 >
                   <ExecCard exec={exec} />
-                </div>
+                </motion.div>
               ))}
-            </div>
+            </motion.div>
           )}
-        </div>
+        </motion.div>
       </div>
       <Footer />
     </>