Design Updates (#379)

* Enhance Marketing Pages and UI Components

- Updated the marketing homepage to include an Ecosystem Showcase component, improving the presentation of the SaaS Starter Kit.
- Refined various UI components, including adjustments to spacing, typography, and layout for better visual consistency.
- Improved accessibility by adding aria-labels and ensuring proper semantic structure in components.
- Adjusted styles across multiple components to enhance responsiveness and user experience.
- Updated the pricing table and feature cards to align with the new design standards, ensuring a cohesive look and feel throughout the application.
- Updated plan picker design

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -59,15 +59,17 @@ async function DocumentationPage({ params }: DocumentationPageProps) {
   );
 
   return (
-    <div className={'flex flex-1 flex-col gap-y-4 overflow-y-hidden py-5'}>
+    <div className={'flex flex-1 flex-col gap-y-4 overflow-y-hidden py-4'}>
       <div className={'flex overflow-y-hidden'}>
-        <article className={cn('gap-y-12 overflow-y-auto px-6')}>
-          <section className={'flex flex-col gap-y-2.5'}>
-            <h1 className={'text-foreground text-3xl font-semibold'}>
-              {page.title}
-            </h1>
+        <article className={cn('gap-y-12 overflow-y-auto px-4')}>
+          <section
+            className={'flex flex-col gap-y-1 border-b border-dashed pb-4'}
+          >
+            <h1 className={'text-foreground text-3xl'}>{page.title}</h1>
 
-            <h2 className={'text-muted-foreground text-lg'}>{description}</h2>
+            <h2 className={'text-secondary-foreground/80 text-lg'}>
+              {description}
+            </h2>
           </section>
 
           <div className={'markdoc'}>