poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(help): Add Time Blocks section to comprehensive help docs

Browse Source 
- Add Time Blocks section to HelpComprehensive.tsx with block levels,
  types, recurrence patterns, and key features documentation
- Add complete helpComprehensive translations for en, es, fr, de
- Update HelpContracts.tsx styling
- Enhance FeaturesPage.tsx and HomePage.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-04 17:58:41 -05:00
parent 29e99631c9
commit 7ef255a5f1
8 changed files with 1947 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/src/pages/help/HelpComprehensive.tsx
View File

@@ -13,7 +13,7 @@ import {
Clock, Eye, Palette, Link2, Mail, Globe, CreditCard, Zap, Search, Filter,
Plus, Edit, Trash2, ArrowUpDown, GripVertical, Image, Save, ExternalLink,
MessageSquare, Tag, UserPlus, Shield, Copy, Layers, Play, Pause, Puzzle,
FileSignature, Send, Download, Link as LinkIcon,
FileSignature, Send, Download, Link as LinkIcon, CalendarOff,
} from 'lucide-react';
interface TocSubItem {
@@ -52,6 +52,7 @@ const HelpComprehensive: React.FC = () => {
{ id: 'resources', label: 'Resources', icon: <ClipboardList size={16} /> },
{ id: 'customers', label: 'Customers', icon: <Users size={16} /> },
{ id: 'staff', label: 'Staff', icon: <UserCog size={16} /> },
{ id: 'time-blocks', label: 'Time Blocks', icon: <CalendarOff size={16} /> },
{ id: 'plugins', label: 'Plugins', icon: <Puzzle size={16} /> },
{ id: 'contracts', label: 'Contracts', icon: <FileSignature size={16} /> },
{
@@ -625,6 +626,108 @@ const HelpComprehensive: React.FC = () => {
</div>
</section>
{/* ============================================== */}
{/* TIME BLOCKS */}
{/* ============================================== */}
<section id="time-blocks" className="mb-16 scroll-mt-24">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-lg bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center">
<CalendarOff size={20} className="text-rose-600 dark:text-rose-400" />
</div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Time Blocks</h2>
</div>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Time Blocks let you block off time when appointments cannot be booked. Use them for holidays,
closures, lunch breaks, or any time you need to prevent bookings.
</p>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Block Levels</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
<h4 className="font-medium text-gray-900 dark:text-white mb-1">Business Level</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Affects the entire business - all resources. Use for holidays and company-wide closures.</p>
</div>
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<h4 className="font-medium text-gray-900 dark:text-white mb-1">Resource Level</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Affects a specific resource only. Use for individual staff schedules or equipment maintenance.</p>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Block Types</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Hard Block</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Prevents all bookings during this time. Customers cannot book and staff cannot override.</p>
</div>
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<h4 className="font-medium text-gray-900 dark:text-white text-sm">Soft Block</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">Shows a warning but allows booking with confirmation. Use for preferred-off times.</p>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Recurrence Patterns</h3>
<div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
<div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-blue-700 dark:text-blue-300">One-time</span>
</div>
<div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-green-700 dark:text-green-300">Weekly</span>
</div>
<div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-orange-700 dark:text-orange-300">Monthly</span>
</div>
<div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-purple-700 dark:text-purple-300">Yearly</span>
</div>
<div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
<span className="text-xs font-medium text-red-700 dark:text-red-300">Holiday</span>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>Scheduler Overlay:</strong> Blocked times appear directly on the scheduler calendar with visual indicators</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>Color Coding:</strong> Business blocks use red/yellow, resource blocks use purple/cyan</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>Month View:</strong> Blocked dates show with colored backgrounds and badge indicators</span>
</li>
<li className="flex items-center gap-2">
<CheckCircle size={16} className="text-green-500" />
<span><strong>List View:</strong> Manage all time blocks in a tabular format with filtering options</span>
</li>
</ul>
<div className="p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg border border-teal-200 dark:border-teal-800">
<h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
<UserCog size={18} className="text-teal-500" /> Staff Availability
</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
Staff members can manage their own time blocks through the "My Availability" page. This allows
them to block off time for personal appointments, vacations, or other commitments without
needing admin access.
</p>
</div>
</div>
<Link to="/help/time-blocks" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<CalendarOff size={24} className="text-rose-500" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Time Blocks Documentation</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Complete guide to creating, managing, and visualizing time blocks</p>
</div>
<ChevronRight size={20} className="text-gray-400 ml-auto" />
</Link>
</section>
{/* ============================================== */}
{/* PLUGINS */}
{/* ============================================== */}

247
frontend/src/pages/help/HelpContracts.tsx
View File

@@ -10,8 +10,8 @@ import { useTranslation } from 'react-i18next';
import {
ArrowLeft, FileSignature, FileText, Send, CheckCircle, ChevronRight,
HelpCircle, Shield, Clock, Users, AlertCircle, Copy, Eye, Download,
Plus, Pencil, Trash2, ChevronDown, RefreshCw, Ban, ExternalLink,
LayoutGrid, Search, Filter,
Plus, Pencil, Trash2, ChevronDown, Ban, ExternalLink,
LayoutGrid,
} from 'lucide-react';
const HelpContracts: React.FC = () => {
@@ -30,57 +30,57 @@ const HelpContracts: React.FC = () => {
<FileSignature size={24} className="text-brand-600 dark:text-brand-400" />
</div>
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Contracts Guide</h1>
<p className="text-gray-500 dark:text-gray-400">Create and manage digital contracts with e-signatures</p>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">{t('help.contracts.overview.title', 'Contracts & E-Signature System')}</h1>
<p className="text-gray-500 dark:text-gray-400">{t('help.contracts.overview.description', 'The contracts system allows you to create contract templates, send them to customers for signing, and maintain legally compliant audit trails.')}</p>
</div>
</div>
</div>
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<FileSignature size={20} className="text-brand-500" /> Overview
<FileSignature size={20} className="text-brand-500" /> {t('help.contracts.overview.title', 'Overview')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
The Contracts system allows you to create reusable contract templates, send them to customers for digital signature, and maintain legally compliant records with full audit trails.
{t('help.contracts.overview.description', 'The contracts system allows you to create contract templates, send them to customers for signing, and maintain legally compliant audit trails.')}
</p>
<p className="text-gray-600 dark:text-gray-300">
All signatures are captured with ESIGN Act and UETA compliance, including IP address, timestamp, browser information, and optional geolocation for maximum legal protection.
{t('help.contracts.overview.compliance', 'Built for ESIGN Act and UETA compliance, capturing all necessary data for legally binding electronic signatures.')}
</p>
</div>
</section>
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<LayoutGrid size={20} className="text-brand-500" /> Page Layout
<LayoutGrid size={20} className="text-brand-500" /> {t('help.contracts.pageLayout.title', 'Page Layout')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
The Contracts page is organized into two collapsible sections for easy management:
{t('help.contracts.pageLayout.description', 'The Contracts page is organized into two main sections:')}
</p>
<div className="space-y-4">
<div className="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<ChevronDown size={20} className="text-blue-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Templates Section</h4>
<h4 className="font-medium text-gray-900 dark:text-white">{t('contracts.templates', 'Templates')}</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Create and manage reusable contract templates. Includes search, status filters (All, Active, Draft, Archived), and actions to create, edit, preview PDF, and delete templates.
{t('help.contracts.pageLayout.templatesSection', 'Templates - Create and manage reusable contract templates')}
</p>
</div>
</div>
<div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<ChevronDown size={20} className="text-green-500 mt-0.5" />
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Sent Contracts Section</h4>
<h4 className="font-medium text-gray-900 dark:text-white">{t('contracts.sentContracts', 'Sent Contracts')}</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Track contracts sent to customers. Includes search, status filters (All, Pending, Signed, Expired, Voided), and actions to view, copy link, resend, or void contracts.
{t('help.contracts.pageLayout.sentContractsSection', 'Sent Contracts - Track contracts sent to customers')}
</p>
</div>
</div>
</div>
<div className="mt-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-300">
<strong>Tip:</strong> Click the section header to collapse/expand each section. The count badge shows how many items are in each section.
<strong>{t('help.contracts.pageLayout.tip', 'Tip: Both sections can be expanded or collapsed by clicking the headers. Your preference is remembered.')}</strong>
</p>
</div>
</div>
@@ -88,45 +88,45 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<FileText size={20} className="text-brand-500" /> Contract Templates
<FileText size={20} className="text-brand-500" /> {t('help.contracts.templates.title', 'Contract Templates')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Templates are reusable contract documents that can be personalized with variable placeholders.
{t('help.contracts.templates.description', 'Templates are reusable documents with placeholders that are automatically filled when sending to customers.')}
</p>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">Template Variables</h3>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.templates.variablesTitle', 'Available Variables')}</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
Use these placeholders in your templates - they'll be automatically replaced when the contract is created:
{t('help.contracts.templates.variablesDescription', 'Use these placeholders in your template content to automatically personalize contracts:')}
</p>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm font-mono">
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_NAME}}"}</span> - Full name</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_FIRST_NAME}}"}</span> - First name</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_EMAIL}}"}</span> - Email address</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_PHONE}}"}</span> - Phone number</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_NAME}}"}</span> - Your business name</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_EMAIL}}"}</span> - Contact email</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_PHONE}}"}</span> - Business phone</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{DATE}}"}</span> - Current date</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{YEAR}}"}</span> - Current year</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_NAME}}"}</span> - {t('help.contracts.templates.variables.customerName', 'Full name')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_FIRST_NAME}}"}</span> - {t('help.contracts.templates.variables.customerFirstName', 'First name')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_EMAIL}}"}</span> - {t('help.contracts.templates.variables.customerEmail', 'Email address')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_PHONE}}"}</span> - {t('help.contracts.templates.variables.customerPhone', 'Phone number')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_NAME}}"}</span> - {t('help.contracts.templates.variables.businessName', 'Your business name')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_EMAIL}}"}</span> - {t('help.contracts.templates.variables.businessEmail', 'Contact email')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_PHONE}}"}</span> - {t('help.contracts.templates.variables.businessPhone', 'Business phone')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{DATE}}"}</span> - {t('help.contracts.templates.variables.date', 'Current date')}</div>
<div><span className="text-blue-600 dark:text-blue-400">{"{{YEAR}}"}</span> - {t('help.contracts.templates.variables.year', 'Current year')}</div>
</div>
</div>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">Template Scopes</h3>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.templates.scopesTitle', 'Contract Scopes')}</h3>
<div className="space-y-3">
<div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<Users size={20} className="text-blue-500 mt-0.5" />
<div>
<span className="font-medium text-gray-900 dark:text-white">Customer-Level</span>
<p className="text-sm text-gray-500 dark:text-gray-400">One-time contracts per customer (e.g., privacy policy, terms of service)</p>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.scope.customer', 'Customer-Level')}</span>
<p className="text-sm text-gray-500 dark:text-gray-400">{t('help.contracts.templates.scopes.customer', 'One-time contracts per customer (e.g., privacy policy, terms of service). Once signed, not sent again.')}</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<Clock size={20} className="text-purple-500 mt-0.5" />
<div>
<span className="font-medium text-gray-900 dark:text-white">Per Appointment</span>
<p className="text-sm text-gray-500 dark:text-gray-400">Signed for each booking (e.g., liability waivers, service agreements)</p>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.scope.appointment', 'Per Appointment')}</span>
<p className="text-sm text-gray-500 dark:text-gray-400">{t('help.contracts.templates.scopes.appointment', 'Signed for each booking (e.g., liability waivers, service agreements). Unique contracts created for each appointment.')}</p>
</div>
</div>
</div>
@@ -135,56 +135,47 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Plus size={20} className="text-brand-500" /> Creating Templates
<Plus size={20} className="text-brand-500" /> {t('help.contracts.creating.title', 'Creating a Template')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Click the <strong>"New Template"</strong> button in the Templates section to create a new contract template:
{t('help.contracts.creating.description', 'To create a new contract template:')}
</p>
<ol className="space-y-4">
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Enter Template Name</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Give your template a clear, descriptive name (e.g., "Service Agreement", "Liability Waiver").
</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.creating.steps.1', 'Click the "New Template" button')}</h4>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Select Scope</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Choose "Per Appointment" for waivers or "Customer-Level" for one-time agreements.
</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.creating.steps.2', 'Enter a name and description for the template')}</h4>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Set Status</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Start as "Draft" while editing. Change to "Active" when ready to send to customers.
</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.creating.steps.3', 'Write your contract content using the HTML editor')}</h4>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Set Expiration (Optional)</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Enter days until contracts expire. Leave blank for no expiration.
</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.creating.steps.4', 'Set the scope (Customer-Level or Per Appointment)')}</h4>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Write Contract Content</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
Enter your contract text using HTML formatting. Click variable chips to insert placeholders.
</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.creating.steps.5', 'Optionally set expiration (in days) and version notes')}</h4>
</div>
</li>
<li className="flex items-start gap-3">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">6</span>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.creating.steps.6', 'Set status to Active when ready to use the template')}</h4>
</div>
</li>
</ol>
@@ -193,32 +184,32 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Pencil size={20} className="text-brand-500" /> Managing Templates
<Pencil size={20} className="text-brand-500" /> {t('help.contracts.managing.title', 'Managing Templates')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Each template in the list has action buttons on the right:
{t('help.contracts.managing.description', 'Each template shows its scope, status, and version. Use the actions menu to:')}
</p>
<div className="space-y-3">
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Eye size={18} className="text-blue-500" />
<div>
<span className="font-medium text-gray-900 dark:text-white">Preview PDF</span>
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- See how the contract looks as a PDF with sample data</span>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.actions.preview', 'Preview PDF')}</span>
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- {t('help.contracts.managing.actions.preview', 'See how the contract looks as a PDF with sample data')}</span>
</div>
</div>
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Pencil size={18} className="text-blue-500" />
<div>
<span className="font-medium text-gray-900 dark:text-white">Edit</span>
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- Modify template name, content, scope, or status</span>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.actions.edit', 'Edit')}</span>
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- {t('help.contracts.managing.actions.edit', 'Update template name, content, or settings')}</span>
</div>
</div>
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<Trash2 size={18} className="text-red-500" />
<div>
<span className="font-medium text-gray-900 dark:text-white">Delete</span>
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- Remove the template (requires confirmation)</span>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.actions.delete', 'Delete')}</span>
<span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- {t('help.contracts.managing.actions.delete', 'Permanently remove a template (cannot undo if active contracts exist)')}</span>
</div>
</div>
</div>
@@ -226,7 +217,7 @@ const HelpContracts: React.FC = () => {
<div className="flex items-start gap-2">
<AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5" />
<p className="text-sm text-amber-800 dark:text-amber-200">
<strong>Note:</strong> Only "Active" templates can be used to send contracts. Switch templates to Active status when they're ready for use.
<strong>{t('help.contracts.managing.note', 'Note: Templates have statuses: Draft (not ready), Active (can be sent), and Archived (hidden but kept for records)')}</strong>
</p>
</div>
</div>
@@ -235,11 +226,11 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Send size={20} className="text-brand-500" /> Sending Contracts
<Send size={20} className="text-brand-500" /> {t('help.contracts.sending.title', 'Sending Contracts')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Click the <strong>"Send Contract"</strong> button in the Sent Contracts section:
{t('help.contracts.sending.description', 'To send a contract to a customer:')}
</p>
<div className="space-y-4">
<div className="flex items-start gap-3">
@@ -247,8 +238,7 @@ const HelpContracts: React.FC = () => {
<span className="text-sm font-semibold text-brand-600 dark:text-brand-400">1</span>
</div>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Select a Template</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Choose from your active contract templates</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.1', 'Click "Create Contract" in the Sent Contracts section')}</h4>
</div>
</div>
<div className="flex items-start gap-3">
@@ -256,8 +246,7 @@ const HelpContracts: React.FC = () => {
<span className="text-sm font-semibold text-brand-600 dark:text-brand-400">2</span>
</div>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Choose a Customer</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Search and select a customer. Variables are automatically filled with their data.</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.2', 'Select an active template from the dropdown')}</h4>
</div>
</div>
<div className="flex items-start gap-3">
@@ -265,8 +254,7 @@ const HelpContracts: React.FC = () => {
<span className="text-sm font-semibold text-brand-600 dark:text-brand-400">3</span>
</div>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Send Immediately (Optional)</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Check the box to email the signing request right away, or uncheck to send later.</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.3', 'Search and select a customer')}</h4>
</div>
</div>
<div className="flex items-start gap-3">
@@ -274,8 +262,23 @@ const HelpContracts: React.FC = () => {
<span className="text-sm font-semibold text-brand-600 dark:text-brand-400">4</span>
</div>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">Track Status</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">Monitor the contract in the Sent Contracts list</p>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.4', 'Optionally link to a specific appointment or service')}</h4>
</div>
</div>
<div className="flex items-start gap-3">
<div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
<span className="text-sm font-semibold text-brand-600 dark:text-brand-400">5</span>
</div>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.5', 'Check "Send email immediately" to notify the customer')}</h4>
</div>
</div>
<div className="flex items-start gap-3">
<div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
<span className="text-sm font-semibold text-brand-600 dark:text-brand-400">6</span>
</div>
<div>
<h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.6', 'Click "Send Contract"')}</h4>
</div>
</div>
</div>
@@ -284,53 +287,53 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Eye size={20} className="text-brand-500" /> Contract Status & Actions
<Eye size={20} className="text-brand-500" /> {t('help.contracts.statusActions.title', 'Contract Status & Actions')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<div className="space-y-3 mb-6">
<div className="flex items-center gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<span className="font-medium text-gray-900 dark:text-white">Pending</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- Awaiting customer signature</span>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.pending', 'Pending')}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.pending', 'Sent but not yet signed')}</span>
</div>
<div className="flex items-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
<div className="w-3 h-3 rounded-full bg-green-500" />
<span className="font-medium text-gray-900 dark:text-white">Signed</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- Customer has signed the contract</span>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.signed', 'Signed')}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.signed', 'Successfully signed by customer')}</span>
</div>
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<div className="w-3 h-3 rounded-full bg-gray-500" />
<span className="font-medium text-gray-900 dark:text-white">Expired</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- Contract expired before signing</span>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.expired', 'Expired')}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.expired', 'Signing deadline passed')}</span>
</div>
<div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
<div className="w-3 h-3 rounded-full bg-red-500" />
<span className="font-medium text-gray-900 dark:text-white">Voided</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- Contract was cancelled by business</span>
<span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.voided', 'Voided')}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.voided', 'Manually revoked by business')}</span>
</div>
</div>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">Available Actions</h3>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.statusActions.actionsTitle', 'Available Actions')}</h3>
<div className="space-y-2">
<div className="flex items-center gap-3 p-2 text-sm">
<Eye size={16} className="text-blue-500" />
<span className="text-gray-700 dark:text-gray-300"><strong>View Details</strong> - See full contract information</span>
<span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.viewDetails', 'View Details')}</strong> - {t('help.contracts.statusActions.actions.viewDetails', 'See full contract information and content preview')}</span>
</div>
<div className="flex items-center gap-3 p-2 text-sm">
<Copy size={16} className="text-blue-500" />
<span className="text-gray-700 dark:text-gray-300"><strong>Copy Link</strong> - Copy signing URL to clipboard (pending only)</span>
</div>
<div className="flex items-center gap-3 p-2 text-sm">
<Send size={16} className="text-green-500" />
<span className="text-gray-700 dark:text-gray-300"><strong>Send/Resend</strong> - Email the signing request (pending only)</span>
<span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.copyLink', 'Copy Signing Link')}</strong> - {t('help.contracts.statusActions.actions.copyLink', 'Get the public signing URL to share with customer')}</span>
</div>
<div className="flex items-center gap-3 p-2 text-sm">
<ExternalLink size={16} className="text-blue-500" />
<span className="text-gray-700 dark:text-gray-300"><strong>Open Signing Page</strong> - View the customer signing experience</span>
<span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.openSigningPage', 'Open Signing Page')}</strong> - {t('help.contracts.statusActions.actions.openSigning', 'Preview what the customer sees')}</span>
</div>
<div className="flex items-center gap-3 p-2 text-sm">
<Send size={16} className="text-green-500" />
<span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.resend', 'Resend Email')}</strong> - {t('help.contracts.statusActions.actions.resend', 'Send another signing reminder email')}</span>
</div>
<div className="flex items-center gap-3 p-2 text-sm">
<Ban size={16} className="text-red-500" />
<span className="text-gray-700 dark:text-gray-300"><strong>Void</strong> - Cancel a pending contract</span>
<span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.void', 'Void Contract')}</strong> - {t('help.contracts.statusActions.actions.void', 'Revoke a pending contract')}</span>
</div>
</div>
</div>
@@ -338,43 +341,43 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Shield size={20} className="text-brand-500" /> Legal Compliance
<Shield size={20} className="text-brand-500" /> {t('help.contracts.legalCompliance.title', 'Legal Compliance')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
<div className="flex items-start gap-3">
<AlertCircle size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
<p className="text-sm text-blue-700 dark:text-blue-300">
<strong>ESIGN Act & UETA Compliant:</strong> All signatures include comprehensive audit trails that meet federal and state requirements for electronic signatures.
<strong>{t('help.contracts.legalCompliance.notice', 'The contract system is designed to meet ESIGN Act and UETA requirements. Each signature captures:')}</strong>
</p>
</div>
</div>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">Captured Audit Data</h3>
<h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.legalCompliance.auditDataTitle', 'Audit Trail Data')}</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<CheckCircle size={16} className="text-green-500" />
<span>Document hash (SHA-256)</span>
<span>{t('help.contracts.legalCompliance.auditData.documentHash', 'Document hash (SHA-256) - Tamper evidence')}</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<CheckCircle size={16} className="text-green-500" />
<span>Signature timestamp (ISO)</span>
<span>{t('help.contracts.legalCompliance.auditData.signedTimestamp', 'Signed timestamp (ISO) - Time of signing')}</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<CheckCircle size={16} className="text-green-500" />
<span>Signer's IP address</span>
<span>{t('help.contracts.legalCompliance.auditData.ipAddress', 'IP address - Signer identification')}</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<CheckCircle size={16} className="text-green-500" />
<span>Browser/device information</span>
<span>{t('help.contracts.legalCompliance.auditData.userAgent', 'User agent - Browser/device info')}</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<CheckCircle size={16} className="text-green-500" />
<span>Consent checkbox states</span>
<span>{t('help.contracts.legalCompliance.auditData.consentCheckbox', 'Consent checkbox states - Proof of intent')}</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
<CheckCircle size={16} className="text-green-500" />
<span>Geolocation (if permitted)</span>
<span>{t('help.contracts.legalCompliance.auditData.geolocation', 'Geolocation (optional) - Additional identification')}</span>
</div>
</div>
</div>
@@ -382,37 +385,33 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Download size={20} className="text-brand-500" /> PDF Generation
<Download size={20} className="text-brand-500" /> {t('help.contracts.pdfGeneration.title', 'PDF Generation')}
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<p className="text-gray-600 dark:text-gray-300 mb-4">
Once a contract is signed, a PDF is automatically generated that includes:
{t('help.contracts.pdfGeneration.description', 'After a contract is signed, a PDF is automatically generated containing:')}
</p>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300">Your business branding and logo</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.pdfGeneration.includes.content', 'Full contract content')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300">The full contract content with substituted variables</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.pdfGeneration.includes.signature', 'Signature section with signer name and date')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300">Signature section with signer's name and consent confirmations</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.pdfGeneration.includes.audit', 'Audit trail table with all compliance data')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300">Complete audit trail with verification data</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300">Legal notice about electronic signatures</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.pdfGeneration.includes.legal', 'Legal notice about ESIGN Act compliance')}</span>
</li>
</ul>
<div className="mt-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-300">
<strong>Preview PDFs:</strong> Use the eye icon on any template to preview how the final PDF will look with sample customer data.
<strong>{t('help.contracts.pdfGeneration.tip', 'Signed PDFs can be downloaded by both the business and customer for their records.')}</strong>
</p>
</div>
</div>
@@ -420,49 +419,49 @@ const HelpContracts: React.FC = () => {
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<CheckCircle size={20} className="text-brand-500" /> Best Practices
<CheckCircle size={20} className="text-brand-500" /> {t('help.contracts.bestPractices.title', 'Best Practices')}
</h2>
<div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
<ul className="space-y-3">
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300"><strong>Use Clear Language:</strong> Write contracts in plain language that customers can easily understand</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.bestPractices.tips.1', 'Use clear, descriptive template names for easy identification')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300"><strong>Start as Draft:</strong> Create templates in Draft status, test with PDF preview, then activate</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.bestPractices.tips.2', 'Keep contract content concise and readable')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300"><strong>Set Expiration Dates:</strong> Use the expiration feature to ensure contracts are signed promptly</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.bestPractices.tips.3', 'Test templates with sample data before setting to Active')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300"><strong>Create Customers First:</strong> Ensure customers exist in the system before sending contracts</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.bestPractices.tips.4', 'Use version notes to track changes over time')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300"><strong>Archive Old Templates:</strong> Rather than deleting, archive templates you no longer use</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.bestPractices.tips.5', 'Archive old templates instead of deleting to preserve history')}</span>
</li>
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300"><strong>Download PDFs:</strong> Keep copies of signed contracts for your records</span>
<span className="text-gray-700 dark:text-gray-300">{t('help.contracts.bestPractices.tips.6', 'Set appropriate expiration dates for time-sensitive contracts')}</span>
</li>
</ul>
</div>
</section>
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">{t('help.contracts.relatedFeatures.title', 'Related Features')}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Link to="/help/services" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
<FileText size={20} className="text-brand-500" />
<span className="text-gray-900 dark:text-white">Services Guide</span>
<span className="text-gray-900 dark:text-white">{t('help.contracts.relatedFeatures.servicesGuide', 'See the Services Guide for linking contracts to services')}</span>
<ChevronRight size={16} className="text-gray-400 ml-auto" />
</Link>
<Link to="/help/customers" className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors">
<Users size={20} className="text-brand-500" />
<span className="text-gray-900 dark:text-white">Customers Guide</span>
<span className="text-gray-900 dark:text-white">{t('help.contracts.relatedFeatures.customersGuide', 'See the Customers Guide for managing customer contacts')}</span>
<ChevronRight size={16} className="text-gray-400 ml-auto" />
</Link>
</div>
@@ -470,9 +469,9 @@ const HelpContracts: React.FC = () => {
<section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
<HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Need More Help?</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">Our support team is ready to help with any questions about contracts.</p>
<button onClick={() => navigate('/tickets')} className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors">Contact Support</button>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('help.contracts.needHelp.title', 'Need Help?')}</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">{t('help.contracts.needHelp.description', 'If you have questions about using contracts, our support team is here to help.')}</p>
<button onClick={() => navigate('/tickets')} className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors">{t('help.contracts.needHelp.contactSupport', 'Contact Support')}</button>
</section>
</div>
);

94
frontend/src/pages/marketing/FeaturesPage.tsx
View File

@@ -7,7 +7,10 @@ import {
Server,
Database,
Lock,
CheckCircle2
CheckCircle2,
FileSignature,
FileCheck,
Scale
} from 'lucide-react';
import CodeBlock from '../../components/marketing/CodeBlock';
import CTASection from '../../components/marketing/CTASection';
@@ -153,6 +156,95 @@ def execute(context):
</div>
</section>
{/* Feature 3: Digital Contracts */}
<section className="py-20 bg-gray-50 dark:bg-gray-800/50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 text-sm font-medium mb-6">
<Scale className="w-4 h-4" />
<span>{t('marketing.features.contracts.badge')}</span>
</div>
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
{t('marketing.features.contracts.title')}
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
{t('marketing.features.contracts.description')}
</p>
<ul className="space-y-4">
{[
t('marketing.features.contracts.features.templates'),
t('marketing.features.contracts.features.eSignature'),
t('marketing.features.contracts.features.auditTrail'),
t('marketing.features.contracts.features.pdfGeneration')
].map((item) => (
<li key={item} className="flex items-center gap-3">
<CheckCircle2 className="w-5 h-5 text-green-500" />
<span className="text-gray-700 dark:text-gray-300">{item}</span>
</li>
))}
</ul>
</div>
<div className="relative">
<div className="absolute -inset-4 bg-teal-500/20 rounded-3xl blur-2xl" />
<div className="relative rounded-2xl bg-gray-900 border border-gray-800 p-8 overflow-hidden">
<div className="space-y-6">
{/* Contract Preview Mock */}
<div className="p-4 bg-white dark:bg-gray-100 rounded-lg">
<div className="flex items-center gap-3 mb-4">
<FileSignature className="w-8 h-8 text-teal-600" />
<div>
<div className="text-sm font-semibold text-gray-900">Service Agreement</div>
<div className="text-xs text-gray-500">Awaiting signature</div>
</div>
</div>
<div className="h-2 w-full bg-gray-200 rounded mb-2" />
<div className="h-2 w-3/4 bg-gray-200 rounded mb-2" />
<div className="h-2 w-5/6 bg-gray-200 rounded" />
</div>
{/* Compliance Badge */}
<div className="flex items-center justify-between p-4 bg-gray-800 rounded-lg border border-gray-700">
<div className="flex items-center gap-3">
<FileCheck className="w-6 h-6 text-green-400" />
<span className="text-sm text-gray-300">ESIGN Act Compliant</span>
</div>
<CheckCircle2 className="w-5 h-5 text-green-500" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="flex gap-4">
<div className="p-2 bg-teal-900/30 rounded-lg text-teal-400 h-fit">
<Scale className="w-6 h-6" />
</div>
<div>
<h3 className="font-semibold text-white text-sm mb-1">{t('marketing.features.contracts.compliance.title')}</h3>
<p className="text-xs text-gray-400">
{t('marketing.features.contracts.compliance.description')}
</p>
</div>
</div>
<div className="flex gap-4">
<div className="p-2 bg-purple-900/30 rounded-lg text-purple-400 h-fit">
<Zap className="w-6 h-6" />
</div>
<div>
<h3 className="font-semibold text-white text-sm mb-1">{t('marketing.features.contracts.automation.title')}</h3>
<p className="text-xs text-gray-400">
{t('marketing.features.contracts.automation.description')}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<CTASection />
</div>
);

9
frontend/src/pages/marketing/HomePage.tsx
View File

@@ -6,7 +6,8 @@ import {
CreditCard,
BarChart3,
Zap,
Globe
Globe,
FileSignature
} from 'lucide-react';
import Hero from '../../components/marketing/Hero';
import FeatureCard from '../../components/marketing/FeatureCard';
@@ -55,6 +56,12 @@ const HomePage: React.FC = () => {
description: t('marketing.home.features.advancedAnalytics.description'),
color: 'indigo',
},
{
icon: FileSignature,
title: t('marketing.home.features.digitalContracts.title'),
description: t('marketing.home.features.digitalContracts.description'),
color: 'teal',
},
];
const testimonials = [