feat: finalize 2025 Feed page

Finish FullyHacks 2025 Feed

Author: tomasohCHOM

public/assets/feed.png

@@ -6,7 +6,8 @@ export default function EventsPage() {
       <div className="pb-4">
         <h1 className="feed-title">Events</h1>
         <p className="custom-text-shadow font-audiowide text-white md:text-md">
-          Timeline of hackathon events
+          Timeline of hackathon events. Filter by clicking on the event type!
+          Click again to remove the filter.
         </p>
       </div>
       <div className="mt-10">

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

@@ -18,12 +18,12 @@ const FullyPackCard: React.FC<FullyPackProps> = ({ fullypack }) => {
   const particles = useMemo(() => generateParticles(PARTICLE_CONFIG.COUNT), []);
 
   return (
-    <div className="inline-block w-full max-w-md">
+    <div className="w-full max-w-md">
       <div
         className="group relative"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}>
-        <div className="relative flex w-full">
+        <div className="relative flex min-h-[300px] w-full md:min-h-[400px]">
           {/* Base card with glow effect */}
           <div className="relative flex w-full flex-col rounded-lg bg-purple_card p-4 transition-all duration-500 group-hover:shadow-[0_0_30px_rgba(70,200,229,0.3)]">
             {/* Only render particles if lightspeed is enabled */}

src/app/(site)/feed/fullypacks/_components/fully-pack-card.tsx

@@ -95,14 +95,6 @@ const discordBot: fullyPacksType[] = [
   }
 ];
 
-const fullypacks: fullyPacksType[] = [
-  ...webDev,
-  ...backendDev,
-  ...mobileDev,
-  ...dataScience,
-  ...discordBot
-];
-
 // Helper function to group fullypacks by category
 const groupedFullypacks = {
   "Web Development": webDev,
@@ -121,19 +113,12 @@ export default function FullyPacks() {
         enabled: lightspeedEnabled,
         toggleLightspeed: () => setLightspeedEnabled((prev) => !prev)
       }}>
-      <section className="w-full max-w-7xl px-4 text-white sm:px-6 md:px-8">
+      <section className="w-full max-w-7xl text-white">
         <div className="feed-title">FULLYPACKS</div>
         <div className="w-full pb-8">
           <div className="custom-text-shadow md:text-md">
-            beginner friendly templates for participants
+            Beginner friendly templates for participants
           </div>
-          {/* Effects Button
-            <button
-              onClick={() => setLightspeedEnabled((prev) => !prev)}
-              className="ml-4 rounded-lg bg-cyan px-4 py-2 text-purple_card hover:opacity-90">
-              {lightspeedEnabled ? "Disable" : "Enable"} Effects
-            </button>
-          */}
         </div>
 
         {/* Sections */}
@@ -142,11 +127,11 @@ export default function FullyPacks() {
             ([category, packs]) =>
               packs.length > 0 && (
                 <div key={category} className="space-y-8">
-                  <h2 className="mb-10 text-center text-3xl font-semibold text-purple_main">
+                  <h2 className="custom-text-shadow mb-10 text-3xl font-semibold text-white">
                     {category}
                   </h2>
 
-                  <div className="mx-auto grid grid-cols-1 items-start gap-8 sm:gap-12 md:grid-cols-2 lg:grid-cols-3">
+                  <div className="mx-auto grid grid-cols-1 grid-rows-1 gap-8 sm:grid-cols-2 md:grid-cols-1 md:gap-12 lg:grid-cols-2 xl:grid-cols-3">
                     {packs.map((fullypack) => (
                       <FullyPackCard key={fullypack.id} fullypack={fullypack} />
                     ))}

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

@@ -34,7 +34,7 @@ export default async function FeedLayout({
       <div className="portal-background-container motion-reduce:animate-none"></div>
       <FeedNavBar />
       {user.bio == null && <FeedPopUp />}
-      <div className="relative mb-8 flex w-full gap-12 px-4 md:px-8">
+      <div className="relative mx-auto mb-8 flex w-full max-w-[1920px] gap-12 px-4 md:px-8">
         <FeedSideBar />
         <section className="flex-1">{children}</section>
       </div>

src/app/(site)/feed/layout.tsx

@@ -0,0 +1,9 @@
+import { AiOutlineLoading } from "react-icons/ai";
+
+export default function Loading() {
+  return (
+    <div className="mt-4 flex items-center justify-center">
+      <AiOutlineLoading size={48} className="animate-spin text-[#72d6e6]" />;
+    </div>
+  );
+}

src/app/(site)/feed/loading.tsx

@@ -1,4 +1,4 @@
-import { mainCategory, subCategory } from "@/lib/data/prizes";
+import { mainCategory } from "@/lib/data/prizes";
 import { tracksType } from "@/types/interface";
 import { BsMusicPlayer } from "react-icons/bs";
 import { CgSmartphoneChip } from "react-icons/cg";
@@ -38,7 +38,7 @@ const tracks: tracksType[] = [
 
 function Card({ track }: { track: tracksType }) {
   return (
-    <div className="relative flex h-[494px] w-full max-w-[480px] cursor-pointer flex-col items-center rounded-[61.64px] bg-[#173162] p-6 shadow-xl duration-200 ease-in-out hover:bg-[rgb(52,11,103)] hover:text-white">
+    <div className="relative flex min-h-[480px] w-full max-w-[480px] flex-col items-center rounded-[2.5rem] bg-[#173162] p-6 shadow-xl duration-200 ease-in-out hover:text-white">
       <div className="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2">
         <img src="/assets/hex.svg" alt="hex" className="h-8 w-8" />
       </div>
@@ -70,7 +70,7 @@ function Card({ track }: { track: tracksType }) {
           <img src="/assets/circles.svg" alt="circles" />
         </div>
 
-        <p className="w-[355px] text-center text-lg font-bold text-white">
+        <p className="custom-text-shadow text-center text-lg font-bold text-[#72D6E6]">
           {track.name}
         </p>
 
@@ -79,15 +79,8 @@ function Card({ track }: { track: tracksType }) {
         </div>
       </div>
 
-      <div className="mt-6 flex h-[180px] w-[273px] flex-col items-center text-center">
-        {track.team && (
-          <p className="mb-4 font-normal leading-7 text-white">
-            Total: {track.team} team(s)
-          </p>
-        )}
-        <p className="font-audiowide text-[20px] font-[400] leading-[30px] text-white">
-          {track.description}
-        </p>
+      <div className="mt-6 flex flex-col items-center p-4 text-center">
+        <p className="font-audiowide text-md text-white">{track.description}</p>
       </div>
     </div>
   );
@@ -97,63 +90,46 @@ export default function Prizes() {
   return (
     <div>
       <h1 className="feed-title">Tracks & Prizes</h1>
-      <p className="custom-text-shadow font-audiowide text-[16px] leading-snug text-white sm:text-[18px] lg:text-[24px]">
+      <p className="custom-text-shadow mt-2 font-audiowide leading-snug text-white lg:text-lg">
         Find all details about tracks, prize categories here
       </p>
 
       <div className="mt-10">
         <div className="mb-4 flex items-center gap-4">
-          <p className="font-rubik text-[27px] font-[700] leading-[20px] text-[#72D6E6]">
-            TRACKS
-          </p>
+          <h2 className="text-3xl font-semibold text-[#72D6E6]">TRACKS</h2>
         </div>
-        <p className="font-audiowide text-white md:text-md">
+        <p className="mt-4 font-audiowide text-white md:text-md">
           Hackers have to build their projects around one of these 4 tracks
         </p>
       </div>
-      <div className="mt-10 grid grid-cols-1 gap-y-16 gap-x-0 sm:grid-cols-2 lg:grid-cols-2">
+      <div className="mt-10 grid grid-cols-1 items-center justify-center gap-x-8 gap-y-12 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
         {tracks.map((track: tracksType) => {
           return <Card key={track.id} track={track} />;
         })}
       </div>
 
       <div className="mt-14">
         <div className="mb-8">
-          <p className="font-rubik text-[20px] font-[700] leading-[20px] text-[#72D6E6] md:text-[27px]">
-            Prizes
-          </p>
-          <p className="mt-4 font-audiowide text-[16px] leading-[22px] text-white md:text-[20px] md:leading-[30px]">
+          <h2 className="text-3xl font-semibold text-[#72D6E6]">PRIZES</h2>
+          <p className="mt-4 font-audiowide text-white md:text-md">
             Each team has to sign up for one prize category in order to be
             considered for the corresponding prize.
           </p>
         </div>
 
-        <div
-          className="relative mx-auto rounded-[20px] bg-[#173162] px-4 py-4 md:rounded-[61.64px]"
-          style={{ width: "100%", maxWidth: "1060px" }}>
-          <div className="grid h-full grid-cols-1 place-items-center gap-4 sm:grid-cols-2 md:gap-x-3 md:gap-y-2">
-            {mainCategory.slice(0, 4).map((prize: tracksType) => (
-              <div
-                key={prize.id}
-                className="flex flex-col items-center justify-center space-y-4 p-4 sm:p-6">
-                <p className="font-audiowide text-[20px] font-[400] text-[#72D6E6] md:text-[36px]">
-                  {prize.name}
-                </p>
-
-                <div
-                  className="w-full rounded-[10px] bg-[#C5C5C5] text-center md:rounded-[20px]"
-                  style={{
-                    maxWidth: "497px",
-                    height: "auto",
-                    padding: "1rem"
-                  }}>
-                  <p className="mt-4 px-2 text-sm font-normal md:px-4 md:text-base">
-                    {prize.description}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
+        <div className="flex w-full flex-wrap gap-4">
+          {mainCategory.map((prize: tracksType) => (
+            <div
+              key={prize.id}
+              className="flex min-h-[130px] flex-col items-center rounded-lg bg-[#173162] p-4">
+              <h3 className="custom-text-shadow font-audiowide text-md font-[400] text-[#72D6E6] md:text-lg">
+                {prize.name}
+              </h3>
+              <p className="mt-4 px-2 text-white md:text-md">
+                {prize.description}
+              </p>
+            </div>
+          ))}
         </div>
       </div>
     </div>

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

@@ -89,7 +89,7 @@ export default function UserForm() {
         {...register("bio")}
         name="bio"
         value={updatedProfile.bio}
-        className={`feed-form-input h-[300px] w-[min(700px,_95%)] rounded-md mb-[15px]${
+        className={`feed-form-input mb-[15px] h-[300px] w-full max-w-[700px] rounded-md ${
           errors.bio ? "error-form" : ""
         }`}
         onChange={handleInfoChange}
@@ -103,12 +103,12 @@ export default function UserForm() {
         {...register("discordId")}
         name="discordId"
         value={updatedProfile.discordId}
-        className={`feed-form-input mb-[15px] w-[min(700px,_95%)] rounded-md ${
+        className={`feed-form-input mb-[15px] w-full max-w-[700px] rounded-md ${
           errors.discordId ? "error-form" : ""
         }`}
         onChange={handleInfoChange}
         type="text"
-        placeholder="Fully #4567"
+        placeholder="Fullyhacker"
       />
       <p className="error-msg">{errors.discordId?.message}</p>
       <p className="text-white">

src/app/(site)/feed/profile/_components/user-form.tsx

@@ -61,12 +61,12 @@ const sponsorGifts: sponsorGiftType[] = [
 
 export default function Resources() {
   return (
-    <section className="mr-20 w-full max-w-3xl text-white">
+    <section className="w-full text-white">
       <div className="feed-title">Resources</div>
       <div className="custom-text-shadow border-b-2 border-[#72d6e6] pb-12 md:text-md">
         Tools to succeed beyond FullyHacks.
       </div>
-      <div className="my-8 grid justify-center gap-6 lg:grid-cols-1">
+      <div className="my-8 grid justify-center gap-6 lg:grid-cols-2">
         {sponsorGifts.map((gift: sponsorGiftType) => {
           return (
             <div

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

@@ -170,7 +170,12 @@ export const FeedNavBar = () => {
         />
       </Link>
       <div className="text-md text-white">
-        <button onClick={() => signOut()}>Sign out</button>
+        <button
+          onClick={() => signOut()}
+          className="group relative py-1 text-md">
+          Sign out
+          <span className="absolute bottom-1 block h-0.5 w-0 bg-white transition-all duration-300 group-hover:w-full group-focus:w-full" />
+        </button>
       </div>
     </nav>
   );
@@ -296,14 +301,14 @@ export const FeedSideBar: React.FC = () => {
       </div>
 
       {/* Desktop View */}
-      <div className="hidden w-[250px] flex-shrink-0 text-sm font-semibold text-[#696969] md:block md:text-[1.125rem]">
+      <div className="hidden w-[250px] flex-shrink-0 text-sm font-semibold text-[#bdbdbd] md:block md:text-[1.125rem]">
         <ul className="flex flex-col gap-4 border-b-2 border-[#72d6e6] p-2">
           {feedItems.map((item) => {
             return (
               <Link
                 key={item.id}
                 href={item.href}
-                className={`flex w-full rounded-lg p-2 transition-colors duration-300 hover:text-white ${pathname === item.href || (item.name === "Home" && pathname.startsWith(item.href)) ? "text-white" : ""}`}>
+                className={`flex w-full rounded-lg p-2 transition-colors duration-300 hover:text-white ${pathname === item.href || (item.name === "Home" && pathname.startsWith(item.href)) ? "custom-text-shadow text-white" : ""}`}>
                 {pathname === item.href ||
                 (item.name === "Home" && pathname.startsWith(item.href)) ? (
                   <MdArrowRight size={28} color="#c2f2ff" />