Merge pull request #17 from BeyteFlow/features/404

Create 404Page.tsx

Author: naheel0

src/pages/404Page.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+const NotFound: React.FC = () => {
+    return (
+        <div className="min-h-screen bg-[#F7F7F7] flex flex-col items-center justify-center px-6 font-sans">
+            {/* Brand Header Style */}
+            <nav className="absolute top-0 w-full py-8 text-center">
+                <h1 className="text-xl font-medium tracking-[0.2em] text-[#1A1A1A]">ZAYQ</h1>
+            </nav>
+
+            <main className="text-center">
+                {/* Large 404 Number with the Card Background color */}
+                <h2 className="text-[120px] font-light leading-none text-[#E0E0E0] mb-4">
+                    404
+                </h2>
+
+                <h3 className="text-2xl md:text-3xl font-normal text-[#1A1A1A] mb-4">
+                    This path wasn't chosen with intention.
+                </h3>
+
+                <p className="text-[#555555] max-w-md mx-auto mb-10 leading-relaxed">
+                    The page you are looking for doesn't exist or has been moved.
+                    Let's get you back to where things feel right.
+                </p>
+
+                {/* The ZAYQ Signature Button Style */}
+                <a
+                    href="/"
+                    className="inline-block bg-[#1A1A1A] text-[#F7F7F7] px-10 py-3 text-sm font-medium tracking-wide rounded-[4px] transition-opacity hover:opacity-90"
+                >
+                    Back to Home
+                </a>
+            </main>
+
+            {/* Subtle Footer */}
+            <footer className="absolute bottom-10 w-full text-center">
+                <p className="text-xs text-[#555555] tracking-widest uppercase">
+                    © 2024 ZAYQ. All rights reserved.
+                </p>
+            </footer>
+        </div>
+    );
+};
+
+export default NotFound;