Update nixpacks.toml

Made everything up to date, added linktree redirect, added robocup trailer, updated the OAH for the website, updated board members.

README.md

@@ -8,11 +8,17 @@ This site is automatically deployed to netlify. Pushing to the `main` branch wil
 
 Please create a new branch for development (i.e. `[NAME]-dev`). Pushing directly to main is not advised, as changes will go straight into production. Once you are ready to merge your changes, create a pull request and request a review from a webmaster.
 
+### Setup
+
+1. Install [bun](https://bun.sh) if you haven't already
+2. Clone the repository
+3. Run `bun install` to install dependencies
+
 ### Testing
 
-To build the site, run `pnpm build`.
+To build the site, run `bun run build`.
 
-To view the site on your local network, run `pnpm dev`. View the site at [localhost:4321](http://localhost:4321).
+To view the site on your local network, run `bun run dev`. View the site at [localhost:4321](http://localhost:4321).
 
 The site will automatically rebuild on changes as long as the development server is running.
 
@@ -24,4 +30,16 @@ Create a `.env` file in the root directory of the project. This file should cont
 -   PUBLIC_DISCORD_WEBHOOK_LINK
 -   PUBLIC_SLACK_WEBHOOK_LINK
 
-If you do not include this in the .env file, the site will give you an error.
+If you do not include these variables in the .env file, the site will give you an error.
+
+### Project Structure
+
+```
+├── src/
+│ ├── components/ # Reusable components
+│ ├── data/ # JSON data files
+│ ├── layouts/ # Page layouts
+│ └── pages/ # Page components
+├── public/ # Static assets
+└── astro.config.mjs # Astro configuration
+```

astro.config.mjs

@@ -3,6 +3,9 @@ import tailwind from "@astrojs/tailwind";
 import preact from "@astrojs/preact";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
+import icon from "astro-icon";
+
+import node from "@astrojs/node";
 
 // https://astro.build/config
 export default defineConfig({
@@ -15,5 +18,10 @@ export default defineConfig({
         react({
             include: ["**/react/*"],
         }),
+        icon(),
     ],
+    output: "server",
+    adapter: node({
+        mode: "standalone",
+    }),
 });

nixpacks.toml

@@ -0,0 +1,4 @@
+[phases.setup]
+nixPkgs = ["nodejs_18", "bun"]
+aptPkgs = ["curl", "wget"]
+

package.json

@@ -1,38 +1,43 @@
 {
     "name": "IEEE_UCSD_WEBSITE",
     "type": "module",
-    "version": "1.0.0",
+    "version": "1.2.0",
     "scripts": {
         "dev": "astro dev",
-        "start": "astro dev",
+        "start": "node dist/server/entry.mjs",
         "build": "astro check && astro build",
         "preview": "astro preview",
         "astro": "astro"
     },
     "dependencies": {
-        "@astrojs/check": "^0.5.9",
-        "@astrojs/mdx": "^2.2.0",
-        "@astrojs/preact": "^3.1.1",
-        "@astrojs/react": "^3.1.0",
+        "@astrojs/check": "^0.5.10",
+        "@astrojs/mdx": "^2.3.1",
+        "@astrojs/node": "^8.3.3",
+        "@astrojs/preact": "^3.5.3",
+        "@astrojs/react": "^3.6.2",
         "@astrojs/tailwind": "^5.1.0",
-        "@fontsource-variable/epilogue": "^5.0.13",
-        "@fontsource-variable/josefin-sans": "^5.0.20",
-        "@fontsource-variable/lora": "^5.0.17",
-        "@fontsource/open-sans": "^5.0.27",
-        "@fontsource/vollkorn": "^5.0.19",
-        "astro": "^4.5.7",
-        "framer-motion": "^11.0.15",
-        "iconify-icon": "^2.0.0",
-        "preact": "^10.20.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "tailwindcss": "^3.4.1",
-        "typescript": "^5.4.2"
+        "@fontsource-variable/epilogue": "^5.1.0",
+        "@fontsource-variable/josefin-sans": "^5.1.0",
+        "@fontsource-variable/lora": "^5.1.0",
+        "@fontsource/open-sans": "^5.1.0",
+        "@fontsource/vollkorn": "^5.1.0",
+        "@iconify-json/ic": "^1.2.0",
+        "@iconify-json/mdi": "^1.2.0",
+        "astro": "^4.15.6",
+        "astro-icon": "^1.1.1",
+        "framer-motion": "^11.5.4",
+        "preact": "^10.24.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "tailwindcss": "^3.4.11",
+        "typescript": "^5.6.2"
     },
     "devDependencies": {
-        "@tailwindcss/forms": "^0.5.7",
-        "@types/jquery": "^3.5.29",
-        "@types/node": "^20.11.30",
-        "sass": "^1.72.0"
+        "@tailwindcss/forms": "^0.5.9",
+        "@types/jquery": "^3.5.30",
+        "@types/node": "^20.16.5",
+        "@types/react": "^18.3.5",
+        "@types/react-dom": "^18.3.0",
+        "sass": "^1.78.0"
     }
 }

src/components/react/EventList.jsx

@@ -10,7 +10,7 @@ const EventList = ({ CALENDAR_API_KEY }) => {
     useEffect(() => {
         const apiKey = CALENDAR_API_KEY;
         const calendarId =
-            "666sh64sku5n29qv2a2f4598jc@group.calendar.google.com";
+            "c_2bips5sphnrpa8ui4ike6k4b1s@group.calendar.google.com";
         const userTimeZone = "America/Los_Angeles";
 
         const loadGapiAndListEvents = () => {

src/components/react/OfficerCard.jsx

@@ -7,21 +7,36 @@ const OfficerCard = ({
     email,
     onMustahsinClicked,
 }) => {
+    const [imageSrc, setImageSrc] = React.useState(
+        "https://placehold.co/500?text=IEEE%20@%20UCSD"
+    );
+
     const handleImageClick = () => {
         if (name === "Mustahsin Zarif") {
             onMustahsinClicked();
         }
     };
 
+    React.useEffect(() => {
+        if (picture) {
+            const img = new Image();
+            img.onload = () => {
+                setImageSrc(picture);
+            };
+            img.src = picture;
+        }
+    }, [picture]);
+
     return (
         <div
             className={`flex flex-col justify-center content-center mx-12 items-center w-64 rounded-lg`}
         >
             <img
                 className="w-26 h-auto sm:h-64 object-cover rounded-3xl cursor-pointer"
-                src={picture}
+                src={imageSrc}
                 alt={`Picture of ${name}`}
                 onClick={handleImageClick}
+                loading="eager"
             />
             <div className="p-4">
                 <h3 className="text-lg font-bold text-center">{name}</h3>

src/components/react/OfficerTabs.jsx

@@ -2,6 +2,11 @@ import React, { useState } from "react";
 import OfficerCard from "./OfficerCard.jsx";
 import { AnimatePresence } from "framer-motion";
 
+const getImageWithFallback = (imagePath, useSpecialImage) => {
+    if (useSpecialImage) return "/officers/zarif.jpg";
+    return imagePath;
+};
+
 const OfficerTabs = ({ officers }) => {
     const [selectedType, setSelectedType] = useState("All");
     const [mustahsinClickCount, setMustahsinClickCount] = useState(0);
@@ -54,11 +59,10 @@ const OfficerTabs = ({ officers }) => {
                     <OfficerCard
                         key={officer.email}
                         {...officer}
-                        picture={
+                        picture={getImageWithFallback(
+                            officer.picture,
                             useMustahsinImage
-                                ? "/officers/mustahsin.jpg"
-                                : officer.picture
-                        }
+                        )}
                         onMustahsinClicked={handleMustahsinClicked}
                     />
                 ))}

src/data/navbarPages.json

@@ -15,6 +15,10 @@
         "name": "COMMITTEES",
         "url": "/committees"
     },
+    {
+        "name": "LINKTREE",
+        "url": "https://linktr.ee/ieeeucsd"
+    },
     {
         "name": "CONTACT US",
         "url": "/contact"

src/data/officers.json

@@ -1,239 +1,220 @@
 [
-    {
-        "name": "Tasnia Jamal",
-        "position": "President",
-        "picture": "/officers/tasnia.jpeg",
-        "email": "tjamal@ieee.org",
-        "type": ["Executives"]
-    },
-    {
-        "name": "Brigette Hacia",
-        "position": "Vice Chair Internal",
-        "picture": "/officers/brigette.jpg",
-        "email": "bhacia@ucsd.edu",
-        "type": ["Executives", "Internal"]
-    },
-    {
-        "name": "Jason Liang",
-        "position": "Vice Chair Events",
-        "picture": "/officers/jason.jpg",
-        "email": "jsliang@ucsd.edu",
-        "type": ["Executives", "Events"]
-    },
-    {
-        "name": "Yash Puneet",
-        "position": "Vice Chair Projects",
-        "picture": "/officers/yash.jpg",
-        "email": "ypuneet@ucsd.edu",
-        "type": ["Executives", "Projects"]
-    },
-    {
-        "name": "Matthew Yik",
-        "position": "Vice Chair Finance",
-        "picture": "/officers/matthewyik.jpg",
-        "email": "myik@ucsd.edu",
-        "type": ["Executives"]
-    },
-    {
-        "name": "Georolyn Ngo",
-        "position": "Events Coordinator",
-        "picture": "/officers/temp.png",
-        "email": "ngngo@ucsd.edu",
-        "type": ["Executives", "Events"]
-    },
-    {
-        "name": "Sukanya Krishna",
-        "position": "Events Coordinator",
-        "picture": "/officers/temp.png",
-        "email": "sskrishn@ucsd.edu",
-        "type": ["Executives", "Events"]
-    },
-    {
-        "name": "Daniel Chen",
-        "position": "Vice Chair External",
-        "picture": "/officers/daniel.jpg",
-        "email": "dychen@ucsd.edu"
-    },
-    {
-        "name": "Thanh Nguyen",
-        "position": "Project Space Chair",
-        "picture": "/officers/derek.jpg",
-        "email": "tdn003@ucsd.edu",
-        "type": ["Projects"]
-    },
     {
         "name": "Mustahsin Zarif",
-        "position": "Robocup Soccer Chair",
-        "picture": "/officers/mustahsin.jpg",
+        "position": "Chair",
+        "picture": "/officers/zarif.jpg",
         "email": "mmzarif@ucsd.edu",
-        "type": ["Projects"]
-    },
-    {
-        "name": "Rohil Kadekar",
-        "position": "Robocup Soccer Chair",
-        "picture": "/officers/temp.png",
-        "email": "rkadekar@ucsd.edu",
-        "type": ["Projects"]
-    },
-    {
-        "name": "Francisco Gutierrez",
-        "position": "Supercomputing Chair",
-        "picture": "/officers/temp.png",
-        "email": "ffgutierrez@ucsd.edu",
-        "type": ["Projects"]
-    },
-    {
-        "name": "Rana Singh",
-        "position": "Quarterly Projects Chair",
-        "picture": "/officers/temp.png",
-        "email": "ras010@ucsd.edu",
-        "type": ["Projects"]
-    },
-    {
-        "name": "Joshua Lapidario",
-        "position": "Quarterly Projects Chair",
-        "picture": "/officers/temp.png",
-        "email": "jlapidar@ucsd.edu",
-        "type": ["Projects"]
-    },
-    {
-        "name": "Sankalp Kaushik",
-        "position": "Professional Chair",
-        "picture": "/officers/sankalp.jpg",
-        "email": "sskaushi@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Rafaella Gomes",
-        "position": "Professional Chair",
-        "picture": "/officers/rafaella.jpg",
-        "email": "ragomes@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Girish Krishnan",
-        "position": "Technical Chair",
-        "picture": "/officers/temp.png",
-        "email": "gikrishnan@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Shaun Garcia",
-        "position": "Technical Chair",
-        "picture": "/officers/shaun.jpg",
-        "email": "scgarcia@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Devanshi Jain",
-        "position": "Technical Chair",
-        "picture": "/officers/devanshi.jpg",
-        "email": "djain@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Kaitlin Calimbahin",
-        "position": "Technical Chair",
-        "picture": "/officers/kaitlin.jpg",
-        "email": "kcalimbahin@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Joshua Choi",
-        "position": "Outreach Chair",
-        "picture": "/officers/joshua.jpg",
-        "email": "jmc008@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Ashlee Young",
-        "position": "Outreach Chair",
-        "picture": "/officers/temp.png",
-        "email": "asy001@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Marc Reta",
-        "position": "Social Chair",
-        "picture": "/officers/temp.png",
-        "email": "mreta@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Shipra Gudekar",
-        "position": "Social Chair",
-        "picture": "/officers/shipra.jpg",
-        "email": "sgudekar@ucsd.edu",
-        "type": ["Events"]
-    },
-    {
-        "name": "Lisa Liu",
-        "position": "Social Chair",
-        "picture": "/officers/temp.png",
-        "email": "lil043@ucsd.edu",
-        "type": ["Events"]
+        "type": ["Executives"]
     },
     {
         "name": "Stephanie Xu",
-        "position": "Creative Director",
-        "picture": "/officers/stephanie.jpg",
+        "position": "Vice Chair Internal",
+        "picture": "/officers/steph.jpg",
         "email": "sxxu@ucsd.edu",
-        "type": ["Internal"]
-    },
-    {
-        "name": "Jayendra Mangal",
-        "position": "Webmaster",
-        "picture": "/officers/jayendra.jpg",
-        "email": "jmangal@ucsd.edu",
-        "type": ["Internal"]
+        "type": ["Executives", "Internal"]
     },
     {
         "name": "Charles Nguyen",
         "position": "Webmaster",
-        "picture": "/officers/temp.png",
+        "picture": "/officers/charles.jpg",
         "email": "cmn010@ucsd.edu",
         "type": ["Internal"]
     },
     {
-        "name": "Stella Ji",
+        "name": "Shipra Gudekar",
+        "position": "Vice Chair Events",
+        "picture": "/officers/shipra.jpg",
+        "email": "sgudekar@ucsd.edu",
+        "type": ["Executives", "Events"]
+    },
+    {
+        "name": "Rohil Kadekar",
+        "position": "Vice Chair Projects",
+        "picture": "/officers/rohil.jpg",
+        "email": "rkadekar@ucsd.edu",
+        "type": ["Executives", "Projects"]
+    },
+    {
+        "name": "Lisa Liu",
+        "position": "Vice Chair Finance",
+        "picture": "/officers/lisa.jpg",
+        "email": "lil043@ucsd.edu",
+        "type": ["Executives"]
+    },
+    {
+        "name": "Erik Duarte",
+        "position": "Events Coordinator",
+        "picture": "/officers/erik.jpg",
+        "email": "Erduarte@ucsd.edu",
+        "type": ["Executives", "Events"]
+    },
+    {
+        "name": "Sin Yin Yang",
+        "position": "Events Coordinator",
+        "picture": "/officers/sinyin.jpg",
+        "email": "siy015@ucsd.edu",
+        "type": ["Executives", "Events"]
+    },
+    {
+        "name": "Rana Singh",
+        "position": "Vice Chair External",
+        "picture": "/officers/rana.jpg",
+        "email": "ras010@ucsd.edu",
+        "type": ["Executives"]
+    },
+    {
+        "name": "Rafaella Gomes",
+        "position": "Project Space Chair",
+        "picture": "/officers/rafaella.jpg",
+        "email": "ragomes@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Terri Tai",
+        "position": "Robocup Soccer Chair",
+        "picture": "/officers/terri.jpg",
+        "email": "y2tai@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Raymond Rada",
+        "position": "Robocup Soccer Chair",
+        "picture": "/officers/raymond.jpg",
+        "email": "rrada@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Philip Pincencia",
+        "position": "Signal Processing Chair",
+        "picture": "/officers/philip.jpg",
+        "email": "ppincencia@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Ritoban Roy-Chowdhury",
+        "position": "Supercomputing Chair",
+        "picture": "/officers/ritoban.jpg",
+        "email": "rroychowdhury@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Akhil Ram Shankar",
+        "position": "Quarterly Projects Chair",
+        "picture": "/officers/akhil.jpg",
+        "email": "aramshankar@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Jonathan Zhou",
+        "position": "Quarterly Projects Chair",
+        "picture": "/officers/jonathan.jpg",
+        "email": "jtzhou@ucsd.edu",
+        "type": ["Projects"]
+    },
+    {
+        "name": "Ashlee Young",
+        "position": "Professional Chair",
+        "picture": "/officers/ashlee.jpg",
+        "email": "asy001@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Allie Dinh",
+        "position": "Professional Chair",
+        "picture": "/officers/allie.jpg",
+        "email": "ald012@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Fahad Alkhazam",
+        "position": "Technical Chair",
+        "picture": "/officers/fahad.jpg",
+        "email": "falkhazam@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Pranav Mehta",
+        "position": "Technical Chair",
+        "picture": "/officers/pranav.jpg",
+        "email": "p3mehta@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Ridhi Srikanth",
+        "position": "Technical Chair",
+        "picture": "/officers/ridhi.jpg",
+        "email": "rsrikanth@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Dihan Lin",
+        "position": "Outreach Chair",
+        "picture": "/officers/dihan.jpg",
+        "email": "dil009@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Anika Agarwal",
+        "position": "Outreach Chair",
+        "picture": "/officers/anika.jpg",
+        "email": "ana012@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Anupama Nambiar",
+        "position": "Social Chair",
+        "picture": "/officers/anu.jpg",
+        "email": "annambiar@ucsd.edu",
+        "type": ["Events"]
+    },
+    {
+        "name": "Dhruv Roy Choudhary",
+        "position": "Social Chair",
+        "picture": "/officers/dhruv.jpg",
+        "email": "dchoudhary@ucsd.edu",
+        "type": ["Events"]
+    },
+
+    {
+        "name": "Andy Smithwick",
         "position": "Webmaster",
-        "picture": "/officers/stella.jpeg",
+        "picture": "/officers/andy.jpg",
+        "email": "asmithwick@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Shing Hung",
+        "position": "Webmaster",
+        "picture": "/officers/shing.jpg",
+        "email": "s1hung@ucsd.edu",
+        "type": ["Internal"]
+    },
+    {
+        "name": "Stella Ji",
+        "position": "Marketing Chair",
+        "picture": "/officers/stella.jpg",
         "email": "seji@ucsd.edu",
         "type": ["Internal"]
     },
     {
-        "name": "Kevin Chang",
+        "name": "Lauren Vo",
         "position": "Marketing Chair",
-        "picture": "/officers/kevin.jpg",
-        "email": "kjchang@ucsd.edu",
+        "picture": "/officers/lauren.jpg",
+        "email": "lavo@ucsd.edu",
         "type": ["Internal"]
     },
     {
-        "name": "Vuong Bui",
-        "position": "Marketing Chair",
-        "picture": "/officers/vuong.jpg",
-        "email": "v2bui@ucsd.edu",
-        "type": ["Internal"]
-    },
-    {
-        "name": "Joyce Zhou",
+        "name": "Wan-Rong (Emma) Leung",
         "position": "Design Chair",
-        "picture": "/officers/joyce.jpg",
-        "email": "jiz152@ucsd.edu",
+        "picture": "/officers/emma.jpg",
+        "email": "waleung@ucsd.edu",
         "type": ["Internal"]
     },
     {
-        "name": "Kate Zhou",
+        "name": "Christine Uy",
         "position": "Design Chair",
-        "picture": "/officers/kate.jpg",
-        "email": "yuz235@ucsd.edu",
+        "picture": "/officers/christine.jpg",
+        "email": "c1uy@ucsd.edu",
         "type": ["Internal"]
-    },
-    {
-        "name": "Khai Vu",
-        "position": "Supercomputing Chair",
-        "picture": "/officers/khai.jpg",
-        "email": "k6vu@ucsd.edu",
-        "type": ["Projects"]
     }
 ]

src/layouts/Layout.astro

@@ -3,7 +3,6 @@ import Navbar from "../components/Navbar.astro";
 import Footer from "../components/Footer.astro";
 import "../styles/hamburgers.scss";
 import "../styles/global.scss";
-import "iconify-icon";
 import "@fontsource-variable/epilogue";
 const { title, description, keywords, url, image } = Astro.props;
 ---
@@ -12,12 +11,7 @@ const { title, description, keywords, url, image } = Astro.props;
     <head>
         <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"
         ></script>
-        <script
-            src="https://cdn.jsdelivr.net/npm/iconify-icon@2.0.0/dist/iconify-icon.min.js"
-        ></script>
-        <script
-            src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"
-        ></script>
+
         <script is:inline src="https://apis.google.com/js/api.js"></script>
         <script
             is:inline
@@ -26,6 +20,9 @@ const { title, description, keywords, url, image } = Astro.props;
             is:inline
             src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"
         ></script>
+        <script
+            src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"
+        ></script>
     </head>
 
     <body class="">

src/pages/index.astro

@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import OfficerCard from "../components/react/OfficerCard.jsx";
 import Officers from "../data/officers.json";
 import OfficerTabs from "../components/react/OfficerTabs.jsx";
-import "iconify-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <html lang="en">
@@ -22,26 +22,26 @@ import "iconify-icon";
                     >
                         Join the 2nd largest IEEE student branch in the US!
                     </div>
-                    <div class="scale-[600%] mt-10 space-x-2">
+                    <div class="scale-[600%] mt-10 space-x-2 flex flex-row">
                         <a href="https://discord.gg/XxfjqZSjca">
-                            <iconify-icon
-                                icon="ic:baseline-discord"
+                            <Icon
+                                name="ic:baseline-discord"
                                 class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-[#5562ea]"
-                            ></iconify-icon>
+                            />
                         </a>
 
                         <a href="https://www.facebook.com/ieeeucsd">
-                            <iconify-icon
-                                icon="ic:baseline-facebook"
+                            <Icon
+                                name="ic:baseline-facebook"
                                 class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-[#0863f7]"
-                            ></iconify-icon>
+                            />
                         </a>
 
                         <a href="https://www.instagram.com/ieee.ucsd">
-                            <iconify-icon
-                                icon="mdi:instagram"
+                            <Icon
+                                name="mdi:instagram"
                                 class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-[#ff68cd]"
-                            ></iconify-icon>
+                            />
                         </a>
                     </div>
                 </div>
@@ -65,6 +65,48 @@ import "iconify-icon";
                     ways to get involved!
                 </div>
             </div>
+            <div
+                class="bg-ieee h-[35em] my-auto rounded-t-[10%] rounded-b-[10%] flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
+                style="background-image: url('/backgrounds/robocup.jpg');"
+            >
+                <!-- BLUE BG -->
+                <div
+                    class="flex flex-col items-center justify-center text-center"
+                >
+                    <div
+                        class="text-[3.2em] text-white font-bold mb-4 w-[11em]"
+                    >
+                        Watch our trailer(s)!
+                    </div>
+
+                    <!-- <div class="scale-[400%] mt-10 space-x-2">
+                    <a href="https://www.instagram.com/ieee.ucsd">
+                        <iconify-icon
+                            icon="mdi:calendar"
+                            class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-gray-500"
+                        ></iconify-icon>
+                    </a>
+                </div> -->
+                </div>
+            </div>
+            <div
+                class="bg-white h-[60em] lg:h-[60em] flex justify-center items-center"
+            >
+                <div class="flex flex-wrap justify-center space-y-20">
+                    <div
+                        class="flex flex-col justify-center items-center w-full px-4 lg:px-8"
+                    >
+                        <div class="text-[3.2em] text-ieee font-bold mb-4">
+                            QP Trailer
+                        </div>
+                        <iframe
+                            src="https://drive.google.com/file/d/1OmIFFEqRWpzVRQr5I5teUYRlA66noqFB/preview"
+                            width="860"
+                            height="620"
+                            allow="autoplay"></iframe>
+                    </div>
+                </div>
+            </div>
             <!-- BLUE BG -->
             <div
                 class="bg-ieee h-[35em] my-auto rounded-t-[10%] rounded-b-[10%] flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
@@ -114,13 +156,13 @@ import "iconify-icon";
                             class="flex flex-col items-center justify-center w-full lg:w-1/2 p-4"
                         >
                             <div
-                                class="text-center text-ieee mb-12 text-[1.8em] font-bold"
+                                class="text-center text-ieee text-[1.8em] font-bold"
                             >
                                 Each officer has their own OAH, which can be
                                 seen here:
                             </div>
                             <iframe
-                                src="https://calendar.google.com/calendar/embed?src=c_5c08a366ecd44f440431cb647cf9b390a2f62473b4d19c8c355b32a411225067%40group.calendar.google.com&ctz=America%2FLos_Angeles"
+                                src="https://calendar.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showCalendars=0&mode=MONTH&height=600&wkst=1&bgcolor=%23FFFFFF&src=c_62493071bab19c7c60d103460604dc7b3b569ffc1e58a42617978f626dff02ac%40group.calendar.google.com&color=%232952A3&ctz=America%2FLos_Angeles"
                                 style="border: 0"
                                 class="w-full h-[450px] max-w-4xl"
                                 loading="lazy"></iframe>