Squashed commit of the following:

commit 0b2b8d1
Author: whalenda <[email protected]>
Date:   Sun Mar 17 21:34:16 2024 -0400

    Fix arrow icon

commit 1ff9d1d
Author: whalenda <[email protected]>
Date:   Sun Mar 17 21:27:16 2024 -0400

    Fix Hero issue

commit b5ab532
Author: whalenda <[email protected]>
Date:   Sun Mar 17 21:16:25 2024 -0400

    Fix Next Steps section

commit e2c3a8c
Author: whalenda <[email protected]>
Date:   Sun Mar 17 20:57:55 2024 -0400

    Update Career page

commit fb1a72d
Author: whalenda <[email protected]>
Date:   Sun Mar 17 19:45:53 2024 -0400

    Fix timer component

commit 577965d
Author: whalenda <[email protected]>
Date:   Sun Mar 17 14:51:25 2024 -0400

    Update remaining components

commit 547df8a
Author: whalenda <[email protected]>
Date:   Sun Mar 10 19:44:33 2024 -0400

    Initial Restructuring

src/components/Accordion.svelte → src/components/accordion/Accordion.svelte

@@ -1,7 +1,7 @@
 <script>
   import { mobile,active } from './stores.js';
-  import AccordionSection from './elements/AccordionSection.svelte'
-  import FooterFull from '../components/FooterFull.svelte'
+  import AccordionSection from './AccordionSection.svelte'
+  import FooterFull from '../footer/FooterFull.svelte'
 
   export let products;
   products.sort((a,b) => a.data.order - b.data.order)

src/components/elements/AccordionSection.svelte → src/components/accordion/AccordionSection.svelte

@@ -1,6 +1,6 @@
 <script>
     import RedButton from '../buttons/RedButton.svelte';
-    import { mobile, active } from '../stores.js';
+    import { mobile, active } from './stores.js';
     export let title;
     export let sequence;
     export let text;

src/components/cards/Card.astro → src/components/cards/Card.svelte

@@ -1,12 +1,8 @@
----
-interface Props {
-  title: string
-  body: string
-  href: string
-}
-
-const { href, title, body } = Astro.props
----
+<script>
+  export let title;
+  export let body;
+  export let href;
+</script>
 
 <li class="link-card">
   <a href={href}>
@@ -19,6 +15,7 @@ const { href, title, body } = Astro.props
     </p>
   </a>
 </li>
+
 <style>
   .link-card {
     list-style: none;
@@ -32,6 +29,7 @@ const { href, title, body } = Astro.props
     transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
+
   .link-card > a {
     width: 100%;
     text-decoration: none;
@@ -42,20 +40,24 @@ const { href, title, body } = Astro.props
     background-color: #23262d;
     opacity: 0.8;
   }
+
   h2 {
     margin: 0;
     font-size: 1.25rem;
     transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
   }
+
   p {
     margin-top: 0.5rem;
     margin-bottom: 0;
   }
-  .link-card:is(:hover, :focus-within) {
+
+  .link-card:hover, .link-card:focus-within {
     background-position: 0;
     background-image: var(--accent-gradient);
   }
-  .link-card:is(:hover, :focus-within) h2 {
+
+  .link-card:hover h2, .link-card:focus-within h2 {
     color: rgb(var(--accent-light));
   }
-</style>
+</style>

src/components/cards/CohortCard.svelte

@@ -0,0 +1,23 @@
+<script>
+    import RedButton from '../buttons/RedButton.svelte';
+  
+    export let title;
+    export let content;
+    export let startDate;
+    export let endDate;
+  </script>
+
+  <div class="w-10/12 h-full p-10 bg-slate-300 bg-slate-900">
+    <h3 class="text-4xl pt-10 text-black text-white font-extrabold text-center">
+      {title}
+    </h3>
+    <div class="max-w-3xl mx-auto mt-5 text-center">
+      <p class="text-lg text-slate-600 text-slate-400">
+        {startDate} - {endDate}
+      </p>
+      <p>{content}</p>
+      <div class="pt-20">
+        <RedButton href="#" text="APPLY NOW" />
+      </div>
+    </div>
+  </div>

src/components/cards/CohortGroup.svelte

@@ -0,0 +1,34 @@
+<script>
+    import CohortCard from './CohortCard.svelte';
+
+    export let entries = [];
+
+    // Since 'entries' is a prop, it will be passed from the parent component
+    // where this component is used.
+</script>
+
+<div class="h-screen snap-start pt-40 flex bg-slate-200 bg-slate-800 text-white">
+  <!-- Left Column -->
+  <div class="w-1/2 pt-5">
+    <p class="text-2xl pt-5 text-center">Ready to Apply?</p>
+    <div class="max-w-5xl mx-auto mt-5 text-center">
+      <h1 class="block text-5xl font-bold md:text-5xl lg:text-6xl">
+        JOIN THE COHORT THAT'S RIGHT FOR YOU.
+      </h1>
+    </div>
+  </div>
+  <!-- Right Column -->
+  <div class="w-1/2 pt-5">
+    <!-- Grid of Cohorts -->
+    <div class="grid grid-cols-2">
+      {#each entries as cohortEntry}
+        <CohortCard
+          title={cohortEntry.data.title}
+          content={cohortEntry.data.content}
+          startDate={cohortEntry.data.startDate}
+          endDate={cohortEntry.data.endDate}
+        />
+      {/each}
+    </div>
+  </div>
+</div>

src/components/cards/MCCard.svelte

@@ -0,0 +1,19 @@
+<script>
+    export let title;
+    export let link;
+    export let imageSrc;
+  </script>
+
+  <div class="rounded-lg w-full max-w-sm bg-slate-300 border border-gray-200 shadow-lg bg-slate-900 border-slate-700">
+    <div class="flex flex-col items-center pb-10 text-center">
+      <img class="m-4 w-24 h-24 mb-3 rounded-full shadow-lg" src={imageSrc}/>
+      <h5 class="mb-1 font-extrabold text-4xl text-gray-900 text-white">
+        {title}
+      </h5>
+      <div class="flex font-light mt-2 space-x-3">
+        {#if link}
+          <a href={link} class="inline-flex items-center">LEARN MORE &gt;</a>
+        {/if}
+      </div>
+    </div>
+  </div>

src/components/cards/MetricCard.svelte

@@ -0,0 +1,11 @@
+<script>
+    export let icon;
+    export let value;
+    export let metric;
+  </script>
+
+  <img class="mx-auto rounded-xl" src={icon} alt="Image Description" />
+  <div class="mt-2 sm:mt-4">
+    <h3 class="text-6xl font-extrabold text-white">{value}</h3>
+    <p class="text-md text-mcswf-gold">{metric}</p>
+  </div>

src/components/cards/PrereqCard.svelte

@@ -0,0 +1,13 @@
+<script>
+    export let title;
+    export let content;
+  </script>
+
+  <div class="ps-10 pt-5">
+    <h3 class="text-4xl font-extrabold text-red-800 text-center">{title}:</h3>
+    <div class="max-w-3xl mx-auto mt-5 text-center">
+      <p class="text-lg text-slate-600 text-slate-400">
+        {content}
+      </p>
+    </div>
+  </div>

src/components/cards/TrainingCard.svelte

@@ -0,0 +1,13 @@
+<script>
+    export let icon;
+    export let value;
+    export let metric;
+  </script>
+
+  <img class="w-72 h-72 mx-auto" src={icon} alt="Image Description" />
+  <div class="mt-2 sm:mt-4">
+    <h3 class="text-4xl font-extrabold">{value}</h3>
+    {#if metric}
+      <p class="text-md">{metric}</p>
+    {/if}
+  </div>