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/_components/cover-image.tsx

@@ -12,13 +12,9 @@ type Props = {
 export function CoverImage({ title, src, preloadImage, className }: Props) {
   return (
     <Image
-      className={cn(
-        'block rounded-xl object-cover duration-250' +
-          ' transition-all hover:opacity-90',
-        {
-          className,
-        },
-      )}
+      className={cn('block rounded-md object-cover', {
+        className,
+      })}
       src={src}
       priority={preloadImage}
       alt={`Cover Image for ${title}`}

apps/web/app/(marketing)/blog/_components/post-header.tsx

@@ -10,24 +10,24 @@ export function PostHeader({ post }: { post: Cms.ContentItem }) {
 
   return (
     <div className={'flex flex-1 flex-col'}>
-      <div className={cn('border-b py-8')}>
-        <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
+      <div className={cn('border-border/50 border-b py-8')}>
+        <div className={'mx-auto flex max-w-3xl flex-col gap-y-2.5'}>
+          <div>
+            <span className={'text-muted-foreground text-xs'}>
+              <DateFormatter dateString={publishedAt} />
+            </span>
+          </div>
+
           <h1
             className={
-              'font-heading text-3xl font-semibold tracking-tighter xl:text-5xl dark:text-white'
+              'font-heading text-2xl font-medium tracking-tighter xl:text-4xl dark:text-white'
             }
           >
             {title}
           </h1>
 
-          <div>
-            <span className={'text-muted-foreground'}>
-              <DateFormatter dateString={publishedAt} />
-            </span>
-          </div>
-
           <h2
-            className={'text-muted-foreground text-base xl:text-lg'}
+            className={'text-muted-foreground text-base'}
             dangerouslySetInnerHTML={{ __html: description ?? '' }}
           ></h2>
         </div>

apps/web/app/(marketing)/blog/_components/post-preview.tsx

@@ -12,7 +12,7 @@ type Props = {
   imageHeight?: string | number;
 };
 
-const DEFAULT_IMAGE_HEIGHT = 250;
+const DEFAULT_IMAGE_HEIGHT = 220;
 
 export function PostPreview({
   post,
@@ -25,41 +25,44 @@ export function PostPreview({
   const slug = `/blog/${post.slug}`;
 
   return (
-    <div className="transition-shadow-sm flex flex-col gap-y-4 rounded-lg duration-500">
+    <Link
+      href={slug}
+      className="hover:bg-muted/50 active:bg-muted flex flex-col gap-y-2.5 rounded-md p-4 transition-all"
+    >
       <If condition={image}>
         {(imageUrl) => (
           <div className="relative mb-2 w-full" style={{ height }}>
-            <Link href={slug}>
-              <CoverImage
-                preloadImage={preloadImage}
-                title={title}
-                src={imageUrl}
-              />
-            </Link>
+            <CoverImage
+              preloadImage={preloadImage}
+              title={title}
+              src={imageUrl}
+            />
           </div>
         )}
       </If>
 
-      <div className={'flex flex-col space-y-4 px-1'}>
+      <div className={'flex flex-col space-y-2'}>
         <div className={'flex flex-col space-y-2'}>
-          <h2 className="text-xl leading-snug font-semibold tracking-tight">
-            <Link href={slug} className="hover:underline">
-              {title}
-            </Link>
-          </h2>
-
-          <div className="flex flex-row items-center gap-x-3 text-sm">
+          <div className="flex flex-row items-center gap-x-3 text-xs">
             <div className="text-muted-foreground">
               <DateFormatter dateString={publishedAt} />
             </div>
           </div>
+
+          <h2 className="text-lg leading-snug font-medium tracking-tight">
+            <span className="hover:underline">{title}</span>
+          </h2>
         </div>
 
         <p
           className="text-muted-foreground mb-4 text-sm leading-relaxed"
-          dangerouslySetInnerHTML={{ __html: description ?? '' }}
+          dangerouslySetInnerHTML={{ __html: trimText(description ?? '', 200) }}
         />
       </div>
-    </div>
+    </Link>
   );
 }
+
+function trimText(text: string, maxLength: number) {
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
+}