Add a banner showing that you are on a trial

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;