Merge branch 'dev' into xwRongx/galleryanimation

acm-ucr · Aug 14, 2024 · a58fe96 · a58fe96
2 parents dd60d95 + 6b5f971
commit a58fe96
Show file tree

Hide file tree

Showing 20 changed files with 205 additions and 84 deletions.
diff --git a/public/images/H4BNavLogo.webp b/public/images/H4BNavLogo.webp
diff --git a/src/app/about/page.js b/src/app/about/page.js
@@ -1,10 +1,15 @@
+"use client";
+import React from "react";
 import springPicture from "@/public/images/spring/spring24_9.webp";
-import { ABOUT } from "@/data/aboutPage";
+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-biscuits-green-100 flex flex-col items-center gap-y-10 p-4 md:p-10">
       <Title text="About Us" color="red" />
@@ -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/app/gallery/[type]/page.js b/src/app/gallery/[type]/page.js
@@ -1,7 +1,7 @@
 import NotFound from "@/app/not-found";
 import Title from "@/components/Title";
-import Image from "next/image";
-import { PICTURES } from "@/data/gallery/pictures.js";
+import GalleryImage from "@/components/gallery/GalleryImage";
+import { PICTURES } from "@/data/gallery/Pictures.js";
 
 export async function generateStaticParams() {
   const allPages = ["fall", "winter", "spring", "past"];
@@ -24,7 +24,7 @@ const Page = ({ params }) => {
         <Title text={PAGES[params.type]} food={"chip"} />
         <div className="grid grid-cols-1 lg:grid-cols-3 w-4/5 py-10 gap-2">
           {PICTURES[params.type].map((image, index) => (
-            <Image
+            <GalleryImage
               src={image}
               alt={`${PAGES[params.type]}_${index}`}
               key={index}

diff --git a/src/app/page.js b/src/app/page.js
@@ -5,7 +5,7 @@ import Upcoming from "@/components/home/Upcoming";
 
 const Home = () => {
   return (
-    <div className="flex flex-col justify-center items-center gap-y-36 bg-biscuits-peach bg-blobs1 md:bg-cover bg-contain bg-repeat-y">
+    <div className="flex flex-col justify-center items-center bg-biscuits-peach bg-blobs1 md:bg-cover bg-contain bg-repeat-y">
       <Landing />
       <Goal />
       <Involve />

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -2,7 +2,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import React, { useState } from "react";
-import logo from "@/public/images/logo.webp";
+import logo from "@/public/images/H4BNavLogo.webp";
 import { IoMdMenu } from "react-icons/io";
 import { ITEMS } from "@/data/Navigation.js";
 
@@ -26,7 +26,7 @@ const NavBar = () => {
             <Image
               src={logo}
               alt="Logo"
-              className="w-32 hover:opacity-60 duration-300"
+              className="w-14 hover:opacity-60 duration-300"
             />
           </Link>
           <div className="hidden md:flex space-x-4">
@@ -48,7 +48,7 @@ const NavBar = () => {
             ))}
           </div>
           <div className="flex md:hidden" onClick={handleNav}>
-            <IoMdMenu className="text-3xl text-black hover:cursor-pointer hover:text-biscuits-purple-200" />
+            <IoMdMenu className="text-3xl hover:cursor-pointer text-biscuits-purple-200" />
           </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={`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/board/Board.jsx b/src/components/board/Board.jsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 const Board = ({ name, role, yearMajor, funFact, picture }) => {
   const [inView, ref] = useView();
   return (
-    <div className="flex-col text-center justify-center w-64 h-100 bg-biscuits-yellow shadow-[20px_-15px_0px_rgb(190,156,106)]">
+    <div className="flex-col text-center justify-center w-64 h-96 bg-biscuits-yellow shadow-[20px_-15px_0px_rgb(190,156,106)]">
       <Image
         src={picture}
         alt="picture"
@@ -15,7 +15,7 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
 
       <div
         ref={ref}
-        className={`text-biscuits-green-200 font-shrikhand p-1 -translate-y-1 text-3xl ${
+        className={`text-biscuits-green-200 font-shrikhand text-3xl ${
           inView && "animate-fade-left animate-delay-400"
         }`}
       >
@@ -24,7 +24,7 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
 
       <div
         ref={ref}
-        className={`text-biscuits-green-200 font-omc p-1 -translate-y-2 text-xl ${
+        className={`text-biscuits-green-200 font-omc text-xl ${
           inView && "animate-fade-right animate-delay-400"
         }`}
       >

diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx
@@ -31,8 +31,11 @@ const CalendarEvents = () => {
   return (
     <div className="relative flex flex-col">
       {/* Calendar Section */}
-      <section className="w-full flex-grow flex justify-center items-center">
-        <div className="w-full h-[95vh] relative">
+      <span className="-rotate-90 text-biscuits-purple-200 font-shrikhand text-6xl  items-center w-[120px] absolute lg:bottom-1/4 lg:block hidden">
+        {date.toLocaleString("default", { month: "long" })}
+      </span>
+      <section className="w-full flex-grow flex justify-center items-center gap-x-4">
+        <div className="w-5/6 h-[95vh] relative">
           <Calendar
             className="w-full m-0 p-0 2xl:text-3xl text-xl"
             date={date}

diff --git a/src/components/events/CustomToolbar.jsx b/src/components/events/CustomToolbar.jsx
@@ -1,4 +1,5 @@
-import { BsArrowLeft, BsArrowRight } from "react-icons/bs";
+import { ImArrowLeft, ImArrowRight } from "react-icons/im";
+import Title from "@/components/Title";
 
 const monthNames = [
   "Jan",
@@ -15,23 +16,49 @@ const monthNames = [
   "Dec",
 ];
 
+const mapToNum = {
+  Jan: "01",
+  Feb: "02",
+  Mar: "03",
+  Apr: "04",
+  May: "05",
+  Jun: "06",
+  Jul: "07",
+  Aug: "08",
+  Sept: "09",
+  Oct: "10",
+  Nov: "11",
+  Dec: "12",
+};
+
 const CustomToolbar = (event) => {
   return (
-    <div className=" text-5xl 2xl:text-6xl font-bold flex justify-center items-center gap-3 py-12 w-full">
-      <BsArrowLeft
-        onClick={() => {
-          event.onNavigate("PREV");
-        }}
-        className="hover:cursor-pointer hover:opacity-50 duration-300 text-4xl"
-      />
-      <p className="text-swim-blue-200">{monthNames[event.date.getMonth()]}</p>
-      <p className="text-swim-blue-200"> {event.date.getFullYear()}</p>
-      <BsArrowRight
-        onClick={() => {
-          event.onNavigate("NEXT");
-        }}
-        className="hover:cursor-pointer hover:opacity-50 duration-300 text-4xl"
-      />
+    <div className="flex items-center justify-center w-full text-5xl xl:text-6xl text-center relative h-60 md:h-80 xl:h-52">
+      <div className="font-bold flex justify-center items-center gap-3 py-12 absolute left-[50%] translate-x-[-50%] -top-7 xl:left-0 xl:translate-x-0 xl:top-0">
+        <ImArrowLeft
+          onClick={() => {
+            event.onNavigate("PREV");
+          }}
+          className="hover:cursor-pointer hover:opacity-50 duration-300 text-4xl text-biscuits-purple-200"
+        />
+        <div>
+          <div className="font-shrikhand text-biscuits-purple-100 text-shadow shadow-biscuits-gray-200">
+            {mapToNum[monthNames[event.date.getMonth()]]}
+          </div>
+          <div className="font-shrikhand text-biscuits-purple-100 text-shadow shadow-biscuits-gray-200">
+            {event.date.getFullYear().toString().substr(2, 4)}
+          </div>
+        </div>
+        <ImArrowRight
+          onClick={() => {
+            event.onNavigate("NEXT");
+          }}
+          className="hover:cursor-pointer hover:opacity-50 duration-300 text-4xl text-biscuits-purple-200"
+        />
+      </div>
+      <div className="absolute top-28 xl:top-[50%] xl:left-[50%] xl:translate-x-[-50%] xl:translate-y-[-50%]">
+        <Title text="Calendar of Events" color="purple" />
+      </div>
     </div>
   );
 };

diff --git a/src/components/gallery/GalleryImage.jsx b/src/components/gallery/GalleryImage.jsx
@@ -0,0 +1,21 @@
+"use client";
+import useView from "@/components/useView";
+import React from "react";
+import Image from "next/image";
+
+const GalleryImage = ({ src, alt }) => {
+  const [inView, ref] = useView();
+
+  return (
+    <div
+      ref={ref}
+      className={`${
+        inView && "animate-fade-down"
+      } transition-transform duration-100 ease-in-out`}
+    >
+      <Image src={src} alt={alt} />
+    </div>
+  );
+};
+
+export default GalleryImage;
diff --git a/src/components/home/Goal.jsx b/src/components/home/Goal.jsx
@@ -7,7 +7,7 @@ const Goal = () => {
     <div
       className={`${
         inView && "animate-fade-up"
-      } flex flex-col justify-center text-center`}
+      } flex flex-col justify-center text-center mt-[5%]`}
     >
       <Title text="Our Goal" />
       <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">
+    <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=" 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">
+    <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/components/involvement/FAQs.jsx b/src/components/involvement/FAQs.jsx
@@ -1,4 +1,4 @@
-import Item from "@/components/Item";
+import Item from "@/components/involvement/Item";
 import Subtitle from "@/components/Subtitle";
 import QUESTIONS from "@/data/involve/Questions";
 

diff --git a/src/components/Item.jsx → src/components/involvement/Item.jsx b/src/components/Item.jsx → src/components/involvement/Item.jsx
@@ -9,11 +9,11 @@ const Item = ({ question, answer }) => {
   };
 
   return (
-    <div className="bg-biscuits-orange w-full p-4 rounded font-inika">
-      <div
-        className="text-biscuits-brown-200 font-bold cursor-pointer text-xl md:text-3xl"
-        onClick={toggleAnswer}
-      >
+    <div
+      className="bg-biscuits-orange w-full p-4 rounded font-inika cursor-pointer"
+      onClick={toggleAnswer}
+    >
+      <div className="text-biscuits-brown-200 font-bold  text-xl md:text-3xl">
         {question}
       </div>
       <div className={`mt-2 ${clicked ? "" : "hidden"} text-black md:text-xl`}>