Convert

app/crypto/blockchain/page.tsx

@@ -0,0 +1,5 @@
+import { BlockchainPage } from "@/components/crypto/blockchain-page";
+
+export default function Page() {
+    return <BlockchainPage />;
+}

app/crypto/page.tsx

@@ -0,0 +1,5 @@
+import { UuidPage } from "@/components/crypto/uuid-page";
+
+export default function Page() {
+    return <UuidPage />;
+}

app/docs/page.tsx

@@ -0,0 +1,5 @@
+import { DocsPage } from "@/components/docs";
+
+export default function Page() {
+    return <DocsPage />;
+}

app/documentation/page.tsx

@@ -1,130 +1,142 @@
 "use client";
 
 import React from 'react';
-import {
-    Book,
-    Zap,
-    Shield,
-    Globe,
-    Braces,
-    Box,
-    Terminal,
-    Cpu
-} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { HelpCircle, Book, Code, Sparkles, Terminal } from 'lucide-react';
+import Footer from "@/components/common/Footer";
 
-import { Footer } from "@/components/landing/footer";
-
-const DOCS_SECTIONS = [
-    {
-        title: "Getting Started",
-        items: [
-            {
-                icon: Zap,
-                label: "Introduction",
-                content: "Web Utils is a high-performance, universal file editor and code previewer designed for modern developers. It allows you to instantly edit, visualize, and format multiple data structures with zero setup."
-            },
-            {
-                icon: Terminal,
-                label: "Quick Start",
-                content: "Navigate to the /view route, paste your code into the editor, and watch as it instantly renders in the preview pane. Use the sidebar to switch between output formats."
-            }
-        ]
-    },
-    {
-        title: "Supported Formats",
-        items: [
-            {
-                icon: Globe,
-                label: "HTML & Bootstrap",
-                content: "Full support for HTML5 and Bootstrap 5.3. Renders code in a safe, sandboxed iframe environment."
-            },
-            {
-                icon: Braces,
-                label: "JSON & YAML",
-                content: "Automatic syntax validation and beautification for structured data. Error highlighting for invalid syntax."
-            },
-            {
-                icon: Box,
-                label: "React (JSX/TSX)",
-                content: "Premium syntax highlighting for React components. Perfect for reviewing component structures."
-            }
-        ]
-    },
-    {
-        title: "Advanced Features",
-        items: [
-            {
-                icon: Cpu,
-                label: "Performance",
-                content: "Built on Next.js 15 for lightning-fast route transitions and optimized rendering cycles."
-            },
-            {
-                icon: Shield,
-                label: "Security",
-                content: "All previews are sandboxed to prevent script execution from impacting the main application window."
-            }
-        ]
-    }
-];
-
-export default function DocsPage() {
+export default function DocumentationPage() {
     return (
-        <div className="h-full overflow-y-auto bg-white dark:bg-zinc-950 px-4 py-20 scrollbar-none">
-            <div className="max-w-4xl mx-auto">
-                <header className="mb-20 text-center">
-                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-500 text-xs font-bold uppercase tracking-widest mb-6">
-                        <Book className="size-3" />
-                        <span>Documentation</span>
-                    </div>
-                    <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-br from-zinc-900 via-zinc-700 to-zinc-500 dark:from-white dark:via-zinc-300 dark:to-zinc-500">
-                        Everything you need to <br /> scale your workflow.
+        <div className="h-full overflow-auto bg-background custom-scrollbar w-full flex flex-col">
+            <div className="max-w-4xl mx-auto space-y-8 flex-1 w-full p-6">
+                {/* Header */}
+                <div className="space-y-2">
+                    <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
+                        <HelpCircle className="size-8 text-indigo-500" />
+                        Documentation
                     </h1>
-                    <p className="text-lg text-zinc-600 dark:text-zinc-400">
-                        A comprehensive guide to using and extending the Web Utils platform.
+                    <p className="text-muted-foreground">
+                        Learn how to use Web Utils to supercharge your developer workflow.
                     </p>
-                </header>
+                </div>
 
-                <div className="space-y-20">
-                    {DOCS_SECTIONS.map((section) => (
-                        <section key={section.title}>
-                            <h2 className="text-xl font-bold mb-8 border-b border-zinc-100 dark:border-zinc-800 pb-4 flex items-center gap-3">
-                                <span className="size-1.5 rounded-full bg-indigo-500" />
-                                {section.title}
-                            </h2>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                                {section.items.map((item) => (
-                                    <div key={item.label} className="group p-6 rounded-2xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/30 dark:bg-zinc-900/10 hover:bg-white dark:hover:bg-zinc-900 hover:shadow-xl transition-all duration-300">
-                                        <div className="size-10 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-zinc-900 dark:text-white mb-5 transition-transform group-hover:scale-110 shadow-sm">
-                                            <item.icon className="size-5" />
-                                        </div>
-                                        <h3 className="font-bold text-lg mb-3 dark:text-zinc-100">{item.label}</h3>
-                                        <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
-                                            {item.content}
-                                        </p>
-                                    </div>
-                                ))}
-                            </div>
-                        </section>
-                    ))}
+                <div className="grid gap-6 md:grid-cols-2">
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Book className="size-5 text-indigo-500" /> Getting Started
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <p>
+                                Web Utils is a suite of carefully crafted utilities running entirely in your browser. No data is sent to external servers, ensuring complete privacy and security for your sensitive code and tokens.
+                            </p>
+                            <p>
+                                Simply select a tool from the sidebar to begin.
+                            </p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Code className="size-5 text-indigo-500" /> Code Editors
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <p>
+                                All text-based tools use the Monaco Editor (the core of VS Code). This provides you with powerful features like:
+                            </p>
+                            <ul className="list-disc pl-5 space-y-1">
+                                <li>Syntax highlighting & validation</li>
+                                <li>Minimap for large files</li>
+                                <li>Multiple cursors</li>
+                                <li>Command Palette (F1)</li>
+                            </ul>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Sparkles className="size-5 text-indigo-500" /> Formatting
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <p>
+                                Need to format an ugly JSON or un-minified HTML block? Most editors have a &quot;Format&quot; button near the top right, or you can right-click anywhere in the editor and select <strong>&quot;Format Document&quot;</strong>.
+                            </p>
+                        </CardContent>
+                    </Card>
+
+                    <Card className="border-border/50 shadow-sm">
+                        <CardHeader>
+                            <CardTitle className="text-lg flex items-center gap-2">
+                                <Terminal className="size-5 text-indigo-500" /> Keyboard Shortcuts
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4 text-sm text-muted-foreground">
+                            <ul className="space-y-2">
+                                <li className="flex justify-between items-center">
+                                    <span>Command Palette</span>
+                                    <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono font-bold">Ctrl + K</kbd>
+                                </li>
+                                <li className="flex justify-between items-center">
+                                    <span>Toggle Sidebar</span>
+                                    <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono font-bold">Ctrl + B</kbd>
+                                </li>
+                                <li className="flex justify-between items-center">
+                                    <span>Format Document</span>
+                                    <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono font-bold">Shift + Alt + F</kbd>
+                                </li>
+                            </ul>
+                        </CardContent>
+                    </Card>
                 </div>
 
-                {/* Footer info */}
-                <div className="mt-32 p-8 rounded-3xl bg-gradient-to-br from-indigo-600 to-purple-700 text-white text-center shadow-2xl shadow-indigo-500/20 mb-20">
-                    <h2 className="text-2xl font-bold mb-4">Ready to get started?</h2>
-                    <p className="text-indigo-100 mb-8 max-w-lg mx-auto">
-                        Join thousands of developers using Web Utils to edit and preview their code more efficiently.
-                    </p>
-                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-                        <button className="px-8 py-3 bg-white text-indigo-600 font-bold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg">
-                            Launch App
-                        </button>
-                        <button className="px-8 py-3 bg-indigo-500/20 text-white border border-white/20 font-bold rounded-xl hover:bg-indigo-500/30 transition-colors">
-                            Star on GitHub
-                        </button>
+                {/* Learn Section */}
+                <div className="space-y-6 pt-8">
+                    <h2 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-3">
+                        <Sparkles className="size-6 text-amber-500" />
+                        How Things Work
+                    </h2>
+
+                    <div className="grid gap-6 md:grid-cols-1">
+                        <Card className="border-amber-500/20 bg-amber-500/5 shadow-sm">
+                            <CardHeader>
+                                <CardTitle className="text-lg flex items-center gap-2">
+                                    <Book className="size-5 text-amber-500" /> Blockchain Technology
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-4 text-sm text-muted-foreground leading-relaxed">
+                                <p>
+                                    At its core, a blockchain is a <strong>distributed ledger</strong>. Imagine a digital spreadsheet that is copied thousands of times across a network of computers. This network is designed to regularly update this spreadsheet.
+                                </p>
+                                <div className="grid md:grid-cols-3 gap-4 py-2">
+                                    <div className="space-y-1">
+                                        <div className="font-bold text-foreground">1. Blocks</div>
+                                        <p className="text-xs">Data is bundled into blocks. Each block has a unique hash and the hash of the previous block.</p>
+                                    </div>
+                                    <div className="space-y-1">
+                                        <div className="font-bold text-foreground">2. Hashing</div>
+                                        <p className="text-xs">A cryptographic fingerprint. If any data in the block changes, the hash changes completely.</p>
+                                    </div>
+                                    <div className="space-y-1">
+                                        <div className="font-bold text-foreground">3. Consensus</div>
+                                        <p className="text-xs">The network must agree on the validity of a block before it is added to the chain.</p>
+                                    </div>
+                                </div>
+                                <p>
+                                    This structure makes the blockchain <strong>immutable</strong>—once a block is added, it cannot be changed without changing all subsequent blocks, which would require the consensus of the entire network.
+                                </p>
+                            </CardContent>
+                        </Card>
                     </div>
                 </div>
             </div>
-            <Footer />
+            <div className="mt-auto">
+                <Footer />
+            </div>
         </div>
     );
 }

app/draw/page.tsx

@@ -0,0 +1,5 @@
+import { DrawPage } from "@/components/draw/draw-page";
+
+export default function Page() {
+    return <DrawPage />;
+}

app/dummy/page.tsx

@@ -0,0 +1,5 @@
+import { DummyFilePage } from "@/components/dummy/dummy-page";
+
+export default function Page() {
+    return <DummyFilePage />;
+}

app/editor/page.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import { EditorContainer } from "@/components/editor/editor-container";
-import { DEFAULT_CONTENT } from "@/data/default-content";
+import { WorkspaceContainer } from "@/components/workspace/workspace-container";
 
 export default function EditorPage() {
     return (
         <div className="flex w-full h-full overflow-hidden bg-background">
             <main className="flex-1 overflow-hidden relative">
-                <EditorContainer
-                    initialContent={DEFAULT_CONTENT.html}
-                    initialFormat="html"
+                <WorkspaceContainer 
+                    initialContent='{\n  "name": "Web Utils Workspace",\n  "status": "Ready"\n}' 
+                    initialFormat="json" 
                 />
             </main>
         </div>

app/globals.css

@@ -135,18 +135,33 @@
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(0, 0, 0, 0.03);
   border-radius: 10px;
 }
 
 .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 .custom-scrollbar:hover::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.08);
 }
 
 .dark .custom-scrollbar:hover::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.08);
 }
+
+/* Global Smooth Transitions */
+.smooth-layout {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Monaco Editor Overrides */
+.monaco-editor, .monaco-editor .margin, .monaco-editor-background {
+  background-color: transparent !important;
+}
+
+.monaco-editor {
+  padding-top: 8px;
+}
+