Chore/vercel analytics

docs/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.5.19",
+    "@vercel/analytics": "^1.6.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.34.3",

docs/public/google4c4480f5ebd28060.html

@@ -0,0 +1 @@
+google-site-verification: google4c4480f5ebd28060.html

docs/src/app/docs/how-it-works/page.tsx

@@ -1,7 +1,22 @@
+import type { Metadata } from "next";
 import { DocsPagination } from "@/components/DocsPagination";
 import { Cpu, Shield, FileCode2 } from "lucide-react";
 import { Card } from "@/components/ui/card";
 
+export const metadata: Metadata = {
+  title: "How It Works",
+  description: "Understand Secure Input architecture: keystroke capture, worker isolation, and WASM encryption flow.",
+  alternates: {
+    canonical: "/docs/how-it-works",
+  },
+  openGraph: {
+    title: "How Secure Input Works",
+    description: "Architecture walkthrough of worker-based isolation and WASM-powered encryption.",
+    url: "https://secure-input.vercel.app/docs/how-it-works",
+    type: "article",
+  },
+};
+
 export default function HowItWorksPage() {
   return (
     <div className="prose prose-invert prose-zinc max-w-4xl font-body">

docs/src/app/docs/installation/page.tsx

@@ -1,7 +1,21 @@
-import { CodeBlock } from "@/components/CodeBlock";
+import type { Metadata } from "next";
 import { PackageManagerCode } from "@/components/PackageManagerCode";
 import { DocsPagination } from "@/components/DocsPagination";
 
+export const metadata: Metadata = {
+  title: "Installation",
+  description: "Install Secure Input packages for React, Next.js, or framework-agnostic JavaScript projects.",
+  alternates: {
+    canonical: "/docs/installation",
+  },
+  openGraph: {
+    title: "Install Secure Input",
+    description: "Get started with @secure-input/react or @secure-input/core in minutes.",
+    url: "https://secure-input.vercel.app/docs/installation",
+    type: "article",
+  },
+};
+
 export default function InstallationPage() {
   return (
     <div className="prose prose-invert prose-zinc max-w-4xl font-body">

docs/src/app/docs/layout.tsx

@@ -1,10 +1,23 @@
+import type { Metadata } from "next";
 import { DocsSidebar } from "@/components/DocsSidebar";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Menu, Lock, GitBranch, BookText } from "lucide-react";
+import { Menu, GitBranch, BookText } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 
+export const metadata: Metadata = {
+  title: {
+    default: "Documentation",
+    template: "%s | Secure Input Docs",
+  },
+  description: "Secure Input documentation for installation, architecture, React integration, Vanilla JS usage, and server-side decryption.",
+  alternates: {
+    canonical: "/docs",
+  },
+};
+
 export default function DocsLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex min-h-screen flex-col bg-background font-sans text-foreground">
@@ -21,7 +34,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
               </SheetTrigger>
               <SheetContent side="left" className="w-[300px] border-white/10 bg-background sm:w-[400px]">
                 <div className="flex items-center gap-2 mb-8 mt-4">
-                  <Lock className="h-5 w-5 text-accent" />
+                  <Image src="/secure-input.svg" alt="Secure Input Logo" width={22} height={24} className="h-6 w-auto" />
                   <span className="font-display text-lg font-bold tracking-tight">Secure Input</span>
                 </div>
                 <DocsSidebar />
@@ -30,7 +43,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
           </div>
 
           <Link href="/" className="flex items-center gap-2 mr-auto">
-            <Lock className="h-5 w-5 text-accent" />
+            <Image src="/secure-input.svg" alt="Secure Input Logo" width={22} height={24} className="h-6 w-auto" />
             <span className="font-display text-lg font-bold tracking-tight hidden sm:inline-block">Secure Input</span>
           </Link>
 
@@ -41,7 +54,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
                 Docs
               </Button>
             </Link>
-            <Link href="https://github.com/xSuneth/secure-input" target="_blank">
+            <Link href="https://github.com/xSuneth/secure-input" target="_blank" rel="noopener noreferrer">
               <Button variant="ghost" size="sm" className="font-display text-xs uppercase tracking-wider">
                 <GitBranch className="mr-2 h-4 w-4" />
                 GitHub

docs/src/app/docs/page.tsx

@@ -1,6 +1,20 @@
-import { CodeBlock } from "@/components/CodeBlock";
+import type { Metadata } from "next";
 import { DocsPagination } from "@/components/DocsPagination";
 
+export const metadata: Metadata = {
+  title: "Introduction",
+  description: "Learn how Secure Input prevents browser extensions from scraping coupon and promo codes using WebAssembly and Web Workers.",
+  alternates: {
+    canonical: "/docs",
+  },
+  openGraph: {
+    title: "Secure Input Docs: Introduction",
+    description: "Overview of Secure Input and how it protects checkout inputs from client-side scraping.",
+    url: "https://secure-input.vercel.app/docs",
+    type: "article",
+  },
+};
+
 export default function DocsPage() {
   return (
     <div className="prose prose-invert prose-zinc max-w-4xl font-body">

docs/src/app/docs/react/page.tsx

@@ -1,6 +1,21 @@
+import type { Metadata } from "next";
 import { CodeBlock } from "@/components/CodeBlock";
 import { DocsPagination } from "@/components/DocsPagination";
 
+export const metadata: Metadata = {
+  title: "React Implementation",
+  description: "Integrate Secure Input in React and Next.js using the SecureInput component or useSecureInput hook.",
+  alternates: {
+    canonical: "/docs/react",
+  },
+  openGraph: {
+    title: "Secure Input for React",
+    description: "Implementation guide for @secure-input/react with component and hook examples.",
+    url: "https://secure-input.vercel.app/docs/react",
+    type: "article",
+  },
+};
+
 export default function ReactPage() {
   return (
     <div className="prose prose-invert prose-zinc max-w-4xl font-body">

docs/src/app/docs/server/page.tsx

@@ -1,7 +1,22 @@
+import type { Metadata } from "next";
 import { CodeBlock } from "@/components/CodeBlock";
 import { Shield } from "lucide-react";
 import { DocsPagination } from "@/components/DocsPagination";
 
+export const metadata: Metadata = {
+  title: "Server-Side Decryption",
+  description: "Decrypt Secure Input payloads on your backend using ChaCha20Poly1305 and robust key management practices.",
+  alternates: {
+    canonical: "/docs/server",
+  },
+  openGraph: {
+    title: "Secure Input Server-Side Decryption",
+    description: "Backend implementation and key-management guidance for decrypting encrypted payloads safely.",
+    url: "https://secure-input.vercel.app/docs/server",
+    type: "article",
+  },
+};
+
 export default function ServerPage() {
   return (
     <div className="prose prose-invert prose-zinc max-w-4xl font-body">

docs/src/app/docs/vanilla/page.tsx

@@ -1,6 +1,21 @@
+import type { Metadata } from "next";
 import { CodeBlock } from "@/components/CodeBlock";
 import { DocsPagination } from "@/components/DocsPagination";
 
+export const metadata: Metadata = {
+  title: "Vanilla JavaScript Core",
+  description: "Use @secure-input/core in Vanilla JS, Vue, Svelte, Angular, or custom frontend stacks.",
+  alternates: {
+    canonical: "/docs/vanilla",
+  },
+  openGraph: {
+    title: "Secure Input for Vanilla JavaScript",
+    description: "Framework-agnostic implementation guide for @secure-input/core.",
+    url: "https://secure-input.vercel.app/docs/vanilla",
+    type: "article",
+  },
+};
+
 export default function VanillaPage() {
   return (
     <div className="prose prose-invert prose-zinc max-w-4xl font-body">
@@ -64,7 +79,7 @@ setupSecureCheckout();`}
 
       <h2 className="font-display mt-16">Cleanup & Memory Management</h2>
       <p>
-        Because this library spans up a dedicated Web Worker, it consumes memory. If you are building a Single Page Application (SPA), it is critical to destroy the instance when the component unmounts or the user navigates away to prevent memory leaks.
+        Because this library spins up a dedicated Web Worker, it consumes memory. If you are building a Single Page Application (SPA), it is critical to destroy the instance when the component unmounts or the user navigates away to prevent memory leaks.
       </p>
 
       <CodeBlock 

docs/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Spline_Sans_Mono, Hanken_Grotesk } from "next/font/google";
 import { PostHogProvider } from "@/providers/PostHogProvider";
+import { Analytics } from "@vercel/analytics/next";
 import "./globals.css";
 
 const displayFont = Spline_Sans_Mono({
@@ -18,6 +19,8 @@ const bodyFont = Hanken_Grotesk({
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://secure-input.vercel.app"),
+  applicationName: "Secure Input",
+  manifest: "/manifest.json",
   title: {
     default: "Secure Input | Prevent Client-Side Scraping",
     template: "%s | Secure Input",
@@ -26,18 +29,57 @@ export const metadata: Metadata = {
   keywords: ["coupon code protection", "block honey extension", "prevent promo code scraping", "secure checkout input", "react secure input", "wasm encryption", "web worker obfuscation", "e-commerce security"],
   authors: [{ name: "Suneth Chathuranga", url: "https://github.com/xSuneth" }],
   creator: "Suneth Chathuranga",
+  alternates: {
+    canonical: "/",
+  },
+  verification: {
+    google: "google4c4480f5ebd28060",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "48x48" },
+      { url: "/icon0.svg", type: "image/svg+xml" },
+      { url: "/icon1.png", type: "image/png" },
+    ],
+    apple: [
+      { url: "/apple-icon.png", type: "image/png" },
+    ],
+  },
+  appleWebApp: {
+    title: "Secure Input",
+  },
   openGraph: {
     type: "website",
     locale: "en_US",
     url: "https://secure-input.vercel.app",
     title: "Secure Input | Protect Checkout & Block Coupon Scraping",
     description: "Stop browser extensions like Honey from scraping and leaking your e-commerce discount codes.",
     siteName: "Secure Input Documentation",
+    images: [
+      {
+        url: "/icon1.png",
+        width: 512,
+        height: 512,
+        alt: "Secure Input logo",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "Secure Input | Protect Checkout & Block Coupon Scraping",
     description: "Stop browser extensions like Honey from scraping and leaking your e-commerce discount codes.",
+    images: ["/icon1.png"],
   },
 };
 
@@ -52,8 +94,11 @@ export default function RootLayout({
         className={`min-h-screen bg-background font-body antialiased ${bodyFont.variable} ${displayFont.variable}`}
       >
         <PostHogProvider>
+        <Analytics />
           {children}
+
         </PostHogProvider>
+
       </body>
     </html>
   );

docs/src/app/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "secure-input",
+  "short_name": "secure-input",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
+}