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)/_components/site-header-account-section.tsx

@@ -59,7 +59,9 @@ export function SiteHeaderAccountSection({
 
 function AuthButtons() {
   return (
-    <div className={'animate-in fade-in flex gap-x-2.5 duration-500'}>
+    <div
+      className={'animate-in fade-in flex items-center gap-x-2 duration-500'}
+    >
       <div className={'hidden md:flex'}>
         <If condition={features.enableThemeToggle}>
           <ModeToggle />
@@ -72,14 +74,24 @@ function AuthButtons() {
         </If>
       </div>
 
-      <div className={'flex gap-x-2.5'}>
-        <Button className={'hidden md:block'} asChild variant={'ghost'}>
+      <div className={'flex items-center gap-x-2'}>
+        <Button
+          className={'hidden md:flex md:text-sm'}
+          asChild
+          variant={'outline'}
+          size={'sm'}
+        >
           <Link href={pathsConfig.auth.signIn}>
             <Trans i18nKey={'auth:signIn'} />
           </Link>
         </Button>
 
-        <Button asChild className="text-xs md:text-sm" variant={'default'}>
+        <Button
+          asChild
+          className="text-xs md:text-sm"
+          variant={'default'}
+          size={'sm'}
+        >
           <Link href={pathsConfig.auth.signUp}>
             <Trans i18nKey={'auth:signUp'} />
           </Link>