Adding lightblue background to getstarted

Author: erikvansebille

src/components/features.js

@@ -18,7 +18,7 @@ export const Features = () => {
   return (
     <Box id={'features'} as='section'>
       <Container maxW='container.lg' pt={0} centerContent>
-        <Heading as='h1' size='2xl'>
+        <Heading as='h1' size='2xl' mt={6}>
           Key Features & Capabilities
         </Heading>
         <Text fontSize={'lg'}>

src/components/getstarted.js

@@ -140,9 +140,9 @@ export const GetStarted = () => {
   const isHtmlFigure = (src) => src?.toLowerCase().endsWith('.html')
 
   return (
-    <Box id={'getstarted'} as='section'>
+    <Box id={'getstarted'} as='section' bg='blue.50' mb={6}>
       <Container maxW='container.lg' centerContent>
-        <Heading as='h1' size='2xl'>
+        <Heading as='h1' size='2xl' mt={6}>
           Get started as
         </Heading>
 
@@ -162,7 +162,7 @@ export const GetStarted = () => {
                 borderRadius='md'
                 width='100%'
                 height='64px'
-                fontSize='2xl'
+                fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
                 fontWeight='bold'
                 onClick={() => handleTabClick(index)}
                 display='flex'

src/components/hero-banner.js

@@ -5,7 +5,7 @@ import { Image, Link } from '@/components/mdx'
 export const HeroBanner = () => {
   return (
     <Box id='header' as='section'>
-      <Container maxW='container.lg' pt={24} centerContent>
+      <Container maxW='container.lg' pt={24} centerContent mb={6}>
         <Stack
           align={'center'}
           spacing={{ base: 8, md: 10 }}

src/components/mdx/heading.js

@@ -1,6 +1,6 @@
 import { Box, Heading as ChakraHeading } from '@chakra-ui/react'
 
-export const Heading = (props) => (
+export const Heading = ({ children, ...props }) => (
   <ChakraHeading
     css={{
       scrollMarginTop: '100px',
@@ -17,12 +17,12 @@ export const Heading = (props) => (
       },
       '&[id]:hover a': { opacity: 1 },
     }}
-    {...props}
     mb='1em'
     mt='2em'
+    {...props}
   >
     <Box pointerEvents='auto'>
-      {props.children}
+      {children}
       {props.id && (
         <Box
           aria-label='anchor'