From bb30487386b01b3c679e3078821516a1665f002b Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Sat, 23 Mar 2024 21:42:12 +0900
Subject: [PATCH] style: update InputCTASection styles

---
 .../docusaurus-playground/src/pages/index.mdx | 41 +++++++++++++++++++
 .../mdx/InputCTASection/InputCTASection.scss  |  4 +-
 .../mdx/InputCTASection/InputCTASection.tsx   |  2 +-
 .../src/client/css/custom.scss                |  6 +++
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index b450c4a..506bf43 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/packages/docusaurus-playground/src/pages/index.mdx
@@ -589,3 +589,44 @@ import * as challengesData from '/generated/challenges.json'
         urna fames mattis tincidunt nibh mi ornare. Sed amet morbi mauris
         pellentesque fusce ut. Bibendum vestibulum"
 />
+
+<Box top={{ xs: 152, lg: 300 }}>
+  <Grid
+    xs={{ cols: 1, gap: '1rem' }}
+    md={{ cols: 2 }}
+    className="bottom-cta-sections"
+  >
+    <Grid.Item xs={1}>
+      <InputCTASection
+        description={
+          'Want to get involved with Codex?\nJoin the Discord community.'
+        }
+        link="https://discord.gg/codex-storage"
+        label="Get Involved"
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <InputCTASection
+        description={'Subscribe\nto our newsletter'}
+        label="Subscribe"
+        formInput={[
+          {
+            label: 'Name',
+            placeholder: 'Name',
+            type: 'text',
+            name: 'name',
+            required: true,
+          },
+          {
+            label: 'Email',
+            placeholder: 'Enter your email',
+            type: 'email',
+            name: 'email',
+            required: true,
+          },
+        ]}
+        formListId={3}
+      />
+    </Grid.Item>
+  </Grid>
+</Box>
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss
index ee9fe81..745ec96 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss
@@ -1,7 +1,7 @@
 @use '../../../css/utils';
 @use '../../../css/lsd';
 
-.mdx-event-cta-section__container {
+.mdx-input-cta-section__container {
   border-top: 1px solid rgb(var(--lsd-border-primary));
   padding-top: 24px;
 
@@ -49,7 +49,7 @@
 }
 
 @include utils.responsive('sm', 'down') {
-  .mdx-event-cta-section__container {
+  .mdx-input-cta-section__container {
     .mdx-event-cta-section__input-fields {
       margin-bottom: 16px;
     }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx
index b089e60..1cd5c43 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx
@@ -65,7 +65,7 @@ export const InputCTASection: React.FC<InputCTASectionProps & Props> = ({
   }
 
   return (
-    <div className="mdx-event-cta-section__container">
+    <div className="mdx-input-cta-section__container">
       {title && (
         <Typography
           variant="subtitle1"
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index 22bddb2..d0ae8e7 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -870,6 +870,12 @@ main[itemtype*='Blog'] {
     .mdx-grid__content {
       gap: 98px !important;
     }
+
+    .mdx-grid__content:last-of-type
+      > div:last-of-type
+      > .mdx-input-cta-section__container {
+      margin-bottom: 120px;
+    }
   }
 }