feat: refactoring components for new design

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

@@ -44,11 +44,19 @@
 }
 
 .mdx-cta-section--no-border {
-  border-top: none !important;
+  border: none !important;
+
+  > * {
+    border: none !important;
+  }
+}
+
+.mdx-cta-section__description {
+  margin-top: 1rem;
 }
 
 .mdx-cta-section--title-only {
-  .mdx-cta-section__title {
+  .mdx-cta-section__description {
     @include lsd.typography('h5', false);
     font-weight: 300;
 
@@ -57,7 +65,7 @@
 }
 
 .mdx-cta-section--title-button {
-  .mdx-cta-section__title {
+  .mdx-cta-section__description {
     @include lsd.typography('display4', false);
     font-weight: 300;
 
@@ -65,7 +73,7 @@
   }
 
   @include utils.responsive('lg', 'down') {
-    .mdx-cta-section__title {
+    .mdx-cta-section__description {
       @include lsd.typography('h4', false);
     }
   }
@@ -79,11 +87,11 @@
   }
 
   .mdx-cta-section__title {
-    @include lsd.typography('h5', false);
+    @include lsd.typography('h3', false);
   }
 
   .mdx-cta-section__description {
-    @include lsd.typography('h3', false);
+    @include lsd.typography('h5', false);
   }
 
   .mdx-cta-section__link {
@@ -95,7 +103,7 @@
       display: block;
     }
 
-    .mdx-cta-section__description {
+    .mdx-cta-section__title {
       margin-top: 1.5rem;
     }
   }
@@ -103,20 +111,20 @@
 
 .mdx-cta-section--simple {
   .mdx-cta-section__title {
-    @include lsd.typography('h5', false);
-  }
-
-  .mdx-cta-section__description {
     @include lsd.typography('h2', false);
 
-    margin-top: 2rem;
+    margin-top: 1.5rem;
   }
 
   @include utils.responsive('lg', 'down') {
-    .mdx-cta-section__description {
+    .mdx-cta-section__title {
       margin-top: 1.5rem;
     }
   }
+
+  .mdx-cta-section__description {
+    @include lsd.typography('h5', false);
+  }
 }
 
 .mdx-cta-section--list {
@@ -129,13 +137,13 @@
   }
 
   .mdx-cta-section__title {
-    @include lsd.typography('h5', false);
+    @include lsd.typography('h2', false);
+
+    margin-top: 1.5rem;
   }
 
   .mdx-cta-section__description {
-    @include lsd.typography('h1', false);
-
-    margin-top: 2rem;
+    @include lsd.typography('h5', false);
   }
 
   .mdx-cta-section__list {
@@ -160,10 +168,13 @@
       > .mdx-cta-section__item-title {
         margin-top: 1.5rem;
         padding: 3px 11px;
-        display: inline-block;
+        display: flex;
+        align-items: center;
+        width: fit-content;
+        gap: 12px;
         border-radius: 1rem;
-        color: rgb(var(--lsd-text-secondary));
-        background-color: rgb(var(--lsd-surface-secondary));
+        color: rgb(var(--lsd-text-primary));
+        border: 1px solid rgb(var(--lsd-border-primary));
       }
 
       & > .mdx-cta-section__item-description {
@@ -201,10 +212,10 @@
 
 @include utils.responsive('lg', 'down') {
   .mdx-cta-section__title {
-    @include lsd.typography('subtitle2', true);
+    @include lsd.typography('h4', true);
   }
 
   .mdx-cta-section__description {
-    @include lsd.typography('h4', true);
+    @include lsd.typography('subtitle2', true);
   }
 }

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

@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import React from 'react'
 import { CallToActionButton } from '../index'
 import './CallToActionSection.scss'
+import { IconExternalLink } from '@logos-theme/components/Icon'
 
 /**
  * Props for the CallToActionSection component
@@ -178,19 +179,25 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
         )}
       </div>
       {list.length > 0 && (
-        <div className="mdx-cta-section__list">
+        <div
+          className={clsx(
+            'mdx-cta-section__list',
+            !border && 'mdx-cta-section--no-border',
+          )}
+        >
           {list.map((option, index) => {
             const content = (
               <div className="mdx-cta-section__list-item" key={index}>
                 <Typography
                   component="div"
-                  variant="subtitle2"
+                  variant="body2"
                   className="mdx-cta-section__item-title"
                 >
                   {option.title}
+                  <IconExternalLink size="m" />
                 </Typography>
                 <Typography
-                  variant="h2"
+                  variant="h4"
                   component="p"
                   className="mdx-cta-section__item-description"
                 >

packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/index.ts

@@ -1 +0,0 @@
-export * from './EventCTASection'

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

@@ -27,16 +27,20 @@
 .mdx-feature-list--top-aligned {
   @include utils.responsive('lg', 'up') {
     .mdx-feature-list__feature-description {
-      margin-top: 136px;
+      margin-top: 40px;
     }
   }
 }
 
+.mdx-feature-list--border-none {
+  border: none !important;
+}
+
 .mdx-feature-list__title {
   padding: 24px 0;
 }
 
-.mdx-feature-list__feature-index {
+.mdx-feature-list__feature-index--circle {
   background: rgb(var(--lsd-surface-secondary));
   padding: 0.5rem;
   border-radius: 100%;
@@ -48,6 +52,18 @@
   justify-content: center;
 }
 
+.mdx-feature-list__feature-index--number {
+  background: transparent;
+  font-size: 28px !important;
+  line-height: 36px !important;
+  opacity: 0.3;
+  width: unset;
+  height: unset;
+  padding: unset;
+  display: block;
+  color: rgb(var(--lsd-text-primary)) !important;
+}
+
 .mdx-feature-list__list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -63,7 +79,7 @@
 }
 
 .mdx-feature-list__feature-title {
-  margin-top: 1rem;
+  margin-top: 0.5rem;
 }
 
 .mdx-feature-list__feature-description {
@@ -86,6 +102,10 @@
   }
 }
 
+.mdx-feature-list__feature-border--none {
+  width: 0 !important;
+}
+
 @include utils.responsive('lg', 'up') {
   .mdx-feature-list__feature {
     padding: 1rem;
@@ -143,7 +163,7 @@
     padding: 1.5rem 0;
     border-top: 1px solid rgb(var(--lsd-border-primary));
 
-    .mdx-feature-list__feature-index {
+    .mdx-feature-list__feature-index--circle {
       @include lsd.typography('subtitle2', false);
       width: 1.625rem;
       height: 1.625rem;

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

@@ -29,6 +29,20 @@ export type FeatureListProps = Omit<
    * The position of the call to action buttons.
    */
   ctaPosition?: 'top' | 'bottom'
+  /**
+   * The style of the index of the feature list.
+   */
+  indexStyle?: 'circle' | 'number'
+  /**
+   * The border style of the feature list.
+   */
+  borderStyle?: 'none' | 'solid'
+}
+
+function pad(num, size) {
+  num = num.toString()
+  while (num.length < size) num = '0' + num
+  return num
 }
 
 /**
@@ -59,6 +73,8 @@ export const FeatureList: React.FC<FeatureListProps> = ({
   features = [],
   className,
   ctaPosition = 'bottom',
+  indexStyle = 'circle',
+  borderStyle = 'solid',
   children,
   ...props
 }) => {
@@ -69,13 +85,14 @@ export const FeatureList: React.FC<FeatureListProps> = ({
         'mdx-feature-list',
         `mdx-feature-list--${alignment}-aligned`,
         `mdx-feature-list--cta-${ctaPosition}`,
+        borderStyle === 'none' && 'mdx-feature-list--border-none',
       )}
       {...props}
     >
       <div className="mdx-feature-list__header">
         <Typography
-          variant="h5"
-          component="h1"
+          variant="h2"
+          component="h2"
           className="mdx-feature-list__title"
         >
           {title}
@@ -86,15 +103,32 @@ export const FeatureList: React.FC<FeatureListProps> = ({
       </div>
       <div className="mdx-feature-list__list">
         {features.map((feature, index) => (
-          <div key={index} className={clsx('mdx-feature-list__feature')}>
+          <div
+            key={index}
+            className={clsx(
+              'mdx-feature-list__feature',
+              borderStyle === 'none' && 'mdx-feature-list--border-none',
+            )}
+          >
             <div className="mdx-feature-list__feature-inner">
-              <Typography
-                variant="subtitle1"
-                component="div"
-                className="mdx-feature-list__feature-index"
-              >
-                {index + 1}
-              </Typography>
+              {indexStyle === 'circle' ? (
+                <Typography
+                  variant="subtitle1"
+                  component="div"
+                  className={clsx('mdx-feature-list__feature-index--circle')}
+                >
+                  {index + 1}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="subtitle1"
+                  component="div"
+                  className={clsx('mdx-feature-list__feature-index--number')}
+                >
+                  [{pad(index + 1, 2)}]
+                </Typography>
+              )}
+
               <Typography
                 variant="h2"
                 component="h2"
@@ -110,7 +144,13 @@ export const FeatureList: React.FC<FeatureListProps> = ({
                 <span>{feature.description}</span>
               </Typography>
             </div>
-            <div className="mdx-feature-list__feature-border"></div>
+            <div
+              className={clsx(
+                'mdx-feature-list__feature-border',
+                borderStyle === 'none' &&
+                  'mdx-feature-list__feature-border--none',
+              )}
+            ></div>
           </div>
         ))}
       </div>

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

@@ -13,3 +13,15 @@
   //padding-bottom: 2rem;
   //border-top: none;
 }
+
+.mdx-hero--top {
+  justify-content: flex-start;
+}
+
+.mdx-hero--center {
+  justify-content: center;
+}
+
+.mdx-hero--bottom {
+  justify-content: flex-end;
+}

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

@@ -5,6 +5,7 @@ import './Hero.scss'
 
 export type HeroProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
   size?: 'large' | 'medium' | 'small'
+  verticalAlign?: 'top' | 'center' | 'bottom'
 }
 
 /**
@@ -51,12 +52,18 @@ export const Hero: React.FC<HeroProps> = ({
   size = 'medium',
   className,
   children,
+  verticalAlign = 'top',
   ...props
 }) => {
   return (
     <HeroContext.Provider value={{ size }}>
       <div
-        className={clsx(className, 'mdx-hero', `mdx-hero--${size}`)}
+        className={clsx(
+          className,
+          'mdx-hero',
+          `mdx-hero--${size}`,
+          `mdx-hero--${verticalAlign}`,
+        )}
         {...props}
       >
         {children}

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

@@ -6,8 +6,11 @@
   position: relative;
   z-index: -2;
   text-shadow: 1px 1px 6px rgba(var(--lsd-surface-primary), 1);
-  max-width: 1260px;
+  max-width: 528px;
   margin-top: 18px;
+
+  font-size: 18px !important;
+  line-height: 24px !important;
 }
 
 .mdx-hero-description--small {

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

@@ -7,8 +7,8 @@
   flex-direction: column;
   justify-content: end;
 
-  border-bottom: 1px solid rgb(var(--lsd-surface-secondary));
   transition: margin-bottom 0.05s ease-in-out;
+  max-width: 596px;
 }
 
 .mdx-hero-info--large {

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

@@ -9,11 +9,13 @@ export type HeroInfoProps = PropsWithChildren<
   React.HTMLAttributes<HTMLDivElement>
 > & {
   size?: 'medium' | 'large' | 'small'
+  hideScrollToBottom?: boolean
 }
 
 export const HeroInfo: React.FC<HeroInfoProps> = ({
   size: sizeProp,
   className,
+  hideScrollToBottom = false,
   children,
   ...props
 }) => {
@@ -29,7 +31,7 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
       >
         {children}
       </div>
-      {hydrated && <ScrollToBottom />}
+      {hydrated && !hideScrollToBottom && <ScrollToBottom />}
     </>
   )
 }

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

@@ -2,8 +2,8 @@
 @use '../../../css/lsd';
 
 .mdx-hero-title {
-  font-size: 70px !important;
-  line-height: 100% !important;
+  font-size: 48px !important;
+  line-height: 56px !important;
 }
 
 .mdx-hero-title--large {

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

@@ -9,10 +9,10 @@
     margin-top: 0px !important;
     margin-bottom: 16px;
   }
+}
 
-  h3 {
-    margin-top: 24px !important;
-  }
+.mdx-event-cta-section__title {
+  margin-bottom: 24px !important;
 }
 
 .mdx-event-cta-section__cta {

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

@@ -1,19 +1,19 @@
 import React from 'react'
-import './EventCTASection.scss'
+import './InputCTASection.scss'
 import { Button, TextField, Typography } from '@acid-info/lsd-react'
 import Link, { Props } from '@docusaurus/Link'
 
-export type EventCTASectionProps = {
+export type InputCTASectionProps = {
   title: string
   description: string
   label: string
   link?: string
-  linkProps: Props
+  linkProps?: Props
   formInput?: any[]
   formListId?: number
 }
 
-export const EventCTASection: React.FC<EventCTASectionProps & Props> = ({
+export const InputCTASection: React.FC<InputCTASectionProps & Props> = ({
   title,
   description,
   label,
@@ -66,13 +66,15 @@ export const EventCTASection: React.FC<EventCTASectionProps & Props> = ({
 
   return (
     <div className="mdx-event-cta-section__container">
-      <Typography
-        variant="subtitle1"
-        component="p"
-        className="mdx-event-cta-section__title"
-      >
-        {title}
-      </Typography>
+      {title && (
+        <Typography
+          variant="subtitle1"
+          component="p"
+          className="mdx-event-cta-section__title"
+        >
+          {title}
+        </Typography>
+      )}
 
       <Typography
         component="h3"

packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/index.ts

@@ -0,0 +1 @@
+export * from './InputCTASection'

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

@@ -24,6 +24,10 @@
   }
 }
 
+.mdx-logo-carousel-buttons {
+  margin-top: 64px;
+}
+
 @include utils.responsive('lg', 'down') {
   .mdx-logo-carousel {
     .mdx-logo-carousel__inner {

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

@@ -33,15 +33,14 @@ export const LogoCarousel: React.FC<LogoCarouselProps> = ({
   if (typeof window !== 'undefined' && hydrated && !containerRef.current) {
     containerRef.current =
       ref.current?.querySelector('.mdx-grid__content') ?? null
-
-    console.log(containerRef.current, ref.current)
   }
 
   return (
     <div ref={ref} className={clsx(className, 'mdx-logo-carousel')} {...props}>
-      <SectionHeader title={title}>
-        <ScrollButtons containerRef={containerRef} />
-      </SectionHeader>
+      <SectionHeader title={title} noBorder />
+      <div className="mdx-logo-carousel-buttons">
+        <ScrollButtons containerRef={containerRef} spacing="spaced" />
+      </div>
       <Grid
         className="mdx-logo-carousel__inner"
         xs={{ wrap: false, gap: '96px', scrollButtons: false }}

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

@@ -2,7 +2,6 @@
 @use '../../../css/lsd';
 
 :root {
-  --card-height: 188px;
   --mobile-width: 253px;
   --mobile-height: 176px;
 }
@@ -12,20 +11,18 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
-  padding: 1rem;
-  border: 1px solid rgb(var(--lsd-border-primary));
-  height: var(--card-height);
+  padding: 1.5rem 1rem 0 1rem;
+  border-top: 1px solid rgb(var(--lsd-border-primary));
 }
 
 .mdx-profile-card__profile {
   display: flex;
-  flex-direction: column;
-  gap: 20px;
+  gap: 24px;
 }
 
 .mdx-profile-card__avatar {
-  width: 40px !important;
-  height: 40px !important;
+  width: 52px !important;
+  height: 52px !important;
   border-radius: 50%;
   border: 1px solid rgb(var(--lsd-border-primary));
 

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

@@ -74,35 +74,36 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({
             src={imgSrc}
           />
         )}
-        <Typography
-          className="mdx-profile-card__name"
-          variant="h3"
-          component="h4"
-        >
-          {name}
-        </Typography>
-      </div>
-
-      <div className="mdx-profile-card__buttons">
-        {githubUsername && githubLink && (
-          <Link
-            href={githubLink}
-            target="_blank"
-            className={'mdx-profile-card__link'}
+        <div>
+          <Typography
+            className="mdx-profile-card__name"
+            variant="h4"
+            component="h4"
           >
-            <IconGithub />
-          </Link>
-        )}
+            {name}
+          </Typography>
+          <div className="mdx-profile-card__buttons">
+            {githubUsername && githubLink && (
+              <Link
+                href={githubLink}
+                target="_blank"
+                className={'mdx-profile-card__link'}
+              >
+                <IconGithub />
+              </Link>
+            )}
 
-        {discordUsername && discordLink && (
-          <Link
-            href={discordLink}
-            target="_blank"
-            className={'mdx-profile-card__link'}
-          >
-            <IconDiscordWhite />
-          </Link>
-        )}
+            {discordUsername && discordLink && (
+              <Link
+                href={discordLink}
+                target="_blank"
+                className={'mdx-profile-card__link'}
+              >
+                <IconDiscordWhite />
+              </Link>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   )

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

@@ -6,7 +6,7 @@
 }
 
 .mdx-roadmap__timeline {
-  margin-top: 6.25rem;
+  margin-top: 64px;
 
   .mdx-grid-item:last-child {
     .mdx-timeline-item__border {