feat: add support for rendering cta buttons next to the section titles

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

@@ -69,9 +69,21 @@
 .mdx-feature-list__feature-description {
 }
 
-.mdx-feature-list__extra {
-  margin-top: 3.5rem;
-  padding: 0 1rem;
+.mdx-feature-list__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem;
+}
+
+.mdx-feature-list--cta-top {
+}
+
+.mdx-feature-list--cta-bottom {
+  .mdx-feature-list__extra {
+    margin-top: 3.5rem;
+    padding: 0 1rem;
+  }
 }
 
 @include utils.responsive('lg', 'up') {
@@ -115,9 +127,11 @@
     }
   }
 
-  .mdx-feature-list__extra {
-    margin-top: 2rem;
-    padding: 0;
+  .mdx-feature-list--cta-bottom {
+    .mdx-feature-list__extra {
+      margin-top: 2rem;
+      padding: 0;
+    }
   }
 
   .mdx-feature-list__list {

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

@@ -24,6 +24,11 @@ export type FeatureListProps = Omit<
    * The vertical alignment of feature description.
    */
   alignment?: 'bottom' | 'top'
+
+  /**
+   * The position of the call to action buttons.
+   */
+  ctaPosition?: 'top' | 'bottom'
 }
 
 /**
@@ -53,6 +58,7 @@ export const FeatureList: React.FC<FeatureListProps> = ({
   alignment = 'bottom',
   features = [],
   className,
+  ctaPosition = 'bottom',
   children,
   ...props
 }) => {
@@ -62,16 +68,22 @@ export const FeatureList: React.FC<FeatureListProps> = ({
         className,
         'mdx-feature-list',
         `mdx-feature-list--${alignment}-aligned`,
+        `mdx-feature-list--cta-${ctaPosition}`,
       )}
       {...props}
     >
-      <Typography
-        variant="h5"
-        component="h1"
-        className="mdx-feature-list__title"
-      >
-        {title}
-      </Typography>
+      <div className="mdx-feature-list__header">
+        <Typography
+          variant="h5"
+          component="h1"
+          className="mdx-feature-list__title"
+        >
+          {title}
+        </Typography>
+        {children && ctaPosition === 'top' && (
+          <div className="mdx-feature-list__extra">{children}</div>
+        )}
+      </div>
       <div className="mdx-feature-list__list">
         {features.map((feature, index) => (
           <div key={index} className={clsx('mdx-feature-list__feature')}>
@@ -102,7 +114,9 @@ export const FeatureList: React.FC<FeatureListProps> = ({
           </div>
         ))}
       </div>
-      {children && <div className="mdx-feature-list__extra">{children}</div>}
+      {children && ctaPosition === 'bottom' && (
+        <div className="mdx-feature-list__extra">{children}</div>
+      )}
     </div>
   )
 }

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

@@ -15,6 +15,13 @@
   }
 }
 
+.mdx-section-header__title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem;
+}
+
 @include utils.responsive('lg', 'down') {
   .mdx-section-header {
     flex-direction: column;

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

@@ -9,13 +9,9 @@ export type SectionHeaderProps = Omit<BoxProps, 'title'> & {
   description?: React.ReactNode
 }
 
-export const SectionHeader: React.FC<SectionHeaderProps> = ({
-  title,
-  description,
-  className,
-  children,
-  ...props
-}) => {
+export const SectionHeader: React.FC<
+  React.PropsWithChildren<SectionHeaderProps>
+> = ({ title, description, className, children, ...props }) => {
   return (
     <Box className={clsx(className, 'mdx-section-header')} {...props}>
       <Typography
@@ -24,6 +20,9 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
         variant="h5"
       >
         {title}
+        {children && (
+          <div className="mdx-section-header__extra">{children}</div>
+        )}
       </Typography>
 
       {description && (