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'}>

apps/web/app/(marketing)/docs/_components/docs-card.tsx

@@ -1,9 +1,5 @@
 import Link from 'next/link';
 
-import { ChevronRight } from 'lucide-react';
-
-import { Trans } from '@kit/ui/trans';
-
 export function DocsCard({
   title,
   subtitle,
@@ -15,11 +11,11 @@ export function DocsCard({
   link: { url: string; label?: string };
 }>) {
   return (
-    <div className="flex flex-col">
+    <Link href={link.url} className="flex flex-col">
       <div
-        className={`bg-background flex grow flex-col gap-y-2 border p-6 ${link ? 'rounded-t-lg border-b-0' : 'rounded-lg'}`}
+        className={`bg-muted/50 hover:bg-muted/70 flex grow flex-col gap-y-2 rounded p-4`}
       >
-        <h3 className="mt-0 text-lg font-semibold hover:underline dark:text-white">
+        <h3 className="mt-0 text-lg font-medium hover:underline dark:text-white">
           <Link href={link.url}>{title}</Link>
         </h3>
 
@@ -31,23 +27,6 @@ export function DocsCard({
 
         {children && <div className="text-sm">{children}</div>}
       </div>
-
-      {link && (
-        <div className="bg-muted/50 rounded-b-lg border p-6 py-4">
-          <Link
-            className={
-              'flex items-center space-x-2 text-sm font-medium hover:underline'
-            }
-            href={link.url}
-          >
-            <span>
-              {link.label ?? <Trans i18nKey={'marketing:readMore'} />}
-            </span>
-
-            <ChevronRight className={'h-4'} />
-          </Link>
-        </div>
-      )}
-    </div>
+    </Link>
   );
 }

apps/web/app/(marketing)/docs/_components/docs-cards.tsx

@@ -6,7 +6,7 @@ export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
   const cardsSortedByOrder = [...cards].sort((a, b) => a.order - b.order);
 
   return (
-    <div className={'grid grid-cols-1 gap-6 lg:grid-cols-2'}>
+    <div className={'grid grid-cols-1 gap-4 lg:grid-cols-2'}>
       {cardsSortedByOrder.map((item) => {
         return (
           <DocsCard

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -116,7 +116,9 @@ export function DocsNavigation({
     <>
       <Sidebar
         variant={'ghost'}
-        className={'sticky z-1 mt-4 max-h-full overflow-y-auto'}
+        className={
+          'sticky z-1 mt-4 max-h-full overflow-y-auto border-r-transparent'
+        }
       >
         <SidebarGroup>
           <SidebarGroupContent>

apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx

@@ -13,7 +13,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
   const navData = props.data;
 
   return (
-    <div className="bg-background sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l p-4 lg:block">
+    <div className="bg-background sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] p-2.5 lg:block">
       <ol
         role="list"
         className="relative text-sm text-gray-600 dark:text-gray-400"

apps/web/app/(marketing)/docs/page.tsx

@@ -21,7 +21,7 @@ async function DocsPage() {
   const cards = items.filter((item) => !item.parentId);
 
   return (
-    <div className={'flex flex-col gap-y-6 xl:gap-y-10'}>
+    <div className={'flex flex-col gap-y-6 xl:gap-y-8'}>
       <SitePageHeader
         title={t('marketing:documentation')}
         subtitle={t('marketing:documentationSubtitle')}