feat: ML challenge launch copy updates (#1318)

#1287

---------

Co-authored-by: Jeremy <jeremyasuncion808@gmail.com>

frontend/packages/data-portal/app/components/Index/IndexContributors.tsx

@@ -158,13 +158,16 @@ const CONTRIBUTORS = [
 
 export function IndexContributors() {
   return (
-    <div className="flex flex-col gap-sds-xl h-full">
+    <div className="flex flex-col gap-sds-xl h-full -mb-sds-xxs">
       <h3 className="font-sds-semibold font-semibold text-sds-header-xl leading-sds-header-xl">
         <I18n i18nKey="thankYouToOurDataContributors" />
       </h3>
-      <ul className="columns-4 gap-y-sds-xxs gap-x-sds-xl">
+      <ul className="columns-4 gap-sds-xl">
         {CONTRIBUTORS.map((name) => (
-          <li key={name} className="text-sds-body-xs leading-sds-body-xs">
+          <li
+            key={name}
+            className="text-sds-body-xs leading-sds-body-xs mb-sds-xxs"
+          >
             {name}
           </li>
         ))}

frontend/packages/data-portal/app/components/Link/Link.tsx

@@ -9,6 +9,7 @@ import { cnsNoMerge } from 'app/utils/cns'
 import { isExternalUrl } from 'app/utils/url'
 
 export type VariantLinkProps = LinkProps & {
+  newTab?: boolean
   variant?: 'dashed-bordered' | 'dashed-underlined'
 }
 
@@ -18,14 +19,15 @@ function BaseLink(
     to,
     variant,
     className,
+    newTab,
     ...props
   }: VariantLinkProps & { href?: string },
   ref: ForwardedRef<HTMLAnchorElement>,
 ) {
   let newTabProps: Partial<LinkProps> = {}
   const url = href ?? to
 
-  if (typeof url === 'string' && isExternalUrl(url)) {
+  if (newTab || (typeof url === 'string' && isExternalUrl(url))) {
     // For new tabs, add rel=noreferrer for security:
     // https://web.dev/external-anchors-use-rel-noopener/#how-to-improve-your-site's-performance-and-prevent-security-vulnerabilities
     newTabProps = {

frontend/packages/data-portal/app/components/MDX/MdxBody.module.css

@@ -1,4 +1,6 @@
 .body {
+  @apply text-sds-body-s leading-sds-body-s;
+
   ol {
     @apply list-decimal;
     margin-left: 35px;
@@ -59,8 +61,6 @@
   }
 
   p {
-    @apply text-sds-body-s leading-sds-body-s;
-
     + pre {
       @apply mt-sds-m;
 
@@ -78,7 +78,8 @@
     @apply text-sds-color-semantic-text-action-default;
   }
 
-  b {
+  b,
+  strong {
     @apply font-semibold;
   }
 

frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx

@@ -1,34 +1,53 @@
+import { Button } from '@czi-sds/components'
+
+import { Link } from 'app/components/Link'
 import { useI18n } from 'app/hooks/useI18n'
 
 function ChallengeInfo({ title, content }: { title: string; content: string }) {
   return (
     <div className="font-semibold">
-      <p className="text-sds-header-xxxs leading-sds-header-xxxs text-sds-color-primitive-gray-600">
+      <p className="text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps-xxxs uppercase text-sds-color-primitive-gray-600">
         {title}
       </p>
-      <p className="text-sds-body-l leading-sds-body-l">{content}</p>
+      <p className="text-sds-header-l leading-sds-header-l font-semibold">
+        {content}
+      </p>
     </div>
   )
 }
 
 export function MLChallengeHeader() {
   const { t } = useI18n()
 
+  const divider = (
+    <div className="hidden screen-716:block h-full w-px bg-sds-color-primitive-gray-400" />
+  )
+
   return (
     <div className="bg-sds-color-primitive-blue-200 flex flex-col justify-center p-sds-xl screen-716:py-sds-xxl text-center">
       <h1 className="text-sds-header-xxl leading-sds-header-xxl font-semibold">
         {t('cryoetDataAnnotationMLComp')}
       </h1>
 
-      <h2 className="text-sds-header-m leading-sds-header-m mt-sds-xs">
+      <h2 className="text-sds-header-m leading-sds-header-m mt-sds-xl screen-716:mt-sds-xs">
         {t('developAMLModel')}
       </h2>
 
-      <div className="flex items-center mt-sds-xl justify-center">
-        <ChallengeInfo title={t('starts')} content={t('fall2024')} />
-        <div className="h-full w-px bg-sds-color-primitive-gray-400 mx-sds-xl" />
+      <div className="flex flex-col screen-716:flex-row items-center my-sds-xl gap-sds-xl justify-center">
+        <ChallengeInfo
+          title={t('started')}
+          content={t('mlChallengeStartDate')}
+        />
+        {divider}
+        <ChallengeInfo title={t('ends')} content={t('mlChallengeEndDate')} />
+        {divider}
         <ChallengeInfo title={t('prizes')} content={t('prizeTotal')} />
       </div>
+      <Link to="https://www.kaggle.com/competitions/czii-cryo-et-object-identification/">
+        <Button sdsStyle="rounded" sdsType="primary">
+          {t('seeOnKaggle')}
+        </Button>
+      </Link>
     </div>
   )
 }

frontend/packages/data-portal/app/components/MLChallenge/MLChallengeNavigation.tsx

@@ -17,11 +17,7 @@ interface RawNavItem {
 const NAV_ITEMS: RawNavItem[] = [
   {
     id: MLChallengeSectionId.About,
-    label: 'about',
-  },
-  {
-    id: MLChallengeSectionId.CompetitionDetails,
-    label: 'competitionDetails',
+    label: 'aboutTheCompetition',
   },
   {
     id: MLChallengeSectionId.HowToParticipate,
@@ -32,20 +28,16 @@ const NAV_ITEMS: RawNavItem[] = [
     label: 'competitionData',
   },
   {
-    id: MLChallengeSectionId.AboutCryoETData,
-    label: 'aboutCryoEtData',
-  },
-  {
-    id: MLChallengeSectionId.Tutorials,
-    label: 'tutorials',
+    id: MLChallengeSectionId.WhatIsCryoET,
+    label: 'whatIsCryoET',
   },
   {
-    id: MLChallengeSectionId.Organizers,
-    label: 'organizers',
+    id: MLChallengeSectionId.CompetitionContributors,
+    label: 'competitionContributors',
   },
   {
-    id: MLChallengeSectionId.FAQ,
-    label: 'faq',
+    id: MLChallengeSectionId.Glossary,
+    label: 'glossaryOfTerms',
   },
   {
     id: MLChallengeSectionId.Contact,