feat: added docs page

TODO.md

@@ -28,6 +28,7 @@
 - [ ] check if Bulk add dialog and Bulk edit dialog can use a common logic instead of duplicating the code.
 - [ ] remove the demo routes and data, but add the learning and knowledge base to the docs (learning.md).
 - [ ] add in account deletion option, also need to think of how to handle the case when user deletes their account from clerk, panel.
+- [ ] update /docs and not found page.
 
 ---
 

package.json

@@ -2,7 +2,7 @@
   "name": "tijori",
   "private": true,
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "scripts": {
     "dev": "vite dev",
     "dev:convex": "bunx convex dev",

src/components/docs-components.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface DocsCodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+}
+
+export function DocsCodeBlock({ code, language = "bash", className }: DocsCodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div
+      className={cn(
+        "group relative my-6 overflow-hidden rounded-lg border border-border/60 bg-muted/30",
+        className
+      )}
+    >
+      <div className="flex items-center justify-between border-b border-border/40 bg-muted/20 px-4 py-2">
+        <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60">
+          {language}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="h-6 w-6 text-muted-foreground transition-all hover:bg-primary/10 hover:text-primary"
+          onClick={handleCopy}
+        >
+          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+        </Button>
+      </div>
+      <div className="relative">
+        <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed text-muted-foreground">
+          <code>{code}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+interface DocsStepHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Step header that automatically numbers itself when used inside a container with 'docs-step-container' class
+ */
+export function DocsStepHeader({ children, className }: DocsStepHeaderProps) {
+  return (
+    <div className={cn("docs-step-header flex items-center gap-4 mb-4 group", className)}>
+      <div className="docs-step-number flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-[15px] font-black text-primary-foreground shadow-lg shadow-primary/20 transition-transform group-hover:scale-110" />
+      <h2 className="text-2xl font-bold tracking-tight text-foreground transition-colors group-hover:text-primary">
+        {children}
+      </h2>
+    </div>
+  );
+}
+
+interface DocsHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DocsHeader({ children, className }: DocsHeaderProps) {
+  return (
+    <h2 className={cn("text-2xl font-bold tracking-tight text-foreground mb-6", className)}>
+      {children}
+    </h2>
+  );
+}

src/components/not-found.tsx

@@ -0,0 +1,91 @@
+import { Link } from "@tanstack/react-router";
+import { ArrowLeft, FileText, HelpCircle, Home } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface NotFoundProps {
+  title?: string;
+  description?: string;
+  backLink?: string;
+  backText?: string;
+  isDocs?: boolean;
+}
+
+export function NotFound({
+  title = "Page Not Found",
+  description = "Oops! The page you're looking for seems to have vanished into the vault.",
+  backLink = "/",
+  backText = "Back to Home",
+  isDocs = false,
+}: NotFoundProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center px-6 transition-all duration-700 animate-in fade-in slide-in-from-bottom-8",
+        isDocs ? "min-h-[400px] py-12" : "min-h-[80vh] py-20"
+      )}
+    >
+      <div className="relative mb-8">
+        <div className="absolute inset-0 blur-3xl opacity-20 bg-primary rounded-full animate-pulse" />
+        <div className="relative flex h-24 w-24 items-center justify-center rounded-3xl bg-muted/50 border border-border/50 text-primary shadow-2xl backdrop-blur-sm">
+          <HelpCircle className="h-12 w-12 animate-bounce" />
+        </div>
+      </div>
+
+      <div className="max-w-md text-center space-y-4">
+        <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl bg-clip-text text-transparent bg-linear-to-b from-foreground to-foreground/70">
+          404
+        </h1>
+        <h2 className="text-2xl font-bold tracking-tight text-foreground">{title}</h2>
+        <p className="text-muted-foreground text-lg leading-relaxed">{description}</p>
+      </div>
+
+      <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
+        <Link to={backLink}>
+          <Button
+            size="lg"
+            className="rounded-xl gap-2 shadow-xl shadow-primary/20 font-semibold group"
+          >
+            <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
+            {backText}
+          </Button>
+        </Link>
+        <Link to="/">
+          <Button variant="outline" size="lg" className="rounded-xl gap-2 font-semibold">
+            <Home className="h-4 w-4" />
+            Dashboard
+          </Button>
+        </Link>
+        {!isDocs && (
+          <Link to="/docs">
+            <Button variant="ghost" size="lg" className="rounded-xl gap-2 font-semibold">
+              <FileText className="h-4 w-4" />
+              Read Docs
+            </Button>
+          </Link>
+        )}
+      </div>
+
+      {!isDocs && (
+        <div className="mt-20 grid grid-cols-1 sm:grid-cols-2 gap-4 w-full max-w-2xl">
+          <div className="p-6 rounded-2xl border border-border/40 bg-muted/10 hover:bg-muted/20 transition-colors">
+            <h3 className="font-bold text-foreground mb-1">Looking for setup?</h3>
+            <p className="text-sm text-muted-foreground mb-4">Check our local development guide.</p>
+            <Link to="/docs/local-setup" className="text-xs font-bold text-primary hover:underline">
+              View Guide →
+            </Link>
+          </div>
+          <div className="p-6 rounded-2xl border border-border/40 bg-muted/10 hover:bg-muted/20 transition-colors">
+            <h3 className="font-bold text-foreground mb-1">Security questions?</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              Learn about our zero-knowledge architecture.
+            </p>
+            <Link to="/docs/security" className="text-xs font-bold text-primary hover:underline">
+              Explore Security →
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/onboarding-tutorial.tsx

@@ -32,7 +32,7 @@ const DASHBOARD_STEPS: TutorialStep[] = [
     title: "Your Projects",
     description: "Projects live here. Open one to manage environments and encrypted variables.",
     selector: '[data-tutorial-id="projects-section"]',
-    placement: "top",
+    placement: "bottom",
   },
   {
     id: "new-project",
@@ -237,7 +237,7 @@ export function OnboardingTutorial({ enabled = true, restartSignal }: TutorialOv
     if (!isActive) return;
 
     const updateMeasurements = () => {
-      const target = step ? (document.querySelector(step.selector)) : null;
+      const target = step ? document.querySelector(step.selector) : null;
       if (!target) {
         const nextIndex = findNextAvailable(currentIndex + 1);
         if (nextIndex === -1) {

src/lib/constants.ts

@@ -41,7 +41,8 @@ export const SHARE_EXPIRY_OPTIONS = [
 export type ShareExpiryValue = (typeof SHARE_EXPIRY_OPTIONS)[number]["value"];
 
 export const META_DATA = {
-  github: "https://github.com/pantharshit007/tijori",
+  github_repo: "https://github.com/pantharshit007/tijori",
+  github: "https://github.com/pantharshit007",
   twitter: "https://x.com/pantharshit007",
 };