[WIP/Don't merge] Makermods and adding subtracks

app/const.ts

@@ -6,9 +6,8 @@ export const routes = [
   { label: "TRACKS", path: "#tracks", type: 'hash' as const },
   { label: "SCHEDULE", path: "#schedule", type: 'hash' as const },
   { label: "FAQs", path: "#faqs", type: 'hash' as const },
-  { label: "SPONSORS", path: "#sponsors", type: 'hash' as const }
-
-]
+  { label: "SPONSORS", path: "#sponsors", type: 'hash' as const },
+];
 
 export const LOGO_SIZE = {
   width: 60,
@@ -89,6 +88,22 @@ With all these cybersecurity threats, how can you help people and enterprises se
 Billions of websites, millions of applications, new products being launched every day... but no one seems to be adding that magic mix of features that you’ve been looking for. Think you know better than the rest? Today’s the day to turn those crazy ideas into reality, building from scratch or merging different products together to create your very own concept. 
 
 Add new features to your favorite product, apply an existing feature in a novel way, or burn it all to the ground and create something completely different from anything we’ve seen before.The world is your oyster, push those boundaries and Make Fetch Happen.
+`
+  },
+  {
+    name: "Capital One Subtrack",
+    description: `
+Can be chosen as subtrack in addition to any of the main tracks. 
+
+Description description Description descriptionDescription descriptionDescription descriptionDescription descriptionDescription descriptionDescription descriptionDescription descriptionDescription description
+`
+  },
+  {
+    name: "MakerMods Subtrack",
+    description: `
+Can be chosen as subtrack in addition to any of the main tracks. 
+
+Description description Description descriptionDescription descriptionDescription descriptionDescription descriptionDescription descriptionDescription descriptionDescription descriptionDescription description
 `
   }
 ];

app/page.tsx

@@ -25,7 +25,7 @@ const Home = () => {
           </div>
 
           <div className="flex flex-col items-center justify-center min-h-screen text-white"></div>
-          <div id="tracks" className="my-20 h-auto w-full">
+          <div id="tracks" className="my-20 mb-50 h-auto w-full">
             <Tracks />
           </div>
           <div id="schedule" className="my-20 flex flex-col items-center justify-center min-h-screen text-white mt-[150px]">

app/tracks/Tracks.tsx

@@ -4,6 +4,8 @@ import cursor from "@/public/cursor.svg";
 import leaf from "@/public/leaf.svg";
 import orange from "@/public/orange.svg";
 import disk from "@/public/disk.svg";
+import makermods from "@/public/main/OurSponsors/MakerMods.png";
+import capone from "@/public/main/OurSponsors/CapitalOne.svg";
 
 import Track from "./components/track";
 import SectionTitle from "@/components/SectionTitle";
@@ -59,6 +61,25 @@ const Tracks = () => {
             </>
           }
         />
+        <Track trackNum={4}
+          imgSrc={capone}
+          alignment={3}
+          prizes={
+            <>
+              $1000 in Amazon gift cards
+            </>
+          }
+        />
+        <Track trackNum={5}
+          imgSrc={makermods}
+          alignment={1}
+          prizes={
+            <>
+              $2000 from MakerMods
+            </>
+          }
+        />
+
       </div>
 
     </div>

app/tracks/components/track.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from "react";
-import Image from "next/image";
+import Image, { StaticImageData } from "next/image";
 import expandWhiteLeft from "@/public/expand-white.svg";
 import expandWhiteRight from "@/public/expand-whitev2.svg";
 import expandedBlueLeft from "@/public/expandblue.svg";
@@ -10,17 +10,14 @@ import { TRACK_DESCRIPTIONS } from "@/app/const";
 
 type TrackProps = {
   trackNum: number;
-  imgSrc: string;
+  imgSrc: string | StaticImageData;
   alignment: number; // 1 for left, 3 for right
   prizes?: React.ReactNode;
 };
 
 const Track = ({ trackNum, imgSrc, alignment, prizes }: TrackProps) => {
   const colClass = alignment === 1 ? "col-start-1" : alignment === 3 ? "col-start-3" : "";
-  const rowClass =
-    trackNum === 1 ? "row-start-1" :
-      trackNum === 2 ? "row-start-2" :
-        trackNum === 3 ? "row-start-3" : "";
+  const rowClass = trackNum ? `row-start-1` : "";
 
   const [expandedTrack, setExpandedTrack] = useState(false);
 

components/OurSponsors.tsx

@@ -8,6 +8,7 @@ import Seqera from '@/public/main/OurSponsors/Seqera.svg';
 import Ignite from '@/public/main/OurSponsors/Ignite.png';
 import Spark from '@/public/main/OurSponsors/Spark.png';
 import SectionTitle from './SectionTitle';
+import MakerMods from '@/public/main/OurSponsors/MakerMods.png';
 import Image from 'next/image';
 
 const OurSponsors = () => {
@@ -35,6 +36,7 @@ const OurSponsors = () => {
           Seqera,
           Spark,
           Ignite,
+          MakerMods
         ].map((src, i, array) => (
           <div
             key={i}

components/Schedule/ScheduleWindow.tsx

@@ -82,7 +82,7 @@ const ScheduleWindow = ({ windowSize }: { windowSize: ScreenWindowSizes }) => {
         />
       </div>
       {/* Bubble */}
-      <div className="absolute pointer-events-none z-0 flex right-0 lg:-translate-y-[85%] window-1 window-animate">
+      <div className="absolute pointer-events-none z-0 flex right-0 lg:-translate-y-[75%] window-1 window-animate">
         <Image
           src={Bubble}
           alt="Bubble"