style: update InputCTASection styles

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>

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;
     }

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"

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;
+    }
   }
 }