[TOOL-3683] Dashboard: show FTUX in team overview page when no projects are created

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx

@@ -6,10 +6,8 @@ import { subDays } from "date-fns";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../login/loginRedirect";
-import {
-  type ProjectWithAnalytics,
-  TeamProjectsPage,
-} from "./~/projects/TeamProjectsPage";
+import { TeamProjectsPage } from "./~/projects/TeamProjectsPage";
+import type { ProjectWithAnalytics } from "./~/projects/TeamProjectsTable";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string }>;

apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/NoProjectsFTUX.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import {
+  BookTextIcon,
+  BookUpIcon,
+  DatabaseIcon,
+  DollarSignIcon,
+  FuelIcon,
+  PlusIcon,
+  SparklesIcon,
+  SquareChevronRightIcon,
+  WalletIcon,
+} from "lucide-react";
+import Link from "next/link";
+
+export function NoProjectsFTUX(props: {
+  openCreateProjectModal: () => void;
+}) {
+  return (
+    <div className="">
+      <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-center">
+        <div>
+          <h2 className="mb-1 font-semibold text-2xl tracking-tight">
+            Create a project to use thirdweb services
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Creating a project gives you access to thirdweb's services for
+            building powerful web3 applications
+          </p>
+        </div>
+
+        <Button onClick={props.openCreateProjectModal} className="gap-2">
+          <PlusIcon className="size-4" />
+          Create Project
+        </Button>
+      </div>
+      <div className="h-6" />
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <FeatureCard
+          icon={BookUpIcon}
+          title="Deploy Contracts"
+          description="Securely deploy, build, and manage contracts on any EVM chain."
+          documentationUrl="https://portal.thirdweb.com/contracts"
+          playgroundUrl={undefined}
+        />
+        <FeatureCard
+          icon={WalletIcon}
+          title="Create In-App Wallets"
+          description="Create social, passkey, and mobile login options for easy user onboarding."
+          documentationUrl="https://portal.thirdweb.com/connect/wallet/sign-in-methods/configure"
+          playgroundUrl="https://playground.thirdweb.com/connect/in-app-wallet"
+        />
+        <FeatureCard
+          icon={FuelIcon}
+          title="Sponsor Gas Funds"
+          description="Sponsor gas and enable secure app scope for your users using ERC-4337 compliant smart accounts."
+          documentationUrl="https://portal.thirdweb.com/connect/account-abstraction/overview"
+          playgroundUrl="https://playground.thirdweb.com/connect/account-abstraction/connect"
+        />
+        <FeatureCard
+          icon={DatabaseIcon}
+          title="Index Any EVM Chain"
+          description="Index any EVM chain to aggregate and display onchain data in your application."
+          documentationUrl="https://portal.thirdweb.com/insight"
+          playgroundUrl="https://playground.thirdweb.com/insight"
+        />
+
+        <FeatureCard
+          icon={SparklesIcon}
+          title="Integrate AI"
+          description="Build AI powered crypto applications with advanced capabilities."
+          documentationUrl="https://portal.thirdweb.com/nebula"
+          playgroundUrl="https://nebula.thirdweb.com"
+        />
+
+        <FeatureCard
+          icon={DollarSignIcon}
+          title="Fiat & cross-chain crypto payments "
+          description="Bridge, swap, purchase cryptocurrencies and execute transactions with fiat or tokens via cross-chain routing"
+          documentationUrl="https://portal.thirdweb.com/connect/pay/overview"
+          playgroundUrl="https://playground.thirdweb.com/connect/pay"
+        />
+      </div>
+    </div>
+  );
+}
+
+function FeatureCard(props: {
+  icon: React.FC<{ className?: string }>;
+  title: string;
+  description: string;
+  documentationUrl: string;
+  playgroundUrl: string | undefined;
+}) {
+  return (
+    <div className="rounded-lg border bg-card p-4">
+      <div className="mb-4 inline-flex rounded-full border p-3">
+        <props.icon className="size-5 text-muted-foreground" />
+      </div>
+      <h3 className="mb-1 font-semibold text-lg">{props.title}</h3>
+      <p className="mb-6 text-muted-foreground text-sm">{props.description}</p>
+      <div className="mt-auto flex gap-2.5">
+        <Button variant="outline" size="sm" className="gap-2 text-xs" asChild>
+          <Link href={props.documentationUrl} target="_blank">
+            <BookTextIcon className="size-3 text-muted-foreground" />
+            Documentation
+          </Link>
+        </Button>
+        {props.playgroundUrl && (
+          <Button variant="outline" size="sm" className="gap-2 text-xs" asChild>
+            <Link href={props.playgroundUrl} target="_blank">
+              <SquareChevronRightIcon className="size-3 text-muted-foreground" />
+              Playground
+            </Link>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/NoProjectsFTUXCard.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NoProjectsFTUX } from "./NoProjectsFTUX";
+
+const meta = {
+  title: "Team/No Projects FTUX",
+  component: NoProjectsFTUX,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="container py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof NoProjectsFTUX>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    openCreateProjectModal: () => {},
+  },
+};