From 54d6b4897f8c9fd89ef12655c7fc4f9523ebabf7 Mon Sep 17 00:00:00 2001 From: Giancarlo Buomprisco Date: Thu, 2 Oct 2025 15:14:11 +0800 Subject: [PATCH] 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/dev-tool/package.json | 6 +- apps/e2e/package.json | 2 +- .../site-header-account-section.tsx | 20 +- .../_components/site-page-header.tsx | 16 +- .../blog/_components/cover-image.tsx | 10 +- .../blog/_components/post-header.tsx | 20 +- .../blog/_components/post-preview.tsx | 41 +- apps/web/app/(marketing)/blog/page.tsx | 4 +- apps/web/app/(marketing)/contact/page.tsx | 2 +- .../app/(marketing)/docs/[...slug]/page.tsx | 16 +- .../docs/_components/docs-card.tsx | 29 +- .../docs/_components/docs-cards.tsx | 2 +- .../docs/_components/docs-navigation.tsx | 4 +- .../_components/docs-table-of-contents.tsx | 2 +- apps/web/app/(marketing)/docs/page.tsx | 2 +- apps/web/app/(marketing)/faq/page.tsx | 22 +- apps/web/app/(marketing)/page.tsx | 62 +- apps/web/app/(marketing)/pricing/page.tsx | 2 +- apps/web/app/home/(user)/billing/page.tsx | 52 +- apps/web/app/home/[account]/billing/page.tsx | 39 +- apps/web/package.json | 6 +- apps/web/public/images/sign-in.webp | Bin 16644 -> 22224 bytes apps/web/public/locales/en/billing.json | 6 +- apps/web/styles/globals.css | 6 +- apps/web/styles/markdoc.css | 79 +- apps/web/styles/shadcn-ui.css | 146 +-- package.json | 2 +- packages/analytics/package.json | 2 +- .../src/components/billing-session-status.tsx | 2 +- .../components/current-subscription-card.tsx | 99 +- .../gateway/src/components/plan-picker.tsx | 171 ++- .../gateway/src/components/pricing-table.tsx | 45 +- .../src/server/utils/resolve-product-plan.ts | 2 + packages/cms/core/package.json | 2 +- packages/cms/keystatic/package.json | 2 +- packages/cms/wordpress/package.json | 2 +- packages/i18n/package.json | 2 +- packages/mailers/core/package.json | 2 +- packages/mailers/resend/package.json | 2 +- packages/mcp-server/package.json | 2 +- packages/ui/package.json | 2 +- packages/ui/src/makerkit/if.tsx | 6 +- .../makerkit/marketing/ecosystem-showcase.tsx | 61 + .../src/makerkit/marketing/feature-card.tsx | 6 +- .../makerkit/marketing/feature-showcase.tsx | 5 +- packages/ui/src/makerkit/marketing/footer.tsx | 16 +- packages/ui/src/makerkit/marketing/header.tsx | 2 +- .../ui/src/makerkit/marketing/hero-title.tsx | 2 +- packages/ui/src/makerkit/marketing/hero.tsx | 8 +- packages/ui/src/makerkit/marketing/index.tsx | 1 + packages/ui/src/makerkit/marketing/pill.tsx | 2 +- .../src/makerkit/marketing/secondary-hero.tsx | 4 +- packages/ui/src/makerkit/spinner.tsx | 30 +- packages/ui/src/shadcn/card.tsx | 2 +- packages/ui/src/shadcn/radio-group.tsx | 11 +- pnpm-lock.yaml | 1065 +++++++---------- 56 files changed, 1014 insertions(+), 1142 deletions(-) create mode 100644 packages/ui/src/makerkit/marketing/ecosystem-showcase.tsx diff --git a/apps/dev-tool/package.json b/apps/dev-tool/package.json index c2f117e38..f53b59f1b 100644 --- a/apps/dev-tool/package.json +++ b/apps/dev-tool/package.json @@ -29,8 +29,8 @@ "@kit/shared": "workspace:*", "@kit/tsconfig": "workspace:*", "@kit/ui": "workspace:*", - "@tailwindcss/postcss": "^4.1.13", - "@types/node": "^24.6.1", + "@tailwindcss/postcss": "^4.1.14", + "@types/node": "^24.6.2", "@types/nodemailer": "7.0.2", "@types/react": "19.1.16", "@types/react-dom": "19.1.9", @@ -38,7 +38,7 @@ "pino-pretty": "13.0.0", "react-hook-form": "^7.63.0", "recharts": "2.15.3", - "tailwindcss": "4.1.13", + "tailwindcss": "4.1.14", "tailwindcss-animate": "^1.0.7", "typescript": "^5.9.3", "zod": "^3.25.74" diff --git a/apps/e2e/package.json b/apps/e2e/package.json index 33f63d2af..874e1830c 100644 --- a/apps/e2e/package.json +++ b/apps/e2e/package.json @@ -13,7 +13,7 @@ "devDependencies": { "@playwright/test": "^1.55.1", "@supabase/supabase-js": "2.58.0", - "@types/node": "^24.6.1", + "@types/node": "^24.6.2", "dotenv": "17.2.3", "node-html-parser": "^7.0.1", "totp-generator": "^2.0.0" diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx index a821a677c..573dc557e 100644 --- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx +++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx @@ -59,7 +59,9 @@ export function SiteHeaderAccountSection({ function AuthButtons() { return ( -
+
@@ -72,14 +74,24 @@ function AuthButtons() {
-
- -
- - {selectedPlan && selectedInterval && selectedProduct ? ( - - ) : null}
); @@ -427,78 +421,49 @@ function PlanDetails({
-
- - - - {' '} - - / - - - -

- - - -

+
+ {selectedProduct.name}
0}> - +
+
+ -
- - - +
+ {selectedProduct.features.map((item) => { + return ( + + - + + + + + ); + })} +
+
- - - -
- - - - - {selectedProduct.features.map((item) => { - return ( -
- - - - - -
- ); - })} -
); } function Price(props: React.PropsWithChildren) { return ( - + {props.children} ); diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx index d79ddbd73..7697b9db4 100644 --- a/packages/billing/gateway/src/components/pricing-table.tsx +++ b/packages/billing/gateway/src/components/pricing-table.tsx @@ -71,7 +71,7 @@ export function PricingTable({
{visibleProducts.map((product) => { @@ -171,17 +171,13 @@ function PricingItem( data-cy={'subscription-plan'} className={cn( props.className, - `s-full relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded-lg border px-6 py-5 lg:w-4/12 xl:max-w-[20rem]`, - { - ['border-primary']: highlighted, - ['border-border']: !highlighted, - }, + `s-full bg-muted/50 relative flex flex-1 grow flex-col items-stretch justify-between self-stretch rounded px-6 py-5 lg:w-4/12 xl:max-w-[20rem]`, )} >
@@ -194,12 +190,12 @@ function PricingItem(
-
-
+
+
+ + + +
-
+
+ +
- - - -
@@ -389,9 +389,9 @@ function ListItem({ highlighted: boolean; }>) { return ( -
  • +
  • , ) { return ( -
    +
    {props.intervals.map((plan, index) => { const selected = plan === props.interval; @@ -434,8 +434,7 @@ function PlanIntervalSwitcher( return (