feat: add cta button to feature list

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

@@ -5,6 +5,7 @@ import {
   HeroActions,
   HeroAction,
   CallToActionSection,
+  CallToActionButton,
   FeatureList,
   Showcase,
   HeroModel,
@@ -69,7 +70,11 @@ import {
         "Waku's native incentivization mechanisms ensure a wide node distribution, making it highly secure and strengthening its privacy assurances.",
     },
   ]}
-/>
+>
+  <CallToActionButton variant="outlined" href="https://docs.waku.org">
+    Decentralize your DApp
+  </CallToActionButton>
+</FeatureList>
 
 <Box top={{ xs: 144, lg: 216 }}>
   <CallToActionSection

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

@@ -0,0 +1,30 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-cta-button {
+  margin-top: 2rem;
+
+  &:hover {
+    &,
+    * {
+      text-decoration: none !important;
+    }
+  }
+
+  button,
+  button span {
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+  }
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-cta-button {
+    @include lsd.typography('label2');
+
+    button {
+      padding: 6px 12px;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Button, ButtonProps, Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import './CallToActionButton.scss'
+
+export type CallToActionButtonProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title'
+> & {
+  href?: string
+  size?: ButtonProps['size']
+  variant?: ButtonProps['variant']
+}
+
+export const CallToActionButton: React.FC<CallToActionButtonProps> = ({
+  href,
+  className,
+  variant = 'filled',
+  size = 'large',
+  children,
+  ...props
+}) => {
+  return (
+    <Typography
+      className={clsx('mdx-cta-button', className)}
+      variant="body1"
+      component="a"
+      href={href}
+      target="_blank"
+    >
+      <Button size={size} variant={variant}>
+        {children}
+      </Button>
+    </Typography>
+  )
+}

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

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

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

@@ -1,6 +1,7 @@
 import { Button, Typography } from '@acid-info/lsd-react'
 import clsx from 'clsx'
 import React from 'react'
+import { CallToActionButton } from '../index'
 import './CallToActionSection.scss'
 
 export type CallToActionSectionProps = Omit<
@@ -52,17 +53,9 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
           {description}
         </Typography>
       )}
-      <Typography
-        className="mdx-cta-section__link"
-        variant="body1"
-        component="a"
-        href={href}
-        target="_blank"
-      >
-        <Button size="large" variant="filled">
-          {label}
-        </Button>
-      </Typography>
+      <CallToActionButton href={href} className="mdx-cta-section__link">
+        {label}
+      </CallToActionButton>
     </div>
   )
 }

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

@@ -48,10 +48,20 @@
   margin-top: 8.625rem;
 }
 
+.mdx-feature-list__extra {
+  margin-top: 3.5rem;
+  padding: 0 1rem;
+}
+
 @include utils.responsive('lg', 'down') {
   .mdx-feature-list {
   }
 
+  .mdx-feature-list__extra {
+    margin-top: 2rem;
+    padding: 0;
+  }
+
   .mdx-feature-list__title {
     @include lsd.typography('subtitle1');
     padding: 1rem 0;

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

@@ -61,6 +61,7 @@ export const FeatureList: React.FC<FeatureListProps> = ({
           </div>
         ))}
       </div>
+      <div className="mdx-feature-list__extra">{children}</div>
     </div>
   )
 }

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

@@ -1,4 +1,5 @@
 export * from './Box'
+export * from './CallToActionButton'
 export * from './CallToActionSection'
 export * from './FeatureList'
 export * from './Hero'