src/components/signal/Competition.astro

@@ -0,0 +1,33 @@
+---
+import { LiaDotCircle } from "react-icons/lia";
+import Link from "next/link";
+const {picture, name, description, link} = Astro.props;
+---
+<div class = "text-white relative my-[3%]" >
+    
+    <img src = {picture} alt = "signal" class = "w-full object-cover aspect-[1512/526] opacity-25">
+
+    <div class = "w-full flex justify-evenly absolute bottom-[28%] ml-[5%]">
+
+        <div class = "flex items-center text-[2.5vw] font-extralight">
+            <LiaDotCircle className=" mr-[1vw] text-[2.5vw]"/>
+            <p>
+                Competition
+            </p>
+        </div>
+    
+        <div class = "text-[1.5vw] font-extralight tracking-wider">
+            <p class = "w-[35vw] mb-[3%] mt-[40vh]">
+                {name}
+            </p>
+            <p class = "mb-[5%]">
+                {description}
+            </p>
+            <Link href = {link} target="_blank" className="text-[1vw] border-white/70 border-[0.1vw] py-[3%] px-[15%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+                Link
+            </Link>
+        </div>
+        
+    </div>
+    
+</div>

src/pages/404.astro

@@ -5,10 +5,10 @@ import Link from "next/link";
 
 <Layout>
 
-    <div class = "w-fit h-screen flex flex-col items-center relative">
+    <div class = "w-fit h-fit flex flex-col items-center relative">
 
         <img src = "/404.png" alt = "404 shing" class = "mr-[11%]">
-        <div class = "flex flex-col items-center absolute bottom-[27%]">
+        <div class = "flex flex-col items-center absolute bottom-[37%]">
             <p class = "font-extralight text-[1.2vw]">
                 Oops! You're Lost in the Circuit! 🔌⚡
             </p>

src/pages/robocup.astro

@@ -11,6 +11,7 @@ import Join from "../components/robocub/Join.astro";
 import Contacts from "../components/robocub/Contacts.astro";
 import Subteams from "../components/robocub/Subteams.astro";
 import Timeline from "../components/qp/Timeline.astro";
+import Competition from "../components/signal/Competition.astro";
 ---
 
 <Layout>
@@ -23,6 +24,7 @@ import Timeline from "../components/qp/Timeline.astro";
             Past Team Description Paper
         </Link>
     </div>
+    <Competition picture = "../public/robocup.png" name = "Preparing for Salvador 2025" description = "Recently the team went to our first ever competition in Germany!" link = "https://www.google.com/"/>
     <Subteams />
     <Timeline />
     <Join/>

src/pages/signal.astro

@@ -3,12 +3,13 @@ import Layout from "../layouts/Layout.astro";
 import Contacts from "../components/signal/Contacts.astro";
 import About from "../components/core/About.astro";
 import Title from "../components/core/Title.astro";
+import Competition from "../components/signal/Competition.astro"
 ---
 
 <Layout>
     <p class="text-ieee-yellow text-[1.2vw] absolute top-[27.5vh] left-[15.5vw]">COMING SOON (New UCSD IEEE branch)</p>
     <Title title="Signal Processing" />
     <About title="What is Signal Processing" text="Currently, we are focusing on the IEEE Signal Processing Cup (an annual signal processing competition). However, we might do projects in the future."/>
+    <Competition picture = "../public/signal.png" name = "IEEE Signal Processing Cup" link = "https://www.google.com/"/>
     <Contacts />
-
 </Layout>