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>

apps/web/app/(marketing)/_components/site-page-header.tsx

@@ -14,11 +14,21 @@ export function SitePageHeader({
   const containerClass = container ? 'container' : '';
 
   return (
-    <div className={cn('border-b py-8 xl:py-10 2xl:py-12', className)}>
-      <div className={cn('flex flex-col gap-y-3 lg:gap-y-4', containerClass)}>
+    <div
+      className={cn(
+        'border-border/40 border-b py-6 xl:py-8 2xl:py-10',
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          'flex flex-col items-center gap-y-2 lg:gap-y-3',
+          containerClass,
+        )}
+      >
         <h1
           className={
-            'font-heading text-3xl font-medium tracking-tighter xl:text-5xl dark:text-white'
+            'font-heading text-3xl tracking-tighter xl:text-5xl dark:text-white'
           }
         >
           {title}