MVP ready to test

src/app/not-found.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/Button';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center px-4">
+      <div className="max-w-2xl w-full text-center">
+        {/* 404 Icon */}
+        <div className="mb-8">
+          <div className="inline-flex items-center justify-center w-24 h-24 bg-primary-100 rounded-full mb-6">
+            <svg
+              className="w-12 h-12 text-primary-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+
+          {/* 404 Text */}
+          <h1 className="text-6xl md:text-8xl font-bold text-gray-900 mb-4">404</h1>
+          <h2 className="text-2xl md:text-3xl font-semibold text-gray-700 mb-4">
+            Page Not Found
+          </h2>
+          <p className="text-lg text-gray-600 mb-8 max-w-md mx-auto">
+            Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <Link href="/">
+            <Button size="lg">
+              <svg
+                className="w-5 h-5 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                />
+              </svg>
+              Go Home
+            </Button>
+          </Link>
+
+          <Link href="/create">
+            <Button variant="outline" size="lg">
+              Create QR Code
+            </Button>
+          </Link>
+        </div>
+
+        {/* Help Text */}
+        <div className="mt-12 pt-8 border-t border-gray-200">
+          <p className="text-sm text-gray-500">
+            Need help?{' '}
+            <Link href="/#faq" className="text-primary-600 hover:text-primary-700 font-medium">
+              Visit our FAQ
+            </Link>{' '}
+            or{' '}
+            <Link href="/blog" className="text-primary-600 hover:text-primary-700 font-medium">
+              read our blog
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}