add links section to robocup page

src/components/main_page/Landing.astro

@@ -7,9 +7,9 @@ import { RiInstagramFill } from "react-icons/ri";
 import { MdEmail } from "react-icons/md";
 ---
 
-<div class="w-full flex justify-between space-x-2">
+<div class="w-full flex justify-between space-x-2 pt-[2%]">
   <div
-    class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
+    class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[45vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
   >
     <p
       data-inview
@@ -60,12 +60,12 @@ import { MdEmail } from "react-icons/md";
     </div>
   </div>
   <div
-    class="md:w-[46%] w-[40%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
+    class="md:w-[46%] w-[40%] md:h-[45vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
   >
     <Image
       src={landingimg}
       alt="circuit"
-      class="w-[95%] md:h-[40vw] h-[60vw] object-contain"
+      class="w-[95%] md:h-[45vw] h-[60vw] object-contain"
     />
   </div>
 </div>

src/data/roboLinks.json

@@ -0,0 +1,17 @@
+[
+    {
+        "text":"RoboCup Small-Size League",
+        "link":"https://ssl.robocup.org/",
+        "delay":"100"
+    },
+    {
+        "text":"Current Year’s Team Description Paper",
+        "link":"https://tdpsearch.com/",
+        "delay":"300"
+    },
+    {
+        "text":"Past Team Description Papers (Select ‘SmallSize’)",
+        "link":"https://drive.google.com/file/d/1wx4d79kWA3_dq6UBP-7pE1ECLRKhAOWK/view?usp=drive_link",
+        "delay":"500"
+    }
+]

src/pages/projects/robocup.astro

@@ -12,7 +12,8 @@ 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";
-import roboTimeline from "../../data/roboTimeline.json"
+import roboTimeline from "../../data/roboTimeline.json";
+import roboLinks from "../../data/roboLinks.json";
 ---
 
 <Layout>
@@ -31,13 +32,18 @@ import roboTimeline from "../../data/roboTimeline.json"
         title="What is RoboCup?"
         text = "TritonBots FC is UCSD’s RoboCup Small-Size League Team. Students develop fully autonomous soccer playing robots to compete in the annual RoboCup International Competition. All hardware is custom built and software programmed from the ground up. Position, velocity, and field data is received in real time through computer vision."    />
     <div class="w-full flex justify-center">
-        <Link
+        <div class="w-3/5 flex justify-between mb-[15%]">
-            href="https://tdpsearch.com/"
+            {roboLinks.map((roboLink) => (
-            target="_blank"
+                <Link
-            className="text-center mb-[10%] z-10 cursor-pointer px-[2%] py-[0.5%] md:text-[1.2vw] text-[2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+                    data-inview
-        >
+                    href={roboLink.link}
-            Past Team Description Paper <br/> (Select ‘SmallSize’)
+                    target="_blank"
-        </Link>
+                    className={`in-view:animate-fade-down animate-de animate-delay-${roboLink.delay} w-[30%] text-center z-10 cursor-pointer px-[2%] py-[1%] md:text-[1.2vw] text-[2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:bg-ieee-yellow/80 duration-300 font-light`}
+                >
+                    {roboLink.text}
+                </Link>
+            ))}
+        </div>
     </div>
     <Competition
         picture="/robocup.webp"