Clarify upcoming cohorts and CTA

src/content.config.ts

@@ -240,6 +240,7 @@ const upcomingCohortsSectionCollection = defineCollection({
         link: z.string().optional(),
         blogLink: z.string().optional(),
         closed: z.boolean().optional(),
+        status: z.string().optional(),
       }),
     ),
   }),

src/content/sections/upcoming-cohorts.md

@@ -13,6 +13,7 @@ cohorts:
     description: 'Networks'
     duration: '3 weeks'
     dates: 'starting March 30'
+    status: 'Closing soon!'
     link: 'https://sovereignengineering.typeform.com/SEC-07'
     blogLink: 'https://primal.net/soveng/sec-07-the-network-stack'
   - name: 'SEC-08'

src/layouts/partials/CallToAction.astro

@@ -65,7 +65,11 @@ const resolvedImage = imageMap[call_to_action.data.image] || null;
               )}
             </div>
             <p class="mt-4 text-white text-lg">
-              Can't make March? Check the dates of our <a href="/#upcoming-cohorts" class="underline hover:no-underline">upcoming cohorts</a>.
+              Can't make April? Check the dates of our{" "}
+              <a href="/#upcoming-cohorts" class="underline hover:no-underline">
+                upcoming cohorts
+              </a>
+              .
             </p>
           </div>
         </div>

src/layouts/partials/UpcomingCohorts.astro

@@ -12,7 +12,7 @@ const { upcoming_cohorts } = Astro.props;
             <h2 set:html={markdownify(upcoming_cohorts.data.title)} class="mb-4" />
             <div class="flex flex-col gap-2">
               {upcoming_cohorts.data.cohorts.map(
-                (cohort: { name: string; description?: string; duration?: string; dates: string; link?: string; blogLink?: string; closed?: boolean }) => {
+                (cohort: { name: string; description?: string; duration?: string; dates: string; link?: string; blogLink?: string; closed?: boolean; status?: string }) => {
                   const descriptionPart = cohort.description ? `: ${cohort.description}` : '';
                   const durationDesktop = cohort.duration ? `${cohort.duration}, ` : '';
                   const durationMobile = cohort.duration ? `${cohort.duration.replace('weeks', 'wks')}, ` : '';
@@ -33,7 +33,7 @@ const { upcoming_cohorts } = Astro.props;
                     </>
                   );
                   return (
-                    <div class="text-lg font-medium text-text-dark dark:text-white">
+                    <div class={`text-lg font-medium text-text-dark dark:text-white ${cohort.closed ? 'opacity-60' : ''}`}>
                       {nameAndDescription}
                       {` (`}
                       <span class="hidden md:inline">{durationDesktop}</span>
@@ -44,10 +44,22 @@ const { upcoming_cohorts } = Astro.props;
                       {cohort.closed ? (
                         <span class="text-text dark:text-darkmode-text opacity-60"> - Applications closed</span>
                       ) : cohort.link && (
-                        <> - <a href={cohort.link} target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">
-                          <span class="hidden md:inline">Apply now!</span>
-                          <span class="md:hidden">Apply</span>
-                        </a></>
+                        <>
+                          {" - "}
+                          <a
+                            href={cohort.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="underline hover:no-underline"
+                          >
+                            <span class="hidden md:inline">
+                              {cohort.status ?? "Apply now!"}
+                            </span>
+                            <span class="md:hidden">
+                              {cohort.status ? cohort.status : "Apply"}
+                            </span>
+                          </a>
+                        </>
                       )}
                     </div>
                   );