From 4b2a2eedfd45e1100183a4c240f900fe12611ae1 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Thu, 1 Jun 2023 19:52:19 +0330
Subject: [PATCH] feat: add cta button to feature list

---
 .../docusaurus-playground/src/pages/index.mdx |  7 +++-
 .../CallToActionButton.scss                   | 30 ++++++++++++++++
 .../CallToActionButton/CallToActionButton.tsx | 36 +++++++++++++++++++
 .../mdx/CallToActionButton/index.ts           |  1 +
 .../CallToActionSection.tsx                   | 15 +++-----
 .../mdx/FeatureList/FeatureList.scss          | 10 ++++++
 .../mdx/FeatureList/FeatureList.tsx           |  1 +
 .../src/client/components/mdx/index.ts        |  1 +
 8 files changed, 89 insertions(+), 12 deletions(-)
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.scss
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/index.ts

diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index 2bb1e00..2724e33 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/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
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.scss
new file mode 100644
index 0000000..55e8a47
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/CallToActionButton.tsx
new file mode 100644
index 0000000..a4dcf82
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/index.ts
new file mode 100644
index 0000000..b6e1a3d
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionButton/index.ts
@@ -0,0 +1 @@
+export * from './CallToActionButton'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
index 95257a7..7ef5375 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
+++ b/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>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
index ba53c85..b47530f 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
+++ b/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;
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
index d793808..1c7c1c4 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
+++ b/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>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
index 5cb48d7..7d0f06c 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
+++ b/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'