removed extra dividers and cleanup files

acm-ucr · Aug 16, 2024 · 54c9d7f · 54c9d7f
1 parent 7b07eff
commit 54c9d7f
Show file tree

Hide file tree

Showing 16 changed files with 78 additions and 94 deletions.
diff --git a/src/app/board/page.js b/src/app/board/page.js
@@ -4,22 +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%]">
-      <div className="flex justify-center 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 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>
     </div>

diff --git a/src/app/gallery/[type]/page.js b/src/app/gallery/[type]/page.js
@@ -21,7 +21,7 @@ const Page = ({ params }) => {
   ) {
     return (
       <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-green-100 flex flex-col text-7xl items-center pt-10">
-        <Title text={PAGES[params.type]} food={"chip"} />
+        <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) => (
             <GalleryImage

diff --git a/src/app/gallery/page.js b/src/app/gallery/page.js
@@ -2,7 +2,7 @@
 import useView from "@/components/useView";
 import React from "react";
 import Title from "@/components/Title";
-import FoodTabling from "@/components/gallery/FoodTabling";
+import TablingEvents from "@/components/gallery/TablingEvents";
 import QuarterlyEvents from "@/components/gallery/QuarterlyEvents";
 import PastEvents from "@/components/gallery/PastEvents";
 
@@ -17,7 +17,7 @@ const Page = () => {
         <Title text="Gallery" food="chip" />
       </div>
 
-      <FoodTabling />
+      <TablingEvents />
       <QuarterlyEvents />
       <PastEvents />
     </div>

diff --git a/src/app/not-found.js b/src/app/not-found.js
@@ -15,7 +15,7 @@ const NotFound = () => {
             <Title text="Error" color="red" />
             <Title text="4O4" />
           </div>
-          <Subtitle text="Page not found" color={"text-biscuits-red-200"} />
+          <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,9 +1,9 @@
 import Support from "@/components/support/Support";
 const Page = () => {
   return (
-    <>
+    <div className="bg-biscuits-orange-300">
       <Support />
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -4,8 +4,8 @@ import Link from "next/link";
 const Footer = () => {
   return (
     <div className="flex drop-shadow items-center p-4 bg-biscuits-peach justify-between text-biscuits-purple-200 font-omc text-2xl md:text-3xl text-center">
-      <div className="hidden md:flex tracking-widest"> H4B at UCR </div>
-      <div className="flex md:hidden tracking-widest"> H4B </div>
+      <div className="hidden md:flex tracking-widest">H4B at UCR</div>
+      <div className="flex md:hidden tracking-widest">H4B</div>
       <div className="flex flex-row space-x-2 md:space-x-5 ">
         {FOOTER.map((social, index) => (
           <Link

diff --git a/src/components/Title.jsx b/src/components/Title.jsx
@@ -21,7 +21,7 @@ const Title = ({ text, food, color }) => {
       </div>
 
       {food && COOKIES[food] && (
-        <div className="ml-4 ml-2 flex items-center">
+        <div className="ml-2 flex items-center">
           <Image
             src={COOKIES[food]}
             alt={`${food} cookies`}

diff --git a/src/components/gallery/Hoverable.jsx b/src/components/gallery/Hoverable.jsx
@@ -3,21 +3,19 @@ import Link from "next/link";
 
 const Hoverable = ({ text, link, image }) => {
   return (
-    <div>
-      <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"
-          />
+    <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>
-      </Link>
-    </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>
   );
 };
 

diff --git a/src/components/gallery/QuarterlyEvents.jsx b/src/components/gallery/QuarterlyEvents.jsx
@@ -1,7 +1,7 @@
 "use client";
 import Subtitle from "@/components/Subtitle";
 import Hoverable from "@/components/gallery/Hoverable";
-import { quarterlyEvents } from "@/data/gallery/QuarterlyEvents";
+import { QUARTERS } from "@/data/gallery/Quarters";
 import useView from "@/components/useView";
 
 const QuarterlyEvents = () => {
@@ -18,12 +18,12 @@ const QuarterlyEvents = () => {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 place-items-center text-black">
-        {quarterlyEvents.map((QuarterlyEvents, index) => (
+        {QUARTERS.map((quarter, index) => (
           <Hoverable
             key={index}
-            link={QuarterlyEvents.link}
-            image={QuarterlyEvents.photo}
-            text={QuarterlyEvents.title}
+            link={quarter.link}
+            image={quarter.photo}
+            text={quarter.title}
           />
         ))}
       </div>

diff --git a/src/components/gallery/FoodTabling.jsx → src/components/gallery/TablingEvents.jsx b/src/components/gallery/FoodTabling.jsx → src/components/gallery/TablingEvents.jsx
@@ -6,16 +6,14 @@ import Tabling2 from "@/public/images/tabling/tabling_2.webp";
 import Tabling3 from "@/public/images/tabling/tabling_3.webp";
 import useView from "@/components/useView";
 
-const FoodTabling = () => {
+const TablingEvents = () => {
   const [inView, ref] = useView();
   return (
     <div
       ref={ref}
       className={`${inView && "animate-fade-right animate-once"} mb-14`}
     >
-      <div className="mb-10 flex justify-center">
-        <Subtitle text="Food Tabling" color="text-biscuits-green-200" />
-      </div>
+      <Subtitle text="Food Tabling" color="text-biscuits-green-200" />
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 place-items-center">
         <Image src={Tabling1} alt="Tabling" />
@@ -26,4 +24,4 @@ const FoodTabling = () => {
   );
 };
 
-export default FoodTabling;
+export default TablingEvents;
diff --git a/src/components/home/Upcoming.jsx b/src/components/home/Upcoming.jsx
@@ -9,13 +9,13 @@ const Upcoming = () => {
     <div
       ref={ref}
       className={`${
-        inView && "animate-fade-right animate-delay-200 "
+        inView && "animate-fade-left animate-delay-200 "
       } flex flex-col justify-center text-center my-[5%]`}
     >
       <Title text="Upcoming Events" color="purple" />
       <div
         className={`${
-          inView && "animate-fade-up"
+          inView && "animate-fade-left"
         }  m-10 md:m-11 grid md:grid-cols-2 grid-cols-1 gap-4`}
       >
         <UpcomingCard />

diff --git a/src/components/involvement/FAQs.jsx b/src/components/involvement/FAQs.jsx
@@ -8,9 +8,12 @@ const FAQs = () => {
       <Subtitle color="text-biscuits-brown-200" text="FAQS" />
       <div className="w-full flex flex-col items-start gap-y-2">
         {QUESTIONS.map((faq, index) => (
-          <div key={index} className="w-full">
-            <Item question={faq.question} answer={faq.answer} />
-          </div>
+          <Item
+            key={index}
+            question={faq.question}
+            answer={faq.answer}
+            className="w-full"
+          />
         ))}
       </div>
     </div>

diff --git a/src/components/involvement/Tabling.jsx b/src/components/involvement/Tabling.jsx
@@ -12,7 +12,6 @@ const Tabling = () => {
         color="text-biscuits-brown-200"
         text="How to Table"
       />
-
       <Picture x={20} y={20} image={tabling1} className="w-3/4 mx-auto" />
       <ul className="font-inika text-lg md:text-2xl list-decimal px-8 w-full md:px-0 md:w-3/4">
         {TABLING.map((tabling, index) => (
@@ -21,7 +20,6 @@ const Tabling = () => {
           </li>
         ))}
       </ul>
-
       <Picture x={20} y={20} image={tabling4} className="w-3/4 mx-auto" />
     </div>
   );

diff --git a/src/components/support/Connect.jsx b/src/components/support/Connect.jsx
@@ -9,7 +9,7 @@ const Connect = ({ name, icon, link }) => {
       rel="noopener noreferrer"
     >
       <span className="transition ease-in-out hover:scale-110">{icon}</span>
-      <div className="text-xl">{name}</div>
+      <div className="text-xl font-shrikhand">{name}</div>
     </Link>
   );
 };

diff --git a/src/components/support/Support.jsx b/src/components/support/Support.jsx
@@ -11,42 +11,31 @@ import { SOCIALS } from "@/data/support/Socials";
 const Support = () => {
   const [inView, ref] = useView();
   return (
-    <div className="px-10 bg-biscuits-orange-300">
-      <div ref={ref} className={`${inView && "animate-fade-up"}`}>
-        <Title text="Support Us" food="croissant" color="gray" />
-        <div className="flex flex-wrap gap-x-6 py-14 justify-evenly items-center">
-          <Image
-            src={standing}
-            alt="standing"
-            className="pb-4 animate-wiggle animate-twice animate-ease-out"
-          />
-          <div className="flex flex-col items-center gap-y-8 pt-12 md:pt-0">
-            <Subtitle color="text-biscuits-brown-200" text="Donations" />
-            <Button text="VENMO" link="https://account.venmo.com/u/h4b_ucr" />
-            <Subtitle color="text-biscuits-brown-200" text="Newsletter" />
-            <Button text="SIGN UP" link="http://eepurl.com/iaWAc5" />
-          </div>
+    <div ref={ref} className={`${inView && "animate-fade-up"}`}>
+      <Title text="Support Us" food="croissant" color="gray" />
+      <div className="flex flex-wrap gap-x-6 py-14 justify-evenly items-center">
+        <Image
+          src={standing}
+          alt="standing"
+          className="pb-4 animate-wiggle animate-twice animate-ease-out"
+        />
+        <div className="flex flex-col items-center gap-y-8 pt-12 md:pt-0">
+          <Subtitle color="text-biscuits-brown-200" text="Donations" />
+          <Button text="VENMO" link="https://account.venmo.com/u/h4b_ucr" />
+          <Subtitle color="text-biscuits-brown-200" text="Newsletter" />
+          <Button text="SIGN UP" link="http://eepurl.com/iaWAc5" />
         </div>
-        <div className="font-shrikhand">
-          <Subtitle
-            color="text-center text-biscuits-brown-200"
-            text="Connect with us!"
-          />
-          <div className="mx-12 xl:mx-64 grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-32 gap-y-8 pb-10">
-            {SOCIALS.map((social, index) => (
-              <div
-                key={index}
-                className="w-auto flex items-center justify-center"
-              >
-                <Connect
-                  name={social.name}
-                  icon={social.icon}
-                  link={social.link}
-                />
-              </div>
-            ))}
+      </div>
+      <Subtitle
+        color="text-center text-biscuits-brown-200"
+        text="Connect with us!"
+      />
+      <div className="mx-12 xl:mx-64 grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-32 gap-y-8 pb-10">
+        {SOCIALS.map((social, index) => (
+          <div key={index} className="w-auto flex items-center justify-center">
+            <Connect name={social.name} icon={social.icon} link={social.link} />
           </div>
-        </div>
+        ))}
       </div>
     </div>
   );

diff --git a/src/data/gallery/QuarterlyEvents.js → src/data/gallery/Quarters.js b/src/data/gallery/QuarterlyEvents.js → src/data/gallery/Quarters.js
@@ -1,8 +1,8 @@
 import fall from "@/public/images/fall/fall23_16.webp";
-import fallcuzNoWinterpic from "@/public/images/fall/fall23_20.webp";
+import winter from "@/public/images/fall/fall23_20.webp";
 import spring from "@/public/images/spring/spring24_9.webp";
 
-export const quarterlyEvents = [
+export const QUARTERS = [
   {
     title: "Fall",
     link: "/gallery/fall",
@@ -11,7 +11,7 @@ export const quarterlyEvents = [
   {
     title: "Winter",
     link: "/gallery/winter",
-    photo: fallcuzNoWinterpic,
+    photo: winter,
   },
   {
     title: "Spring",