Merge pull request #89 from acm-ucr/dev

theo the goat

src/app/about/page.tsx

@@ -6,7 +6,7 @@ import About from "@/components/about/About";
 
 const page = () => {
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col gap-10">
       <About title="About" />
       <Unite />
       <Do />

src/components/About.tsx

@@ -55,10 +55,12 @@ const About = () => {
             },
           }}
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Embark on a journey to a galaxy far, far away with the Star Wars Club
+          at UCR! Whether you’re a Jedi, Sith, bounty hunter, or just a fan of
+          podracing, this is the place for you. Connect with fellow enthusiasts,
+          explore the Star Wars universe through watch parties, game nights,
+          trivia challenges, and lightsaber duels, and share your passion for
+          one of the most iconic franchises in history.
         </motion.p>
         <motion.p
           className="md:text:xl text-lg text-white lg:text-2xl"
@@ -71,10 +73,9 @@ const About = () => {
             },
           }}
         >
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-          proident, sunt in culpa qui officia deserunt mollit anim id est
-          laborum.
+          Join us as we dive into the lore, debate fan theories, and celebrate
+          the films, TV series, books, and games that continue to inspire
+          generations. May the Force be with you, always.
         </motion.p>
       </motion.div>
     </motion.div>

src/components/Board.tsx

@@ -72,6 +72,7 @@ const Board = () => {
               key={index}
               topText={item.topText}
               bottomText={item.bottomText}
+              image={item.image}
             />
           </motion.div>
         ))}

src/components/Card.tsx

@@ -1,17 +1,26 @@
-import Image from "next/image";
+import Image, { StaticImageData } from "next/image";
 import cardframe from "@/public/frame/cardframe.svg";
 
 const Card = ({
   topText,
   bottomText,
+  image,
 }: {
   topText: string;
   bottomText: string;
+  image: StaticImageData | string;
 }) => {
   return (
     <div className="flex flex-col justify-center">
       <p className="-mb-3 text-3xl font-bold">{topText}</p>
-      <Image src={cardframe} alt="cardframe" />
+      <div className="relative flex items-center justify-center">
+        <Image src={cardframe} alt="cardframe" className="bg-transparent" />
+        <Image
+          src={image}
+          alt="board"
+          className="absolute inset-0 m-8 h-5/6 w-4/5 object-cover"
+        />
+      </div>
       <p className="self-end text-3xl font-bold">{bottomText}</p>
     </div>
   );

src/components/Join.tsx

@@ -57,10 +57,11 @@ const Join = () => {
             className="flex w-11/12 justify-center md:w-full"
           >
             <div className="leading-[1.6] text-white md:w-[70%] md:text-[20px] xl:w-[45%]">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
+              Ready to become part of a galaxy far, far away? The Star Wars Club
+              at UCR welcomes fans of all backgrounds to join our community of
+              Jedi, Sith, and everyone in between. Whether you’re here for the
+              epic battles, deep lore, or just want to connect with fellow Star
+              Wars enthusiasts, there’s a place for you in our galaxy.
             </div>
           </motion.div>
           <motion.div

src/components/What.tsx

@@ -67,21 +67,22 @@ const What = () => {
             initial="hidden"
             whileInView="visible"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            At the Star Wars Club at UCR, we immerse ourselves in the galaxy
+            far, far away through a variety of exciting activities. From hosting
+            movie marathons that span the Skywalker saga and beyond to animated
+            series like The Clone Wars and Rebels, we relive the adventures that
+            shaped generations.
           </motion.div>
           <motion.p
             className="text-base text-white sm:text-lg md:text-xl lg:text-2xl"
             variants={fadeIn}
             initial="hidden"
             whileInView="visible"
           >
-            Duis aute irure dolor in reprehenderit in voluptate velit esse
-            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-            cupidatat non proident, sunt in culpa qui officia deserunt mollit
-            anim id est laborum.
+            At its heart, the Star Wars Club is about building a community where
+            fans can connect, share their love for the franchise, and forge new
+            friendships while creating unforgettable memories. May the Force
+            guide us as we forge the future together!
           </motion.p>
         </motion.div>
       </motion.div>

src/components/about/Do.tsx

@@ -49,7 +49,7 @@ const Do = () => {
           variants={animatePopup}
           className="grid grid-cols-1 sm:grid-cols-2"
         >
-          <div className="ml-auto max-w-sm rounded-lg border border-sw-gold-100 bg-gradient-to-r from-[#15121A] from-10% via-[#2C2636] to-[#675980] p-6 text-center shadow-md">
+          <div className="shadow-m ml-auto max-w-sm rounded-lg border border-sw-gold-100 bg-gradient-to-r from-[#15121A] from-10% via-[#2C2636] to-[#675980] p-6 text-center">
             <h2 className="bg-gradient-to-b from-sw-gold-100 via-sw-white to-sw-gold-200 bg-clip-text text-4xl text-transparent">
               EVENTS
             </h2>
@@ -58,9 +58,11 @@ const Do = () => {
                 <Image src={EvBar} alt="mando" />
               </div>
             </div>
-            <p className="font-nunito text-xl text-white">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            <p className="font-nunito text-base text-white md:text-xl">
+              Join us for thrilling Star Wars-themed events, including movie
+              nights, trivia competitions, and lightsaber duels. Whether you're
+              a Jedi, Sith, or somewhere in between, our events bring fans
+              together for unforgettable adventures.
             </p>
           </div>
           <div className="mr-auto max-w-sm rounded-lg border border-sw-gold-100 bg-gradient-to-r from-[#15121A] from-10% via-[#2C2636] to-[#675980] p-6 text-center shadow-md">
@@ -72,9 +74,10 @@ const Do = () => {
                 <Image src={CoBar} alt="mando" />
               </div>
             </div>
-            <p className="font-nunito text-xl text-white">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            <p className="font-nunito text-base text-white md:text-xl">
+              Express your love for Star Wars by creating and showcasing your
+              own unique costumes. From iconic characters to original designs,
+              our cosplay community celebrates creativity and craftsmanship.
             </p>
           </div>
         </motion.div>
@@ -91,15 +94,15 @@ const Do = () => {
               <Image src={CreBar} alt="mando" />
             </div>
           </div>
-          <p className="font-nunito text-xl text-white">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat
+          <p className="font-nunito text-base text-white md:text-xl">
+            Unleash your imagination with art, writing, and design inspired by
+            the Star Wars universe. Share fanfiction, create stunning
+            illustrations, or collaborate on group projects that bring the
+            galaxy far, far away to life.
           </p>
         </motion.div>
 
-        <motion.div variants={animatePopup} className="">
+        <motion.div variants={animatePopup} className="mt-10 md:mt-0">
           <Button title={"SEE EVENTS"} link={"/events"} />
         </motion.div>
       </div>

src/components/about/Unite.tsx

@@ -4,24 +4,24 @@ import Title from "../Title";
 const Unite = () => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5 px-10 text-white md:flex-row md:gap-0">
-      {/* Left section for OUR MISSION */}
       <div className="flex w-2/3 flex-col items-center justify-center space-y-6">
         <div className="rounded-md border border-yellow-500 px-6 py-3">
           <h2 className="text-lg font-bold tracking-wide text-yellow-500">
             OUR MISSION
           </h2>
         </div>
       </div>
-      {/* Right section for Title and Mission Statement */}
       <div className="mr-[8%] flex w-full flex-col gap-9 text-left">
         <Title text="Enter Our Galaxy" />
         <p className="md:text:xl text-white sm:text-lg lg:text-3xl">
-          Mission Statement HERE.
           <span className="md:text:xl text-white sm:text-lg lg:text-2xl">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            The Star Wars Club at UCR unites fans of all backgrounds to
+            celebrate the Star Wars universe. Through events, creativity, and
+            discussions, we connect enthusiasts and inspire imagination while
+            embracing the timeless themes of hope, courage, and unity. We aim to
+            create a welcoming space to share adventures, build memories, and
+            forge friendships. Together, we bring the magic of a galaxy far, far
+            away to life. May the Force be with us!
           </span>
         </p>
       </div>

src/components/cosplays/Cosplay.tsx

@@ -74,7 +74,11 @@ const Cosplay = () => {
             key={index}
             className="w-1/4 sm:w-1/4"
           >
-            <Card topText={item.topText} bottomText={item.bottomText} />
+            <Card
+              topText={item.topText}
+              bottomText={item.bottomText}
+              image={item.image}
+            />
           </motion.div>
         ))}
       </motion.div>

src/components/gallery/Creation.tsx

@@ -65,7 +65,11 @@ const Creation = () => {
             key={index}
             className="w-1/4 sm:w-1/4"
           >
-            <Card topText={item.topText} bottomText={item.bottomText} />
+            <Card
+              topText={item.topText}
+              bottomText={item.bottomText}
+              image={item.image}
+            />
           </motion.div>
         ))}
       </motion.div>

src/components/history/HistoryBoard.tsx

@@ -28,7 +28,11 @@ const PastBoardMembers = () => {
       <div className="flex w-full flex-wrap justify-center gap-20">
         {ITEMS.slice(0, 3).map((item, index) => (
           <div key={index} className="w-1/4 sm:w-1/4">
-            <Card topText={item.topText} bottomText={item.bottomText} />
+            <Card
+              topText={item.topText}
+              bottomText={item.bottomText}
+              image={item.image}
+            />
           </div>
         ))}
       </div>

src/components/history/HistoryPast.tsx

@@ -27,7 +27,11 @@ const PastJediMasters = () => {
       <div className="flex w-full flex-wrap justify-center gap-20">
         {JEDIITEMS.map((item, index) => (
           <div key={index} className="w-1/4 sm:w-1/4">
-            <Card topText={item.topText} bottomText={item.bottomText} />
+            <Card
+              topText={item.topText}
+              bottomText={item.bottomText}
+              image={item.image}
+            />
           </div>
         ))}
       </div>

src/data/board.ts

@@ -1,26 +1,38 @@
+import Liam from "@/public/board/Liam.webp";
+import Jose from "@/public/board/Jose.webp";
+import Kurt from "@/public/board/Kurt.webp";
+import Noliver from "@/public/board/Noliver.webp";
+import Shivam from "@/public/board/Shivam.webp";
+import Aston from "@/public/board/Aston.webp";
 export const ITEMS = [
   {
-    topText: "Position1",
-    bottomText: "Name1",
+    topText: "President",
+    bottomText: "Aston",
+    image: Aston,
   },
   {
-    topText: "Postion2",
-    bottomText: "Name2",
+    topText: "Vice President",
+    bottomText: "Kurt",
+    image: Kurt,
   },
   {
-    topText: "Position3",
-    bottomText: "Name3",
+    topText: "Events",
+    bottomText: "Liam",
+    image: Liam,
   },
   {
-    topText: "Position4",
-    bottomText: "Name4",
+    topText: "Secretary",
+    bottomText: "Shivam",
+    image: Shivam,
   },
   {
-    topText: "Position5",
-    bottomText: "Name5",
+    topText: "Publicity",
+    bottomText: "Jose",
+    image: Jose,
   },
   {
-    topText: "Position6",
-    bottomText: "Name6",
+    topText: "Publicity",
+    bottomText: "Noliver",
+    image: Noliver,
   },
 ];

src/data/creation.ts

@@ -2,25 +2,31 @@ export const ITEMS = [
   {
     topText: "NAME",
     bottomText: "CREATION",
+    image: "",
   },
   {
     topText: "NAME",
     bottomText: "CREATION",
+    image: "",
   },
   {
     topText: "NAME",
     bottomText: "CREATION",
+    image: "",
   },
   {
     topText: "NAME",
     bottomText: "CREATION",
+    image: "",
   },
   {
     topText: "NAME",
     bottomText: "CREATION",
+    image: "",
   },
   {
     topText: "NAME",
     bottomText: "CREATION",
+    image: "",
   },
 ];

src/data/history.ts

@@ -1,16 +1,11 @@
-export interface Item {
-  topText: string;
-  bottomText: string;
-}
-
-export const ITEMS: Item[] = [
-  { topText: "NAME", bottomText: "GRAD YEAR" },
-  { topText: "NAME", bottomText: "GRAD YEAR" },
-  { topText: "NAME", bottomText: "GRAD YEAR" },
+export const ITEMS = [
+  { topText: "NAME", bottomText: "GRAD YEAR", image: "" },
+  { topText: "NAME", bottomText: "GRAD YEAR", image: "" },
+  { topText: "NAME", bottomText: "GRAD YEAR", image: "" },
 ];
 
-export const JEDIITEMS: Item[] = [
-  { topText: "NAME", bottomText: "" },
-  { topText: "NAME", bottomText: "" },
-  { topText: "NAME", bottomText: "" },
+export const JEDIITEMS = [
+  { topText: "NAME", bottomText: "", image: "" },
+  { topText: "NAME", bottomText: "", image: "" },
+  { topText: "NAME", bottomText: "", image: "" },
 ];