Merge branch 'dev' into felix/calendarapi

package.json

@@ -23,6 +23,7 @@
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
+    "react-grid-gallery": "^1.0.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "tailwind-merge": "^2.5.4",

src/app/about/page.tsx

@@ -5,8 +5,8 @@ import aboutUs from "@/public/title/aboutUs.webp";
 
 const page = () => {
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-10">
-      <Title image={aboutUs} alt="About Us Header Image" txt="ABOUT US" />
+    <div className="flex w-full flex-col items-center justify-center gap-4 md:gap-10">
+      <Title webp={aboutUs} alt="About Us Header Image" txt="ABOUT US" />
       <AboutUs />
       <FAQs />
     </div>

src/app/board/page.tsx

@@ -1,10 +1,17 @@
 import Boards from "@/components/board/Boards";
 import Image from "next/image";
 import line from "@/public/board/line.svg";
+import meetTheBoard from "@/public/title/meetTheBoard.webp";
+import Title from "@/components/Title";
 
 const page = () => {
   return (
     <div className="flex w-full flex-col items-center justify-center">
+      <Title
+        webp={meetTheBoard}
+        alt="Meet the Board Header Image"
+        txt="MEET THE BOARD"
+      />
       <Boards />
 
       <Image

src/app/events/page.tsx

@@ -1,5 +1,7 @@
 "use client";
 import Calendar from "@/components/events/caledar/Calendar";
+import Title from "@/components/Title";
+import upcomingEvents from "@/public/title/upcomingEvents.webp";
 import EventsRender from "@/components/events/EventsRender";
 import { EventProps } from "@/components/ui/calendar";
 import { useEffect, useState } from "react";
@@ -12,7 +14,7 @@ interface GoogleCalendarEvents {
   summary: string;
   location?: string;
 }
-
+        
 const page = () => {
   const [events, setEvents] = useState<EventProps[]>([]);
 
@@ -64,6 +66,11 @@ const page = () => {
 
   return (
     <div className="flex w-full flex-col gap-10">
+      <Title
+        webp={upcomingEvents}
+        txt="UPCOMING EVENTS"
+        alt="Upcoming Events Banner"
+      />
       <EventsRender />
       <Calendar events={events} />
     </div>

src/app/fight-team/page.tsx

@@ -1,11 +1,16 @@
 import FightTeam from "@/components/fight-team/FightTeam";
-import Gallery from "@/components/fight-team/Gallery";
+import GalleryComponent from "@/components/fight-team/Gallery";
+import Title from "@/components/Title";
+import fightTeam from "@/public/title/fightTeam.webp";
+import Header from "@/components/Header";
 
 const page = () => {
   return (
     <div className="flex w-full flex-col items-center justify-center gap-10">
+      <Title webp={fightTeam} alt="Fight Team Header Image" txt="FIGHT TEAM" />
       <FightTeam />
-      <Gallery />
+      <Header title="GALLERY" position="middle" />
+      <GalleryComponent />
     </div>
   );
 };

src/app/gallery/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+import { Gallery } from "react-grid-gallery";
+
+import Title from "@/components/Title";
+import gallery from "@/public/title/gallery.webp";
+import image1 from "@/public/gallery/image1.webp";
+import image2 from "@/public/gallery/image2.webp";
+import image3 from "@/public/gallery/image3.webp";
+import image4 from "@/public/gallery/image4.webp";
+import image5 from "@/public/gallery/image5.webp";
+import image6 from "@/public/gallery/image6.webp";
+import image7 from "@/public/gallery/image7.webp";
+import image8 from "@/public/gallery/image8.webp";
+import image9 from "@/public/gallery/image9.webp";
+import image10 from "@/public/gallery/image10.webp";
+import image11 from "@/public/gallery/image11.webp";
+import image12 from "@/public/gallery/image12.webp";
+import image13 from "@/public/gallery/image13.webp";
+import image14 from "@/public/gallery/image14.webp";
+import image15 from "@/public/gallery/image15.webp";
+import image16 from "@/public/gallery/image16.webp";
+import image17 from "@/public/gallery/image17.webp";
+import image18 from "@/public/gallery/image18.webp";
+import image19 from "@/public/gallery/image19.webp";
+import image20 from "@/public/gallery/image20.webp";
+import image21 from "@/public/gallery/image21.webp";
+import image22 from "@/public/gallery/image22.webp";
+import image23 from "@/public/gallery/image23.webp";
+import image24 from "@/public/gallery/image24.webp";
+import image25 from "@/public/gallery/image25.webp";
+import image26 from "@/public/gallery/image26.webp";
+import image27 from "@/public/gallery/image27.webp";
+import image28 from "@/public/gallery/image28.webp";
+import image29 from "@/public/gallery/image29.webp";
+import image30 from "@/public/gallery/image30.webp";
+import image31 from "@/public/gallery/image31.webp";
+import image32 from "@/public/gallery/image32.webp";
+import image33 from "@/public/gallery/image33.webp";
+import image34 from "@/public/gallery/image34.webp";
+import image35 from "@/public/gallery/image35.webp";
+import image36 from "@/public/gallery/image36.webp";
+import image37 from "@/public/gallery/image37.webp";
+
+type ImageProps = {
+  src: string;
+  width: number;
+  height: number;
+  caption?: string;
+  alt?: string;
+};
+
+const importedImages = [
+  image1,
+  image2,
+  image3,
+  image4,
+  image5,
+  image6,
+  image7,
+  image8,
+  image9,
+  image10,
+  image11,
+  image12,
+  image13,
+  image14,
+  image15,
+  image16,
+  image17,
+  image18,
+  image19,
+  image20,
+  image21,
+  image22,
+  image23,
+  image24,
+  image25,
+  image26,
+  image27,
+  image28,
+  image29,
+  image30,
+  image31,
+  image32,
+  image33,
+  image34,
+  image35,
+  image36,
+  image37,
+];
+
+const images: ImageProps[] = importedImages.map((image, index) => ({
+  src: image.src,
+  width: image.width,
+  height: image.height,
+  alt: `Image ${index + 1}`,
+}));
+
+const page = () => {
+  return (
+    <div className="w-full space-y-10">
+      <Title webp={gallery} txt="GALLERY" alt="Gallery Banner" />
+      <div className="w-full">
+        <div className="flex flex-col items-center justify-center">
+          <p className="py-1 font-archivo-black text-xl">2023 - 2024</p>
+          <div className="flex w-36 flex-col border-t-[2px] border-white pb-3" />
+        </div>
+        <Gallery enableImageSelection={false} images={images} />
+      </div>
+    </div>
+  );
+};
+
+export default page;

src/app/globals.css

@@ -1,6 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+[data-testid="grid-gallery-item_thumbnail"] {
+  cursor: default !important;
+}
 @layer base {
   :root {
     --radius: 0.5rem;