[TOOL-4493] Dashboard: Add starter legacy discontinuation banner (#7047)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a `StarterLegacyDiscontinuedBanner` component to the `RootTeamLayout` in `layout.tsx`. It displays a notification for users on the "starter_legacy" billing plan, informing them of the discontinuation and providing a link to select a new plan.

### Detailed summary
- Added a conditional rendering for `StarterLegacyDiscontinuedBanner` based on the team's billing plan.
- Created the `StarterLegacyDiscontinuedBanner` component to inform users about the discontinuation of starter legacy plans.
- Included a button with a link to the billing settings for selecting a new plan, featuring an `ArrowRightIcon`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

@@ -1,5 +1,8 @@
 import { getTeamBySlug } from "@/api/team";
+import { Button } from "@/components/ui/button";
 import { PosthogIdentifierServer } from "components/wallets/PosthogIdentifierServer";
+import { ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { EnsureValidConnectedWalletLoginServer } from "../../components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
@@ -28,6 +31,10 @@ export default async function RootTeamLayout(props: {
   return (
     <div className="flex min-h-dvh flex-col">
       <div className="flex grow flex-col">
+        {team.billingPlan === "starter_legacy" && (
+          <StarterLegacyDiscontinuedBanner teamSlug={team_slug} />
+        )}
+
         {team.billingStatus === "pastDue" && (
           <PastDueBanner teamSlug={team_slug} />
         )}
@@ -50,3 +57,31 @@ export default async function RootTeamLayout(props: {
     </div>
   );
 }
+
+function StarterLegacyDiscontinuedBanner(props: {
+  teamSlug: string;
+}) {
+  return (
+    <div className="border-red-600 border-b bg-red-50 px-4 py-6 text-red-800 dark:border-red-700 dark:bg-red-950 dark:text-red-100">
+      <div className="text-center">
+        <p>Starter legacy plans are being discontinued on May 31, 2025</p>
+        <p>
+          To prevent service interruptions and losing access to your current
+          features select a new plan
+        </p>
+        <Button
+          asChild
+          size="sm"
+          className="mt-3 gap-2 border border-red-600 bg-red-100 text-red-800 hover:bg-red-200 dark:border-red-700 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800"
+        >
+          <Link
+            href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true`}
+          >
+            Select a new plan
+            <ArrowRightIcon className="size-4" />
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}