Gallery

src/app/join/page.tsx

@@ -295,7 +295,7 @@ export default function JoinPage() {
                     <b>When:</b> Sept. 29 - 7:00-8:30PM
                   </p>
                   <p className="text-purple-400">
-                    <b>Where:</b> Location TBA!
+                    <b>Where:</b> Broida 1610
                   </p>
 
                   <p className="mt-8">

src/app/media/page.tsx

@@ -7,6 +7,20 @@ import ImageCard from "@/components/image-card";
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 
+const imagesWelcomeWeek25 = [
+  {
+    src: "/media/WelcomeWeek25/welcome-week-25-3.jpg",
+    alt: "Welcome Week 2025",
+  },
+  {
+    src: "/media/WelcomeWeek25/welcome-week-25-2.jpg",
+    alt: "Welcome Week 2025",
+  },
+  {
+    src: "/media/WelcomeWeek25/welcome-week-25-1.jpg",
+    alt: "Welcome Week 2025",
+  },
+];
 const images25 = [
   {
     src: "/media/25/team.jpg",
@@ -45,35 +59,35 @@ const images25 = [
 const imagesSoCalShootout24 = [
   {
     src: "/media/SoCalShootoutNov2024/1.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
   {
     src: "/media/SoCalShootoutNov2024/2.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
   {
     src: "/media/SoCalShootoutNov2024/3.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
   {
     src: "/media/SoCalShootoutNov2024/4.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
   {
     src: "/media/SoCalShootoutNov2024/5.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
   {
     src: "/media/SoCalShootoutNov2024/6.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
   {
     src: "/media/SoCalShootoutNov2024/7.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
   {
     src: "/media/SoCalShootoutNov2024/8.jpg",
-    alt: "24",
+    alt: "SoCalShootout24",
   },
 ];
 
@@ -180,28 +194,36 @@ export default function MediaPage() {
       </div>
       <div className="bg-black bg-opacity-70 p-8">
         <div className="flex flex-col items-center text-white">
-          <h1 className="mb-16 mt-16 lg:ml-64 lg:mr-64">PHOTO GALLERY</h1>
+          <h1 className="mb-4 mt-16 lg:ml-64 lg:mr-64">PHOTO GALLERY</h1>
           <div className="flex flex-col items-center text-white">
-            <h2 className="mb-16 mt-8 text-2xl font-bold text-white lg:ml-64 lg:mr-64">
+            <h2 className="mb-8 mt-16 text-2xl font-bold text-white lg:ml-64 lg:mr-64">
+              Welcome Week 2025
+            </h2>
+            <div className="grid grid-cols-2 justify-items-center md:grid-cols-4 lg:mx-32 ">
+              {imagesWelcomeWeek25.map((image, index) => (
+                <ImageCard key={index} src={image.src} alt={image.alt} />
+              ))}
+            </div>
+            <h2 className="mb-8 mt-16 text-2xl font-bold text-white lg:ml-64 lg:mr-64">
               2024-2025 Season
             </h2>
-            <div className="grid grid-cols-1 lg:grid-cols-2">
+            <div className="grid grid-cols-2 justify-items-center md:grid-cols-4 lg:mx-32">
               {images25.map((image, index) => (
                 <ImageCard key={index} src={image.src} alt={image.alt} />
               ))}
             </div>
-            <h2 className="mb-16 mt-8 text-2xl font-bold text-white lg:ml-64 lg:mr-64">
+            <h2 className="mb-8 mt-16 text-2xl font-bold text-white lg:ml-64 lg:mr-64">
               SoCal Shootout
             </h2>
-            <div className="grid grid-cols-1 lg:grid-cols-2">
+            <div className="grid grid-cols-2 justify-items-center md:grid-cols-4 lg:mx-32">
               {imagesSoCalShootout24.map((image, index) => (
                 <ImageCard key={index} src={image.src} alt={image.alt} />
               ))}
             </div>
-            <h2 className="mb-16 mt-8 text-2xl font-bold text-white lg:ml-64 lg:mr-64">
+            <h2 className="mb-8 mt-16 text-2xl font-bold text-white lg:ml-64 lg:mr-64">
               2023-2024 Season
             </h2>
-            <div className="grid grid-cols-1 lg:grid-cols-2">
+            <div className="grid grid-cols-2 justify-items-center md:grid-cols-4 lg:mx-32">
               {images24.map((image, index) => (
                 <ImageCard key={index} src={image.src} alt={image.alt} />
               ))}

src/app/page.tsx

@@ -126,7 +126,7 @@ export default function HomePage() {
               playing
               loop
               muted={true}
-              url="home/ucsb-flyover.mp4"
+              url="home/fastest-lap.mp4"
               height={(calcWidth / 16) * 9}
               width={calcWidth}
               controls={false}
@@ -291,14 +291,14 @@ export default function HomePage() {
         <div
           className=""
           style={{
-            backgroundImage: "url('home/fsae.jpg')",
+            backgroundImage: "url('media/WelcomeWeek25/welcome-week-25-3.jpg')",
             backgroundSize: "cover",
             backgroundPosition: "center",
             backgroundRepeat: "no-repeat",
           }}
         >
           <div className="bg-black bg-opacity-70 p-16">
-            <div className="flex flex-col items-center justify-center text-center text-white lg:mb-48 lg:ml-64 lg:mr-64 lg:mt-32">
+            <div className="flex flex-col items-center justify-center text-center text-white lg:mb-48 lg:ml-64 lg:mr-64 lg:mt-16">
               <h1 className="p-16">ABOUT FSAE</h1>
               <p className="text-xl">
                 FSAE Electric, initiated in 2013, is a cutting-edge addition to

src/components/icons/expand.tsx

@@ -0,0 +1,29 @@
+export default function ExpandIcon({ className }: { className: string }) {
+  return (
+    <div className={className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="lucide
+        lucide-expand-icon
+        lucide-expand"
+      >
+        <path d="m15 15 6 6" />
+        <path d="m15 9 6-6" />
+        <path d="M21 16v5h-5" />
+        <path d="M21 8V3h-5" />
+        <path d="M3 16v5h5" />
+        <path d="m3 21 6-6" />
+        <path d="M3 8V3h5" />
+        <path d="M9 9 3 3" />
+      </svg>
+    </div>
+  );
+}

src/components/image-card.tsx

@@ -1,24 +1,48 @@
-import React from "react";
+import { useState } from "react";
 import Image from "next/image";
+import ExpandIcon from "./icons/expand";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 
 interface ImageCardProps {
   src: string;
   alt: string;
 }
 
 const ImageCard: React.FC<ImageCardProps> = ({ src, alt }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <div className="m-4">
-      <Image
-        src={src}
-        alt={alt}
-        width={300}
-        height={200}
-        layout="responsive"
-        className="rounded-lg shadow-md"
-        loading="lazy"
-      />
-    </div>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <div className="group relative m-2 cursor-pointer transition-transform duration-200 hover:scale-105">
+          <Image
+            src={src}
+            alt={alt}
+            width={300}
+            height={200}
+            className="rounded-lg object-cover shadow-md"
+            loading="lazy"
+            style={{ width: "300px", height: "200px" }}
+          />
+          <div className="absolute right-2 top-2 rounded-full bg-black  bg-opacity-40 p-2 opacity-0 group-hover:opacity-100">
+            <ExpandIcon className="text-white" />
+          </div>
+        </div>
+      </DialogTrigger>
+      <DialogContent className="max-w-4xl bg-black p-0">
+        <div className="relative">
+          <Image
+            src={src}
+            alt={alt}
+            width={800}
+            height={600}
+            quality={100}
+            className="h-auto w-full rounded-lg"
+            style={{ objectFit: "contain" }}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 };
 

src/components/ui/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full bg-black bg-opacity-40 p-2 transition-all hover:bg-black hover:opacity-100 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>