feat: make some more updates to the feed

remove resources page, updated prizes, add new faq, remove ctf in events page (give activities the green color instead), increase size to fit time

Author: tomasohCHOM

src/app/(site)/feed/events/_components/calendar.tsx

@@ -2,12 +2,7 @@ import { eventLabel, eventsType } from "@/types/interface";
 import { TiStarFullOutline } from "react-icons/ti";
 import React, { useState } from "react";
 
-const useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight
-  });
-};
+const multiplier = 120;
 
 interface CalendarProps {
   events: eventsType[];
@@ -39,16 +34,14 @@ interface EventProps {
 }
 
 const Event: React.FC<EventProps> = ({ event }) => {
-  const multiplier = 110;
   const width = (event.endTime - event.startTime) * multiplier;
   const left = event.startTime * multiplier;
   const top = event.row * 100;
   const eventColors: Record<string, string> = {
     event: "#F5595C",
     workshop: "#7D22CC",
     food: "#FFA167",
-    ctf: "#00CC8E",
-    activity: "#6060C2"
+    activity: "#00CC8E"
   };
   const backgroundColor = eventColors[event.type] || "#6060C2";
 
@@ -93,40 +86,32 @@ export const EventLabel: React.FC<EventLableProps> = ({
 }) => {
   const eventLabels: eventLabel[] = [
     {
-      id: "e2",
+      id: "e1",
       name: "Main event",
       type: "event",
       borderStyle: "#F5595C",
       textStyle: "text-[#F5595C] font-rubik"
     },
     {
-      id: "e3",
+      id: "e2",
       name: "Workshops",
       type: "workshop",
       borderStyle: "#7D22CC",
       textStyle: "text-[#7D22CC] font-rubik"
     },
     {
-      id: "e4",
+      id: "e3",
       name: "Food",
       type: "food",
       borderStyle: "#FFA167",
       textStyle: "text-[#FFA167] font-rubik"
     },
-    // new type so event.type can be added as ctf
     {
-      id: "e5",
-      name: "CTF",
-      type: "ctf",
-      borderStyle: "#00CC8E",
-      textStyle: "text-[#00CC8E] font-rubik"
-    },
-    {
-      id: "e6",
+      id: "e4",
       name: "Activity",
       type: "activity",
-      borderStyle: "#6060C2",
-      textStyle: "text-[#6060C2] font-rubik"
+      borderStyle: "#00CC8E",
+      textStyle: "text-[#00CC8E] font-rubik"
     }
   ];
 
@@ -163,7 +148,6 @@ export const EventLabel: React.FC<EventLableProps> = ({
 
 const Calendar: React.FC<CalendarProps> = ({ events }) => {
   const [selectedFilter, setSelectedFilter] = useState<string>("all");
-  const multiplier = 110;
   const hoursArray = Array.from({ length: 30 }, (_, i) => {
     const hour = (i % 12) + 1;
     const period = i < 12 ? "pm" : i > 22 ? "pm" : "am";

src/app/(site)/feed/events/_components/events.tsx

@@ -7,11 +7,17 @@ import Calendar, { EventLabel } from "./calendar";
 
 export default function Events() {
   const [selectedFilter, setSelectedFilter] = useState<string>("all");
-
+  const eventColors: Record<string, string> = {
+    event: "#F5595C",
+    workshop: "#7D22CC",
+    food: "#FFA167",
+    activity: "#00CC8E"
+  };
   const filteredEvents =
     selectedFilter === "all"
       ? events
       : events.filter((event: eventsType) => event.type === selectedFilter);
+
   return (
     <>
       {/* Mobile View */}
@@ -31,22 +37,11 @@ export default function Events() {
               <div className="flex flex-row items-center justify-between">
                 <p className="text-lg font-bold">{event.name}</p>
                 <p
-                  className={`h-4 w-4 flex-shrink-0 rounded-full ${
-                    event.type == "event"
-                      ? "bg-[#F5595C]"
-                      : event.type == "workshop"
-                        ? "bg-[#7D22CC]"
-                        : event.type == "food"
-                          ? "bg-[#FFA167]"
-                          : event.type == "ctf"
-                            ? "bg-[#00CC8E]"
-                            : event.type == "activity"
-                              ? "bg-[#6060C2]"
-                              : "#F5595C"
-                  }`}></p>
+                  className="h-4 w-4 flex-shrink-0 rounded-full"
+                  style={{ backgroundColor: eventColors[event.type] }}></p>
               </div>
-              <p> {event.timeString}</p>
-              <p> {event.location} </p>
+              <p>{event.timeString}</p>
+              <p>{event.location}</p>
             </div>
           );
         })}

src/app/(site)/feed/faq/page.tsx

@@ -31,60 +31,67 @@ const faqs: FAQType[] = [
   },
   {
     id: "faq4",
+    question:
+      "Is it necessary to attend the opening ceremony or be present on the first day to participate?",
+    answer:
+      "While attending the entire event is preferred, it is not mandatory to attend the opening ceremony. However, you must be present for at least one of the two days to ensure you're checked in and have a project eligible for submission."
+  },
+  {
+    id: "faq5",
     question: "Where is the information room?",
     answer:
       "The information room is in CS110A. You can come here to check in or ask questions."
   },
   {
-    id: "faq5",
+    id: "faq6",
     question: "Where do I park my vehicle?",
     answer:
       "Parking at CSUF is free on Saturday and Sunday. We recommend Lot A, Eastside, for overnight parking."
   },
   {
-    id: "faq6",
+    id: "faq7",
     question: "Will there be food?",
     answer:
       "Yes! We will have pizza on the first day for dinner and pastries and fruit for breakfast on Sunday. Snacks and drinks will be available throughout the event."
   },
   {
-    id: "faq7",
+    id: "faq8",
     question: "Does FullyHacks have one theme or multiple themes?",
     answer:
       "FullyHacks has multiple themes, divided into four different tracks."
   },
   {
-    id: "faq8",
+    id: "faq9",
     question: "What should I bring?",
     answer:
       "A sleeping bag, laptop, chargers, snacks, drinks, hygiene items, and anything else you may need."
   },
   {
-    id: "faq9",
+    id: "faq10",
     question: "How do I prepare for the hackathon?",
     answer:
       "If you have no coding experience, check out our FullyPacks template. Make sure your coding environment is set up in advance, including version control (GitHub), an IDE (VSCode), and any necessary frameworks or runtimes (Python, Node.js, etc.)."
   },
   {
-    id: "faq10",
+    id: "faq11",
     question: "What are FullyPacks? Do I have to use them?",
     answer:
       "No, you're not required to use them. FullyPacks are beginner-friendly templates designed to help you start your project if you don't know where to begin."
   },
   {
-    id: "faq11",
+    id: "faq12",
     question: "How do teams work? What if I don't have a team?",
     answer:
       "Teams can have 1 to 4 members. If you don't have a team, we will host a team-forming event after the opening ceremony."
   },
   {
-    id: "faq12",
+    id: "faq13",
     question: "What if I have questions during the hackathon?",
     answer:
       "Please reach out to any of the mentors in your room or ask in our Discord forum channel."
   },
   {
-    id: "faq13",
+    id: "faq14",
     question: "How will the projects be judged?",
     answer:
       "There will be different prize categories announced on the day of the hackathon. You can sign up your project for a category during the team-forming event. Examples include 'Best Use of...' awards."

src/app/(site)/feed/resources/page.tsx

@@ -210,27 +210,22 @@ export const FeedSideBar: React.FC = () => {
       href: "/feed/events"
     },
     {
-      id: "feed07",
+      id: "feed04",
       name: "Tracks & Prizes",
       href: "/feed/prizes"
     },
     {
-      id: "feed04",
+      id: "feed05",
       name: "FullyPacks",
       href: "/feed/fullypacks"
     },
     {
-      id: "feed05",
-      name: "Resources",
-      href: "/feed/resources"
-    },
-    {
-      id: "feed08",
+      id: "feed06",
       name: "FAQs",
       href: "/feed/faq"
     },
     {
-      id: "feed06",
+      id: "feed07",
       name: "Profile",
       href: "/feed/profile"
     }
@@ -242,7 +237,7 @@ export const FeedSideBar: React.FC = () => {
       {!isOpen && (
         <AiOutlineMenu
           onClick={() => setOpen(true)}
-          className="absolute -top-[5.5rem] left-4 z-20 block cursor-pointer stroke-[2] text-[#72d6e6] md:hidden"
+          className="absolute -top-[5.865rem] left-4 z-20 block cursor-pointer stroke-[2] text-[#72d6e6] md:hidden"
           size={24}
         />
       )}