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/home/(user)/billing/page.tsx

@@ -1,6 +1,3 @@
-import { z } from 'zod';
-
-import { PlanSchema, ProductSchema } from '@kit/billing';
 import { resolveProductPlan } from '@kit/billing-gateway';
 import {
   BillingPortalCard,
@@ -38,16 +35,22 @@ async function PersonalAccountBillingPage() {
   const [subscription, order, customerId] =
     await loadPersonalAccountBillingPageData(user.id);
 
-  const subscriptionProductPlan = subscription
-    ? await getProductPlan(
-        subscription.items[0]?.variant_id,
-        subscription.currency,
-      )
-    : undefined;
+  const subscriptionVariantId = subscription?.items[0]?.variant_id;
+  const orderVariantId = order?.items[0]?.variant_id;
 
-  const orderProductPlan = order
-    ? await getProductPlan(order.items[0]?.variant_id, order.currency)
-    : undefined;
+  const subscriptionProductPlan =
+    subscription && subscriptionVariantId
+      ? await resolveProductPlan(
+          billingConfig,
+          subscriptionVariantId,
+          subscription.currency,
+        )
+      : undefined;
+
+  const orderProductPlan =
+    order && orderVariantId
+      ? await resolveProductPlan(billingConfig, orderVariantId, order.currency)
+      : undefined;
 
   const hasBillingData = subscription || order;
 
@@ -59,7 +62,7 @@ async function PersonalAccountBillingPage() {
       />
 
       <PageBody>
-        <div className={'flex flex-col space-y-4'}>
+        <div className={'flex max-w-2xl flex-col space-y-4'}>
           <If
             condition={hasBillingData}
             fallback={
@@ -68,7 +71,7 @@ async function PersonalAccountBillingPage() {
               </>
             }
           >
-            <div className={'flex w-full max-w-2xl flex-col space-y-6'}>
+            <div className={'flex w-full flex-col space-y-6'}>
               <If condition={subscription}>
                 {(subscription) => {
                   return (
@@ -95,9 +98,7 @@ async function PersonalAccountBillingPage() {
             </div>
           </If>
 
-          <If condition={customerId}>
-            <CustomerBillingPortalForm />
-          </If>
+          <If condition={customerId}>{() => <CustomerBillingPortalForm />}</If>
         </div>
       </PageBody>
     </>
@@ -113,20 +114,3 @@ function CustomerBillingPortalForm() {
     </form>
   );
 }
-
-async function getProductPlan(
-  variantId: string | undefined,
-  currency: string,
-): Promise<
-  | {
-      product: ProductSchema;
-      plan: z.infer<typeof PlanSchema>;
-    }
-  | undefined
-> {
-  if (!variantId) {
-    return undefined;
-  }
-
-  return resolveProductPlan(billingConfig, variantId, currency);
-}

apps/web/app/home/[account]/billing/page.tsx

@@ -1,7 +1,5 @@
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { z } from 'zod';
 
-import { PlanSchema, ProductSchema } from '@kit/billing';
 import { resolveProductPlan } from '@kit/billing-gateway';
 import {
   BillingPortalCard,
@@ -47,15 +45,15 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
   const [subscription, order, customerId] =
     await loadTeamAccountBillingPage(accountId);
 
-  const subscriptionProductPlan = subscription
-    ? await getProductPlan(
-        subscription.items[0]?.variant_id,
-        subscription.currency,
-      )
+  const variantId = subscription?.items[0]?.variant_id;
+  const orderVariantId = order?.items[0]?.variant_id;
+
+  const subscriptionProductPlan = variantId
+    ? await resolveProductPlan(billingConfig, variantId, subscription.currency)
     : undefined;
 
-  const orderProductPlan = order
-    ? await getProductPlan(order.items[0]?.variant_id, order.currency)
+  const orderProductPlan = orderVariantId
+    ? await resolveProductPlan(billingConfig, orderVariantId, order.currency)
     : undefined;
 
   const hasBillingData = subscription || order;
@@ -97,11 +95,7 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
       />
 
       <PageBody>
-        <div
-          className={cn(`flex w-full flex-col space-y-4`, {
-            'max-w-2xl': hasBillingData,
-          })}
-        >
+        <div className={cn(`flex max-w-2xl flex-col space-y-4`)}>
           <If condition={!hasBillingData}>
             <Checkout />
           </If>
@@ -154,20 +148,3 @@ function CannotManageBillingAlert() {
     </Alert>
   );
 }
-
-async function getProductPlan(
-  variantId: string | undefined,
-  currency: string,
-): Promise<
-  | {
-      product: ProductSchema;
-      plan: z.infer<typeof PlanSchema>;
-    }
-  | undefined
-> {
-  if (!variantId) {
-    return undefined;
-  }
-
-  return resolveProductPlan(billingConfig, variantId, currency);
-}