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)/blog/page.tsx

@@ -87,7 +87,7 @@ async function BlogPage(props: BlogPageProps) {
         subtitle={t('marketing:blogSubtitle')}
       />
 
-      <div className={'container flex flex-col space-y-6 py-12'}>
+      <div className={'container flex flex-col space-y-6 py-8'}>
         <If
           condition={posts.length > 0}
           fallback={<Trans i18nKey="marketing:noPosts" />}
@@ -115,7 +115,7 @@ export default withI18n(BlogPage);
 
 function PostsGridList({ children }: React.PropsWithChildren) {
   return (
-    <div className="grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3 lg:gap-x-12">
+    <div className="grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-2 md:gap-y-12 lg:grid-cols-3">
       {children}
     </div>
   );