From 157e53af8367f4bb55f5e556483c6e6ed20fb48f Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuthtimo@gmail.com>
Date: Tue, 14 Oct 2025 16:45:52 +0200
Subject: [PATCH] Improve MVP UX: Add CTA links, update header buttons, replace
 alerts with toasts

---
 package.json                      |  3 +--
 src/app/(app)/create/page.tsx     | 17 ++++++++++-------
 src/app/(marketing)/layout.tsx    | 12 ++++++------
 src/components/marketing/Hero.tsx | 17 +++++++++++------
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 3751314..2a4d703 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,7 @@
   "description": "Create custom QR codes in seconds",
   "private": true,
   "scripts": {
-    "dev": "node dev-server.js",
-    "dev:local": "next dev -p 3050",
+    "dev": "next dev -p 3050",
     "build": "prisma generate && next build",
     "start": "next start",
     "lint": "next lint",
diff --git a/src/app/(app)/create/page.tsx b/src/app/(app)/create/page.tsx
index 437036e..7f4d537 100644
--- a/src/app/(app)/create/page.tsx
+++ b/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
-        alert(`QR Code saved!\n\nType: ${responseData.type}\nContent: ${JSON.stringify(responseData.content, null, 2)}`);
-        
-        router.push('/dashboard');
-        router.refresh(); // Force refresh to get new data
+        showToast(`QR Code "${title}" created successfully!`, 'success');
+
+        // Wait a moment so user sees the toast, then redirect
+        setTimeout(() => {
+          router.push('/dashboard');
+          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);
     }
diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
index 4420a29..869a162 100644
--- a/src/app/(marketing)/layout.tsx
+++ b/src/app/(marketing)/layout.tsx
@@ -56,13 +56,13 @@ export default function MarketingLayout({
               >
                 {locale === 'en' ? '🇩🇪 DE' : '🇬🇧 EN'}
               </button>
-              
+
               <Link href="/login">
                 <Button variant="outline">{t('nav.login')}</Button>
               </Link>
-              
-              <Link href="/dashboard">
-                <Button>{t('nav.dashboard')}</Button>
+
+              <Link href="/signup">
+                <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)}>
-                  <Button className="w-full">{t('nav.dashboard')}</Button>
+                <Link href="/signup" onClick={() => setMobileMenuOpen(false)}>
+                  <Button className="w-full">Get Started Free</Button>
                 </Link>
               </div>
             </div>
diff --git a/src/components/marketing/Hero.tsx b/src/components/marketing/Hero.tsx
index b47681d..22c8d90 100644
--- a/src/components/marketing/Hero.tsx
+++ b/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">
-                  {t('hero.cta_primary')}
-                </Button>
-                <Button variant="outline" size="lg" className="text-lg px-8 py-4">
-                  {t('hero.cta_secondary')}
-                </Button>
+                <Link href="/signup">
+                  <Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
+                    {t('hero.cta_primary')}
+                  </Button>
+                </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>