Imrpovements

package.json

@@ -16,6 +16,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.416.0",
+    "monaco-editor": "^0.52.2",
     "monaco-themes": "^0.4.4",
     "next": "14.2.5",
     "react": "^18",

src/app/error.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-950 text-white flex flex-col items-center justify-center p-4">
+      <div className="text-center max-w-lg mx-auto">
+        <div className="mb-6">
+          <div className="h-16 w-16 rounded-md overflow-hidden mx-auto mb-4">
+            <Image 
+              src="/favicon.ico" 
+              alt="prisma2ts Logo" 
+              width={64} 
+              height={64}
+              priority
+              unoptimized
+            />
+          </div>
+          <h1 className="text-5xl font-bold mb-2">Error</h1>
+          <h2 className="text-2xl font-medium text-gray-300 mb-6">Something went wrong!</h2>
+          <p className="text-gray-400 mb-8">
+            {error.message || "An unexpected error occurred"}
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Button
+              onClick={reset}
+              className="bg-blue-600 hover:bg-blue-700 transition-colors"
+            >
+              Try again
+            </Button>
+            <Link href="/">
+              <Button className="bg-gray-700 hover:bg-gray-600 transition-colors">
+                Return to Home
+              </Button>
+            </Link>
+          </div>
+        </div>
+        <div className="text-gray-500 text-sm">
+          <Link href="https://github.com/audn/prisma2ts" className="hover:text-blue-400 transition-colors">
+            prisma2ts GitHub
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+} 

src/app/globals.css

@@ -29,6 +29,9 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
     --radius: 0.5rem;
+    --scrollbar-bg: #1c1c1c;
+    --scrollbar-thumb: #3b82f6;
+    --scrollbar-thumb-hover: #60a5fa;
   }
 }
 
@@ -46,6 +49,57 @@ source: https://stackoverflow.com/a/78473746/7172290
 .react-codemirror2 > .CodeMirror:first-child {
   display: none;
 }
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--scrollbar-bg);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
+/* CodeMirror specific scrollbar styling */
+.CodeMirror-vscrollbar::-webkit-scrollbar,
+.CodeMirror-hscrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.CodeMirror-hscrollbar::-webkit-scrollbar-track {
+  background-color: var(--scrollbar-bg);
+}
+
+.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+}
+
 /* 
 @layer base {
   * {

src/app/layout.tsx

@@ -6,8 +6,41 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Prisma Schema to Typescript",
-  description: "Convert your Prisma schema to Typescript types",
+  title: "Prisma2TS - Convert Prisma Schema to TypeScript Interfaces",
+  description: "A free developer tool that instantly transforms your Prisma schema into TypeScript interfaces. Save time and ensure type safety in your projects.",
+  keywords: ["prisma", "typescript", "code generator", "schema conversion", "developer tools", "type safety"],
+  authors: [{ name: "Prisma2TS Team" }],
+  creator: "Prisma2TS",
+  publisher: "Prisma2TS",
+  openGraph: {
+    title: "Prisma2TS - Convert Prisma Schema to TypeScript",
+    description: "A free developer tool that instantly transforms your Prisma schema into TypeScript interfaces.",
+    url: "https://prisma2ts.vercel.app",
+    siteName: "Prisma2TS",
+    images: [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Prisma2TS - Convert Prisma Schema to TypeScript"
+      }
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Prisma2TS - Prisma Schema to TypeScript Converter",
+    description: "A free developer tool that instantly transforms your Prisma schema into TypeScript interfaces.",
+    images: ["/og-image.png"],
+  },
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon.ico",
+    apple: "/apple-touch-icon.png",
+  },
+  viewport: "width=device-width, initial-scale=1",
+  themeColor: "#1e293b",
 };
 
 export default function RootLayout({

src/app/not-found.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-950 text-white flex flex-col items-center justify-center p-4">
+      <div className="text-center max-w-lg mx-auto">
+        <div className="mb-6">
+          <div className="h-16 w-16 rounded-md overflow-hidden mx-auto mb-4">
+            <Image 
+              src="/favicon.ico" 
+              alt="prisma2ts Logo" 
+              width={64} 
+              height={64}
+              priority
+              unoptimized
+            />
+          </div>
+          <h1 className="text-5xl font-bold mb-2">404</h1>
+          <h2 className="text-2xl font-medium text-gray-300 mb-6">Page Not Found</h2>
+          <p className="text-gray-400 mb-8">
+            The page you're looking for doesn't exist or has been moved.
+          </p>
+          <Link href="/">
+            <Button className="bg-blue-600 hover:bg-blue-700 transition-colors">
+              Return to Home
+            </Button>
+          </Link>
+        </div>
+        <div className="text-gray-500 text-sm">
+          <Link href="https://github.com/audn/prisma2ts" className="hover:text-blue-400 transition-colors">
+            prisma2ts GitHub
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}