jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/SubscribeContent.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Button } from '@/components/ui/Button';
+
+const API_BASE = 'https://jettypod-update-server.spangbaryn2.workers.dev';
+
+type PageState = 'idle' | 'checkout-opened' | 'polling' | 'upgraded';
+type PlanType = 'monthly' | 'lifetime';
+
+interface SubscribeContentProps {
+  onClose?: () => void;
+}
+
+export function SubscribeContent({ onClose }: SubscribeContentProps) {
+  const [error, setError] = useState<string | null>(null);
+  const [checkoutPlan, setCheckoutPlan] = useState<string | null>(null);
+  const [pageState, setPageState] = useState<PageState>('idle');
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+  const [userPlan, setUserPlan] = useState<string | null>(null);
+  const [pollingPlan, setPollingPlan] = useState<PlanType | null>(null);
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    async function loadAuth() {
+      if (!window.electronAPI?.isElectron) return;
+      const status = await window.electronAPI.auth.getStatus();
+      if (status.authenticated && status.user) {
+        setUserEmail(status.user.email);
+        setUserPlan(status.user.plan || 'free');
+
+        // Check server-side plan in case webhook updated it after local JWT was issued
+        const token = await window.electronAPI.auth.getToken();
+        if (token) {
+          try {
+            const res = await fetch(`${API_BASE}/auth/me`, {
+              headers: { 'Authorization': `Bearer ${token}` },
+            });
+            if (res.ok) {
+              const data = await res.json() as { user: { plan: string; email: string }; token?: string };
+              if (data.user.plan !== 'free') {
+                if (data.token) {
+                  await window.electronAPI.auth.saveToken(data.token, data.user);
+                }
+                setUserPlan(data.user.plan);
+                setPageState('upgraded');
+                return;
+              }
+            }
+          } catch {
+            // Fall through to show upgrade UI on network error
+          }
+        }
+      }
+    }
+    loadAuth();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (pollingRef.current) clearInterval(pollingRef.current);
+    };
+  }, []);
+
+  const startPolling = () => {
+    setPageState('polling');
+
+    pollingRef.current = setInterval(async () => {
+      try {
+        const token = await window.electronAPI!.auth.getToken();
+        if (!token) return;
+
+        const res = await fetch(`${API_BASE}/auth/me`, {
+          headers: { 'Authorization': `Bearer ${token}` },
+        });
+
+        if (!res.ok) return;
+
+        const data = await res.json() as { user: { plan: string; email: string }; token?: string };
+
+        if (data.user.plan !== 'free') {
+          if (data.token) {
+            await window.electronAPI!.auth.saveToken(data.token, data.user);
+          }
+          setUserPlan(data.user.plan);
+          setPageState('upgraded');
+          if (pollingRef.current) clearInterval(pollingRef.current);
+        }
+      } catch {
+        // Silently continue polling on network/parse errors
+      }
+    }, 3000);
+  };
+
+  const handleCheckout = async (plan: 'monthly' | 'lifetime') => {
+    if (!window.electronAPI?.isElectron) return;
+    setCheckoutPlan(plan);
+    setError(null);
+
+    const result = await window.electronAPI.subscription.createCheckout(plan);
+    if (!result.success) {
+      setError(result.error || 'Failed to start checkout.');
+      setCheckoutPlan(null);
+      return;
+    }
+
+    setCheckoutPlan(null);
+    setPollingPlan(plan);
+    startPolling();
+  };
+
+  const handleDone = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      window.location.href = '/';
+    }
+  };
+
+  if (pageState === 'upgraded') {
+    return (
+      <div className="max-w-md w-full space-y-10 text-center">
+        <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
+          You&apos;re all set!
+        </h1>
+        <p className="text-zinc-500 dark:text-zinc-400">
+          Your plan has been upgraded to <span className="font-medium text-zinc-900 dark:text-zinc-100">{userPlan}</span>.
+        </p>
+        <Button onClick={handleDone} size="lg" fullWidth>
+          {onClose ? 'Done' : 'Go to Dashboard'}
+        </Button>
+      </div>
+    );
+  }
+
+  const isPolling = pageState === 'polling';
+
+  return (
+    <div className="max-w-md w-full space-y-10">
+      <div className="flex flex-col items-center space-y-6">
+        <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 text-center">
+          Unlock Unlimited Use
+        </h1>
+        <p className="text-zinc-500 dark:text-zinc-400 text-center">
+          You&apos;re currently on the free plan.
+        </p>
+      </div>
+
+      {userEmail && (
+        <div className="bg-zinc-50 dark:bg-zinc-800 rounded-xl px-5 py-4 text-base">
+          <div className="flex justify-between items-center">
+            <span className="text-zinc-500 dark:text-zinc-400">{userEmail}</span>
+            <span className="text-zinc-400 dark:text-zinc-500 capitalize">{userPlan}</span>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-5 py-4 rounded-xl text-base">
+          {error}
+        </div>
+      )}
+
+      <div className="pt-6 space-y-4">
+        {!onClose && (
+          <Button
+            variant="ghost"
+            size="sm"
+            fullWidth
+            className="mb-2"
+            onClick={() => window.history.back()}
+          >
+            &larr; Go back
+          </Button>
+        )}
+        <Button
+          onClick={() => handleCheckout('monthly')}
+          disabled={checkoutPlan !== null || isPolling}
+          size="lg"
+          fullWidth
+        >
+          {pollingPlan === 'monthly' ? (
+            <span className="inline-flex items-center gap-3">
+              <span className="animate-spin inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
+              Upgrading...
+            </span>
+          ) : checkoutPlan === 'monthly' ? 'Opening checkout...' : 'Monthly'}
+        </Button>
+
+        <Button
+          onClick={() => handleCheckout('lifetime')}
+          disabled={checkoutPlan !== null || isPolling}
+          size="lg"
+          fullWidth
+        >
+          {pollingPlan === 'lifetime' ? (
+            <span className="inline-flex items-center gap-3">
+              <span className="animate-spin inline-block h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
+              Upgrading...
+            </span>
+          ) : checkoutPlan === 'lifetime' ? 'Opening checkout...' : 'Lifetime Access'}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/apps/dashboard/components/TestTree.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { TestDashboardData, TestEpic, TestFeature, TestScenario } from '@/lib/tests';
+import { TypeIcon } from './TypeIcon';
 
 const statusIcons: Record<string, string> = {
   pass: '✅',
@@ -27,7 +28,7 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
   return (
     <div className="select-none">
       <div
-        className={`flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors ${hasError ? 'cursor-pointer' : ''}`}
+        className={`flex items-center gap-2 py-2 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out ${hasError ? 'cursor-pointer' : ''}`}
         style={{ paddingLeft: `${depth * 20 + 8}px` }}
         onClick={() => hasError && setExpanded(!expanded)}
       >
@@ -38,8 +39,8 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
         ) : (
           <span className="w-4" />
         )}
-        <span className="text-sm">{statusIcons[scenario.status]}</span>
-        <span className={`flex-1 text-sm ${statusColors[scenario.status]}`}>
+        <span className="text-base">{statusIcons[scenario.status]}</span>
+        <span className={`flex-1 text-base ${statusColors[scenario.status]}`}>
           {scenario.title}
         </span>
         <span className="text-xs text-zinc-400 font-mono">{scenario.duration}</span>
@@ -48,11 +49,11 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
       {/* Error details panel */}
       {expanded && hasError && (
         <div
-          className="mt-1 mb-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-sm"
+          className="mt-1.5 mb-3 p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 rounded text-base"
           style={{ marginLeft: `${depth * 20 + 28}px` }}
         >
           {scenario.failedStep && (
-            <div className="mb-2">
+            <div className="mb-3">
               <span className="font-semibold text-red-700 dark:text-red-300">Failed step: </span>
               <span className="text-red-600 dark:text-red-400">{scenario.failedStep}</span>
             </div>
@@ -60,7 +61,7 @@ function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
           {scenario.error && (
             <div>
               <span className="font-semibold text-red-700 dark:text-red-300">Error: </span>
-              <pre className="mt-1 p-2 bg-red-100 dark:bg-red-900/40 rounded text-xs text-red-800 dark:text-red-200 overflow-x-auto whitespace-pre-wrap">
+              <pre className="mt-1.5 p-3 bg-red-100 dark:bg-red-900/40 rounded text-xs text-red-800 dark:text-red-200 overflow-x-auto whitespace-pre-wrap">
                 {scenario.error}
               </pre>
             </div>
@@ -87,7 +88,7 @@ function FeatureNode({ feature, depth }: FeatureNodeProps) {
   return (
     <div className="select-none">
       <div
-        className="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
+        className="flex items-center gap-2 py-2 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out cursor-pointer"
         style={{ paddingLeft: `${depth * 20 + 8}px` }}
         onClick={() => setExpanded(!expanded)}
       >
@@ -98,12 +99,12 @@ function FeatureNode({ feature, depth }: FeatureNodeProps) {
         ) : (
           <span className="w-4" />
         )}
-        <span className="text-sm">✨</span>
+        <span className="text-base"><TypeIcon type="feature" /></span>
         <span className={`flex-1 font-medium ${allPassing ? 'text-zinc-900 dark:text-zinc-100' : 'text-red-600 dark:text-red-400'}`}>
           {feature.title}
         </span>
         {/* Health badge */}
-        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800">
+        <span className="text-xs px-2 py-1 rounded bg-zinc-100 dark:bg-zinc-800">
           <span className="text-green-600 dark:text-green-400">{passingCount}</span>
           <span className="text-zinc-400 mx-1">/</span>
           <span className={failingCount > 0 ? 'text-red-600 dark:text-red-400' : 'text-zinc-400'}>
@@ -135,7 +136,7 @@ function EpicNode({ epic }: EpicNodeProps) {
   return (
     <div className="select-none">
       <div
-        className="flex items-center gap-2 py-2 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
+        className="flex items-center gap-2 py-3 px-3 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out cursor-pointer"
         onClick={() => setExpanded(!expanded)}
       >
         {hasFeatures ? (
@@ -145,12 +146,12 @@ function EpicNode({ epic }: EpicNodeProps) {
         ) : (
           <span className="w-4" />
         )}
-        <span className="text-base">🎯</span>
+        <span className="text-base"><TypeIcon type="epic" /></span>
         <span className={`flex-1 font-semibold ${allPassing ? 'text-zinc-900 dark:text-zinc-100' : 'text-red-600 dark:text-red-400'}`}>
           {epic.title}
         </span>
         {/* Health badge */}
-        <span className="text-xs px-2 py-1 rounded bg-zinc-100 dark:bg-zinc-800 font-mono">
+        <span className="text-xs px-3 py-1.5 rounded bg-zinc-100 dark:bg-zinc-800 font-mono">
           <span className="text-green-600 dark:text-green-400">{epic.healthBadge.passing}</span>
           <span className="text-zinc-400 mx-1">/</span>
           <span className={epic.healthBadge.failing > 0 ? 'text-red-600 dark:text-red-400' : 'text-zinc-400'}>
@@ -184,7 +185,7 @@ export function TestTree({ data }: TestTreeProps) {
   }
 
   return (
-    <div className="font-mono text-sm space-y-2">
+    <div className="font-mono text-base space-y-2">
       {/* Epics */}
       {data.epics.map(epic => (
         <EpicNode key={epic.id} epic={epic} />
@@ -194,7 +195,7 @@ export function TestTree({ data }: TestTreeProps) {
       {data.standaloneFeatures.length > 0 && (
         <div className="mt-4">
           {data.epics.length > 0 && (
-            <div className="text-xs text-zinc-400 uppercase tracking-wider mb-2 px-2">
+            <div className="text-base text-zinc-400 uppercase tracking-wider mb-2 px-2">
               Standalone Features
             </div>
           )}

package/apps/dashboard/components/TipCard.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { m, AnimatePresence, useReducedMotion } from 'framer-motion';
+import dynamic from 'next/dynamic';
+
+const LazyMarkdown = dynamic(() => import('./LazyMarkdown'), { ssr: false });
+
+const STORAGE_KEY = 'jettypod-dismissed-tips';
+
+function getDismissedTips(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+  } catch {
+    return [];
+  }
+}
+
+function dismissTip(tipId: string): void {
+  try {
+    const dismissed = getDismissedTips();
+    if (!dismissed.includes(tipId)) {
+      dismissed.push(tipId);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(dismissed));
+    }
+  } catch {
+    // localStorage unavailable (private browsing, storage full, etc.)
+    // Dismiss still works for current session via React state
+  }
+}
+
+import { shadow } from '@/lib/shadows';
+
+interface TipCardProps {
+  tipId: string;
+  icon: string;
+  title: string;
+  body: string | React.ReactNode;
+  onDismiss?: (tipId: string) => void;
+}
+
+export function TipCard({ tipId, icon, title, body, onDismiss }: TipCardProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const [dismissed, setDismissed] = useState(() => getDismissedTips().includes(tipId));
+
+  // Sync with localStorage on mount (in case it changed between renders)
+  useEffect(() => {
+    setDismissed(getDismissedTips().includes(tipId));
+  }, [tipId]);
+
+  function handleDismiss() {
+    dismissTip(tipId);
+    setDismissed(true);
+    onDismiss?.(tipId);
+  }
+
+  return (
+    <AnimatePresence>
+      {!dismissed && (
+        <m.div
+          data-testid={`tip-card-${tipId}`}
+          initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
+          animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+          exit={prefersReducedMotion
+            ? { opacity: 0 }
+            : { opacity: 0, y: -8, scale: 0.97, transition: { duration: 0.25 } }
+          }
+          transition={{ duration: prefersReducedMotion ? 0.15 : 0.35, ease: [0.22, 1, 0.36, 1] }}
+          style={{
+            background: 'linear-gradient(135deg, #f0fdfa 0%, #f0fdfb 100%)',
+            border: '2px solid #ccfbf1',
+            borderRadius: 12,
+            padding: 14,
+            boxShadow: shadow.sm,
+          }}
+        >
+          {/* Header: icon + label/title */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
+            <div
+              style={{
+                width: 34,
+                height: 34,
+                borderRadius: '50%',
+                background: 'rgba(20, 184, 166, 0.12)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 16,
+                flexShrink: 0,
+              }}
+            >
+              {icon}
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: 10,
+                  fontWeight: 700,
+                  textTransform: 'uppercase' as const,
+                  letterSpacing: '0.06em',
+                  color: '#0d9488',
+                  opacity: 0.7,
+                }}
+              >
+                Tip
+              </div>
+              <div
+                style={{
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: '#134e4a',
+                  marginTop: 1,
+                }}
+              >
+                {title}
+              </div>
+            </div>
+          </div>
+
+          {/* Body */}
+          <div
+            style={{
+              fontSize: 13,
+              lineHeight: 1.55,
+              color: '#52525b',
+              marginLeft: 50,
+            }}
+          >
+            {typeof body === 'string' ? (
+              <LazyMarkdown
+                components={{
+                  p: ({ children }) => <p style={{ margin: '0 0 8px 0' }}>{children}</p>,
+                  strong: ({ children }) => <strong style={{ fontWeight: 600, color: '#3f3f46' }}>{children}</strong>,
+                }}
+              >
+                {body.replace(/\n/g, '  \n')}
+              </LazyMarkdown>
+            ) : body}
+          </div>
+
+          {/* Footer: Got it button */}
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+            <button
+              onClick={handleDismiss}
+              data-testid={`tip-dismiss-${tipId}`}
+              style={{
+                background: 'transparent',
+                border: '2px solid #99f6e4',
+                fontSize: 12,
+                fontWeight: 600,
+                color: '#0d9488',
+                cursor: 'pointer',
+                padding: '6px 16px',
+                borderRadius: 8,
+                transition: 'background 0.15s, border-color 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'rgba(20, 184, 166, 0.08)';
+                e.currentTarget.style.borderColor = '#14b8a6';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'transparent';
+                e.currentTarget.style.borderColor = '#99f6e4';
+              }}
+            >
+              Got it
+            </button>
+          </div>
+        </m.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export function isTipDismissed(tipId: string): boolean {
+  return getDismissedTips().includes(tipId);
+}

package/apps/dashboard/components/Toast.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, m } from 'framer-motion';
 
 interface Toast {
   id: string;
@@ -52,16 +52,16 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
 function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2" data-testid="toast-container">
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-3" data-testid="toast-container">
       <AnimatePresence mode="popLayout">
         {toasts.map(toast => (
-          <motion.div
+          <m.div
             key={toast.id}
             initial={{ opacity: 0, y: 20, scale: 0.95 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: -10, scale: 0.95 }}
             transition={{ duration: 0.2 }}
-            className={`px-4 py-2 rounded-lg shadow-lg text-sm font-medium cursor-pointer ${
+            className={`px-5 py-3 rounded-lg shadow-lg text-base font-medium cursor-pointer ${
               toast.type === 'success'
                 ? 'bg-green-600 text-white'
                 : toast.type === 'error'
@@ -72,7 +72,7 @@ function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id
             data-testid="toast"
           >
             {toast.message}
-          </motion.div>
+          </m.div>
         ))}
       </AnimatePresence>
     </div>

package/apps/dashboard/components/TypeIcon.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { TYPE_ICONS } from '@/lib/constants';
+import { shadow } from '@/lib/shadows';
+
+const SVG_ICONS: Record<string, { src: string; label: string }> = {
+  bug: { src: '/bug-icon.svg', label: 'Bug' },
+  chore: { src: '/wrench-icon.svg', label: 'Chore' },
+  epic: { src: '/buoy-icon.svg', label: 'Epic' },
+  feature: { src: '/star-icon.svg', label: 'Feature' },
+};
+
+export function TypeIcon({ type, className }: { type: string; className?: string }) {
+  const svg = SVG_ICONS[type];
+  const [tooltip, setTooltip] = useState<{ x: number; y: number } | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+    setPortalRoot(document.getElementById('tooltip-root'));
+  }, []);
+
+  const showTooltip = useCallback(() => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      setTooltip({ x: rect.left + rect.width / 2, y: rect.bottom + 4 });
+    }
+  }, []);
+
+  const hideTooltip = useCallback(() => setTooltip(null), []);
+
+  if (svg) {
+    return (
+      <span ref={ref} className="inline-flex" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
+        <img src={svg.src} alt="" className={className || "w-8 h-8"} />
+        {mounted && tooltip && portalRoot && createPortal(
+          <span
+            className="pointer-events-none fixed"
+            style={{ left: tooltip.x, top: tooltip.y, transform: 'translateX(-50%)' }}
+          >
+            <span className="block rounded-lg bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs px-2 py-1 whitespace-nowrap" style={{ boxShadow: shadow.sm }}>
+              {svg.label}
+            </span>
+          </span>,
+          portalRoot
+        )}
+      </span>
+    );
+  }
+  return <>{TYPE_ICONS[type] || '📄'}</>;
+}

package/apps/dashboard/components/UpgradeBanner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useUsage } from '../contexts/UsageContext';
+
+export function UpgradeBanner() {
+  const { allowed, used, limit, plan, loading } = useUsage();
+
+  if (loading || allowed || plan !== 'free') return null;
+
+  return (
+    <div
+      className="bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200 px-5 py-4 rounded-lg flex items-center justify-between flex-shrink-0"
+      data-testid="upgrade-banner"
+    >
+      <div className="flex items-center gap-3">
+        <span className="text-amber-600 dark:text-amber-400 text-lg">&#9888;</span>
+        <span className="text-base font-medium">
+          Weekly limit reached ({used}/{limit} work items). Claude features are disabled until your usage resets.
+        </span>
+      </div>
+      <a
+        href="/subscribe"
+        className="inline-flex items-center justify-center px-3.5 py-1.5 text-base font-medium text-white rounded-xl hover:brightness-105 active:scale-[0.98] transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-200 ease-out whitespace-nowrap"
+        style={{ backgroundColor: '#e57a44', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(229, 122, 68, 0.2)' }}
+      >
+        Upgrade
+      </a>
+    </div>
+  );
+}