acm-ucr · seanquiambao · Aug 27, 2024 · Aug 21, 2024 · Aug 21, 2024 · Aug 22, 2024
diff --git a/src/app/about/page.js b/src/app/about/page.js
@@ -37,7 +37,7 @@ const Page = () => {
         })}
       </div>
       <div className="flex justify-center w-full -mt-4 mb-8">
-        <Button text="Get Involved" link="/involve" />
+        <Button text="GET INVOLVED" link="/involve" />
       </div>
     </div>
   );

diff --git a/src/app/board/page.js b/src/app/board/page.js
@@ -4,21 +4,20 @@ import Title from "@/components/Title";
 
 const Page = () => {
   return (
-    <div className="flex flex-col bg-biscuits-pink bg-blobs1 md:bg-cover bg-contain bg-repeat-y py-[2%] items-center p-3">
-      <div className="grid grid-cols-1 gap-y-10 animate-fade-down animate-delay-300">
-        <Title text="Get To Know Us" color="green" />
-        <div className="grid justify-items-center xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-y-16 gap-x-32">
-          {BOARD.map((boardMember, index) => (
-            <Board
-              key={index}
-              name={boardMember.name}
-              role={boardMember.role}
-              yearMajor={boardMember.yearMajor}
-              funFact={boardMember.funFact}
-              picture={boardMember.picture}
-            />
-          ))}
-        </div>
+    <div className="flex flex-col bg-biscuits-pink bg-blobs1 md:bg-cover bg-contain bg-repeat-y gap-y-8 py-[2%] items-center p-3">
+      <Title text="Get To Know Us" color="green" />
+
+      <div className="animate-fade-down animate-delay-300 grid justify-items-center xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-y-16 gap-x-32">
+        {BOARD.map((boardMember, index) => (
+          <Board
+            key={index}
+            name={boardMember.name}
+            role={boardMember.role}
+            yearMajor={boardMember.yearMajor}
+            funFact={boardMember.funFact}
+            picture={boardMember.picture}
+          />
+        ))}
       </div>
     </div>
   );

diff --git a/src/app/events/page.js b/src/app/events/page.js
@@ -2,7 +2,7 @@ import CalendarEvents from "@/components/events/CalendarEvents";
 
 const Page = () => {
   return (
-    <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-peach">
+    <div className="bg-blobs1 bg-cover bg-biscuits-peach">
       <CalendarEvents />;
     </div>
   );

diff --git a/src/app/gallery/[type]/page.js b/src/app/gallery/[type]/page.js
@@ -10,9 +10,9 @@ export async function generateStaticParams() {
 
 const Page = ({ params }) => {
   const PAGES = {
-    fall: "Fall 2023",
-    winter: "Winter 2024",
-    spring: "Spring 2024",
+    fall: "Fall '23",
+    winter: "Winter '24",
+    spring: "Spring '24",
     past: "Past",
     extra: "Extra",
   };

diff --git a/src/app/gallery/page.js b/src/app/gallery/page.js
@@ -9,13 +9,13 @@ import ExtraPhotos from "@/components/gallery/ExtraPhotos";
 const Page = () => {
   const [inView, ref] = useView();
   return (
-    <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-green-100 min-h-screen p-7 w-full flex flex-col items-center">
-      <div
+    <div className="bg-blobs1 lg:bg-cover bg-contain bg-biscuits-green-100 py-[2%] px-7 w-full flex flex-col items-center justify-center gap-y-8">
+      <Title
+        text="Gallery"
+        food="chip"
         ref={ref}
         className={`${inView && "animate-fade-up"} flex justify-center mb-10`}
-      >
-        <Title text="Gallery" food="chip" />
-      </div>
+      />
 
       <TablingEvents />
       <QuarterlyEvents />

diff --git a/src/app/involve/page.js b/src/app/involve/page.js
@@ -6,7 +6,7 @@ import Title from "@/components/Title";
 
 const Page = () => {
   return (
-    <div className="flex flex-col items-center bg-biscuits-peach bg-blobs1 bg-contain bg-repeat-y">
+    <div className="flex flex-col py-[2%] items-center bg-biscuits-peach bg-blobs1 bg-contain bg-repeat-y">
       <Title text="Involvement" food="swirl" color="biscuits-grey-100" />
       <Tabling />
       <FAQs />

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -45,11 +45,10 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html
-      lang="en"
-      className={`${inika.className} ${shrikhand.variable} ${omc.variable} ${gurajada.variable} ${fredoka.variable}`}
-    >
-      <body>
+    <html lang="en">
+      <body
+        className={`flex flex-col min-h-screen ${inika.className} ${shrikhand.variable} ${omc.variable} ${gurajada.variable} ${fredoka.variable}`}
+      >
         <NavBar />
         {children}
         <Footer />

diff --git a/src/app/not-found.js b/src/app/not-found.js
@@ -1,21 +1,22 @@
 import Title from "@/components/Title";
-import Subtitle from "@/components/Subtitle";
 
 const NotFound = () => {
   return (
-    <div className="flex flex-col items-center justify-center h-svh	bg-biscuits-purple-200">
-      <div className="w-1/2 h-1/2 shadow-2xl shadow-black">
+    <div className="flex flex-col items-center justify-center	bg-biscuits-purple-200 flex-1 overscroll-none">
+      <div className="lg:w-1/2 w-11/12 h-[450px] shadow-2xl shadow-black">
         <div className="bg-biscuits-brown-100 w-full h-14 rounded-t-lg flex justify-end items-center px-4 space-x-5">
-          <div className="bg-green-500 rounded-full w-5 h-5"></div>
-          <div className="bg-yellow-500 rounded-full w-5 h-5"></div>
-          <div className="bg-red-500 rounded-full w-5 h-5"></div>
+          <div className="bg-green-500 rounded-full w-5 h-5" />
+          <div className="bg-yellow-500 rounded-full w-5 h-5" />
+          <div className="bg-red-500 rounded-full w-5 h-5" />
         </div>
         <div className="bg-biscuits-peach rounded-b-lg pb-7 h-full flex flex-col items-center justify-center">
-          <div className=" flex justify-center">
+          <div className="flex flex-col justify-center">
             <Title text="Error" color="red" />
-            <Title text="4O4" />
+            <Title text="4O4" color="red" />
+          </div>
+          <div className="text-biscuits-red-200 font-shrikhand md:text-6xl self-center text-2xl">
+            Page Not Found
           </div>
-          <Subtitle text="Page not found" color="text-biscuits-red-200" />
         </div>
       </div>
     </div>

diff --git a/src/app/support/page.js b/src/app/support/page.js
@@ -1,7 +1,7 @@
 import Support from "@/components/support/Support";
 const Page = () => {
   return (
-    <div className="bg-biscuits-orange-300">
+    <div className="bg-biscuits-orange-300 flex flex-col py-[2%]">
       <Support />
     </div>
   );

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -1,16 +1,25 @@
 import Link from "next/link";
+import useView from "./useView";
 
 const Button = ({ text, link }) => {
+  const [inView, ref] = useView();
   return (
-    <>
+    <div
+      className={`${
+        inView
+          ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
+          : ""
+      }`}
+    >
       <Link
         href={link}
         target="_blank"
-        className="w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-2 px-10 md:py-3 md:px-12 rounded-full font-bold text-3xl duration-300 hover:opacity-80"
+        className="w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-1.5 px-8 md:py-2 md:px-12 rounded-full font-bold text-xl md:text-3xl hover:opacity-75 duration-100"
+        ref={ref}
       >
         {text}
       </Link>
-    </>
+    </div>
   );
 };
 export default Button;
diff --git a/src/components/Subtitle.jsx b/src/components/Subtitle.jsx
@@ -7,7 +7,7 @@ const Subtitle = ({ color, text }) => {
   return (
     <div
       ref={ref}
-      className={`my-2 font-bold font-shrikhand text-center text-4xl md:text-7xl ${color} ${
+      className={`font-bold font-shrikhand text-center text-4xl lg:text-6xl ${color} ${
         inView
           ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
           : ""

diff --git a/src/components/Title.jsx b/src/components/Title.jsx
@@ -11,23 +11,19 @@ const Title = ({ text, food, color }) => {
   }
 
   return (
-    <div className="flex flex-row justify-center">
-      <div className="inset-0 flex justify-center items-top p-3">
-        <div
-          className={`md:text-shadow text-shadow-sm ${darkColor} font-omc text-5xl md:text-8xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor} text-center`}
-        >
-          {text}
-        </div>
+    <div className="flex flex-row w-fit justify-center self-center">
+      <div
+        className={`md:text-shadow text-shadow-sm ${darkColor} font-omc text-5xl lg:text-8xl sm:text-6xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor} text-center`}
+      >
+        {text}
       </div>
 
       {food && COOKIES[food] && (
         <div className="ml-2 md:flex items-center hidden">
           <Image
             src={COOKIES[food]}
             alt={`${food} cookies`}
-            width={100}
-            height={100}
-            className="w-12 h-12"
+            className="w-16 h-16"
           />
         </div>
       )}

diff --git a/src/components/board/Board.jsx b/src/components/board/Board.jsx
@@ -4,7 +4,10 @@ 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-96 bg-biscuits-yellow shadow-[20px_-15px_0px_rgb(190,156,106)]">
+    <div
+      ref={ref}
+      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"
@@ -14,7 +17,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
       />
 
       <div
-        ref={ref}
         className={`text-biscuits-green-200 font-shrikhand text-3xl ${
           inView && "animate-fade-left animate-delay-400"
         }`}
@@ -23,7 +25,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
       </div>
 
       <div
-        ref={ref}
         className={`text-biscuits-green-200 font-omc text-xl ${
           inView && "animate-fade-right animate-delay-400"
         }`}
@@ -32,7 +33,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
       </div>
 
       <div
-        ref={ref}
         className={`text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm ${
           inView && "animate-fade-left animate-delay-400"
         }`}
@@ -41,7 +41,6 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
       </div>
 
       <div
-        ref={ref}
         className={`text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm ${
           inView && "animate-fade-left animate-delay-400"
         }`}

diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx
@@ -54,13 +54,13 @@ const CalendarEvents = () => {
   }, []);
 
   return (
-    <div className="flex flex-col py-[2%]">
+    <div className="flex flex-col py-[2%] animate-delay-100 animate-fade-up">
       {/* Calendar Section */}
       <span className="-rotate-90 text-biscuits-purple-200 font-shrikhand text-6xl  items-center w-[120px] absolute lg:bottom-1/4 xl:block hidden">
         {isClient ? 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">
+      <section className="w-full flex-grow flex justify-center items-center gap-x-4">
+        <div className="md:w-5/6 w-11/12 h-[95vh] relative">
           <Calendar
             className="w-full m-0 p-0 2xl:text-3xl !border-biscuits-purple-200 !text-lg !font-fredoka"
             date={date}
@@ -108,7 +108,6 @@ const CalendarEvents = () => {
               endTime={selectedEvent.end}
             />
           )}
-          {console.log(selectedEvent)}
         </div>
       </section>
     </div>

diff --git a/src/components/events/CustomEvents.jsx b/src/components/events/CustomEvents.jsx
@@ -12,8 +12,10 @@ const CustomEvent = ({ event }) => {
   };
 
   return (
-    <div className={`rounded-lg p-2 mb-2  ${getStyle()}`}>
-      <p className="truncate text-center text-md font-fredoka font-semibold text-black">
+    <div
+      className={`rounded-lg p-2 mb-2 ${getStyle()} md:h-full h-8 items-center`}
+    >
+      <p className="truncate text-center md:text-xl text-sm font-fredoka font-semibold text-black">
         {event.summary}
       </p>
     </div>

diff --git a/src/components/events/CustomHeader.jsx b/src/components/events/CustomHeader.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const CustomHeader = ({ label }) => {
   return (
-    <div className="font-bold font-shrikhand text-2xl 2xl:text-3xl 2xl:py-3 py-2 uppercase text-biscuits-purple-200 bg-transparent">
+    <div className="font-bold font-shrikhand text-center text-sm 2xl:text-3xl 2xl:py-3 py-2 uppercase text-biscuits-purple-200 bg-transparent">
       {label}
     </div>
   );

diff --git a/src/components/events/CustomToolbar.jsx b/src/components/events/CustomToolbar.jsx
@@ -76,7 +76,7 @@ const CustomToolbar = (event) => {
         {filters.map((filter, index) => (
           <div key={index} xs={9} sm={3} className="p-1">
             <p
-              className={`${filter.color} rounded-xl p-1 mb-1 px-12 text-center text-sm`}
+              className={`${filter.color} rounded-xl p-1 mb-1 px-12 text-center md:text-lg text-sm`}
             >
               {filter.topic}
             </p>

diff --git a/src/components/events/Modal.jsx b/src/components/events/Modal.jsx
@@ -19,7 +19,7 @@ const Modal = ({
   };
   return (
     <div
-      className={`flex-col p-6 fixed rounded-3xl border-8 w-1/3 bg-white ${getStyle()} z-50 top-[45%] translate-x-2/3`}
+      className={`flex-col p-6 fixed rounded-3xl border-8 md:w-1/3 w-11/12 bg-white ${getStyle()} z-50 top-[45%] md:translate-x-2/3 -translate-x-5`}
     >
       <button
         onClick={() => setEvents(null)}

diff --git a/src/components/gallery/ExtraPhotos.jsx b/src/components/gallery/ExtraPhotos.jsx
@@ -8,12 +8,12 @@ import useView from "@/components/useView";
 const ExtraPhotos = () => {
   const [inView, ref] = useView();
   return (
-    <div className="mb-14">
+    <div className="flex flex-col gap-y-8">
       <div
         ref={ref}
         className={`${
           inView && "animate-flip-up animate-once"
-        } mb-10 flex justify-center`}
+        } flex justify-center`}
       >
         <Subtitle text="Extras" color="text-biscuits-green-200" />
       </div>

diff --git a/src/components/gallery/GalleryImage.jsx b/src/components/gallery/GalleryImage.jsx
@@ -10,7 +10,7 @@ const GalleryImage = ({ src, alt }) => {
     <div
       ref={ref}
       className={`${
-        inView && "animate-fade-down"
+        inView && "animate-fade-down animate-once"
       } transition-transform duration-100 ease-in-out`}
     >
       <Image src={src} alt={alt} />

diff --git a/src/components/gallery/Hoverable.jsx b/src/components/gallery/Hoverable.jsx
@@ -3,19 +3,21 @@ import Link from "next/link";
 
 const Hoverable = ({ text, link, image }) => {
   return (
-    <Link href={link} target="_blank">
-      <div className="group relative flex justify-center items-center justify-self-center">
-        <div className="absolute opacity-0 group-hover:opacity-100 text-white z-10 font-semibold text-2xl md:text-4xl duration-150">
-          {text}
+    <div className="relative z-0">
+      <Link href={link} target="_blank">
+        <div className="group relative flex justify-center items-center justify-self-center">
+          <div className="absolute opacity-0 group-hover:opacity-100 text-white z-10 font-semibold text-2xl md:text-4xl duration-150">
+            {text}
+          </div>
+          <div className="opacity-0 group-hover:opacity-50 bg-gray-900 w-full h-full absolute duration-150" />
+          <Image
+            src={image}
+            alt="gallery image"
+            className="aspect-[3/2] object-cover"
+          />
         </div>
-        <div className="opacity-0 group-hover:opacity-50 bg-gray-900 w-full h-full absolute duration-150" />
-        <Image
-          src={image}
-          alt="gallery image"
-          className="aspect-[3/2] object-cover"
-        />
-      </div>
-    </Link>
+      </Link>
+    </div>
   );
 };