Merge branch 'dev' into tingtingtingtingtingtingtingtingtingtin/invol…

…ve-fix
acm-ucr · Aug 12, 2024 · 542c718 · 542c718
2 parents 21a0667 + 9ca8b41
commit 542c718
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 22 deletions.
diff --git a/src/app/about/page.js b/src/app/about/page.js
@@ -1,12 +1,17 @@
+"use client";
+import React from "react";
 import springPicture from "@/public/images/spring/spring24_9.webp";
 import { ABOUT } from "@/data/about/About";
 import Title from "@/components/Title";
 import Picture from "@/components/Picture";
 import Subtitle from "@/components/Subtitle";
+import useView from "@/components/useView";
 
 const Page = () => {
+  const [inView, ref] = useView();
+
   return (
-    <div className="bg-blobs1 bg-cover bg-biscuits-green-100 flex flex-col items-center gap-y-10 p-4 md:p-10">
+    <div className="bg-biscuits-green-100 flex flex-col items-center gap-y-10 p-4 md:p-10">
       <Title text="About Us" color="red" />
       <Picture
         classname="flex justify-center"
@@ -15,14 +20,27 @@ const Page = () => {
         image={springPicture}
         alt="Spring 24 Picture"
       />
-      {ABOUT.map((section, index) => (
-        <div key={index} className="mb-8 text-center">
-          <Subtitle color="text-biscuits-green-200" text={section.subtitle} />
-          <div className="md:text-2xl text-base font-inika md:w-2/3 w-10/12 mx-auto">
-            {section.paragraph}
-          </div>
-        </div>
-      ))}
+      <div ref={ref}>
+        {ABOUT.map((section, index) => {
+          return (
+            <div key={index} className="mb-8 text-center">
+              <Subtitle
+                color="text-biscuits-green-200"
+                text={section.subtitle}
+              />
+              <div
+                className={`md:text-2xl text-base font-inika md:w-2/3 w-10/12 mx-auto ${
+                  inView
+                    ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear animate-delay-500`
+                    : ""
+                }`}
+              >
+                {section.paragraph}
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };

diff --git a/src/components/Subtitle.jsx b/src/components/Subtitle.jsx
@@ -1,7 +1,17 @@
+"use client";
+import React from "react";
+import useView from "./useView";
+
 const Subtitle = ({ color, text }) => {
+  const [inView, ref] = useView();
   return (
     <div
-      className={`my-2 font-bold font-shrikhand text-center text-4xl md:text-7xl ${color}`}
+      ref={ref}
+      className={`my-2 font-bold font-shrikhand text-center text-4xl md:text-7xl ${color} ${
+        inView
+          ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
+          : ""
+      }`}
     >
       {text}
     </div>

diff --git a/src/components/home/Involve.jsx b/src/components/home/Involve.jsx
@@ -1,11 +1,23 @@
+"use client";
 import Title from "../Title";
 import Button from "../Button";
+import useView from "@/components/useView";
 
 const Involve = () => {
+  const [inView, ref] = useView();
   return (
-    <div className="flex flex-col justify-center items-center text-center mt-[5%]">
+    <div
+      ref={ref}
+      className={`${
+        inView && "animate-fade-left"
+      } flex flex-col justify-center items-center text-center mt-[5%]`}
+    >
       <Title text="Get Involved" color="red" />
-      <div className="flex font-light justify-center text-center text-2xl pb-4 w-1/2">
+      <div
+        className={`${
+          inView && "animate-fade-left"
+        } flex font-light justify-center text-center text-2xl pb-4 w-1/2`}
+      >
         Our food & information tabling occurs every Wednesday from 9 AM to 3 PM
         around the Bell Tower All that is needed to participate is fill the Food
         Tabling Sign-Up Sheet to choose your preferred time slot

diff --git a/src/components/home/Landing.jsx b/src/components/home/Landing.jsx
@@ -1,13 +1,22 @@
+"use client";
 import Image from "next/image";
 import landing from "@/public/images/landing.webp";
 import mobileLanding from "@/public/images/mobilelanding.webp";
+import useView from "@/components/useView";
 
 const Landing = () => {
+  const [inView, ref] = useView();
   return (
     <>
-      <div className="mt-[5%] p-1 hidden md:flex md:p-6 pb-3 md:pb-10 border-4 md:border-8 justify-center items-center border-biscuits-orange-200 rounded-3xl bg-biscuits-peach-200 bg-opacity-60 w-3/4">
+      <div
+        ref={ref}
+        className={`${
+          inView && "animate-fade-right"
+        } mt-[5%] p-1 hidden md:flex md:p-6 pb-3 md:pb-10 border-4 md:border-8 justify-center items-center border-biscuits-orange-200 rounded-3xl bg-biscuits-peach-200 bg-opacity-60 w-3/4`}
+      >
         <Image src={landing} alt="landing" width={1250} height={1250} />
       </div>
+
       <Image
         className="md:hidden"
         src={mobileLanding}

diff --git a/src/components/home/Upcoming.jsx b/src/components/home/Upcoming.jsx
@@ -1,11 +1,23 @@
+"use client";
 import UpcomingCard from "./UpcomingCard";
 import Title from "../Title";
+import useView from "@/components/useView";
 
 const Upcoming = () => {
+  const [inView, ref] = useView();
   return (
-    <div className="flex flex-col justify-center text-center my-[5%]">
+    <div
+      ref={ref}
+      className={`${
+        inView && "animate-fade-right animate-delay-200 "
+      } flex flex-col justify-center text-center my-[5%]`}
+    >
       <Title text="Upcoming Events" color="purple" />
-      <div className="m-10 md:m-11 grid md:grid-cols-2 grid-cols-1 gap-4 ">
+      <div
+        className={`${
+          inView && "animate-fade-up"
+        }  m-10 md:m-11 grid md:grid-cols-2 grid-cols-1 gap-4`}
+      >
         <UpcomingCard />
         <UpcomingCard />
         <UpcomingCard />

diff --git a/src/data/board/Board.js b/src/data/board/Board.js
@@ -10,49 +10,49 @@ export const BOARD = [
   {
     name: "Hana Gurz",
     role: "President",
-    yearMajor: "3rd Year Cell, Molecular, and Developmental Biology",
+    yearMajor: "4th Year Cell, Molecular, and Developmental Biology",
     funFact: "Fun Fact: I almost became a polo player",
     picture: image1,
   },
   {
     name: "Alyanna Almario",
     role: "Vice President",
-    yearMajor: "3rd Year Bioengineering",
+    yearMajor: "4th Year Bioengineering",
     funFact: "Fun Fact: I stream on Twitch",
     picture: image2,
   },
   {
     name: "My Linh Le",
     role: "External Relations",
-    yearMajor: "3rd Year Bioengineering",
+    yearMajor: "4th Year Bioengineering",
     funFact: "Fun Fact: I like to draw and paint on my free time",
     picture: image3,
   },
   {
     name: "Kelly Tang",
     role: "Team Leader",
-    yearMajor: "3rd Year Business Administration",
+    yearMajor: "4th Year Business Administration",
     funFact: "Fun Fact: I'm allergic to cat fur",
     picture: image4,
   },
   {
     name: "Zina Vo",
     role: "Secretary",
-    yearMajor: "2nd Year Business Administration",
+    yearMajor: "3rd Year Business Administration",
     funFact: "Fun Fact: I almost got dragged by a cow",
     picture: image5,
   },
   {
     name: "Sansita Narra",
     role: "Treasurer",
-    yearMajor: "3rd Year Biology",
+    yearMajor: "4th Year Biology",
     funFact: "Fun Fact: I've lived in two different countries before",
     picture: image6,
   },
   {
     name: "Kaylee Oka",
     role: "Social Media Manager",
-    yearMajor: "2nd Year Neuroscience & Psychology",
+    yearMajor: "3rd Year Neuroscience & Psychology",
     funFact: "Fun Fact: I have two dogs",
     picture: image7,
   },