feat: CTA section new variants

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

@@ -2,15 +2,16 @@
 
 .mdx-cta-section {
   display: grid;
-  margin-top: 260px;
-  padding-top: 1.5rem;
+  margin-top: 216px;
   border-top: 1px solid rgb(var(--lsd-border-primary));
 }
 
 .mdx-cta-section__title {
+  margin-top: 1.5rem;
 }
 
 .mdx-cta-section__description {
+  margin-top: 2rem;
 }
 
 .mdx-cta-section__link {
@@ -25,16 +26,22 @@
 }
 
 .mdx-cta-section--with-description {
+}
+
+.mdx-cta-section--cols-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
+  padding-top: 1.5rem;
 
   .mdx-cta-section__title {
     grid-column: 1 / 2;
+    margin-top: 0;
   }
 
   .mdx-cta-section__description {
     grid-column: 2 / 3;
+    margin-top: 0;
   }
 
   .mdx-cta-section__link {

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

@@ -9,6 +9,7 @@ export type CallToActionSectionProps = Omit<
 > & {
   title?: React.ReactNode
   description?: React.ReactNode
+  columns?: 1 | 2
   href?: string
   label?: string
 }
@@ -17,11 +18,14 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
   label,
   href,
   title = '',
+  columns = 1,
   description,
   className,
   children,
   ...props
 }) => {
+  const singleCol = columns === 1
+
   return (
     <div
       variant="h1"
@@ -29,12 +33,13 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
       className={clsx(
         className,
         'mdx-cta-section',
+        `mdx-cta-section--cols-${columns}`,
         description && 'mdx-cta-section--with-description',
       )}
       {...(props as any)}
     >
       <Typography
-        variant={description ? 'h6' : 'h1'}
+        variant={singleCol && !description ? 'h1' : 'h6'}
         component="span"
         className="mdx-cta-section__title"
       >
@@ -42,7 +47,7 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
       </Typography>
       {description && (
         <Typography
-          variant="h4"
+          variant={singleCol ? 'h2' : 'h4'}
           component="span"
           className="mdx-cta-section__description"
         >

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

@@ -1,5 +1,4 @@
 .mdx-showcase {
-  padding-top: 8.25rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;