Improve MVP UX: Add CTA links, update header buttons, replace alerts with toasts

package.json

@@ -4,8 +4,7 @@
   "description": "Create custom QR codes in seconds",
   "private": true,
   "scripts": {
-    "dev": "node dev-server.js",
+    "dev": "next dev -p 3050",
-    "dev:local": "next dev -p 3050",
     "build": "prisma generate && next build",
     "start": "next start",
     "lint": "next lint",

src/app/(app)/create/page.tsx

@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { calculateContrast } from '@/lib/utils';
 import { useTranslation } from '@/hooks/useTranslation';
+import { showToast } from '@/components/ui/Toast';
 
 export default function CreatePage() {
   const router = useRouter();
@@ -159,18 +160,20 @@ export default function CreatePage() {
       console.log('RESPONSE DATA:', responseData);
 
       if (response.ok) {
-        // Show what was saved
+        showToast(`QR Code "${title}" created successfully!`, 'success');
-        alert(`QR Code saved!\n\nType: ${responseData.type}\nContent: ${JSON.stringify(responseData.content, null, 2)}`);
 
+        // Wait a moment so user sees the toast, then redirect
+        setTimeout(() => {
           router.push('/dashboard');
-        router.refresh(); // Force refresh to get new data
+          router.refresh();
+        }, 1000);
       } else {
         console.error('Error creating QR code:', responseData);
-        alert('Error creating QR code: ' + (responseData.error || 'Unknown error'));
+        showToast(responseData.error || 'Error creating QR code', 'error');
       }
     } catch (error) {
       console.error('Error creating QR code:', error);
-      alert('Error creating QR code');
+      showToast('Error creating QR code. Please try again.', 'error');
     } finally {
       setLoading(false);
     }

src/app/(marketing)/layout.tsx

@@ -61,8 +61,8 @@ export default function MarketingLayout({
                 <Button variant="outline">{t('nav.login')}</Button>
               </Link>
 
-              <Link href="/dashboard">
+              <Link href="/signup">
-                <Button>{t('nav.dashboard')}</Button>
+                <Button>Get Started Free</Button>
               </Link>
             </div>
 
@@ -98,8 +98,8 @@ export default function MarketingLayout({
                 <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
                   <Button variant="outline" className="w-full">{t('nav.login')}</Button>
                 </Link>
-                <Link href="/dashboard" onClick={() => setMobileMenuOpen(false)}>
+                <Link href="/signup" onClick={() => setMobileMenuOpen(false)}>
-                  <Button className="w-full">{t('nav.dashboard')}</Button>
+                  <Button className="w-full">Get Started Free</Button>
                 </Link>
               </div>
             </div>

src/components/marketing/Hero.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Link from 'next/link';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { Card } from '@/components/ui/Card';
@@ -50,12 +51,16 @@ export const Hero: React.FC<HeroProps> = ({ t }) => {
               </div>
               
               <div className="flex flex-col sm:flex-row gap-4">
-                <Button size="lg" className="text-lg px-8 py-4">
+                <Link href="/signup">
+                  <Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                     {t('hero.cta_primary')}
                   </Button>
-                <Button variant="outline" size="lg" className="text-lg px-8 py-4">
+                </Link>
+                <Link href="/create">
+                  <Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                     {t('hero.cta_secondary')}
                   </Button>
+                </Link>
               </div>
             </div>
           </div>