feat: add border and align prop to CallToActionSection

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

@@ -126,6 +126,7 @@ import * as challengesData from '/generated/challenges.json'
         step-by-step guide here
       </>
     }
+    border={false}
     list={[
       {
         title: 'Simple setup',
@@ -151,8 +152,10 @@ import * as challengesData from '/generated/challenges.json'
 
 <Box top={{ xs: 144, lg: 216 }}>
   <CallToActionSection
-    columns={2}
+    columns={1}
     title="User Endorsements"
+    border={false}
+    align="right"
     description="Nimbus is trusted by Etherem validators diverse in both size and operating requirements. But don't just take our word for it."
     href="https://nimbus.team"
     label="Get Nimbus"

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

@@ -15,6 +15,36 @@
     display: block;
     width: fit-content;
   }
+
+  .mdx-cta-section--align-center {
+    * {
+      text-align: center;
+    }
+
+    .mdx-cta-button {
+      margin-inline: auto;
+    }
+  }
+
+  .mdx-cta-section--align-left {
+    * {
+      text-align: left;
+    }
+  }
+
+  .mdx-cta-section--align-right {
+    * {
+      text-align: right;
+    }
+
+    .mdx-cta-button {
+      margin-left: auto;
+    }
+  }
+}
+
+.mdx-cta-section--no-border {
+  border-top: none !important;
 }
 
 .mdx-cta-section--title-only {

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

@@ -35,6 +35,14 @@ export type CallToActionSectionProps = Omit<
    * The target attribute for the link e.g., `_self`, `_blank`
    */
   target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']
+  /**
+   * Whether to display a border-top in the section
+   */
+  border?: boolean
+  /**
+   * The text alignment of the section
+   */
+  align?: 'unset' | 'left' | 'right' | 'center'
   /**
    * The variant of the button
    */
@@ -114,6 +122,8 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
   description,
   list = [],
   target,
+  border = true,
+  align = 'unset',
   className,
   children,
   variant = 'outlined',
@@ -140,10 +150,16 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
         className,
         'mdx-cta-section',
         `mdx-cta-section--${display}`,
+        !border && 'mdx-cta-section--no-border',
       )}
       {...(props as any)}
     >
-      <div className="mdx-cta-section__container">
+      <div
+        className={clsx(
+          'mdx-cta-section__container',
+          align !== 'unset' && `mdx-cta-section--align-${align}`,
+        )}
+      >
         <Typography component="h2" className="mdx-cta-section__title">
           {title}
         </Typography>