Copy overhaul + qr designs

src/app/(main)/(app)/dashboard/page.tsx

@@ -7,15 +7,15 @@ import { StatsGrid } from '@/components/dashboard/StatsGrid';
 import { QRCodeCard } from '@/components/dashboard/QRCodeCard';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
-import { Badge } from '@/components/ui/Badge';
-import { useTranslation } from '@/hooks/useTranslation';
-import { useCsrf } from '@/hooks/useCsrf';
-import { showToast } from '@/components/ui/Toast';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/Dialog';
-import { QrCode } from 'lucide-react';
-import { trackEvent, identifyUser } from '@/components/PostHogProvider';
-import { FREE_DYNAMIC_QR_LIMIT } from '@/lib/plans';
-import { OnboardingChecklist } from '@/components/dashboard/OnboardingChecklist';
+import { Badge } from '@/components/ui/Badge';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useCsrf } from '@/hooks/useCsrf';
+import { showToast } from '@/components/ui/Toast';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/Dialog';
+import { QrCode } from 'lucide-react';
+import { trackEvent, identifyUser } from '@/components/PostHogProvider';
+import { FREE_DYNAMIC_QR_LIMIT } from '@/lib/plans';
+import { OnboardingChecklist } from '@/components/dashboard/OnboardingChecklist';
 
 interface QRCodeData {
   id: string;
@@ -47,8 +47,8 @@ export default function DashboardPage() {
     conversionRate: 0,
     uniqueScans: 0,
   });
-  const [analyticsData, setAnalyticsData] = useState<any>(null);
-  const [onboardingState, setOnboardingState] = useState<any>(null);
+  const [analyticsData, setAnalyticsData] = useState<any>(null);
+  const [onboardingState, setOnboardingState] = useState<any>(null);
 
 
   const blogPosts = [
@@ -121,11 +121,11 @@ export default function DashboardPage() {
           // Store in localStorage for consistency
           localStorage.setItem('user', JSON.stringify(user));
 
-          identifyUser(user.id, {
-            email: user.email,
-            name: user.name,
-            plan: user.plan || 'FREE',
-            provider: 'google',
+          identifyUser(user.id, {
+            email: user.email,
+            name: user.name,
+            plan: user.plan || 'FREE',
+            provider: 'google',
           });
 
           trackEvent(isNewUser ? 'user_signup' : 'user_login', {
@@ -146,35 +146,35 @@ export default function DashboardPage() {
   }, [searchParams, router]);
 
   // Check for successful payment and verify session
-  useEffect(() => {
-    const success = searchParams.get('success');
-    const sessionId = searchParams.get('session_id');
-
-    if (success === 'true' && sessionId) {
-      const verifySession = async () => {
-        try {
-          const response = await fetch('/api/stripe/verify-session', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ sessionId }),
-          });
-
-          if (response.ok) {
-            const data = await response.json();
-            setUserPlan(data.plan);
-            setUpgradedPlan(data.plan);
-            setShowUpgradeDialog(true);
-            trackEvent('upgrade_completed', {
-              plan: data.plan,
-              source: 'stripe_checkout',
-            });
-            // Remove success parameter from URL
-            router.replace('/dashboard');
-          } else {
-            console.error('Failed to verify session:', await response.text());
-          }
+  useEffect(() => {
+    const success = searchParams.get('success');
+    const sessionId = searchParams.get('session_id');
+
+    if (success === 'true' && sessionId) {
+      const verifySession = async () => {
+        try {
+          const response = await fetch('/api/stripe/verify-session', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ sessionId }),
+          });
+
+          if (response.ok) {
+            const data = await response.json();
+            setUserPlan(data.plan);
+            setUpgradedPlan(data.plan);
+            setShowUpgradeDialog(true);
+            trackEvent('upgrade_completed', {
+              plan: data.plan,
+              source: 'stripe_checkout',
+            });
+            // Remove success parameter from URL
+            router.replace('/dashboard');
+          } else {
+            console.error('Failed to verify session:', await response.text());
+          }
         } catch (error) {
           console.error('Error verifying session:', error);
         }
@@ -225,19 +225,19 @@ export default function DashboardPage() {
           setUserPlan(userData.plan || 'FREE');
         }
 
-        // Fetch analytics data for trends (last 30 days = month comparison)
-        const analyticsResponse = await fetch('/api/analytics/summary?range=30');
-        if (analyticsResponse.ok) {
-          const analytics = await analyticsResponse.json();
-          setAnalyticsData(analytics);
-        }
-
-        const onboardingResponse = await fetch('/api/onboarding');
-        if (onboardingResponse.ok) {
-          const onboardingData = await onboardingResponse.json();
-          setOnboardingState(onboardingData);
-        }
-      } catch (error) {
+        // Fetch analytics data for trends (last 30 days = month comparison)
+        const analyticsResponse = await fetch('/api/analytics/summary?range=30');
+        if (analyticsResponse.ok) {
+          const analytics = await analyticsResponse.json();
+          setAnalyticsData(analytics);
+        }
+
+        const onboardingResponse = await fetch('/api/onboarding');
+        if (onboardingResponse.ok) {
+          const onboardingData = await onboardingResponse.json();
+          setOnboardingState(onboardingData);
+        }
+      } catch (error) {
         console.error('Error fetching data:', error);
         setQrCodes([]);
         setStats({
@@ -320,35 +320,35 @@ export default function DashboardPage() {
     }
   };
 
-  return (
-    <div className="space-y-6">
+  return (
+    <div className="space-y-6">
       {/* Header with Plan Badge */}
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-        <div className="min-w-0">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="min-w-0">
           <h1 className="text-3xl font-bold text-gray-900">{t('dashboard.title')}</h1>
           <p className="text-gray-600 mt-2">
             {!loading && qrCodes.length === 0
-              ? 'Start here — create your first QR code in under 2 minutes'
+              ? 'Start here - create your first QR code in under 2 minutes'
               : t('dashboard.subtitle')}
           </p>
         </div>
-        <div className="flex flex-wrap items-center gap-3">
-          <Badge className="border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700">
-            {userPlan} Plan
-          </Badge>
-          {userPlan === 'FREE' && (
-            <Link href="/pricing">
-              <Button className="bg-primary-600 text-white hover:bg-primary-700">Upgrade</Button>
-            </Link>
-          )}
-        </div>
-      </div>
+        <div className="flex flex-wrap items-center gap-3">
+          <Badge className="border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700">
+            {userPlan} Plan
+          </Badge>
+          {userPlan === 'FREE' && (
+            <Link href="/upgrade?from=/dashboard">
+              <Button className="bg-primary-600 text-white hover:bg-primary-700">Upgrade</Button>
+            </Link>
+          )}
+        </div>
+      </div>
 
-      {/* Stats Grid */}
-      <OnboardingChecklist state={onboardingState} />
-
-      <StatsGrid
-        stats={stats}
+      {/* Stats Grid */}
+      <OnboardingChecklist state={onboardingState} />
+
+      <StatsGrid
+        stats={stats}
         trends={{
           totalScans: analyticsData?.summary.scansTrend,
           comparisonPeriod: analyticsData?.summary.comparisonPeriod || 'month'
@@ -357,9 +357,9 @@ export default function DashboardPage() {
 
       {/* Recent QR Codes */}
       <div>
-        <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-xl font-semibold text-gray-900">{t('dashboard.recent_codes')}</h2>
-          <div className="flex flex-wrap gap-3">
+        <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <h2 className="text-xl font-semibold text-gray-900">{t('dashboard.recent_codes')}</h2>
+          <div className="flex flex-wrap gap-3">
             {qrCodes.length > 0 && (
               <Button
                 variant="outline"
@@ -369,12 +369,12 @@ export default function DashboardPage() {
               >
                 {deletingAll ? 'Deleting...' : 'Delete All'}
               </Button>
-            )}
-            <Link href="/create">
-              <Button className="bg-primary-600 text-white hover:bg-primary-700">Create New QR Code</Button>
-            </Link>
-          </div>
-        </div>
+            )}
+            <Link href="/create">
+              <Button className="bg-primary-600 text-white hover:bg-primary-700">Create New QR Code</Button>
+            </Link>
+          </div>
+        </div>
 
         {loading ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -394,14 +394,14 @@ export default function DashboardPage() {
             ))}
           </div>
         ) : qrCodes.length === 0 ? (
-          <div className="rounded-[24px] border border-dashed border-gray-200 py-16 text-center">
+          <div className="rounded-[24px] border border-dashed border-gray-200 py-16 text-center">
             <QrCode className="w-12 h-12 text-gray-300 mx-auto mb-4" />
             <h3 className="text-lg font-semibold text-gray-700 mb-2">Create your first QR code</h3>
             <p className="text-gray-500 mb-6 max-w-sm mx-auto">
-              You have {FREE_DYNAMIC_QR_LIMIT} free dynamic QR codes. They redirect wherever you want and track every scan.
-            </p>
+              You have {FREE_DYNAMIC_QR_LIMIT} free dynamic QR codes. They redirect wherever you want and track every scan.
+            </p>
             <Link href="/create">
-              <Button className="bg-primary-600 text-white hover:bg-primary-700">Create QR Code — it takes 90 seconds</Button>
+              <Button className="bg-primary-600 text-white hover:bg-primary-700">Create QR Code - it takes 90 seconds</Button>
             </Link>
           </div>
         ) : (
@@ -470,7 +470,7 @@ export default function DashboardPage() {
                     </li>
                     <li className="flex items-start">
                       <span className="text-green-600 mr-2">✓</span>
-                      <span>Custom Branding (Colors & Logo)</span>
+                      <span>4 Module Shapes, Eye Styles &amp; Your Logo</span>
                     </li>
                     <li className="flex items-start">
                       <span className="text-green-600 mr-2">✓</span>
@@ -526,4 +526,4 @@ export default function DashboardPage() {
       </Dialog>
     </div>
   );
-}
+}