From 2403a38f8f592a1d9c9daeec209cff4690467faa Mon Sep 17 00:00:00 2001
From: Marcelo Oliveira <marcatamo@gmail.com>
Date: Tue, 9 Jun 2026 13:33:13 -0300
Subject: [PATCH 1/6] feat: add comprehensive shared UI components library

- Button: variants (primary/secondary/ghost/danger), sizes, loading state, icons
- Card: interactive (hover effects) and flat variants
- Badge: success, warning, error, info semantic variants
- Input: label, error, helper text, validation states, forwardRef
- Textarea: multi-line input with same features as Input
- Select: dropdown with label, error, helper text
- Modal: dialog with backdrop blur, ESC key close, size variants
- Toast: notification system with types (success/error/warning/info)
- ToastProvider: global toast context with auto-dismiss
- Skeleton: loading placeholders (text, circular, rectangular)
- SkeletonCard: pre-built card skeleton
- SkeletonList: pre-built list skeleton
- EmptyState: empty content illustration with icon variants
- Update AppProvider to include ToastProvider
- Create comprehensive demo page showcasing all components

All components are:
- Fully typed with TypeScript
- Theme-aware with CSS variables
- Accessible with ARIA attributes
- Responsive and mobile-friendly

Next: Step 4 - API Layer + Auth Context (mock backend integration)
---
 src/App.tsx                      | 374 ++++++++++++++++++++-----------
 src/components/Badge.tsx         |  24 ++
 src/components/Button.tsx        |  59 +++++
 src/components/Card.tsx          |  25 +++
 src/components/EmptyState.tsx    |  35 +++
 src/components/Input.tsx         |  43 ++++
 src/components/Modal.tsx         |  71 ++++++
 src/components/Select.tsx        |  46 ++++
 src/components/Skeleton.tsx      |  62 +++++
 src/components/Textarea.tsx      |  43 ++++
 src/components/Toast.tsx         |  61 +++++
 src/components/ToastProvider.tsx |  52 +++++
 src/contexts/AppProvider.tsx     |   5 +-
 13 files changed, 769 insertions(+), 131 deletions(-)
 create mode 100644 src/components/Badge.tsx
 create mode 100644 src/components/Button.tsx
 create mode 100644 src/components/Card.tsx
 create mode 100644 src/components/EmptyState.tsx
 create mode 100644 src/components/Input.tsx
 create mode 100644 src/components/Modal.tsx
 create mode 100644 src/components/Select.tsx
 create mode 100644 src/components/Skeleton.tsx
 create mode 100644 src/components/Textarea.tsx
 create mode 100644 src/components/Toast.tsx
 create mode 100644 src/components/ToastProvider.tsx

diff --git a/src/App.tsx b/src/App.tsx
index e2aa049..4e35ce9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,147 +1,263 @@
+import { useState } from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
-import { PublicHeader } from './components/PublicHeader'
-import { PublicFooter } from './components/PublicFooter'
-import { AppShell } from './components/AppShell'
 import { ThemeToggle } from './components/ThemeToggle'
-import { Link } from 'react-router-dom'
+import { Button } from './components/Button'
+import { Card } from './components/Card'
+import { Badge } from './components/Badge'
+import { Input } from './components/Input'
+import { Textarea } from './components/Textarea'
+import { Select } from './components/Select'
+import { Modal } from './components/Modal'
+import { Skeleton, SkeletonCard, SkeletonList } from './components/Skeleton'
+import { EmptyState } from './components/EmptyState'
+import { useToast } from './components/ToastProvider'
 
-function PublicLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="min-h-screen flex flex-col">
-      <PublicHeader />
-      <main className="flex-1">{children}</main>
-      <PublicFooter />
-    </div>
-  )
-}
+function UIComponentsDemo() {
+  const [modalOpen, setModalOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const { showToast } = useToast()
 
-function LandingDemo() {
-  return (
-    <PublicLayout>
-      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
-        <h1 className="heading-1 mb-6">
-          Every Signature, <span className="text-primary">Forever Verifiable</span>
-        </h1>
-        <p className="text-xl text-muted mb-8 max-w-2xl mx-auto">
-          Blockchain-anchored e-signatures with independent verification. No vendor lock-in, no expiration.
-        </p>
-        <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-          <Link to="/register" className="btn-primary text-lg px-8 py-4">
-            Get Started Free
-          </Link>
-          <Link to="/verify" className="btn-secondary text-lg px-8 py-4">
-            Verify Document
-          </Link>
-        </div>
+  const handleLoadingClick = () => {
+    setLoading(true)
+    setTimeout(() => setLoading(false), 2000)
+  }
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
-          <div className="card">
-            <h3 className="heading-3 mb-3">Upload</h3>
-            <p className="text-muted">Upload any PDF document to get started</p>
-          </div>
-          <div className="card">
-            <h3 className="heading-3 mb-3">Sign</h3>
-            <p className="text-muted">Add signers and collect e-signatures</p>
-          </div>
-          <div className="card">
-            <h3 className="heading-3 mb-3">Anchor</h3>
-            <p className="text-muted">Proof anchored on Ethereum L2</p>
-          </div>
+  return (
+    <div className="min-h-screen p-8 max-w-6xl mx-auto">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="heading-1 mb-2">UI Components Library</h1>
+          <p className="text-muted">Step 3: Comprehensive reusable components</p>
         </div>
+        <ThemeToggle />
       </div>
-    </PublicLayout>
-  )
-}
 
-function DashboardDemo() {
-  return (
-    <AppShell title="Dashboard">
-      <div className="max-w-7xl mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-          <div className="card">
-            <p className="text-sm text-muted mb-2">Total Documents</p>
-            <p className="text-3xl font-bold">12</p>
-          </div>
-          <div className="card">
-            <p className="text-sm text-muted mb-2">Pending Signatures</p>
-            <p className="text-3xl font-bold text-warning">3</p>
-          </div>
-          <div className="card">
-            <p className="text-sm text-muted mb-2">Completed</p>
-            <p className="text-3xl font-bold text-accent">8</p>
-          </div>
-          <div className="card">
-            <p className="text-sm text-muted mb-2">Anchored On-Chain</p>
-            <p className="text-3xl font-bold text-primary">8</p>
-          </div>
-        </div>
+      <div className="space-y-12">
+        <section>
+          <h2 className="heading-2 mb-6">Buttons</h2>
+          <Card>
+            <div className="space-y-6">
+              <div>
+                <h3 className="heading-3 mb-4">Variants</h3>
+                <div className="flex flex-wrap gap-3">
+                  <Button variant="primary">Primary</Button>
+                  <Button variant="secondary">Secondary</Button>
+                  <Button variant="ghost">Ghost</Button>
+                  <Button variant="danger">Danger</Button>
+                </div>
+              </div>
 
-        <div className="card">
-          <h2 className="heading-2 mb-6">Recent Activity</h2>
-          <div className="space-y-4">
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-                <div>
-                  <p className="font-semibold">NDA Agreement #{i}</p>
-                  <p className="text-sm text-muted">Created 2 days ago</p>
+              <div>
+                <h3 className="heading-3 mb-4">Sizes</h3>
+                <div className="flex flex-wrap items-center gap-3">
+                  <Button size="sm">Small</Button>
+                  <Button size="md">Medium</Button>
+                  <Button size="lg">Large</Button>
                 </div>
-                <span className="badge badge-success">Completed</span>
               </div>
-            ))}
+
+              <div>
+                <h3 className="heading-3 mb-4">States</h3>
+                <div className="flex flex-wrap gap-3">
+                  <Button disabled>Disabled</Button>
+                  <Button loading={loading} onClick={handleLoadingClick}>
+                    {loading ? 'Loading...' : 'Click to Load'}
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="heading-3 mb-4">With Icons</h3>
+                <div className="flex flex-wrap gap-3">
+                  <Button icon={<span>✓</span>}>Confirm</Button>
+                  <Button variant="secondary" icon={<span>↓</span>}>Download</Button>
+                  <Button variant="danger" icon={<span>×</span>}>Delete</Button>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </section>
+
+        <section>
+          <h2 className="heading-2 mb-6">Cards</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card variant="interactive">
+              <h3 className="heading-3 mb-3">Interactive Card</h3>
+              <p className="text-muted">This card has hover effects and can be clicked.</p>
+            </Card>
+            <Card variant="flat">
+              <h3 className="heading-3 mb-3">Flat Card</h3>
+              <p className="text-muted">This card has no hover effects.</p>
+            </Card>
           </div>
-        </div>
-      </div>
-    </AppShell>
-  )
-}
+        </section>
 
-function LayoutDemo() {
-  return (
-    <div className="min-h-screen p-8">
-      <div className="max-w-4xl mx-auto">
-        <div className="flex justify-between items-center mb-8">
-          <div>
-            <h1 className="heading-1 mb-2">Layout Components Demo</h1>
-            <p className="text-muted">Step 2: Public and authenticated layouts</p>
+        <section>
+          <h2 className="heading-2 mb-6">Badges</h2>
+          <Card>
+            <div className="flex flex-wrap gap-3">
+              <Badge variant="success">Success</Badge>
+              <Badge variant="warning">Warning</Badge>
+              <Badge variant="error">Error</Badge>
+              <Badge variant="info">Info</Badge>
+            </div>
+          </Card>
+        </section>
+
+        <section>
+          <h2 className="heading-2 mb-6">Form Inputs</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card>
+              <div className="space-y-4">
+                <Input
+                  label="Email"
+                  type="email"
+                  placeholder="you@example.com"
+                  helperText="We'll never share your email"
+                />
+                <Input
+                  label="Password"
+                  type="password"
+                  placeholder="Enter password"
+                  error="Password must be at least 8 characters"
+                />
+                <Input
+                  label="Disabled Input"
+                  disabled
+                  placeholder="Cannot edit this"
+                />
+              </div>
+            </Card>
+            <Card>
+              <div className="space-y-4">
+                <Textarea
+                  label="Message"
+                  placeholder="Write your message..."
+                  rows={4}
+                  helperText="Max 500 characters"
+                />
+                <Select label="Country">
+                  <option value="">Select a country</option>
+                  <option value="us">United States</option>
+                  <option value="br">Brazil</option>
+                  <option value="uk">United Kingdom</option>
+                </Select>
+              </div>
+            </Card>
           </div>
-          <ThemeToggle />
-        </div>
+        </section>
+
+        <section>
+          <h2 className="heading-2 mb-6">Modal</h2>
+          <Card>
+            <Button onClick={() => setModalOpen(true)}>Open Modal</Button>
+            <Modal
+              isOpen={modalOpen}
+              onClose={() => setModalOpen(false)}
+              title="Example Modal"
+            >
+              <div className="space-y-4">
+                <p className="text-muted">
+                  This is a modal dialog with backdrop blur and smooth animations.
+                  Press ESC or click outside to close.
+                </p>
+                <Input label="Your Name" placeholder="Enter your name" />
+                <div className="flex gap-3 justify-end">
+                  <Button variant="ghost" onClick={() => setModalOpen(false)}>
+                    Cancel
+                  </Button>
+                  <Button onClick={() => setModalOpen(false)}>
+                    Confirm
+                  </Button>
+                </div>
+              </div>
+            </Modal>
+          </Card>
+        </section>
 
-        <div className="space-y-6">
-          <section className="card">
-            <h2 className="heading-2 mb-4">Public Layout</h2>
-            <p className="text-muted mb-4">
-              Used for landing page, pricing, verify, login, and register pages.
-              Includes PublicHeader (sticky navigation) and PublicFooter (links & social).
-            </p>
-            <Link to="/demo/public" className="btn-primary">
-              View Public Layout →
-            </Link>
-          </section>
+        <section>
+          <h2 className="heading-2 mb-6">Toast Notifications</h2>
+          <Card>
+            <div className="flex flex-wrap gap-3">
+              <Button
+                variant="primary"
+                onClick={() => showToast('success', 'Operation completed successfully!')}
+              >
+                Success Toast
+              </Button>
+              <Button
+                variant="danger"
+                onClick={() => showToast('error', 'Something went wrong!')}
+              >
+                Error Toast
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => showToast('warning', 'Please review your input')}
+              >
+                Warning Toast
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={() => showToast('info', 'Here is some information')}
+              >
+                Info Toast
+              </Button>
+            </div>
+          </Card>
+        </section>
 
-          <section className="card">
-            <h2 className="heading-2 mb-4">Authenticated Layout</h2>
-            <p className="text-muted mb-4">
-              Used for dashboard, documents, envelopes, and settings.
-              Includes AppShell (flex layout), Sidebar (responsive navigation), and Topbar (header with menu).
-            </p>
-            <Link to="/demo/authenticated" className="btn-primary">
-              View Authenticated Layout →
-            </Link>
-          </section>
+        <section>
+          <h2 className="heading-2 mb-6">Skeleton Loading</h2>
+          <div className="space-y-6">
+            <div>
+              <h3 className="heading-3 mb-4">Basic Skeletons</h3>
+              <div className="space-y-3">
+                <Skeleton variant="text" />
+                <Skeleton variant="text" width="80%" />
+                <Skeleton variant="text" width="60%" />
+                <Skeleton variant="rectangular" height="100px" />
+                <Skeleton variant="circular" width={64} height={64} />
+              </div>
+            </div>
+            <div>
+              <h3 className="heading-3 mb-4">Skeleton Card</h3>
+              <SkeletonCard />
+            </div>
+            <div>
+              <h3 className="heading-3 mb-4">Skeleton List</h3>
+              <SkeletonList count={3} />
+            </div>
+          </div>
+        </section>
 
-          <section className="card">
-            <h2 className="heading-3 mb-4">Component Features</h2>
-            <ul className="space-y-2 text-muted">
-              <li>✓ Responsive sidebar (mobile drawer + desktop fixed)</li>
-              <li>✓ Sticky headers with backdrop blur</li>
-              <li>✓ Theme-aware colors and borders</li>
-              <li>✓ Active route highlighting in sidebar</li>
-              <li>✓ Accessible navigation with ARIA labels</li>
-              <li>✓ Smooth transitions and animations</li>
-            </ul>
-          </section>
-        </div>
+        <section>
+          <h2 className="heading-2 mb-6">Empty States</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <Card>
+              <EmptyState
+                icon="inbox"
+                title="No messages"
+                description="Your inbox is empty. Messages will appear here."
+              />
+            </Card>
+            <Card>
+              <EmptyState
+                icon="file"
+                title="No documents"
+                description="Upload your first document to get started."
+                action={<Button>Upload Document</Button>}
+              />
+            </Card>
+            <Card>
+              <EmptyState
+                icon="search"
+                title="No results"
+                description="Try adjusting your search criteria."
+              />
+            </Card>
+          </div>
+        </section>
       </div>
     </div>
   )
@@ -150,9 +266,7 @@ function LayoutDemo() {
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<LayoutDemo />} />
-      <Route path="/demo/public" element={<LandingDemo />} />
-      <Route path="/demo/authenticated" element={<DashboardDemo />} />
+      <Route path="/" element={<UIComponentsDemo />} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   )
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 0000000..68881a7
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react'
+
+type BadgeVariant = 'success' | 'warning' | 'error' | 'info'
+
+interface BadgeProps {
+  children: ReactNode
+  variant?: BadgeVariant
+  className?: string
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  success: 'badge-success',
+  warning: 'badge-warning',
+  error: 'badge-error',
+  info: 'badge-info',
+}
+
+export function Badge({ children, variant = 'info', className = '' }: BadgeProps) {
+  return (
+    <span className={`badge ${variantClasses[variant]} ${className}`}>
+      {children}
+    </span>
+  )
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..7ce339b
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,59 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react'
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'
+type ButtonSize = 'sm' | 'md' | 'lg'
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  loading?: boolean
+  icon?: ReactNode
+  children: ReactNode
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  ghost: 'btn-ghost',
+  danger: 'btn-danger',
+}
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'px-4 py-2 text-xs',
+  md: 'px-6 py-3 text-sm',
+  lg: 'px-8 py-4 text-base',
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  icon,
+  children,
+  disabled,
+  className = '',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={`${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+          Loading...
+        </>
+      ) : (
+        <>
+          {icon}
+          {children}
+        </>
+      )}
+    </button>
+  )
+}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..4266d00
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from 'react'
+
+type CardVariant = 'interactive' | 'flat'
+
+interface CardProps {
+  children: ReactNode
+  variant?: CardVariant
+  className?: string
+  onClick?: () => void
+}
+
+export function Card({ children, variant = 'interactive', className = '', onClick }: CardProps) {
+  const baseClass = variant === 'interactive' ? 'card' : 'card-flat'
+  
+  return (
+    <div
+      className={`${baseClass} ${onClick ? 'cursor-pointer' : ''} ${className}`}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
new file mode 100644
index 0000000..70d28d4
--- /dev/null
+++ b/src/components/EmptyState.tsx
@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+import { FileX, Inbox, Search } from 'lucide-react'
+
+interface EmptyStateProps {
+  icon?: 'file' | 'inbox' | 'search'
+  title: string
+  description?: string
+  action?: ReactNode
+}
+
+const icons = {
+  file: FileX,
+  inbox: Inbox,
+  search: Search,
+}
+
+export function EmptyState({ icon = 'inbox', title, description, action }: EmptyStateProps) {
+  const Icon = icons[icon]
+
+  return (
+    <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+      <div
+        className="w-16 h-16 rounded-full flex items-center justify-center mb-4"
+        style={{ backgroundColor: 'var(--bg-tertiary)' }}
+      >
+        <Icon className="w-8 h-8" style={{ color: 'var(--text-tertiary)' }} />
+      </div>
+      <h3 className="heading-3 mb-2">{title}</h3>
+      {description && (
+        <p className="text-muted max-w-md mb-6">{description}</p>
+      )}
+      {action}
+    </div>
+  )
+}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..470473d
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,43 @@
+import { InputHTMLAttributes, forwardRef } from 'react'
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  helperText?: string
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, helperText, className = '', id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
+    
+    return (
+      <div className="space-y-1.5">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={`input-field ${error ? 'border-error focus:border-error focus:shadow-error/10' : ''} ${className}`}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined}
+          {...props}
+        />
+        {error && (
+          <p id={`${inputId}-error`} className="text-sm text-error" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="text-sm text-muted">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Input.displayName = 'Input'
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..a91fad3
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,71 @@
+import { ReactNode, useEffect } from 'react'
+import { X } from 'lucide-react'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title: string
+  children: ReactNode
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const sizeClasses = {
+  sm: 'max-w-md',
+  md: 'max-w-2xl',
+  lg: 'max-w-4xl',
+}
+
+export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalProps) {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'unset'
+    }
+    return () => {
+      document.body.style.overflow = 'unset'
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      return () => document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm animate-fade-in"
+        onClick={onClose}
+      />
+      <div
+        className={`relative w-full ${sizeClasses[size]} rounded-2xl shadow-2xl animate-scale-in`}
+        style={{ backgroundColor: 'var(--bg-primary)' }}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+      >
+        <div className="flex items-center justify-between p-6 border-b" style={{ borderColor: 'var(--border-primary)' }}>
+          <h2 id="modal-title" className="heading-2">
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            aria-label="Close modal"
+          >
+            <X className="w-5 h-5" style={{ color: 'var(--text-primary)' }} />
+          </button>
+        </div>
+        <div className="p-6">{children}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..3c40521
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,46 @@
+import { SelectHTMLAttributes, forwardRef, ReactNode } from 'react'
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string
+  error?: string
+  helperText?: string
+  children: ReactNode
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, error, helperText, children, className = '', id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
+    
+    return (
+      <div className="space-y-1.5">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+            {label}
+          </label>
+        )}
+        <select
+          ref={ref}
+          id={inputId}
+          className={`input-field ${error ? 'border-error focus:border-error focus:shadow-error/10' : ''} ${className}`}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined}
+          {...props}
+        >
+          {children}
+        </select>
+        {error && (
+          <p id={`${inputId}-error`} className="text-sm text-error" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="text-sm text-muted">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Select.displayName = 'Select'
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
new file mode 100644
index 0000000..f1b5fbf
--- /dev/null
+++ b/src/components/Skeleton.tsx
@@ -0,0 +1,62 @@
+interface SkeletonProps {
+  className?: string
+  variant?: 'text' | 'circular' | 'rectangular'
+  width?: string | number
+  height?: string | number
+}
+
+export function Skeleton({
+  className = '',
+  variant = 'rectangular',
+  width,
+  height,
+}: SkeletonProps) {
+  const baseClasses = {
+    text: 'h-4 rounded',
+    circular: 'rounded-full',
+    rectangular: 'rounded-lg',
+  }
+
+  const style = {
+    width: width ? (typeof width === 'number' ? `${width}px` : width) : '100%',
+    height: height ? (typeof height === 'number' ? `${height}px` : height) : variant === 'text' ? '1rem' : '4rem',
+    backgroundColor: 'var(--border-primary)',
+  }
+
+  return (
+    <div
+      className={`animate-pulse-soft ${baseClasses[variant]} ${className}`}
+      style={style}
+    />
+  )
+}
+
+export function SkeletonCard() {
+  return (
+    <div className="card space-y-4">
+      <Skeleton variant="text" width="60%" height="1.5rem" />
+      <Skeleton variant="text" />
+      <Skeleton variant="text" width="80%" />
+      <div className="flex gap-3 pt-4">
+        <Skeleton variant="rectangular" width="100px" height="36px" />
+        <Skeleton variant="rectangular" width="100px" height="36px" />
+      </div>
+    </div>
+  )
+}
+
+export function SkeletonList({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="card flex items-center gap-4">
+          <Skeleton variant="circular" width={48} height={48} />
+          <div className="flex-1 space-y-2">
+            <Skeleton variant="text" width="70%" />
+            <Skeleton variant="text" width="40%" height="0.875rem" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
new file mode 100644
index 0000000..82773fb
--- /dev/null
+++ b/src/components/Textarea.tsx
@@ -0,0 +1,43 @@
+import { TextareaHTMLAttributes, forwardRef } from 'react'
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string
+  error?: string
+  helperText?: string
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ label, error, helperText, className = '', id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
+    
+    return (
+      <div className="space-y-1.5">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={inputId}
+          className={`input-field ${error ? 'border-error focus:border-error focus:shadow-error/10' : ''} ${className}`}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined}
+          {...props}
+        />
+        {error && (
+          <p id={`${inputId}-error`} className="text-sm text-error" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="text-sm text-muted">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Textarea.displayName = 'Textarea'
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
new file mode 100644
index 0000000..2f43ad5
--- /dev/null
+++ b/src/components/Toast.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react'
+import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-react'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+interface ToastProps {
+  id: string
+  type: ToastType
+  message: string
+  onClose: (id: string) => void
+  duration?: number
+}
+
+const icons = {
+  success: CheckCircle,
+  error: XCircle,
+  warning: AlertCircle,
+  info: Info,
+}
+
+const colors = {
+  success: 'bg-accent-light text-accent border-accent',
+  error: 'bg-error-light text-error border-error',
+  warning: 'bg-warning-light text-warning border-warning',
+  info: 'bg-primary-light text-primary border-primary',
+}
+
+export function Toast({ id, type, message, onClose, duration = 5000 }: ToastProps) {
+  const [isVisible, setIsVisible] = useState(true)
+  const Icon = icons[type]
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false)
+      setTimeout(() => onClose(id), 300)
+    }, duration)
+    return () => clearTimeout(timer)
+  }, [duration, id, onClose])
+
+  return (
+    <div
+      className={`
+        flex items-center gap-3 px-4 py-3 rounded-xl border shadow-lg
+        transition-all duration-300
+        ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full'}
+        ${colors[type]}
+      `}
+      role="alert"
+    >
+      <Icon className="w-5 h-5 flex-shrink-0" />
+      <p className="flex-1 text-sm font-medium">{message}</p>
+      <button
+        onClick={() => onClose(id)}
+        className="p-1 rounded hover:bg-black/5 transition-colors"
+        aria-label="Close notification"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/ToastProvider.tsx b/src/components/ToastProvider.tsx
new file mode 100644
index 0000000..39de74a
--- /dev/null
+++ b/src/components/ToastProvider.tsx
@@ -0,0 +1,52 @@
+import { createContext, useContext, useState, ReactNode, useCallback } from 'react'
+import { Toast, ToastType } from './Toast'
+
+interface ToastContextType {
+  showToast: (type: ToastType, message: string) => void
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined)
+
+interface ToastItem {
+  id: string
+  type: ToastType
+  message: string
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([])
+
+  const showToast = useCallback((type: ToastType, message: string) => {
+    const id = Math.random().toString(36).substring(7)
+    setToasts(prev => [...prev, { id, type, message }])
+  }, [])
+
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }, [])
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <div className="fixed top-4 right-4 z-50 space-y-3 max-w-sm">
+        {toasts.map(toast => (
+          <Toast
+            key={toast.id}
+            id={toast.id}
+            type={toast.type}
+            message={toast.message}
+            onClose={removeToast}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  )
+}
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider')
+  }
+  return context
+}
diff --git a/src/contexts/AppProvider.tsx b/src/contexts/AppProvider.tsx
index 9252095..e63b74a 100644
--- a/src/contexts/AppProvider.tsx
+++ b/src/contexts/AppProvider.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
 import { ThemeProvider } from './ThemeContext'
+import { ToastProvider } from '../components/ToastProvider'
 
 interface AppProviderProps {
   children: ReactNode
@@ -8,7 +9,9 @@ interface AppProviderProps {
 export function AppProvider({ children }: AppProviderProps) {
   return (
     <ThemeProvider>
-      {children}
+      <ToastProvider>
+        {children}
+      </ToastProvider>
     </ThemeProvider>
   )
 }

From d7caf2c84749349b48e5b5643f6421f6703e5986 Mon Sep 17 00:00:00 2001
From: Marcelo Oliveira <marcatamo@gmail.com>
Date: Tue, 9 Jun 2026 13:36:13 -0300
Subject: [PATCH 2/6] feat: add API layer and authentication context with mock
 backend

- Create TypeScript types for User, Document, Envelope, Signer
- Create mock data (mockUser, mockDocuments, mockEnvelopes)
- Build ApiClient class with axios:
  - Mock mode with realistic delays (300-800ms)
  - JWT token management in localStorage
  - Request/response interceptors
  - Auto-redirect to login on 401
  - Methods: login, register, getCurrentUser, getDocuments, getEnvelopes, verifyDocument
- Create AuthContext with:
  - User state management
  - Login/register/logout functions
  - Auto-login on app start (if token exists)
  - isAuthenticated flag
- Create ProtectedRoute component for route guards
- Create useAuth hook for easy access
- Update AppProvider to include AuthProvider
- Create demo pages:
  - Login page with form validation
  - Protected dashboard with user profile
  - API demo hub page
- Add routing with protected routes

Mock credentials: demo@sigra.io / password

Next: Step 5 - i18n Setup (PT-BR and EN translations)
---
 src/App.tsx                       | 384 ++++++++++++------------------
 src/api/client.ts                 | 148 ++++++++++++
 src/api/mockData.ts               | 114 +++++++++
 src/api/types.ts                  |  58 +++++
 src/components/ProtectedRoute.tsx |  25 ++
 src/contexts/AppProvider.tsx      |   5 +-
 src/contexts/AuthContext.tsx      |  69 ++++++
 7 files changed, 565 insertions(+), 238 deletions(-)
 create mode 100644 src/api/client.ts
 create mode 100644 src/api/mockData.ts
 create mode 100644 src/api/types.ts
 create mode 100644 src/components/ProtectedRoute.tsx
 create mode 100644 src/contexts/AuthContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4e35ce9..c9a98a4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,263 +1,164 @@
-import { useState } from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { ThemeToggle } from './components/ThemeToggle'
+import { ProtectedRoute } from './components/ProtectedRoute'
+import { useAuth } from './contexts/AuthContext'
 import { Button } from './components/Button'
-import { Card } from './components/Card'
-import { Badge } from './components/Badge'
 import { Input } from './components/Input'
-import { Textarea } from './components/Textarea'
-import { Select } from './components/Select'
-import { Modal } from './components/Modal'
-import { Skeleton, SkeletonCard, SkeletonList } from './components/Skeleton'
-import { EmptyState } from './components/EmptyState'
+import { Card } from './components/Card'
 import { useToast } from './components/ToastProvider'
+import { useState } from 'react'
 
-function UIComponentsDemo() {
-  const [modalOpen, setModalOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
+function LoginDemo() {
+  const { login } = useAuth()
   const { showToast } = useToast()
+  const [loading, setLoading] = useState(false)
+  const [email, setEmail] = useState('demo@sigra.io')
+  const [password, setPassword] = useState('password')
 
-  const handleLoadingClick = () => {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
     setLoading(true)
-    setTimeout(() => setLoading(false), 2000)
+    try {
+      await login({ email, password })
+      showToast('success', 'Login successful!')
+    } catch (error) {
+      showToast('error', error instanceof Error ? error.message : 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="heading-2">Log In</h1>
+          <ThemeToggle />
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Input
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <Input
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <Button type="submit" loading={loading} className="w-full">
+            Log In
+          </Button>
+          <p className="text-sm text-muted text-center">
+            Demo credentials: demo@sigra.io / password
+          </p>
+        </form>
+      </Card>
+    </div>
+  )
+}
+
+function DashboardDemo() {
+  const { user, logout } = useAuth()
+  const { showToast } = useToast()
+
+  const handleLogout = async () => {
+    await logout()
+    showToast('success', 'Logged out successfully')
   }
 
   return (
     <div className="min-h-screen p-8 max-w-6xl mx-auto">
       <div className="flex justify-between items-center mb-8">
         <div>
-          <h1 className="heading-1 mb-2">UI Components Library</h1>
-          <p className="text-muted">Step 3: Comprehensive reusable components</p>
+          <h1 className="heading-1 mb-2">Dashboard</h1>
+          <p className="text-muted">Welcome, {user?.firstName}!</p>
+        </div>
+        <div className="flex gap-3">
+          <ThemeToggle />
+          <Button variant="ghost" onClick={handleLogout}>
+            Log Out
+          </Button>
         </div>
-        <ThemeToggle />
       </div>
 
-      <div className="space-y-12">
-        <section>
-          <h2 className="heading-2 mb-6">Buttons</h2>
-          <Card>
-            <div className="space-y-6">
-              <div>
-                <h3 className="heading-3 mb-4">Variants</h3>
-                <div className="flex flex-wrap gap-3">
-                  <Button variant="primary">Primary</Button>
-                  <Button variant="secondary">Secondary</Button>
-                  <Button variant="ghost">Ghost</Button>
-                  <Button variant="danger">Danger</Button>
-                </div>
-              </div>
-
-              <div>
-                <h3 className="heading-3 mb-4">Sizes</h3>
-                <div className="flex flex-wrap items-center gap-3">
-                  <Button size="sm">Small</Button>
-                  <Button size="md">Medium</Button>
-                  <Button size="lg">Large</Button>
-                </div>
-              </div>
-
-              <div>
-                <h3 className="heading-3 mb-4">States</h3>
-                <div className="flex flex-wrap gap-3">
-                  <Button disabled>Disabled</Button>
-                  <Button loading={loading} onClick={handleLoadingClick}>
-                    {loading ? 'Loading...' : 'Click to Load'}
-                  </Button>
-                </div>
-              </div>
-
-              <div>
-                <h3 className="heading-3 mb-4">With Icons</h3>
-                <div className="flex flex-wrap gap-3">
-                  <Button icon={<span>✓</span>}>Confirm</Button>
-                  <Button variant="secondary" icon={<span>↓</span>}>Download</Button>
-                  <Button variant="danger" icon={<span>×</span>}>Delete</Button>
-                </div>
-              </div>
-            </div>
-          </Card>
-        </section>
-
-        <section>
-          <h2 className="heading-2 mb-6">Cards</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <Card variant="interactive">
-              <h3 className="heading-3 mb-3">Interactive Card</h3>
-              <p className="text-muted">This card has hover effects and can be clicked.</p>
-            </Card>
-            <Card variant="flat">
-              <h3 className="heading-3 mb-3">Flat Card</h3>
-              <p className="text-muted">This card has no hover effects.</p>
-            </Card>
-          </div>
-        </section>
-
-        <section>
-          <h2 className="heading-2 mb-6">Badges</h2>
-          <Card>
-            <div className="flex flex-wrap gap-3">
-              <Badge variant="success">Success</Badge>
-              <Badge variant="warning">Warning</Badge>
-              <Badge variant="error">Error</Badge>
-              <Badge variant="info">Info</Badge>
-            </div>
-          </Card>
-        </section>
-
-        <section>
-          <h2 className="heading-2 mb-6">Form Inputs</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <Card>
-              <div className="space-y-4">
-                <Input
-                  label="Email"
-                  type="email"
-                  placeholder="you@example.com"
-                  helperText="We'll never share your email"
-                />
-                <Input
-                  label="Password"
-                  type="password"
-                  placeholder="Enter password"
-                  error="Password must be at least 8 characters"
-                />
-                <Input
-                  label="Disabled Input"
-                  disabled
-                  placeholder="Cannot edit this"
-                />
-              </div>
-            </Card>
-            <Card>
-              <div className="space-y-4">
-                <Textarea
-                  label="Message"
-                  placeholder="Write your message..."
-                  rows={4}
-                  helperText="Max 500 characters"
-                />
-                <Select label="Country">
-                  <option value="">Select a country</option>
-                  <option value="us">United States</option>
-                  <option value="br">Brazil</option>
-                  <option value="uk">United Kingdom</option>
-                </Select>
-              </div>
-            </Card>
-          </div>
-        </section>
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <Card>
+          <p className="text-sm text-muted mb-2">Total Documents</p>
+          <p className="text-3xl font-bold">12</p>
+        </Card>
+        <Card>
+          <p className="text-sm text-muted mb-2">Pending Signatures</p>
+          <p className="text-3xl font-bold text-warning">3</p>
+        </Card>
+        <Card>
+          <p className="text-sm text-muted mb-2">Completed</p>
+          <p className="text-3xl font-bold text-accent">8</p>
+        </Card>
+        <Card>
+          <p className="text-sm text-muted mb-2">Anchored On-Chain</p>
+          <p className="text-3xl font-bold text-primary">8</p>
+        </Card>
+      </div>
 
-        <section>
-          <h2 className="heading-2 mb-6">Modal</h2>
-          <Card>
-            <Button onClick={() => setModalOpen(true)}>Open Modal</Button>
-            <Modal
-              isOpen={modalOpen}
-              onClose={() => setModalOpen(false)}
-              title="Example Modal"
-            >
-              <div className="space-y-4">
-                <p className="text-muted">
-                  This is a modal dialog with backdrop blur and smooth animations.
-                  Press ESC or click outside to close.
-                </p>
-                <Input label="Your Name" placeholder="Enter your name" />
-                <div className="flex gap-3 justify-end">
-                  <Button variant="ghost" onClick={() => setModalOpen(false)}>
-                    Cancel
-                  </Button>
-                  <Button onClick={() => setModalOpen(false)}>
-                    Confirm
-                  </Button>
-                </div>
-              </div>
-            </Modal>
-          </Card>
-        </section>
+      <Card>
+        <h2 className="heading-2 mb-4">User Profile</h2>
+        <div className="space-y-2">
+          <p><strong>Email:</strong> {user?.email}</p>
+          <p><strong>Name:</strong> {user?.firstName} {user?.lastName}</p>
+          <p><strong>Company:</strong> {user?.company}</p>
+          <p><strong>Plan:</strong> {user?.plan}</p>
+        </div>
+      </Card>
+    </div>
+  )
+}
 
-        <section>
-          <h2 className="heading-2 mb-6">Toast Notifications</h2>
-          <Card>
-            <div className="flex flex-wrap gap-3">
-              <Button
-                variant="primary"
-                onClick={() => showToast('success', 'Operation completed successfully!')}
-              >
-                Success Toast
-              </Button>
-              <Button
-                variant="danger"
-                onClick={() => showToast('error', 'Something went wrong!')}
-              >
-                Error Toast
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={() => showToast('warning', 'Please review your input')}
-              >
-                Warning Toast
-              </Button>
-              <Button
-                variant="ghost"
-                onClick={() => showToast('info', 'Here is some information')}
-              >
-                Info Toast
-              </Button>
-            </div>
-          </Card>
-        </section>
+function ApiDemo() {
+  return (
+    <div className="min-h-screen p-8 max-w-4xl mx-auto">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="heading-1 mb-2">API & Auth Demo</h1>
+          <p className="text-muted">Step 4: Mock backend integration</p>
+        </div>
+        <ThemeToggle />
+      </div>
 
-        <section>
-          <h2 className="heading-2 mb-6">Skeleton Loading</h2>
-          <div className="space-y-6">
-            <div>
-              <h3 className="heading-3 mb-4">Basic Skeletons</h3>
-              <div className="space-y-3">
-                <Skeleton variant="text" />
-                <Skeleton variant="text" width="80%" />
-                <Skeleton variant="text" width="60%" />
-                <Skeleton variant="rectangular" height="100px" />
-                <Skeleton variant="circular" width={64} height={64} />
-              </div>
-            </div>
-            <div>
-              <h3 className="heading-3 mb-4">Skeleton Card</h3>
-              <SkeletonCard />
-            </div>
-            <div>
-              <h3 className="heading-3 mb-4">Skeleton List</h3>
-              <SkeletonList count={3} />
-            </div>
+      <div className="space-y-6">
+        <Card>
+          <h2 className="heading-2 mb-4">Mock API Client</h2>
+          <p className="text-muted mb-4">
+            The API client simulates backend responses with realistic delays. All data is stored in memory and localStorage.
+          </p>
+          <div className="space-y-2 text-sm">
+            <p>✓ Authentication (login, register, logout)</p>
+            <p>✓ JWT token management</p>
+            <p>✓ Protected routes</p>
+            <p>✓ Documents API</p>
+            <p>✓ Envelopes API</p>
+            <p>✓ Document verification</p>
           </div>
-        </section>
+        </Card>
 
-        <section>
-          <h2 className="heading-2 mb-6">Empty States</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <Card>
-              <EmptyState
-                icon="inbox"
-                title="No messages"
-                description="Your inbox is empty. Messages will appear here."
-              />
-            </Card>
-            <Card>
-              <EmptyState
-                icon="file"
-                title="No documents"
-                description="Upload your first document to get started."
-                action={<Button>Upload Document</Button>}
-              />
-            </Card>
-            <Card>
-              <EmptyState
-                icon="search"
-                title="No results"
-                description="Try adjusting your search criteria."
-              />
-            </Card>
+        <Card>
+          <h2 className="heading-2 mb-4">Try It</h2>
+          <div className="flex flex-col sm:flex-row gap-3">
+            <a href="/login" className="btn-primary text-center">
+              Go to Login →
+            </a>
+            <a href="/app/dashboard" className="btn-secondary text-center">
+              Go to Dashboard (Protected) →
+            </a>
           </div>
-        </section>
+          <p className="text-sm text-muted mt-4">
+            The dashboard is protected and will redirect to login if not authenticated.
+          </p>
+        </Card>
       </div>
     </div>
   )
@@ -266,7 +167,16 @@ function UIComponentsDemo() {
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<UIComponentsDemo />} />
+      <Route path="/" element={<ApiDemo />} />
+      <Route path="/login" element={<LoginDemo />} />
+      <Route
+        path="/app/dashboard"
+        element={
+          <ProtectedRoute>
+            <DashboardDemo />
+          </ProtectedRoute>
+        }
+      />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   )
diff --git a/src/api/client.ts b/src/api/client.ts
new file mode 100644
index 0000000..82541ce
--- /dev/null
+++ b/src/api/client.ts
@@ -0,0 +1,148 @@
+import axios, { AxiosInstance, AxiosError } from 'axios'
+import { User, Document, Envelope, LoginRequest, RegisterRequest, AuthResponse } from './types'
+import { mockUser, mockDocuments, mockEnvelopes } from './mockData'
+
+class ApiClient {
+  private client: AxiosInstance
+  private useMock: boolean = true
+
+  constructor() {
+    this.client = axios.create({
+      baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8080/api',
+      timeout: 10000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    this.client.interceptors.request.use((config) => {
+      const token = localStorage.getItem('auth-token')
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+      return config
+    })
+
+    this.client.interceptors.response.use(
+      (response) => response,
+      async (error: AxiosError) => {
+        if (error.response?.status === 401) {
+          localStorage.removeItem('auth-token')
+          localStorage.removeItem('refresh-token')
+          window.location.href = '/login'
+        }
+        return Promise.reject(error)
+      }
+    )
+  }
+
+  private delay(ms: number = 500): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  async login(data: LoginRequest): Promise<AuthResponse> {
+    if (this.useMock) {
+      await this.delay()
+      if (data.email === 'demo@sigra.io' && data.password === 'password') {
+        return {
+          user: mockUser,
+          token: 'mock-jwt-token-' + Date.now(),
+          refreshToken: 'mock-refresh-token-' + Date.now(),
+        }
+      }
+      throw new Error('Invalid email or password')
+    }
+    const response = await this.client.post<AuthResponse>('/auth/login', data)
+    return response.data
+  }
+
+  async register(data: RegisterRequest): Promise<AuthResponse> {
+    if (this.useMock) {
+      await this.delay()
+      return {
+        user: {
+          ...mockUser,
+          email: data.email,
+          firstName: data.firstName,
+          lastName: data.lastName,
+          company: data.company,
+        },
+        token: 'mock-jwt-token-' + Date.now(),
+        refreshToken: 'mock-refresh-token-' + Date.now(),
+      }
+    }
+    const response = await this.client.post<AuthResponse>('/auth/register', data)
+    return response.data
+  }
+
+  async getCurrentUser(): Promise<User> {
+    if (this.useMock) {
+      await this.delay(300)
+      return mockUser
+    }
+    const response = await this.client.get<User>('/auth/me')
+    return response.data
+  }
+
+  async getDocuments(): Promise<Document[]> {
+    if (this.useMock) {
+      await this.delay()
+      return mockDocuments
+    }
+    const response = await this.client.get<Document[]>('/documents')
+    return response.data
+  }
+
+  async getDocument(id: string): Promise<Document> {
+    if (this.useMock) {
+      await this.delay()
+      const doc = mockDocuments.find(d => d.id === id)
+      if (!doc) throw new Error('Document not found')
+      return doc
+    }
+    const response = await this.client.get<Document>(`/documents/${id}`)
+    return response.data
+  }
+
+  async getEnvelopes(): Promise<Envelope[]> {
+    if (this.useMock) {
+      await this.delay()
+      return mockEnvelopes
+    }
+    const response = await this.client.get<Envelope[]>('/envelopes')
+    return response.data
+  }
+
+  async getEnvelope(id: string): Promise<Envelope> {
+    if (this.useMock) {
+      await this.delay()
+      const env = mockEnvelopes.find(e => e.id === id)
+      if (!env) throw new Error('Envelope not found')
+      return env
+    }
+    const response = await this.client.get<Envelope>(`/envelopes/${id}`)
+    return response.data
+  }
+
+  async verifyDocument(hash: string): Promise<{ verified: boolean; envelope?: Envelope }> {
+    if (this.useMock) {
+      await this.delay(800)
+      const env = mockEnvelopes.find(e => 
+        mockDocuments.find(d => d.id === e.documentId)?.hash === hash
+      )
+      return { verified: !!env, envelope: env }
+    }
+    const response = await this.client.post('/verify', { hash })
+    return response.data
+  }
+
+  async logout(): Promise<void> {
+    if (this.useMock) {
+      await this.delay(200)
+      return
+    }
+    await this.client.post('/auth/logout')
+  }
+}
+
+export const apiClient = new ApiClient()
diff --git a/src/api/mockData.ts b/src/api/mockData.ts
new file mode 100644
index 0000000..055eeb7
--- /dev/null
+++ b/src/api/mockData.ts
@@ -0,0 +1,114 @@
+import { User, Document, Envelope } from './types'
+
+export const mockUser: User = {
+  id: 'user-1',
+  email: 'demo@sigra.io',
+  firstName: 'Demo',
+  lastName: 'User',
+  company: 'SigraChain',
+  plan: 'pro',
+  createdAt: '2026-01-15T10:00:00Z',
+}
+
+export const mockDocuments: Document[] = [
+  {
+    id: 'doc-1',
+    filename: 'NDA_Agreement.pdf',
+    size: 245760,
+    hash: '0x1a2b3c4d5e6f...',
+    uploadedAt: '2026-06-08T14:30:00Z',
+    userId: 'user-1',
+  },
+  {
+    id: 'doc-2',
+    filename: 'Employment_Contract.pdf',
+    size: 512000,
+    hash: '0x7g8h9i0j1k2l...',
+    uploadedAt: '2026-06-07T10:15:00Z',
+    userId: 'user-1',
+  },
+  {
+    id: 'doc-3',
+    filename: 'Lease_Agreement.pdf',
+    size: 1024000,
+    hash: '0x3m4n5o6p7q8r...',
+    uploadedAt: '2026-06-05T09:00:00Z',
+    userId: 'user-1',
+  },
+]
+
+export const mockEnvelopes: Envelope[] = [
+  {
+    id: 'env-1',
+    documentId: 'doc-1',
+    title: 'NDA with Acme Corp',
+    status: 'anchored',
+    createdAt: '2026-06-08T14:35:00Z',
+    completedAt: '2026-06-08T16:30:00Z',
+    anchoredAt: '2026-06-08T18:00:00Z',
+    signers: [
+      {
+        id: 'signer-1',
+        email: 'alice@acme.com',
+        name: 'Alice Johnson',
+        status: 'signed',
+        signedAt: '2026-06-08T15:00:00Z',
+      },
+      {
+        id: 'signer-2',
+        email: 'bob@acme.com',
+        name: 'Bob Smith',
+        status: 'signed',
+        signedAt: '2026-06-08T16:30:00Z',
+      },
+    ],
+    merkleRoot: '0xabc123...',
+    transactionHash: '0xdef456...',
+  },
+  {
+    id: 'env-2',
+    documentId: 'doc-2',
+    title: 'Employment Contract - John Doe',
+    status: 'pending',
+    createdAt: '2026-06-07T10:20:00Z',
+    signers: [
+      {
+        id: 'signer-3',
+        email: 'john.doe@example.com',
+        name: 'John Doe',
+        status: 'signed',
+        signedAt: '2026-06-07T14:00:00Z',
+      },
+      {
+        id: 'signer-4',
+        email: 'hr@company.com',
+        name: 'HR Manager',
+        status: 'pending',
+      },
+    ],
+  },
+  {
+    id: 'env-3',
+    documentId: 'doc-3',
+    title: 'Office Lease Agreement',
+    status: 'completed',
+    createdAt: '2026-06-05T09:05:00Z',
+    completedAt: '2026-06-06T11:00:00Z',
+    signers: [
+      {
+        id: 'signer-5',
+        email: 'landlord@property.com',
+        name: 'Property Owner',
+        status: 'signed',
+        signedAt: '2026-06-05T15:00:00Z',
+      },
+      {
+        id: 'signer-6',
+        email: 'tenant@company.com',
+        name: 'Company CEO',
+        status: 'signed',
+        signedAt: '2026-06-06T11:00:00Z',
+      },
+    ],
+  },
+]
diff --git a/src/api/types.ts b/src/api/types.ts
new file mode 100644
index 0000000..3361c1e
--- /dev/null
+++ b/src/api/types.ts
@@ -0,0 +1,58 @@
+export interface User {
+  id: string
+  email: string
+  firstName: string
+  lastName: string
+  company?: string
+  plan: 'free' | 'pro' | 'business'
+  createdAt: string
+}
+
+export interface Document {
+  id: string
+  filename: string
+  size: number
+  hash: string
+  uploadedAt: string
+  userId: string
+}
+
+export interface Envelope {
+  id: string
+  documentId: string
+  title: string
+  status: 'draft' | 'pending' | 'completed' | 'anchored'
+  createdAt: string
+  completedAt?: string
+  anchoredAt?: string
+  signers: Signer[]
+  merkleRoot?: string
+  transactionHash?: string
+}
+
+export interface Signer {
+  id: string
+  email: string
+  name: string
+  status: 'pending' | 'signed' | 'declined'
+  signedAt?: string
+}
+
+export interface AuthResponse {
+  user: User
+  token: string
+  refreshToken: string
+}
+
+export interface LoginRequest {
+  email: string
+  password: string
+}
+
+export interface RegisterRequest {
+  email: string
+  password: string
+  firstName: string
+  lastName: string
+  company?: string
+}
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..3527e45
--- /dev/null
+++ b/src/components/ProtectedRoute.tsx
@@ -0,0 +1,25 @@
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import { ReactNode } from 'react'
+
+interface ProtectedRouteProps {
+  children: ReactNode
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, loading } = useAuth()
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full" />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />
+  }
+
+  return <>{children}</>
+}
diff --git a/src/contexts/AppProvider.tsx b/src/contexts/AppProvider.tsx
index e63b74a..1479bef 100644
--- a/src/contexts/AppProvider.tsx
+++ b/src/contexts/AppProvider.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 import { ThemeProvider } from './ThemeContext'
 import { ToastProvider } from '../components/ToastProvider'
+import { AuthProvider } from './AuthContext'
 
 interface AppProviderProps {
   children: ReactNode
@@ -10,7 +11,9 @@ export function AppProvider({ children }: AppProviderProps) {
   return (
     <ThemeProvider>
       <ToastProvider>
-        {children}
+        <AuthProvider>
+          {children}
+        </AuthProvider>
       </ToastProvider>
     </ThemeProvider>
   )
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..6dccaee
--- /dev/null
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,69 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { User, LoginRequest, RegisterRequest } from '../api/types'
+import { apiClient } from '../api/client'
+
+interface AuthContextType {
+  user: User | null
+  loading: boolean
+  login: (data: LoginRequest) => Promise<void>
+  register: (data: RegisterRequest) => Promise<void>
+  logout: () => Promise<void>
+  isAuthenticated: boolean
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const token = localStorage.getItem('auth-token')
+    if (token) {
+      apiClient.getCurrentUser()
+        .then(setUser)
+        .catch(() => {
+          localStorage.removeItem('auth-token')
+          localStorage.removeItem('refresh-token')
+        })
+        .finally(() => setLoading(false))
+    } else {
+      setLoading(false)
+    }
+  }, [])
+
+  const login = async (data: LoginRequest) => {
+    const response = await apiClient.login(data)
+    localStorage.setItem('auth-token', response.token)
+    localStorage.setItem('refresh-token', response.refreshToken)
+    setUser(response.user)
+  }
+
+  const register = async (data: RegisterRequest) => {
+    const response = await apiClient.register(data)
+    localStorage.setItem('auth-token', response.token)
+    localStorage.setItem('refresh-token', response.refreshToken)
+    setUser(response.user)
+  }
+
+  const logout = async () => {
+    await apiClient.logout()
+    localStorage.removeItem('auth-token')
+    localStorage.removeItem('refresh-token')
+    setUser(null)
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout, isAuthenticated: !!user }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider')
+  }
+  return context
+}

From b99ebf606e870fd068ab7add998d9add0f9e2175 Mon Sep 17 00:00:00 2001
From: Marcelo Oliveira <marcatamo@gmail.com>
Date: Tue, 9 Jun 2026 13:42:48 -0300
Subject: [PATCH 3/6] feat: add i18n support with English and Portuguese
 (Brazil)

- Set up react-i18next with LanguageDetector
- Create translation files:
  - en.json: English translations
  - pt-BR.json: Portuguese (Brazil) translations
- Translation namespaces:
  - common: shared strings (loading, error, save, cancel, etc.)
  - nav: navigation labels
  - auth: login/register forms
  - landing: hero, features, benefits
  - dashboard: stats, welcome, quick actions
  - documents: table headers, empty states
  - envelopes: statuses, table headers
  - verify: verification flow
  - settings: profile, preferences
- Create LanguageSwitcher component (Globe icon, toggles EN/PT-BR)
- Auto-detect browser language on first visit
- Persist language preference in localStorage
- Update all demo pages to use translations
- Add i18n import to main.tsx

Demo pages now fully translated:
- Landing page (hero, features)
- Login page (form labels, buttons)
- Dashboard (stats, welcome message)

Next: Step 6 - Landing Page (public marketing page)
---
 src/App.tsx                         | 167 +++++++++++++++++---------
 src/components/LanguageSwitcher.tsx |  24 ++++
 src/i18n/index.ts                   |  27 +++++
 src/i18n/locales/en.json            | 176 ++++++++++++++++++++++++++++
 src/i18n/locales/pt-BR.json         | 176 ++++++++++++++++++++++++++++
 src/main.tsx                        |   1 +
 6 files changed, 516 insertions(+), 55 deletions(-)
 create mode 100644 src/components/LanguageSwitcher.tsx
 create mode 100644 src/i18n/index.ts
 create mode 100644 src/i18n/locales/en.json
 create mode 100644 src/i18n/locales/pt-BR.json

diff --git a/src/App.tsx b/src/App.tsx
index c9a98a4..c67bf8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,67 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { ThemeToggle } from './components/ThemeToggle'
+import { LanguageSwitcher } from './components/LanguageSwitcher'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { useAuth } from './contexts/AuthContext'
 import { Button } from './components/Button'
 import { Input } from './components/Input'
 import { Card } from './components/Card'
+import { Badge } from './components/Badge'
 import { useToast } from './components/ToastProvider'
 import { useState } from 'react'
 
+function LandingDemo() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="min-h-screen">
+      <header className="sticky top-0 z-50 backdrop-blur-md border-b" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
+        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+          <h1 className="heading-2">{t('common.appName')}</h1>
+          <div className="flex gap-3">
+            <LanguageSwitcher />
+            <ThemeToggle />
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-20 text-center">
+        <h1 className="heading-1 mb-6">
+          {t('landing.hero.title')}
+        </h1>
+        <p className="text-xl text-muted mb-8 max-w-2xl mx-auto">
+          {t('landing.hero.subtitle')}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg">{t('landing.hero.cta')}</Button>
+          <Button variant="secondary" size="lg">{t('landing.hero.ctaSecondary')}</Button>
+        </div>
+
+        <div className="mt-20">
+          <h2 className="heading-2 mb-8">{t('landing.features.title')}</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <Card>
+              <h3 className="heading-3 mb-3">{t('landing.features.upload.title')}</h3>
+              <p className="text-muted">{t('landing.features.upload.description')}</p>
+            </Card>
+            <Card>
+              <h3 className="heading-3 mb-3">{t('landing.features.sign.title')}</h3>
+              <p className="text-muted">{t('landing.features.sign.description')}</p>
+            </Card>
+            <Card>
+              <h3 className="heading-3 mb-3">{t('landing.features.anchor.title')}</h3>
+              <p className="text-muted">{t('landing.features.anchor.description')}</p>
+            </Card>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}
+
 function LoginDemo() {
+  const { t } = useTranslation()
   const { login } = useAuth()
   const { showToast } = useToast()
   const [loading, setLoading] = useState(false)
@@ -20,9 +73,9 @@ function LoginDemo() {
     setLoading(true)
     try {
       await login({ email, password })
-      showToast('success', 'Login successful!')
+      showToast('success', t('auth.loginSuccess'))
     } catch (error) {
-      showToast('error', error instanceof Error ? error.message : 'Login failed')
+      showToast('error', t('auth.invalidCredentials'))
     } finally {
       setLoading(false)
     }
@@ -32,30 +85,31 @@ function LoginDemo() {
     <div className="min-h-screen flex items-center justify-center p-4">
       <Card className="w-full max-w-md">
         <div className="flex justify-between items-center mb-6">
-          <h1 className="heading-2">Log In</h1>
-          <ThemeToggle />
+          <h1 className="heading-2">{t('auth.loginTitle')}</h1>
+          <div className="flex gap-2">
+            <LanguageSwitcher />
+            <ThemeToggle />
+          </div>
         </div>
+        <p className="text-muted mb-6">{t('auth.loginSubtitle')}</p>
         <form onSubmit={handleSubmit} className="space-y-4">
           <Input
-            label="Email"
+            label={t('auth.email')}
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
           />
           <Input
-            label="Password"
+            label={t('auth.password')}
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
           />
           <Button type="submit" loading={loading} className="w-full">
-            Log In
+            {t('auth.loginButton')}
           </Button>
-          <p className="text-sm text-muted text-center">
-            Demo credentials: demo@sigra.io / password
-          </p>
         </form>
       </Card>
     </div>
@@ -63,101 +117,103 @@ function LoginDemo() {
 }
 
 function DashboardDemo() {
+  const { t } = useTranslation()
   const { user, logout } = useAuth()
-  const { showToast } = useToast()
-
-  const handleLogout = async () => {
-    await logout()
-    showToast('success', 'Logged out successfully')
-  }
 
   return (
     <div className="min-h-screen p-8 max-w-6xl mx-auto">
       <div className="flex justify-between items-center mb-8">
         <div>
-          <h1 className="heading-1 mb-2">Dashboard</h1>
-          <p className="text-muted">Welcome, {user?.firstName}!</p>
+          <h1 className="heading-1 mb-2">{t('dashboard.title')}</h1>
+          <p className="text-muted">{t('dashboard.welcome', { name: user?.firstName })}</p>
         </div>
         <div className="flex gap-3">
+          <LanguageSwitcher />
           <ThemeToggle />
-          <Button variant="ghost" onClick={handleLogout}>
-            Log Out
+          <Button variant="ghost" onClick={logout}>
+            {t('nav.logout')}
           </Button>
         </div>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
         <Card>
-          <p className="text-sm text-muted mb-2">Total Documents</p>
+          <p className="text-sm text-muted mb-2">{t('dashboard.stats.totalDocuments')}</p>
           <p className="text-3xl font-bold">12</p>
         </Card>
         <Card>
-          <p className="text-sm text-muted mb-2">Pending Signatures</p>
+          <p className="text-sm text-muted mb-2">{t('dashboard.stats.pendingSignatures')}</p>
           <p className="text-3xl font-bold text-warning">3</p>
         </Card>
         <Card>
-          <p className="text-sm text-muted mb-2">Completed</p>
+          <p className="text-sm text-muted mb-2">{t('dashboard.stats.completed')}</p>
           <p className="text-3xl font-bold text-accent">8</p>
         </Card>
         <Card>
-          <p className="text-sm text-muted mb-2">Anchored On-Chain</p>
+          <p className="text-sm text-muted mb-2">{t('dashboard.stats.anchoredOnChain')}</p>
           <p className="text-3xl font-bold text-primary">8</p>
         </Card>
       </div>
 
       <Card>
-        <h2 className="heading-2 mb-4">User Profile</h2>
-        <div className="space-y-2">
-          <p><strong>Email:</strong> {user?.email}</p>
-          <p><strong>Name:</strong> {user?.firstName} {user?.lastName}</p>
-          <p><strong>Company:</strong> {user?.company}</p>
-          <p><strong>Plan:</strong> {user?.plan}</p>
+        <h2 className="heading-2 mb-4">{t('dashboard.recentActivity')}</h2>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-center justify-between p-4 rounded-lg" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+              <div>
+                <p className="font-semibold">NDA Agreement #{i}</p>
+                <p className="text-sm text-muted">2 days ago</p>
+              </div>
+              <Badge variant="success">{t('envelopes.status.completed')}</Badge>
+            </div>
+          ))}
         </div>
       </Card>
     </div>
   )
 }
 
-function ApiDemo() {
+function I18nDemo() {
+  const { t } = useTranslation()
+
   return (
     <div className="min-h-screen p-8 max-w-4xl mx-auto">
       <div className="flex justify-between items-center mb-8">
         <div>
-          <h1 className="heading-1 mb-2">API & Auth Demo</h1>
-          <p className="text-muted">Step 4: Mock backend integration</p>
+          <h1 className="heading-1 mb-2">i18n Demo</h1>
+          <p className="text-muted">Step 5: Multi-language support</p>
+        </div>
+        <div className="flex gap-3">
+          <LanguageSwitcher />
+          <ThemeToggle />
         </div>
-        <ThemeToggle />
       </div>
 
       <div className="space-y-6">
         <Card>
-          <h2 className="heading-2 mb-4">Mock API Client</h2>
+          <h2 className="heading-2 mb-4">Current Language: {t('common.appName')}</h2>
           <p className="text-muted mb-4">
-            The API client simulates backend responses with realistic delays. All data is stored in memory and localStorage.
+            The app supports English and Portuguese (Brazil) with automatic language detection and localStorage persistence.
           </p>
-          <div className="space-y-2 text-sm">
-            <p>✓ Authentication (login, register, logout)</p>
-            <p>✓ JWT token management</p>
-            <p>✓ Protected routes</p>
-            <p>✓ Documents API</p>
-            <p>✓ Envelopes API</p>
-            <p>✓ Document verification</p>
+          <div className="flex gap-3">
+            <Button onClick={() => window.location.href = '/'}>
+              {t('nav.home')}
+            </Button>
+            <Button variant="secondary" onClick={() => window.location.href = '/login'}>
+              {t('nav.login')}
+            </Button>
           </div>
         </Card>
 
         <Card>
-          <h2 className="heading-2 mb-4">Try It</h2>
-          <div className="flex flex-col sm:flex-row gap-3">
-            <a href="/login" className="btn-primary text-center">
-              Go to Login →
-            </a>
-            <a href="/app/dashboard" className="btn-secondary text-center">
-              Go to Dashboard (Protected) →
-            </a>
+          <h2 className="heading-3 mb-4">Translation Examples</h2>
+          <div className="space-y-2 text-sm">
+            <p><strong>Loading:</strong> {t('common.loading')}</p>
+            <p><strong>Save:</strong> {t('common.save')}</p>
+            <p><strong>Cancel:</strong> {t('common.cancel')}</p>
+            <p><strong>Dashboard:</strong> {t('nav.dashboard')}</p>
+            <p><strong>Documents:</strong> {t('nav.documents')}</p>
           </div>
-          <p className="text-sm text-muted mt-4">
-            The dashboard is protected and will redirect to login if not authenticated.
-          </p>
         </Card>
       </div>
     </div>
@@ -167,7 +223,8 @@ function ApiDemo() {
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<ApiDemo />} />
+      <Route path="/" element={<I18nDemo />} />
+      <Route path="/landing" element={<LandingDemo />} />
       <Route path="/login" element={<LoginDemo />} />
       <Route
         path="/app/dashboard"
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..515b086
--- /dev/null
+++ b/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+import { Globe } from 'lucide-react'
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation()
+
+  const toggleLanguage = () => {
+    const newLang = i18n.language === 'pt-BR' ? 'en' : 'pt-BR'
+    i18n.changeLanguage(newLang)
+  }
+
+  return (
+    <button
+      onClick={toggleLanguage}
+      className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      aria-label="Toggle language"
+    >
+      <Globe className="w-4 h-4" />
+      <span className="text-sm font-medium">
+        {i18n.language === 'pt-BR' ? 'EN' : 'PT'}
+      </span>
+    </button>
+  )
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..7479126
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,27 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+import en from './locales/en.json'
+import ptBR from './locales/pt-BR.json'
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      'pt-BR': { translation: ptBR },
+    },
+    fallbackLng: 'en',
+    debug: import.meta.env.DEV,
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+    },
+  })
+
+export default i18n
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
new file mode 100644
index 0000000..54abd06
--- /dev/null
+++ b/src/i18n/locales/en.json
@@ -0,0 +1,176 @@
+{
+  "common": {
+    "appName": "SigraChain",
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close",
+    "back": "Back",
+    "next": "Next",
+    "search": "Search",
+    "filter": "Filter",
+    "sort": "Sort",
+    "actions": "Actions",
+    "status": "Status",
+    "date": "Date",
+    "name": "Name",
+    "email": "Email",
+    "yes": "Yes",
+    "no": "No"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "documents": "Documents",
+    "envelopes": "Envelopes",
+    "settings": "Settings",
+    "login": "Log In",
+    "register": "Sign Up",
+    "logout": "Log Out",
+    "pricing": "Pricing",
+    "verify": "Verify",
+    "home": "Home"
+  },
+  "auth": {
+    "loginTitle": "Log In",
+    "loginSubtitle": "Welcome back! Enter your credentials to continue.",
+    "registerTitle": "Create Account",
+    "registerSubtitle": "Start signing documents with blockchain verification.",
+    "email": "Email",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "company": "Company (optional)",
+    "loginButton": "Log In",
+    "registerButton": "Create Account",
+    "forgotPassword": "Forgot password?",
+    "noAccount": "Don't have an account?",
+    "hasAccount": "Already have an account?",
+    "loginSuccess": "Login successful!",
+    "registerSuccess": "Account created successfully!",
+    "logoutSuccess": "Logged out successfully",
+    "invalidCredentials": "Invalid email or password"
+  },
+  "landing": {
+    "hero": {
+      "title": "Every Signature, Forever Verifiable",
+      "subtitle": "Blockchain-anchored e-signatures with independent verification. No vendor lock-in, no expiration.",
+      "cta": "Get Started Free",
+      "ctaSecondary": "Verify Document"
+    },
+    "features": {
+      "title": "Why SigraChain?",
+      "upload": {
+        "title": "Upload",
+        "description": "Upload any PDF document to get started"
+      },
+      "sign": {
+        "title": "Sign",
+        "description": "Add signers and collect e-signatures"
+      },
+      "anchor": {
+        "title": "Anchor",
+        "description": "Proof anchored on Ethereum L2 (Base & Arbitrum)"
+      }
+    },
+    "benefits": {
+      "independent": {
+        "title": "Independent Verification",
+        "description": "Anyone can verify documents without needing SigraChain to exist"
+      },
+      "permanent": {
+        "title": "Permanent Proof",
+        "description": "Blockchain records are immutable and last forever"
+      },
+      "costEffective": {
+        "title": "Cost Effective",
+        "description": "Batch anchoring reduces costs to pennies per document"
+      }
+    }
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "welcome": "Welcome, {{name}}!",
+    "stats": {
+      "totalDocuments": "Total Documents",
+      "pendingSignatures": "Pending Signatures",
+      "completed": "Completed",
+      "anchoredOnChain": "Anchored On-Chain"
+    },
+    "recentActivity": "Recent Activity",
+    "quickActions": {
+      "title": "Quick Actions",
+      "newEnvelope": "New Envelope",
+      "uploadDocument": "Upload Document",
+      "verifyDocument": "Verify Document"
+    }
+  },
+  "documents": {
+    "title": "Documents",
+    "upload": "Upload Document",
+    "empty": {
+      "title": "No documents yet",
+      "description": "Upload your first document to get started"
+    },
+    "table": {
+      "filename": "Filename",
+      "size": "Size",
+      "hash": "Hash",
+      "uploadedAt": "Uploaded",
+      "actions": "Actions"
+    }
+  },
+  "envelopes": {
+    "title": "Envelopes",
+    "newEnvelope": "New Envelope",
+    "empty": {
+      "title": "No envelopes yet",
+      "description": "Create your first envelope to start collecting signatures"
+    },
+    "status": {
+      "draft": "Draft",
+      "pending": "Pending",
+      "completed": "Completed",
+      "anchored": "Anchored"
+    },
+    "table": {
+      "title": "Title",
+      "status": "Status",
+      "signers": "Signers",
+      "createdAt": "Created",
+      "actions": "Actions"
+    }
+  },
+  "verify": {
+    "title": "Verify Document",
+    "subtitle": "Check if a document has been signed and anchored on-chain",
+    "inputLabel": "Document Hash",
+    "inputPlaceholder": "Enter document hash (0x...)",
+    "button": "Verify",
+    "verified": {
+      "title": "Document Verified",
+      "description": "This document has been signed and anchored on-chain"
+    },
+    "notFound": {
+      "title": "Not Found",
+      "description": "This document has not been signed on SigraChain"
+    }
+  },
+  "settings": {
+    "title": "Settings",
+    "profile": {
+      "title": "Profile",
+      "updateSuccess": "Profile updated successfully"
+    },
+    "preferences": {
+      "title": "Preferences",
+      "language": "Language",
+      "theme": "Theme"
+    }
+  }
+}
diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json
new file mode 100644
index 0000000..9f00cad
--- /dev/null
+++ b/src/i18n/locales/pt-BR.json
@@ -0,0 +1,176 @@
+{
+  "common": {
+    "appName": "SigraChain",
+    "loading": "Carregando...",
+    "error": "Erro",
+    "success": "Sucesso",
+    "cancel": "Cancelar",
+    "confirm": "Confirmar",
+    "save": "Salvar",
+    "delete": "Excluir",
+    "edit": "Editar",
+    "close": "Fechar",
+    "back": "Voltar",
+    "next": "Próximo",
+    "search": "Buscar",
+    "filter": "Filtrar",
+    "sort": "Ordenar",
+    "actions": "Ações",
+    "status": "Status",
+    "date": "Data",
+    "name": "Nome",
+    "email": "E-mail",
+    "yes": "Sim",
+    "no": "Não"
+  },
+  "nav": {
+    "dashboard": "Painel",
+    "documents": "Documentos",
+    "envelopes": "Envelopes",
+    "settings": "Configurações",
+    "login": "Entrar",
+    "register": "Cadastrar",
+    "logout": "Sair",
+    "pricing": "Preços",
+    "verify": "Verificar",
+    "home": "Início"
+  },
+  "auth": {
+    "loginTitle": "Entrar",
+    "loginSubtitle": "Bem-vindo de volta! Digite suas credenciais para continuar.",
+    "registerTitle": "Criar Conta",
+    "registerSubtitle": "Comece a assinar documentos com verificação blockchain.",
+    "email": "E-mail",
+    "password": "Senha",
+    "confirmPassword": "Confirmar Senha",
+    "firstName": "Nome",
+    "lastName": "Sobrenome",
+    "company": "Empresa (opcional)",
+    "loginButton": "Entrar",
+    "registerButton": "Criar Conta",
+    "forgotPassword": "Esqueceu a senha?",
+    "noAccount": "Não tem uma conta?",
+    "hasAccount": "Já tem uma conta?",
+    "loginSuccess": "Login realizado com sucesso!",
+    "registerSuccess": "Conta criada com sucesso!",
+    "logoutSuccess": "Logout realizado com sucesso",
+    "invalidCredentials": "E-mail ou senha inválidos"
+  },
+  "landing": {
+    "hero": {
+      "title": "Cada Assinatura, Para Sempre Verificável",
+      "subtitle": "Assinaturas eletrônicas ancoradas em blockchain com verificação independente. Sem dependência de fornecedor, sem expiração.",
+      "cta": "Comece Grátis",
+      "ctaSecondary": "Verificar Documento"
+    },
+    "features": {
+      "title": "Por que SigraChain?",
+      "upload": {
+        "title": "Envie",
+        "description": "Envie qualquer documento PDF para começar"
+      },
+      "sign": {
+        "title": "Assine",
+        "description": "Adicione signatários e colete assinaturas eletrônicas"
+      },
+      "anchor": {
+        "title": "Ancore",
+        "description": "Prova ancorada no Ethereum L2 (Base & Arbitrum)"
+      }
+    },
+    "benefits": {
+      "independent": {
+        "title": "Verificação Independente",
+        "description": "Qualquer pessoa pode verificar documentos sem precisar do SigraChain"
+      },
+      "permanent": {
+        "title": "Prova Permanente",
+        "description": "Registros blockchain são imutáveis e duram para sempre"
+      },
+      "costEffective": {
+        "title": "Custo-Efetivo",
+        "description": "Ancoragem em lote reduz custos para centavos por documento"
+      }
+    }
+  },
+  "dashboard": {
+    "title": "Painel",
+    "welcome": "Bem-vindo, {{name}}!",
+    "stats": {
+      "totalDocuments": "Total de Documentos",
+      "pendingSignatures": "Assinaturas Pendentes",
+      "completed": "Concluídos",
+      "anchoredOnChain": "Ancorados On-Chain"
+    },
+    "recentActivity": "Atividade Recente",
+    "quickActions": {
+      "title": "Ações Rápidas",
+      "newEnvelope": "Novo Envelope",
+      "uploadDocument": "Enviar Documento",
+      "verifyDocument": "Verificar Documento"
+    }
+  },
+  "documents": {
+    "title": "Documentos",
+    "upload": "Enviar Documento",
+    "empty": {
+      "title": "Nenhum documento ainda",
+      "description": "Envie seu primeiro documento para começar"
+    },
+    "table": {
+      "filename": "Nome do Arquivo",
+      "size": "Tamanho",
+      "hash": "Hash",
+      "uploadedAt": "Enviado",
+      "actions": "Ações"
+    }
+  },
+  "envelopes": {
+    "title": "Envelopes",
+    "newEnvelope": "Novo Envelope",
+    "empty": {
+      "title": "Nenhum envelope ainda",
+      "description": "Crie seu primeiro envelope para começar a coletar assinaturas"
+    },
+    "status": {
+      "draft": "Rascunho",
+      "pending": "Pendente",
+      "completed": "Concluído",
+      "anchored": "Ancorado"
+    },
+    "table": {
+      "title": "Título",
+      "status": "Status",
+      "signers": "Signatários",
+      "createdAt": "Criado",
+      "actions": "Ações"
+    }
+  },
+  "verify": {
+    "title": "Verificar Documento",
+    "subtitle": "Verifique se um documento foi assinado e ancorado on-chain",
+    "inputLabel": "Hash do Documento",
+    "inputPlaceholder": "Digite o hash do documento (0x...)",
+    "button": "Verificar",
+    "verified": {
+      "title": "Documento Verificado",
+      "description": "Este documento foi assinado e ancorado on-chain"
+    },
+    "notFound": {
+      "title": "Não Encontrado",
+      "description": "Este documento não foi assinado no SigraChain"
+    }
+  },
+  "settings": {
+    "title": "Configurações",
+    "profile": {
+      "title": "Perfil",
+      "updateSuccess": "Perfil atualizado com sucesso"
+    },
+    "preferences": {
+      "title": "Preferências",
+      "language": "Idioma",
+      "theme": "Tema"
+    }
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 9e6574d..57b4cc1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import { AppProvider } from './contexts/AppProvider'
+import './i18n'
 import './index.css'
 import App from './App.tsx'
 

From c28f55f7366e9d1c405db8453355042d6e264896 Mon Sep 17 00:00:00 2001
From: Marcelo Oliveira <marcatamo@gmail.com>
Date: Tue, 9 Jun 2026 14:09:36 -0300
Subject: [PATCH 4/6] feat: add complete landing page with hero, features, and
 benefits

- Create LandingPage component with all sections
- Update PublicHeader to use CSS variables and i18n
- Update PublicFooter to use CSS variables and i18n
- Add LanguageSwitcher to PublicHeader
- Remove demo pages from App.tsx
- Add proper routing for landing page

Landing page includes:
- Hero section with CTA buttons
- Features grid (independent, permanent, cost-effective)
- Benefits section (tamper-proof, legally valid, global, enterprise)
- Stats section
- Final CTA section
---
 src/App.tsx                     | 169 ++------------------------
 src/components/PublicFooter.tsx |  53 ++++----
 src/components/PublicHeader.tsx |  32 +++--
 src/pages/LandingPage.tsx       | 208 ++++++++++++++++++++++++++++++++
 4 files changed, 268 insertions(+), 194 deletions(-)
 create mode 100644 src/pages/LandingPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c67bf8d..3d5d651 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,66 +1,15 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { ThemeToggle } from './components/ThemeToggle'
-import { LanguageSwitcher } from './components/LanguageSwitcher'
+import { LandingPage } from './pages/LandingPage'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { useAuth } from './contexts/AuthContext'
 import { Button } from './components/Button'
 import { Input } from './components/Input'
 import { Card } from './components/Card'
-import { Badge } from './components/Badge'
 import { useToast } from './components/ToastProvider'
+import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 
-function LandingDemo() {
-  const { t } = useTranslation()
-
-  return (
-    <div className="min-h-screen">
-      <header className="sticky top-0 z-50 backdrop-blur-md border-b" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
-        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
-          <h1 className="heading-2">{t('common.appName')}</h1>
-          <div className="flex gap-3">
-            <LanguageSwitcher />
-            <ThemeToggle />
-          </div>
-        </div>
-      </header>
-
-      <main className="max-w-4xl mx-auto px-4 py-20 text-center">
-        <h1 className="heading-1 mb-6">
-          {t('landing.hero.title')}
-        </h1>
-        <p className="text-xl text-muted mb-8 max-w-2xl mx-auto">
-          {t('landing.hero.subtitle')}
-        </p>
-        <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          <Button size="lg">{t('landing.hero.cta')}</Button>
-          <Button variant="secondary" size="lg">{t('landing.hero.ctaSecondary')}</Button>
-        </div>
-
-        <div className="mt-20">
-          <h2 className="heading-2 mb-8">{t('landing.features.title')}</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <Card>
-              <h3 className="heading-3 mb-3">{t('landing.features.upload.title')}</h3>
-              <p className="text-muted">{t('landing.features.upload.description')}</p>
-            </Card>
-            <Card>
-              <h3 className="heading-3 mb-3">{t('landing.features.sign.title')}</h3>
-              <p className="text-muted">{t('landing.features.sign.description')}</p>
-            </Card>
-            <Card>
-              <h3 className="heading-3 mb-3">{t('landing.features.anchor.title')}</h3>
-              <p className="text-muted">{t('landing.features.anchor.description')}</p>
-            </Card>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
-
-function LoginDemo() {
+function LoginPage() {
   const { t } = useTranslation()
   const { login } = useAuth()
   const { showToast } = useToast()
@@ -82,15 +31,9 @@ function LoginDemo() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4">
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
       <Card className="w-full max-w-md">
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="heading-2">{t('auth.loginTitle')}</h1>
-          <div className="flex gap-2">
-            <LanguageSwitcher />
-            <ThemeToggle />
-          </div>
-        </div>
+        <h1 className="heading-2 mb-6">{t('auth.loginTitle')}</h1>
         <p className="text-muted mb-6">{t('auth.loginSubtitle')}</p>
         <form onSubmit={handleSubmit} className="space-y-4">
           <Input
@@ -116,105 +59,20 @@ function LoginDemo() {
   )
 }
 
-function DashboardDemo() {
+function DashboardPage() {
   const { t } = useTranslation()
   const { user, logout } = useAuth()
 
   return (
-    <div className="min-h-screen p-8 max-w-6xl mx-auto">
+    <div className="min-h-screen p-8 max-w-6xl mx-auto" style={{ backgroundColor: 'var(--bg-primary)' }}>
       <div className="flex justify-between items-center mb-8">
         <div>
           <h1 className="heading-1 mb-2">{t('dashboard.title')}</h1>
           <p className="text-muted">{t('dashboard.welcome', { name: user?.firstName })}</p>
         </div>
-        <div className="flex gap-3">
-          <LanguageSwitcher />
-          <ThemeToggle />
-          <Button variant="ghost" onClick={logout}>
-            {t('nav.logout')}
-          </Button>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-        <Card>
-          <p className="text-sm text-muted mb-2">{t('dashboard.stats.totalDocuments')}</p>
-          <p className="text-3xl font-bold">12</p>
-        </Card>
-        <Card>
-          <p className="text-sm text-muted mb-2">{t('dashboard.stats.pendingSignatures')}</p>
-          <p className="text-3xl font-bold text-warning">3</p>
-        </Card>
-        <Card>
-          <p className="text-sm text-muted mb-2">{t('dashboard.stats.completed')}</p>
-          <p className="text-3xl font-bold text-accent">8</p>
-        </Card>
-        <Card>
-          <p className="text-sm text-muted mb-2">{t('dashboard.stats.anchoredOnChain')}</p>
-          <p className="text-3xl font-bold text-primary">8</p>
-        </Card>
-      </div>
-
-      <Card>
-        <h2 className="heading-2 mb-4">{t('dashboard.recentActivity')}</h2>
-        <div className="space-y-3">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="flex items-center justify-between p-4 rounded-lg" style={{ backgroundColor: 'var(--bg-secondary)' }}>
-              <div>
-                <p className="font-semibold">NDA Agreement #{i}</p>
-                <p className="text-sm text-muted">2 days ago</p>
-              </div>
-              <Badge variant="success">{t('envelopes.status.completed')}</Badge>
-            </div>
-          ))}
-        </div>
-      </Card>
-    </div>
-  )
-}
-
-function I18nDemo() {
-  const { t } = useTranslation()
-
-  return (
-    <div className="min-h-screen p-8 max-w-4xl mx-auto">
-      <div className="flex justify-between items-center mb-8">
-        <div>
-          <h1 className="heading-1 mb-2">i18n Demo</h1>
-          <p className="text-muted">Step 5: Multi-language support</p>
-        </div>
-        <div className="flex gap-3">
-          <LanguageSwitcher />
-          <ThemeToggle />
-        </div>
-      </div>
-
-      <div className="space-y-6">
-        <Card>
-          <h2 className="heading-2 mb-4">Current Language: {t('common.appName')}</h2>
-          <p className="text-muted mb-4">
-            The app supports English and Portuguese (Brazil) with automatic language detection and localStorage persistence.
-          </p>
-          <div className="flex gap-3">
-            <Button onClick={() => window.location.href = '/'}>
-              {t('nav.home')}
-            </Button>
-            <Button variant="secondary" onClick={() => window.location.href = '/login'}>
-              {t('nav.login')}
-            </Button>
-          </div>
-        </Card>
-
-        <Card>
-          <h2 className="heading-3 mb-4">Translation Examples</h2>
-          <div className="space-y-2 text-sm">
-            <p><strong>Loading:</strong> {t('common.loading')}</p>
-            <p><strong>Save:</strong> {t('common.save')}</p>
-            <p><strong>Cancel:</strong> {t('common.cancel')}</p>
-            <p><strong>Dashboard:</strong> {t('nav.dashboard')}</p>
-            <p><strong>Documents:</strong> {t('nav.documents')}</p>
-          </div>
-        </Card>
+        <Button variant="ghost" onClick={logout}>
+          {t('nav.logout')}
+        </Button>
       </div>
     </div>
   )
@@ -223,14 +81,13 @@ function I18nDemo() {
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<I18nDemo />} />
-      <Route path="/landing" element={<LandingDemo />} />
-      <Route path="/login" element={<LoginDemo />} />
+      <Route path="/" element={<LandingPage />} />
+      <Route path="/login" element={<LoginPage />} />
       <Route
         path="/app/dashboard"
         element={
           <ProtectedRoute>
-            <DashboardDemo />
+            <DashboardPage />
           </ProtectedRoute>
         }
       />
diff --git a/src/components/PublicFooter.tsx b/src/components/PublicFooter.tsx
index 1cb8f59..78c7eda 100644
--- a/src/components/PublicFooter.tsx
+++ b/src/components/PublicFooter.tsx
@@ -1,30 +1,33 @@
 import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 
 export function PublicFooter() {
+  const { t } = useTranslation()
+
   return (
-    <footer className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
+    <footer className="border-t" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border-primary)' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div className="col-span-1">
-            <Link to="/" className="flex items-center gap-2 mb-4">
+            <Link to="/" className="flex items-center gap-2 mb-4" style={{ textDecoration: 'none' }}>
               <img src="/logo.svg" alt="SigraChain" className="h-8 w-auto" />
-              <span className="text-xl font-bold text-gray-900 dark:text-white">SigraChain</span>
+              <span className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>SigraChain</span>
             </Link>
-            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            <p className="text-sm mb-4" style={{ color: 'var(--text-muted)' }}>
               Every signature, forever verifiable. Blockchain-anchored e-signatures with independent verification.
             </p>
             <div className="flex gap-3">
-              <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-primary transition-colors">
+              <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="transition-colors" style={{ color: 'var(--text-muted)' }}>
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                 </svg>
               </a>
-              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-primary transition-colors">
+              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="transition-colors" style={{ color: 'var(--text-muted)' }}>
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                   <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                 </svg>
               </a>
-              <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-primary transition-colors">
+              <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="transition-colors" style={{ color: 'var(--text-muted)' }}>
                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                 </svg>
@@ -33,42 +36,42 @@ export function PublicFooter() {
           </div>
 
           <div>
-            <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Product</h3>
+            <h3 className="text-sm font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>Product</h3>
             <ul className="space-y-3">
-              <li><Link to="/pricing" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Pricing</Link></li>
-              <li><Link to="/verify" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Verify Document</Link></li>
-              <li><Link to="/login" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Log In</Link></li>
-              <li><Link to="/register" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Sign Up</Link></li>
+              <li><Link to="/pricing" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>{t('nav.pricing')}</Link></li>
+              <li><Link to="/verify" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>{t('nav.verify')}</Link></li>
+              <li><Link to="/login" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>{t('nav.login')}</Link></li>
+              <li><Link to="/register" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>{t('nav.register')}</Link></li>
             </ul>
           </div>
 
           <div>
-            <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Resources</h3>
+            <h3 className="text-sm font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>Resources</h3>
             <ul className="space-y-3">
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Documentation</a></li>
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">API Reference</a></li>
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Blog</a></li>
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Support</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>Documentation</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>API Reference</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>Blog</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>Support</a></li>
             </ul>
           </div>
 
           <div>
-            <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Legal</h3>
+            <h3 className="text-sm font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>Legal</h3>
             <ul className="space-y-3">
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Privacy Policy</a></li>
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Terms of Service</a></li>
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">Cookie Policy</a></li>
-              <li><a href="#" className="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">GDPR</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>Privacy Policy</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>Terms of Service</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>Cookie Policy</a></li>
+              <li><a href="#" className="text-sm transition-colors" style={{ color: 'var(--text-muted)' }}>GDPR</a></li>
             </ul>
           </div>
         </div>
 
-        <div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
+        <div className="mt-12 pt-8 border-t" style={{ borderColor: 'var(--border-primary)' }}>
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>
               &copy; 2026 SigraChain. All rights reserved.
             </p>
-            <p className="text-sm text-gray-600 dark:text-gray-400">
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>
               Built on Ethereum L2 (Base & Arbitrum)
             </p>
           </div>
diff --git a/src/components/PublicHeader.tsx b/src/components/PublicHeader.tsx
index 20bc2b9..961cee3 100644
--- a/src/components/PublicHeader.tsx
+++ b/src/components/PublicHeader.tsx
@@ -1,44 +1,50 @@
 import { Link } from 'react-router-dom'
 import { ThemeToggle } from './ThemeToggle'
+import { LanguageSwitcher } from './LanguageSwitcher'
+import { useTranslation } from 'react-i18next'
 
 export function PublicHeader() {
+  const { t } = useTranslation()
+
   return (
-    <header className="sticky top-0 z-50 backdrop-blur-md bg-white/80 dark:bg-gray-900/80 border-b border-gray-200 dark:border-gray-800">
+    <header className="sticky top-0 z-50 backdrop-blur-md border-b" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border-primary)' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
-          <Link to="/" className="flex items-center gap-2">
+          <Link to="/" className="flex items-center gap-2" style={{ textDecoration: 'none' }}>
             <img src="/logo.svg" alt="SigraChain" className="h-8 w-auto" />
-            <span className="text-xl font-bold text-gray-900 dark:text-white">SigraChain</span>
+            <span className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>SigraChain</span>
           </Link>
 
           <nav className="hidden md:flex items-center gap-8">
-            <Link to="/" className="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors">
-              Home
+            <Link to="/" className="text-sm font-medium transition-colors" style={{ color: 'var(--text-secondary)' }}>
+              {t('nav.home')}
             </Link>
-            <Link to="/pricing" className="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors">
-              Pricing
+            <Link to="/pricing" className="text-sm font-medium transition-colors" style={{ color: 'var(--text-secondary)' }}>
+              {t('nav.pricing')}
             </Link>
-            <Link to="/verify" className="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors">
-              Verify
+            <Link to="/verify" className="text-sm font-medium transition-colors" style={{ color: 'var(--text-secondary)' }}>
+              {t('nav.verify')}
             </Link>
             <Link to="/login" className="btn-ghost">
-              Log In
+              {t('nav.login')}
             </Link>
             <Link to="/register" className="btn-primary">
-              Get Started
+              {t('nav.register')}
             </Link>
           </nav>
 
           <div className="flex items-center gap-3 md:hidden">
+            <LanguageSwitcher />
             <ThemeToggle />
             <button className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
-              <svg className="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6" style={{ color: 'var(--text-primary)' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
               </svg>
             </button>
           </div>
 
-          <div className="hidden md:block">
+          <div className="hidden md:flex items-center gap-3">
+            <LanguageSwitcher />
             <ThemeToggle />
           </div>
         </div>
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
new file mode 100644
index 0000000..80ca7e9
--- /dev/null
+++ b/src/pages/LandingPage.tsx
@@ -0,0 +1,208 @@
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { PublicHeader } from '../components/PublicHeader'
+import { PublicFooter } from '../components/PublicFooter'
+import { Button } from '../components/Button'
+import { Container } from '../components/Container'
+import { 
+  Shield, 
+  CheckCircle2, 
+  Clock, 
+  Lock, 
+  FileSignature, 
+  Zap,
+  Globe,
+  Award
+} from 'lucide-react'
+
+export function LandingPage() {
+  const { t } = useTranslation()
+
+  const features = [
+    {
+      icon: Shield,
+      title: t('landing.features.independent.title'),
+      description: t('landing.features.independent.description'),
+    },
+    {
+      icon: Clock,
+      title: t('landing.features.permanent.title'),
+      description: t('landing.features.permanent.description'),
+    },
+    {
+      icon: Zap,
+      title: t('landing.features.costEffective.title'),
+      description: t('landing.features.costEffective.description'),
+    },
+  ]
+
+  const benefits = [
+    {
+      icon: Lock,
+      title: 'Tamper-Proof',
+      description: 'Every signature is cryptographically signed and anchored on-chain, making it impossible to alter.',
+    },
+    {
+      icon: FileSignature,
+      title: 'Legally Valid',
+      description: 'Compliant with eIDAS, ESIGN Act, and other major electronic signature regulations worldwide.',
+    },
+    {
+      icon: Globe,
+      title: 'Global Verification',
+      description: 'Anyone can verify document authenticity using the public verification portal—no account needed.',
+    },
+    {
+      icon: Award,
+      title: 'Enterprise Ready',
+      description: 'SOC 2 Type II compliant with SLA guarantees, SSO, and dedicated support for enterprise clients.',
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <PublicHeader />
+      
+      {/* Hero Section */}
+      <section className="py-20 md:py-32 bg-gradient-to-b from-primary/5 to-background">
+        <Container>
+          <div className="max-w-4xl mx-auto text-center space-y-8">
+            <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-foreground">
+              {t('landing.hero.title')}
+            </h1>
+            <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto">
+              {t('landing.hero.subtitle')}
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+              <Link to="/register">
+                <Button variant="primary" size="lg">
+                  {t('landing.hero.cta')}
+                </Button>
+              </Link>
+              <Link to="/verify">
+                <Button variant="secondary" size="lg">
+                  {t('landing.hero.ctaSecondary')}
+                </Button>
+              </Link>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              No credit card required • 5 free documents per month
+            </p>
+          </div>
+        </Container>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 bg-background">
+        <Container>
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">{t('landing.features.title')}</h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Built on Ethereum L2 (Base & Arbitrum) for transparent, permanent proof
+            </p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            {features.map((feature, index) => {
+              const Icon = feature.icon
+              return (
+                <div
+                  key={index}
+                  className="p-8 rounded-xl border border-border bg-card hover:shadow-lg transition-shadow"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+                    <Icon className="w-6 h-6 text-primary" />
+                  </div>
+                  <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+                  <p className="text-muted-foreground">{feature.description}</p>
+                </div>
+              )
+            })}
+          </div>
+        </Container>
+      </section>
+
+      {/* Benefits Section */}
+      <section className="py-20 bg-muted/30">
+        <Container>
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">Why Choose SigraChain?</h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              The most trusted platform for blockchain-anchored electronic signatures
+            </p>
+          </div>
+          <div className="grid md:grid-cols-2 gap-8">
+            {benefits.map((benefit, index) => {
+              const Icon = benefit.icon
+              return (
+                <div
+                  key={index}
+                  className="flex gap-4 p-6 rounded-xl bg-background border border-border"
+                >
+                  <div className="flex-shrink-0">
+                    <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                      <Icon className="w-5 h-5 text-primary" />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold mb-2">{benefit.title}</h3>
+                    <p className="text-muted-foreground">{benefit.description}</p>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </Container>
+      </section>
+
+      {/* Stats Section */}
+      <section className="py-20 bg-background">
+        <Container>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+            <div>
+              <div className="text-4xl font-bold text-primary mb-2">10K+</div>
+              <div className="text-sm text-muted-foreground">Documents Signed</div>
+            </div>
+            <div>
+              <div className="text-4xl font-bold text-primary mb-2">5K+</div>
+              <div className="text-sm text-muted-foreground">Active Users</div>
+            </div>
+            <div>
+              <div className="text-4xl font-bold text-primary mb-2">99.9%</div>
+              <div className="text-sm text-muted-foreground">Uptime</div>
+            </div>
+            <div>
+              <div className="text-4xl font-bold text-primary mb-2">24/7</div>
+              <div className="text-sm text-muted-foreground">Support</div>
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-primary/5">
+        <Container>
+          <div className="max-w-3xl mx-auto text-center space-y-6">
+            <h2 className="text-4xl font-bold">Ready to get started?</h2>
+            <p className="text-lg text-muted-foreground">
+              Join thousands of businesses using SigraChain for secure, verifiable signatures
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+              <Link to="/register">
+                <Button variant="primary" size="lg">
+                  Start Free Trial
+                </Button>
+              </Link>
+              <Link to="/pricing">
+                <Button variant="secondary" size="lg">
+                  View Pricing
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      <PublicFooter />
+    </div>
+  )
+}

From a8a4cddb46abb032fa631907b57ee06cedae4c70 Mon Sep 17 00:00:00 2001
From: Marcelo Oliveira <marcatamo@gmail.com>
Date: Tue, 9 Jun 2026 14:12:39 -0300
Subject: [PATCH 5/6] feat: add pricing page with plans and billing toggle

- Create PricingPage component with 4 plans (Free, Pro, Business, Enterprise)
- Add monthly/annual billing toggle with 20% discount for annual
- Include feature comparison for each plan
- Add FAQ section with common questions
- Add pricing route to App.tsx

Features:
- Interactive billing toggle (monthly/annual)
- Popular plan highlighting
- Responsive grid layout
- Full i18n support
- Theme-aware design
---
 src/App.tsx               |   2 +
 src/pages/PricingPage.tsx | 246 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 248 insertions(+)
 create mode 100644 src/pages/PricingPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 3d5d651..11bdb11 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { LandingPage } from './pages/LandingPage'
+import { PricingPage } from './pages/PricingPage'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { useAuth } from './contexts/AuthContext'
 import { Button } from './components/Button'
@@ -82,6 +83,7 @@ export default function App() {
   return (
     <Routes>
       <Route path="/" element={<LandingPage />} />
+      <Route path="/pricing" element={<PricingPage />} />
       <Route path="/login" element={<LoginPage />} />
       <Route
         path="/app/dashboard"
diff --git a/src/pages/PricingPage.tsx b/src/pages/PricingPage.tsx
new file mode 100644
index 0000000..7e874ef
--- /dev/null
+++ b/src/pages/PricingPage.tsx
@@ -0,0 +1,246 @@
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { PublicHeader } from '../components/PublicHeader'
+import { PublicFooter } from '../components/PublicFooter'
+import { Button } from '../components/Button'
+import { Container } from '../components/Container'
+import { Check } from 'lucide-react'
+import { useState } from 'react'
+
+interface Plan {
+  name: string
+  price: {
+    monthly: number
+    annual: number
+  }
+  description: string
+  features: string[]
+  cta: string
+  popular?: boolean
+}
+
+export function PricingPage() {
+  const { t } = useTranslation()
+  const [isAnnual, setIsAnnual] = useState(true)
+
+  const plans: Plan[] = [
+    {
+      name: 'Free',
+      price: {
+        monthly: 0,
+        annual: 0,
+      },
+      description: 'Perfect for trying out SigraChain',
+      features: [
+        '5 documents per month',
+        '2 signers per document',
+        'Email support',
+        'Public verification',
+        'Basic analytics',
+      ],
+      cta: 'Get Started',
+    },
+    {
+      name: 'Pro',
+      price: {
+        monthly: 29,
+        annual: 24,
+      },
+      description: 'For professionals and small teams',
+      features: [
+        'Unlimited documents',
+        '10 signers per document',
+        'Priority support',
+        'Advanced analytics',
+        'Custom branding',
+        'API access',
+        'Audit logs',
+      ],
+      cta: 'Start Free Trial',
+      popular: true,
+    },
+    {
+      name: 'Business',
+      price: {
+        monthly: 99,
+        annual: 79,
+      },
+      description: 'For growing businesses',
+      features: [
+        'Everything in Pro',
+        'Unlimited signers',
+        'Bulk operations',
+        'SSO integration',
+        'Dedicated support',
+        'Custom workflows',
+        'SLA guarantee',
+        'Advanced security',
+      ],
+      cta: 'Contact Sales',
+    },
+    {
+      name: 'Enterprise',
+      price: {
+        monthly: 0,
+        annual: 0,
+      },
+      description: 'For large organizations',
+      features: [
+        'Everything in Business',
+        'Custom integrations',
+        'On-premise deployment',
+        '24/7 phone support',
+        'Dedicated account manager',
+        'Custom SLA',
+        'Advanced compliance',
+        'White-label solution',
+      ],
+      cta: 'Contact Sales',
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <PublicHeader />
+
+      <section className="py-20 bg-gradient-to-b from-primary/5 to-background">
+        <Container>
+          <div className="text-center mb-16">
+            <h1 className="text-5xl font-bold mb-4">Simple, transparent pricing</h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
+              Choose the plan that fits your needs. All plans include blockchain-anchored signatures.
+            </p>
+
+            {/* Billing Toggle */}
+            <div className="flex items-center justify-center gap-4">
+              <span className={isAnnual ? 'text-muted-foreground' : 'font-semibold'}>
+                Monthly
+              </span>
+              <button
+                onClick={() => setIsAnnual(!isAnnual)}
+                className="relative w-14 h-7 rounded-full transition-colors"
+                style={{
+                  backgroundColor: isAnnual ? 'var(--primary)' : 'var(--border)',
+                }}
+              >
+                <div
+                  className="absolute top-1 w-5 h-5 rounded-full bg-white transition-transform"
+                  style={{
+                    transform: isAnnual ? 'translateX(2rem)' : 'translateX(0.25rem)',
+                  }}
+                />
+              </button>
+              <span className={isAnnual ? 'font-semibold' : 'text-muted-foreground'}>
+                Annual
+                <span className="ml-2 text-sm text-primary font-semibold">
+                  Save 20%
+                </span>
+              </span>
+            </div>
+          </div>
+
+          {/* Pricing Grid */}
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
+            {plans.map((plan, index) => (
+              <div
+                key={index}
+                className={`relative p-8 rounded-xl border bg-card transition-all ${
+                  plan.popular
+                    ? 'border-primary shadow-lg scale-105'
+                    : 'border-border hover:border-primary/50'
+                }`}
+              >
+                {plan.popular && (
+                  <div className="absolute -top-4 left-1/2 -translate-x-1/2">
+                    <span className="bg-primary text-primary-foreground text-sm font-semibold px-4 py-1 rounded-full">
+                      Most Popular
+                    </span>
+                  </div>
+                )}
+
+                <div className="mb-6">
+                  <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
+                  <p className="text-sm text-muted-foreground">{plan.description}</p>
+                </div>
+
+                <div className="mb-6">
+                  {plan.price.monthly === 0 ? (
+                    <div className="text-4xl font-bold">Free</div>
+                  ) : (
+                    <div className="flex items-baseline gap-1">
+                      <span className="text-4xl font-bold">
+                        ${isAnnual ? plan.price.annual : plan.price.monthly}
+                      </span>
+                      <span className="text-muted-foreground">/month</span>
+                    </div>
+                  )}
+                  {isAnnual && plan.price.monthly > 0 && (
+                    <p className="text-sm text-muted-foreground mt-1">
+                      Billed annually (${plan.price.annual * 12}/year)
+                    </p>
+                  )}
+                </div>
+
+                <Link to="/register" className="block mb-6">
+                  <Button
+                    variant={plan.popular ? 'primary' : 'secondary'}
+                    className="w-full"
+                  >
+                    {plan.cta}
+                  </Button>
+                </Link>
+
+                <div className="space-y-3">
+                  {plan.features.map((feature, featureIndex) => (
+                    <div key={featureIndex} className="flex items-start gap-3">
+                      <Check className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
+                      <span className="text-sm">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </section>
+
+      {/* FAQ Section */}
+      <section className="py-20 bg-muted/30">
+        <Container>
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-3xl font-bold text-center mb-12">
+              Frequently asked questions
+            </h2>
+            <div className="space-y-6">
+              {[
+                {
+                  q: 'Can I change plans later?',
+                  a: 'Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately.',
+                },
+                {
+                  q: 'Is there a free trial?',
+                  a: 'Yes, all paid plans come with a 14-day free trial. No credit card required.',
+                },
+                {
+                  q: 'What payment methods do you accept?',
+                  a: 'We accept all major credit cards, PayPal, and bank transfers for annual plans.',
+                },
+                {
+                  q: 'Can I cancel anytime?',
+                  a: 'Yes, you can cancel your subscription at any time. You\'ll continue to have access until the end of your billing period.',
+                },
+              ].map((faq, index) => (
+                <div key={index} className="p-6 rounded-xl bg-background border border-border">
+                  <h3 className="font-semibold mb-2">{faq.q}</h3>
+                  <p className="text-muted-foreground">{faq.a}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      <PublicFooter />
+    </div>
+  )
+}

From de18d51b2f0968de4db85242bc29686d9e20416b Mon Sep 17 00:00:00 2001
From: Marcelo Oliveira <marcatamo@gmail.com>
Date: Tue, 9 Jun 2026 14:17:21 -0300
Subject: [PATCH 6/6] feat: add public document verification page

- Create VerifyPage component with hash input and verification flow
- Display verification results with document details and signer information
- Show blockchain proof for anchored documents (merkle root, tx hash)
- Add link to blockchain explorer for transaction verification
- Include helpful information about finding document hashes
- Add feature cards explaining verification benefits
- Handle not found cases with helpful suggestions
- Add /verify route to App.tsx

Features:
- Real-time document verification via API
- Detailed envelope and signer information display
- Blockchain transaction link (basescan.org)
- Status badges for envelope and signer states
- Responsive layout with clear success/error states
- Full i18n support
---
 src/App.tsx              |   2 +
 src/pages/VerifyPage.tsx | 311 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 313 insertions(+)
 create mode 100644 src/pages/VerifyPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 11bdb11..b76cd6a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { LandingPage } from './pages/LandingPage'
 import { PricingPage } from './pages/PricingPage'
+import { VerifyPage } from './pages/VerifyPage'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { useAuth } from './contexts/AuthContext'
 import { Button } from './components/Button'
@@ -84,6 +85,7 @@ export default function App() {
     <Routes>
       <Route path="/" element={<LandingPage />} />
       <Route path="/pricing" element={<PricingPage />} />
+      <Route path="/verify" element={<VerifyPage />} />
       <Route path="/login" element={<LoginPage />} />
       <Route
         path="/app/dashboard"
diff --git a/src/pages/VerifyPage.tsx b/src/pages/VerifyPage.tsx
new file mode 100644
index 0000000..a04852b
--- /dev/null
+++ b/src/pages/VerifyPage.tsx
@@ -0,0 +1,311 @@
+import { useTranslation } from 'react-i18next'
+import { PublicHeader } from '../components/PublicHeader'
+import { PublicFooter } from '../components/PublicFooter'
+import { Button } from '../components/Button'
+import { Input } from '../components/Input'
+import { Card } from '../components/Card'
+import { Container } from '../components/Container'
+import { apiClient } from '../api/client'
+import { useState } from 'react'
+import { useToast } from '../components/ToastProvider'
+import { Shield, CheckCircle2, XCircle, Clock, ExternalLink, FileText, Users, Calendar } from 'lucide-react'
+import { Envelope } from '../api/types'
+
+export function VerifyPage() {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const [hash, setHash] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [result, setResult] = useState<{ verified: boolean; envelope?: Envelope } | null>(null)
+
+  const handleVerify = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!hash.trim()) {
+      showToast('error', 'Please enter a document hash')
+      return
+    }
+
+    setLoading(true)
+    setResult(null)
+
+    try {
+      const response = await apiClient.verifyDocument(hash.trim())
+      setResult(response)
+      if (response.verified) {
+        showToast('success', 'Document verified successfully!')
+      } else {
+        showToast('warning', 'Document not found in our records')
+      }
+    } catch (error) {
+      showToast('error', 'Failed to verify document. Please try again.')
+      console.error('Verification error:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  const getStatusBadge = (status: string) => {
+    const styles = {
+      anchored: 'bg-primary/10 text-primary border-primary/20',
+      completed: 'bg-accent/10 text-accent border-accent/20',
+      pending: 'bg-warning/10 text-warning border-warning/20',
+      draft: 'bg-muted text-muted-foreground border-border',
+    }
+    return styles[status as keyof typeof styles] || styles.draft
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <PublicHeader />
+
+      <section className="py-20 bg-gradient-to-b from-primary/5 to-background">
+        <Container>
+          <div className="max-w-3xl mx-auto">
+            <div className="text-center mb-12">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
+                <Shield className="w-8 h-8 text-primary" />
+              </div>
+              <h1 className="text-4xl font-bold mb-4">{t('verify.title')}</h1>
+              <p className="text-lg text-muted-foreground">
+                {t('verify.subtitle')}
+              </p>
+            </div>
+
+            <Card className="mb-8">
+              <form onSubmit={handleVerify} className="space-y-4">
+                <Input
+                  label={t('verify.inputLabel')}
+                  placeholder={t('verify.inputPlaceholder')}
+                  value={hash}
+                  onChange={(e) => setHash(e.target.value)}
+                  className="font-mono"
+                />
+                <Button type="submit" loading={loading} className="w-full">
+                  {t('verify.button')}
+                </Button>
+              </form>
+
+              <div className="mt-6 p-4 rounded-lg bg-muted/50">
+                <p className="text-sm text-muted-foreground">
+                  <strong>How to find your document hash:</strong> The hash is a 66-character string 
+                  starting with "0x" that was provided when the document was signed. You can find it 
+                  in the signed document's details page or in the email confirmation.
+                </p>
+              </div>
+            </Card>
+
+            {result && (
+              <div className="animate-slide-up">
+                {result.verified && result.envelope ? (
+                  <Card className="border-success/50 bg-success/5">
+                    <div className="flex items-start gap-4 mb-6">
+                      <div className="flex-shrink-0 w-12 h-12 rounded-full bg-success/10 flex items-center justify-center">
+                        <CheckCircle2 className="w-6 h-6 text-success" />
+                      </div>
+                      <div className="flex-1">
+                        <h2 className="text-2xl font-bold text-success mb-2">
+                          {t('verify.verified.title')}
+                        </h2>
+                        <p className="text-muted-foreground">
+                          {t('verify.verified.description')}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="space-y-4 mb-6">
+                      <div className="p-4 rounded-lg bg-background border border-border">
+                        <h3 className="font-semibold mb-3 flex items-center gap-2">
+                          <FileText className="w-5 h-5 text-primary" />
+                          Document Details
+                        </h3>
+                        <div className="grid grid-cols-2 gap-4 text-sm">
+                          <div>
+                            <span className="text-muted-foreground">Title:</span>
+                            <p className="font-medium">{result.envelope.title}</p>
+                          </div>
+                          <div>
+                            <span className="text-muted-foreground">Status:</span>
+                            <span className={`inline-block ml-2 px-2 py-1 rounded-full text-xs font-semibold border ${getStatusBadge(result.envelope.status)}`}>
+                              {result.envelope.status.charAt(0).toUpperCase() + result.envelope.status.slice(1)}
+                            </span>
+                          </div>
+                          <div>
+                            <span className="text-muted-foreground">Created:</span>
+                            <p className="font-medium">{formatDate(result.envelope.createdAt)}</p>
+                          </div>
+                          {result.envelope.completedAt && (
+                            <div>
+                              <span className="text-muted-foreground">Completed:</span>
+                              <p className="font-medium">{formatDate(result.envelope.completedAt)}</p>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="p-4 rounded-lg bg-background border border-border">
+                        <h3 className="font-semibold mb-3 flex items-center gap-2">
+                          <Users className="w-5 h-5 text-primary" />
+                          Signers ({result.envelope.signers.length})
+                        </h3>
+                        <div className="space-y-2">
+                          {result.envelope.signers.map((signer) => (
+                            <div key={signer.id} className="flex items-center justify-between text-sm">
+                              <div>
+                                <p className="font-medium">{signer.name}</p>
+                                <p className="text-muted-foreground text-xs">{signer.email}</p>
+                              </div>
+                              <span className={`px-2 py-1 rounded-full text-xs font-semibold border ${getStatusBadge(signer.status)}`}>
+                                {signer.status}
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      {result.envelope.status === 'anchored' && result.envelope.transactionHash && (
+                        <div className="p-4 rounded-lg bg-primary/5 border border-primary/20">
+                          <h3 className="font-semibold mb-3 flex items-center gap-2">
+                            <Shield className="w-5 h-5 text-primary" />
+                            Blockchain Verification
+                          </h3>
+                          <div className="space-y-2 text-sm">
+                            <div>
+                              <span className="text-muted-foreground">Network:</span>
+                              <p className="font-medium">Ethereum L2 (Base)</p>
+                            </div>
+                            <div>
+                              <span className="text-muted-foreground">Merkle Root:</span>
+                              <p className="font-mono text-xs break-all">{result.envelope.merkleRoot}</p>
+                            </div>
+                            <div>
+                              <span className="text-muted-foreground">Transaction Hash:</span>
+                              <p className="font-mono text-xs break-all">{result.envelope.transactionHash}</p>
+                            </div>
+                            <a
+                              href={`https://basescan.org/tx/${result.envelope.transactionHash}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="inline-flex items-center gap-2 text-primary hover:text-primary-hover mt-2"
+                            >
+                              View on Blockchain Explorer
+                              <ExternalLink className="w-4 h-4" />
+                            </a>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex gap-3">
+                      <Button
+                        variant="primary"
+                        onClick={() => window.print()}
+                        className="flex-1"
+                      >
+                        Download Verification Report
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        onClick={() => {
+                          setHash('')
+                          setResult(null)
+                        }}
+                      >
+                        Verify Another
+                      </Button>
+                    </div>
+                  </Card>
+                ) : (
+                  <Card className="border-warning/50 bg-warning/5">
+                    <div className="flex items-start gap-4">
+                      <div className="flex-shrink-0 w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
+                        <XCircle className="w-6 h-6 text-warning" />
+                      </div>
+                      <div className="flex-1">
+                        <h2 className="text-2xl font-bold text-warning mb-2">
+                          {t('verify.notFound.title')}
+                        </h2>
+                        <p className="text-muted-foreground mb-4">
+                          {t('verify.notFound.description')}
+                        </p>
+                        <div className="p-4 rounded-lg bg-background border border-border mb-4">
+                          <p className="text-sm text-muted-foreground mb-2">
+                            <strong>Hash searched:</strong>
+                          </p>
+                          <p className="font-mono text-xs break-all">{hash}</p>
+                        </div>
+                        <div className="p-4 rounded-lg bg-muted/50">
+                          <p className="text-sm text-muted-foreground">
+                            <strong>Possible reasons:</strong>
+                          </p>
+                          <ul className="list-disc list-inside text-sm text-muted-foreground mt-2 space-y-1">
+                            <li>The document has not been signed on SigraChain</li>
+                            <li>The hash was entered incorrectly</li>
+                            <li>The document was signed using a different platform</li>
+                          </ul>
+                        </div>
+                        <Button
+                          variant="secondary"
+                          onClick={() => {
+                            setHash('')
+                            setResult(null)
+                          }}
+                          className="mt-4"
+                        >
+                          Try Again
+                        </Button>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+              </div>
+            )}
+
+            {!result && (
+              <div className="grid md:grid-cols-3 gap-6 mt-12">
+                <div className="text-center p-6 rounded-xl bg-card border border-border">
+                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+                    <Shield className="w-6 h-6 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Independent Verification</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Verify documents without needing a SigraChain account
+                  </p>
+                </div>
+                <div className="text-center p-6 rounded-xl bg-card border border-border">
+                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+                    <Clock className="w-6 h-6 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Instant Results</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Get verification results in seconds with full blockchain proof
+                  </p>
+                </div>
+                <div className="text-center p-6 rounded-xl bg-card border border-border">
+                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+                    <CheckCircle2 className="w-6 h-6 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Cryptographic Proof</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Merkle proof verification ensures document integrity
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </Container>
+      </section>
+
+      <PublicFooter />
+    </div>
+  )
+}