style: update CallToActionSection style

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

@@ -152,16 +152,22 @@ import * as challengesData from '/generated/challenges.json'
         title: 'Simple setup',
         description:
           'Run integrated Nimbus Beacon Node and Validator Client together.',
+        href: 'https://nimbus.guide/quick-start.html',
+        target: '_blank',
       },
       {
         title: 'Beacon setup',
         description:
           'Use Nimbus Beacon Node with an alternative validator client.',
+        href: 'https://nimbus.guide/quick-start.html',
+        target: '_blank',
       },
       {
         title: 'Validator setup',
         description:
           'Use Nimbus Validator Client with an alternative Beacon Node',
+        href: 'https://nimbus.guide/quick-start.html',
+        target: '_blank',
       },
     ]}
     label="Get Nimbus"
@@ -430,7 +436,7 @@ import * as challengesData from '/generated/challenges.json'
   </Box>
 </Box>
 
-<Box top={{ xs: 214 }}>
+<Box top={{ xs: 144, lg: 166 }}>
   <CallToActionSection
     title="Logos Network State"
     columns={1}

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

@@ -127,6 +127,10 @@
   }
 }
 
+.mdx-cta-section__list-item-link {
+  cursor: pointer;
+}
+
 .mdx-cta-section--list {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -165,7 +169,7 @@
     }
 
     .mdx-cta-section__list-item {
-      > .mdx-cta-section__item-title {
+      > a > .mdx-cta-section__item-title {
         margin-top: 1.5rem;
         padding: 3px 11px;
         display: flex;
@@ -177,6 +181,10 @@
         border: 1px solid rgb(var(--lsd-border-primary));
       }
 
+      & > a {
+        text-decoration: none;
+      }
+
       & > .mdx-cta-section__item-description {
         margin-top: 1rem;
       }

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

@@ -64,6 +64,10 @@ export type CallToActionSectionProps = Omit<
      * The URL to link to when the button is clicked
      */
     href?: string
+    /**
+     * The target attribute for the link e.g., `_self`, `_blank`
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']
   }[]
 }
 
@@ -188,14 +192,20 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
           {list.map((option, index) => {
             const content = (
               <div className="mdx-cta-section__list-item" key={index}>
-                <Typography
-                  component="div"
-                  variant="body2"
-                  className="mdx-cta-section__item-title"
+                <a
+                  className="mdx-cta-section__list-item-link"
+                  href={option?.href}
+                  target={option.target}
                 >
-                  {option.title}
-                  <IconExternalLink size="m" />
-                </Typography>
+                  <Typography
+                    component="div"
+                    variant="body2"
+                    className="mdx-cta-section__item-title"
+                  >
+                    {option.title}
+                    <IconExternalLink size="m" />
+                  </Typography>
+                </a>
                 <Typography
                   variant="h4"
                   component="p"