Add card button component and enhance routing

This commit introduces the Card Button component to the UI package and improves URL matching by allowing end to be a boolean or function. Navigation menu components now support both cases. Additionally, changes have been made to improve the visual and functional aspects of various components throughout the application. This includes changes in pricing display, route active checking, and the introduction of new files such as HomeAddAccountButton and HomeAccountsList.

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

@@ -24,7 +24,7 @@ function DocsNavLink({
   level: number;
   activePath: string;
 }) {
-  const isCurrent = isRouteActive(url, activePath, 0);
+  const isCurrent = isRouteActive(url, activePath, true);
   const isFirstLevel = level === 0;
 
   return (

apps/web/app/home/(user)/_components/home-accounts-list.tsx

@@ -0,0 +1,50 @@
+import { use } from 'react';
+
+import Link from 'next/link';
+
+import { CardButton, CardButtonHeader } from '@kit/ui/card-button';
+import { Heading } from '@kit/ui/heading';
+
+import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
+import { HomeAddAccountButton } from './home-add-account-button';
+
+export function HomeAccountsList() {
+  const { accounts } = use(loadUserWorkspace());
+
+  if (!accounts.length) {
+    return <HomeAccountsListEmptyState />;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {accounts.map((account) => (
+          <CardButton key={account.value} asChild>
+            <Link href={`/home/${account.value}`}>
+              <CardButtonHeader>{account.label}</CardButtonHeader>
+            </Link>
+          </CardButton>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function HomeAccountsListEmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center space-y-8 py-24">
+      <div className="flex flex-col items-center space-y-1">
+        <Heading level={2}>You don&apos;t have any teams yet.</Heading>
+
+        <Heading
+          className="font-sans font-medium text-muted-foreground"
+          level={4}
+        >
+          Create a team to get started.
+        </Heading>
+      </div>
+
+      <HomeAddAccountButton />
+    </div>
+  );
+}

apps/web/app/home/(user)/_components/home-add-account-button.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useState } from 'react';
+
+import { CreateTeamAccountDialog } from '@kit/team-accounts/components';
+import { Button } from '@kit/ui/button';
+
+export function HomeAddAccountButton() {
+  const [isAddingAccount, setIsAddingAccount] = useState(false);
+
+  return (
+    <>
+      <Button size="sm" onClick={() => setIsAddingAccount(true)}>
+        Create a new team
+      </Button>
+
+      <CreateTeamAccountDialog
+        isOpen={isAddingAccount}
+        setIsOpen={setIsAddingAccount}
+      />
+    </>
+  );
+}

apps/web/app/home/(user)/_components/home-menu-navigation.tsx

@@ -22,7 +22,7 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
       path: string;
       label: string;
       Icon?: React.ReactNode;
-      end?: boolean | undefined;
+      end?: boolean | ((path: string) => boolean);
     }>
   >((acc, item) => {
     if ('children' in item) {

apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx

@@ -22,7 +22,7 @@ export function TeamAccountNavigationMenu(props: {
       path: string;
       label: string;
       Icon?: React.ReactNode;
-      end?: boolean | undefined;
+      end?: boolean | ((path: string) => boolean);
     }>
   >((acc, item) => {
     if ('children' in item) {