From d4c357759f81261cfc306fb26ac09747c168cb63 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 20 Mar 2024 02:31:50 +0900
Subject: [PATCH] chore: update landing page CSS style

---
 .../docusaurus-playground/src/pages/index.mdx |  3 ++-
 .../CallToActionSection.scss                  |  2 +-
 .../CallToActionSection.tsx                   |  8 ++++---
 .../components/mdx/Roadmap/Roadmap.scss       | 22 +++++++++++++++++++
 .../client/components/mdx/Roadmap/Roadmap.tsx | 11 ++++++----
 5 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index 4ae4dde..0ddfb40 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/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={[
       {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
index e292f8e..5860ff2 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
+++ b/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;
 
     * {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
index 84c94b8..9fb8f35 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
+++ b/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}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss
index a7f42c7..469a141 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss
+++ b/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');
+    }
+  }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
index 723b845..4ec0ad3 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
+++ b/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"