Issue #15: Update docs for components for some visual spacing

Author: ALRubinger

docs-infra-prototype/src/components/mdx/MDXComponents.tsx

@@ -3,25 +3,25 @@ import { CopyButton } from '@/components/ui/copy-button';
 const components = {
   h1: (props) => (
     <h1
-      className="scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl"
+      className="scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl mb-4"
       {...props}
     />
   ),
   h2: (props) => (
     <h2
-      className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-10"
+      className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-10 mb-4"
       {...props}
     />
   ),
   h3: (props) => (
     <h3
-      className="scroll-m-20 text-2xl font-semibold tracking-tight"
+      className="scroll-m-20 text-2xl font-semibold tracking-tight mb-4"
       {...props}
     />
   ),
   h4: (props) => (
     <h4
-      className="scroll-m-20 text-xl font-semibold tracking-tight"
+      className="scroll-m-20 text-xl font-semibold tracking-tight mb-4"
       {...props}
     />
   ),

docs-infra-prototype/src/pages/docs/block-components/call-to-action.mdx

@@ -30,7 +30,7 @@ import CallToAction from "@/components/block/CallToAction.astro"
 />
 ```
 
-Displays like:
+## Example
 
 <CallToAction
   headline="Ready to Build Your Documentation?"

docs-infra-prototype/src/pages/docs/block-components/checklist.mdx

@@ -23,7 +23,7 @@ import Checklist from "@/components/block/Checklist.astro"
 <Checklist items={["Modern Stack with Astro & React", "Pre-configured Tailwind CSS", "Built-in Dark Mode Support"]} />
 ```
 
-Displays like:
+## Example
 
 <Checklist items={["Modern Stack with Astro & React", "Pre-configured Tailwind CSS", "Built-in Dark Mode Support"]} />
 

docs-infra-prototype/src/pages/docs/block-components/feature-card.mdx

@@ -37,9 +37,7 @@ import FeatureCard from "@/components/block/FeatureCard.astro"
 </FeatureCard>
 ```
 
-Displays like:
-
-<div style="background-color: #f0f0f0; color: #000000; padding: 1rem; border-radius: 0.5rem;">
+## Example
 
 <FeatureCard
   label="Step 1"
@@ -56,6 +54,4 @@ Displays like:
   </div> }
 </FeatureCard>
 
-</div>
-
 </DocsLayout> 

docs-infra-prototype/src/pages/docs/block-components/hero.mdx

@@ -32,7 +32,7 @@ export const components = MDXComponents
     </Hero>
     ```
 
-    Displays like:
+    ## Example
 
     <Hero
         image={DocumentIcon}