Brandontran1220/bugs

package.json

@@ -12,9 +12,11 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-query": "5.69.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.484.0",
     "motion": "^12.23.24",
     "next": "^15.5.6",

src/app/board/page.tsx

@@ -1,10 +1,12 @@
 import BoardGrid from "@/components/board/BoardGrid";
+import TitleComp from "@/components/TitleComp";
 
 const ExecutiveBoardPage = () => {
   return (
-    <div className="flex w-full flex-col items-center justify-start">
+    <>
+      <TitleComp title="E-Board" />
       <BoardGrid />
-    </div>
+    </>
   );
 };
 export default ExecutiveBoardPage;

src/app/join/page.tsx

@@ -1,11 +1,11 @@
-import Testimonials from "@/components/join/testimonials";
+import Testimonials from "@/components/joinus/testimonials";
 import InterestSection from "@/components/landing/InterestSection";
 import TitleComp from "@/components/TitleComp";
 
 const JoinUs = () => {
   return (
     <>
-      <TitleComp title="Join US" />
+      <TitleComp title="Join Us" />
       <InterestSection />
       <Testimonials />
     </>

src/app/overviews/page.tsx

@@ -0,0 +1,12 @@
+import TitleComp from "@/components/TitleComp";
+import { EventSections } from "@/components/overviews/EventSections";
+
+const EventOverviews = () => {
+  return (
+    <>
+      <TitleComp title="Event Overviews" />
+      <EventSections />
+    </>
+  );
+};
+export default EventOverviews;

src/app/page.tsx

@@ -3,13 +3,15 @@
 import PSEBanner from "@/components/landing/PSEBanner";
 import Principles from "@/components/landing/Principles";
 import OurMission from "@/components/landing/ourmission";
+import PhotoGallery from "@/components/landing/PhotoGallery";
 
 const Home = () => {
   return (
     <>
       <PSEBanner />
       <OurMission />
       <Principles />
+      <PhotoGallery />
     </>
   );
 };

src/components/Carousel.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
+export function CarouselSize() {
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      className="w-full max-w-sm"
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  );
+}