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

packages/ui/src/shadcn/card.tsx

@@ -7,7 +7,7 @@ const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   ...props
 }) => (
   <div
-    className={cn('bg-card text-card-foreground rounded-xl border', className)}
+    className={cn('bg-card text-card-foreground rounded-lg border', className)}
     {...props}
   />
 );

packages/ui/src/shadcn/radio-group.tsx

@@ -25,13 +25,13 @@ const RadioGroupItem: React.FC<
   return (
     <RadioGroupPrimitive.Item
       className={cn(
-        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow-xs focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="fill-primary h-3.5 w-3.5" />
+        <CheckIcon className="fill-primary animate-in fade-in slide-in-from-left-4 h-3.5 w-3.5" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
@@ -46,14 +46,15 @@ const RadioGroupItemLabel = (
 ) => {
   return (
     <label
+      data-selected={props.selected}
       className={cn(
         props.className,
         'flex cursor-pointer rounded-md' +
           ' border-input items-center space-x-4 border' +
-          ' transition-duration-500 focus-within:border-primary p-4 text-sm transition-all',
+          'focus-within:border-primary active:bg-muted p-2.5 text-sm transition-all',
         {
-          [`bg-muted`]: props.selected,
-          [`hover:bg-muted`]: !props.selected,
+          [`bg-muted/70`]: props.selected,
+          [`hover:bg-muted/50`]: !props.selected,
         },
       )}
     >