Add a banner showing that you are on a trial

messages/en-US.json

@@ -25,6 +25,9 @@
     "subscriptionViolationMessage": "You're beyond your limits for your current plan. Correct the problem by removing sites, users, or other resources to stay within your plan.",
     "trialBannerMessage": "Your trial expires in {countdown}. Upgrade to keep access.",
     "trialBannerExpired": "Your trial has expired. Upgrade now to restore access.",
+    "billingTrialBannerTitle": "Free Trial Active",
+    "billingTrialBannerDescription": "You're currently on a free trial on the business tier. When the trial ends, your account will automatically revert to the Basic tier features and limits. Upgrade anytime to keep access to your current plan's features.",
+    "billingTrialBannerUpgrade": "Upgrade Now",
     "trialActive": "Free Trial Active",
     "trialExpired": "Trial Expired",
     "trialHasEnded": "Your trial has ended.",

src/app/[orgId]/settings/(private)/billing/page.tsx

@@ -55,6 +55,7 @@ import {
     tier3LimitSet
 } from "@server/lib/billing/limitSet";
 import { FeatureId } from "@server/lib/billing/features";
+import TrialBillingBanner from "@app/components/TrialBillingBanner";
 
 // Plan tier definitions matching the mockup
 type PlanId = "basic" | "home" | "team" | "business" | "enterprise";
@@ -805,6 +806,20 @@ export default function BillingPage() {
 
     return (
         <SettingsContainer>
+            {/* Trial Banner */}
+            {isTrial && (
+                <TrialBillingBanner
+                    onUpgrade={() => {
+                        const currentPlan = planOptions.find(
+                            (p) => p.id === currentPlanId
+                        );
+                        if (currentPlan?.tierType) {
+                            handleStartSubscription(currentPlan.tierType);
+                        }
+                    }}
+                />
+            )}
+
             {/* Subscription Status Alert */}
             {isProblematicState && statusMessage && (
                 <Alert variant="destructive" className="mb-6">

src/components/DismissableBanner.tsx

@@ -13,6 +13,7 @@ type DismissableBannerProps = {
     titleIcon: ReactNode;
     description: string;
     children?: ReactNode;
+    dismissable?: boolean;
 };
 
 export const DismissableBanner = ({
@@ -21,7 +22,8 @@ export const DismissableBanner = ({
     title,
     titleIcon,
     description,
-    children
+    children,
+    dismissable = true
 }: DismissableBannerProps) => {
     const [isDismissed, setIsDismissed] = useState(true);
     const t = useTranslations();
@@ -66,19 +68,21 @@ export const DismissableBanner = ({
         );
     };
 
-    if (isDismissed) {
+    if (dismissable && isDismissed) {
         return null;
     }
 
     return (
         <Card className="mb-6 relative border-primary/30 bg-linear-to-br from-primary/10 via-background to-background overflow-hidden">
-            <button
-                onClick={handleDismiss}
-                className="absolute top-3 right-3 z-10 p-1.5 rounded-md hover:bg-background/80 transition-colors cursor-pointer"
-                aria-label={t("dismiss")}
-            >
-                <X className="w-4 h-4 text-muted-foreground" />
-            </button>
+            {dismissable && (
+                <button
+                    onClick={handleDismiss}
+                    className="absolute top-3 right-3 z-10 p-1.5 rounded-md hover:bg-background/80 transition-colors cursor-pointer"
+                    aria-label={t("dismiss")}
+                >
+                    <X className="w-4 h-4 text-muted-foreground" />
+                </button>
+            )}
             <CardContent className="p-6">
                 <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                     <div className="flex-1 space-y-2 min-w-0">

src/components/TrialBillingBanner.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { ClockIcon, ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+import DismissableBanner from "./DismissableBanner";
+
+type TrialBillingBannerProps = {
+    onUpgrade: () => void;
+};
+
+export const TrialBillingBanner = ({ onUpgrade }: TrialBillingBannerProps) => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="trial-billing-banner-dismissed"
+            version={1}
+            title={t("billingTrialBannerTitle")}
+            titleIcon={<ClockIcon className="w-5 h-5 text-primary" />}
+            description={t("billingTrialBannerDescription")}
+            dismissable={false}
+        >
+            <Button
+                variant="outline"
+                size="sm"
+                className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                onClick={onUpgrade}
+            >
+                {t("billingTrialBannerUpgrade")}
+                <ArrowRight className="w-4 h-4" />
+            </Button>
+        </DismissableBanner>
+    );
+};
+
+export default TrialBillingBanner;