style: update components style

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

@@ -308,6 +308,8 @@ import * as challengesData from '/generated/challenges.json'
     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
+    href="/about/roadmap"
+    linkLabel="Learn more"
     timeline={[
       {
         period: [2013],

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

@@ -30,6 +30,10 @@
     .mdx-cta-button {
       margin-inline: auto;
     }
+
+    .mdx-cta-section__description {
+      margin-top: 1.5rem;
+    }
   }
 
   .mdx-cta-section--align-left {

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

@@ -17,6 +17,12 @@
     @include lsd.typography('h5');
     max-width: 528px;
   }
+
+  .mdx-cta-section__container {
+    h3 {
+      @include lsd.typography('subtitle1');
+    }
+  }
 }
 
 .roadmap__header {

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

@@ -12,6 +12,8 @@ export type RoadmapProps = Omit<
   description?: React.ReactNode
   timeline?: Partial<TimelineItemProps>[]
   noBorder?: boolean
+  href?: string
+  linkLabel?: string
 }
 
 export const Roadmap: React.FC<RoadmapProps> = ({
@@ -19,6 +21,8 @@ export const Roadmap: React.FC<RoadmapProps> = ({
   description,
   timeline = [],
   noBorder = false,
+  href,
+  linkLabel,
   className,
   children,
   ...props
@@ -82,6 +86,8 @@ export const Roadmap: React.FC<RoadmapProps> = ({
         ctaPosition="top"
         border={false}
         align="left"
+        href={href}
+        label={linkLabel}
       >
         {children}
       </CallToActionSection>

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

@@ -24,7 +24,7 @@
 .mdx-section-header__title {
   display: flex;
   flex-direction: row;
-  gap: 2rem;
+  gap: 1.5rem;
 }
 
 .mdx-section-header--no-border {

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -889,9 +889,7 @@ main[itemtype*='Blog'] {
 @include utils.responsive('lg', 'up') {
   .main-wrapper {
     .container {
-      padding-bottom: calc(
-        var(--desktop-footer-gap) - var(--ifm-footer-padding-vertical)
-      ) !important;
+      padding-bottom: 96px;
     }
 
     & > div {
@@ -998,7 +996,7 @@ main[itemtype*='Blog'] {
   // website pages
   > .container {
     margin-top: 0 !important;
-    margin-bottom: 80px !important;
+    margin-bottom: 0 !important;
   }
   & > main {
     padding: 0;