chore: update landing page CSS style

packages/docusaurus-playground/src/pages/index.mdx

@@ -305,7 +305,8 @@ import * as challengesData from '/generated/challenges.json'
 
 <Box top={{ xs: 144, lg: 216 }}>
   <Roadmap
-    title="Roadmap"
+    title="Development Roadmap"
+    description="Codex is currently in its first proof-of-concept iteration and aims to release its alpha version, Katana, before the end of Q4 2023."
     noBorder
     timeline={[
       {

packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss

@@ -20,7 +20,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 936px;
+    max-width: 936px;
     margin: auto;
 
     * {

packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx

@@ -185,9 +185,11 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
             </CallToActionButton>
           )}
         </div>
-        <Typography component="h3" className="mdx-cta-section__description">
-          {description}
-        </Typography>
+        {description && (
+          <Typography component="h3" className="mdx-cta-section__description">
+            {description}
+          </Typography>
+        )}
         {href && ctaPosition === 'bottom' && (
           <CallToActionButton
             target={target}

packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss

@@ -7,6 +7,21 @@
   .mdx-grid__scroll {
     margin-bottom: 32px !important;
   }
+
+  .mdx-cta-section__title {
+    @include lsd.typography('h3');
+  }
+
+  .mdx-cta-section__description {
+    margin-top: 24px;
+    @include lsd.typography('h5');
+    max-width: 528px;
+  }
+}
+
+.roadmap__header {
+  display: flex;
+  flex-direction: column;
 }
 
 .mdx-roadmap__timeline {
@@ -31,4 +46,11 @@
   .mdx-roadmap__timeline {
     margin-top: 4rem;
   }
+
+  .mdx-roadmap {
+    .mdx-cta-section__description {
+      margin-top: 16px;
+      @include lsd.typography('body1');
+    }
+  }
 }

packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import React from 'react'
-import { Grid, SectionHeader } from '..'
+import { CallToActionSection, Grid, SectionHeader } from '..'
 import { TimelineItem, TimelineItemProps } from '../TimelineItem'
 import './Roadmap.scss'
 
@@ -74,14 +74,17 @@ export const Roadmap: React.FC<RoadmapProps> = ({
 
   return (
     <div className={clsx(className, 'mdx-roadmap')} {...props}>
-      <SectionHeader
+      <CallToActionSection
         className="mdx-roadmap__header"
         title={title}
         description={description}
-        noBorder={noBorder}
+        columns={1}
+        ctaPosition="top"
+        border={false}
+        align="left"
       >
         {children}
-      </SectionHeader>
+      </CallToActionSection>
       {timeline.length > 0 && (
         <Grid
           className="mdx-roadmap__timeline"