2417bb8313
- Add event-status-changed trigger for SmoothSchedule Activepieces piece - Add comprehensive test coverage for payments, tickets, messaging, mobile - Add test coverage for core services, signals, consumers, and views - Improve Activepieces UI: templates, billing hooks, project hooks - Update marketing automation showcase and workflow visual components - Add public API endpoints for availability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
237 lines
11 KiB
TypeScript
237 lines
11 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
Zap,
|
|
Shield,
|
|
Code,
|
|
Server,
|
|
Database,
|
|
Lock,
|
|
CheckCircle2,
|
|
FileSignature,
|
|
FileCheck,
|
|
Scale,
|
|
Sparkles
|
|
} from 'lucide-react';
|
|
import WorkflowVisual from '../../components/marketing/WorkflowVisual';
|
|
import CTASection from '../../components/marketing/CTASection';
|
|
|
|
const FeaturesPage: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-900 min-h-screen pt-24">
|
|
|
|
{/* Header */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-20">
|
|
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
|
{t('marketing.features.pageTitle')}
|
|
</h1>
|
|
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
|
{t('marketing.features.pageSubtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 1: The Automation Engine */}
|
|
<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-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 text-sm font-medium mb-6">
|
|
<Sparkles className="w-4 h-4" />
|
|
<span>{t('marketing.features.automationEngine.badge')}</span>
|
|
</div>
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
|
{t('marketing.features.automationEngine.title')}
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
|
{t('marketing.features.automationEngine.description')}
|
|
</p>
|
|
|
|
<ul className="space-y-4">
|
|
{[
|
|
t('marketing.features.automationEngine.features.visualBuilder'),
|
|
t('marketing.features.automationEngine.features.aiCopilot'),
|
|
t('marketing.features.automationEngine.features.integrations'),
|
|
t('marketing.features.automationEngine.features.templates')
|
|
].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-purple-500/20 rounded-3xl blur-2xl" />
|
|
<WorkflowVisual variant="noshow" trigger="" actions={[]} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feature 2: Multi-Tenancy */}
|
|
<section className="py-20">
|
|
<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 lg:flex-row-reverse">
|
|
<div className="order-2 lg:order-1">
|
|
<div className="relative rounded-2xl bg-gray-900 border border-gray-800 p-8 overflow-hidden">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 bg-gray-800 rounded-lg border border-gray-700">
|
|
<Database className="w-8 h-8 text-blue-400 mb-3" />
|
|
<div className="text-sm font-mono text-gray-400">tenant_a_vault</div>
|
|
<div className="h-2 w-16 bg-blue-500/20 rounded mt-2" />
|
|
<div className="h-2 w-12 bg-blue-500/20 rounded mt-1" />
|
|
</div>
|
|
<div className="p-4 bg-gray-800 rounded-lg border border-gray-700">
|
|
<Database className="w-8 h-8 text-green-400 mb-3" />
|
|
<div className="text-sm font-mono text-gray-400">tenant_b_vault</div>
|
|
<div className="h-2 w-16 bg-green-500/20 rounded mt-2" />
|
|
<div className="h-2 w-12 bg-green-500/20 rounded mt-1" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-8 flex items-center justify-center gap-4 text-gray-500 text-sm">
|
|
<Lock className="w-4 h-4" />
|
|
<span>{t('marketing.features.multiTenancy.strictDataIsolation')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="order-1 lg:order-2">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm font-medium mb-6">
|
|
<Shield className="w-4 h-4" />
|
|
<span>{t('marketing.features.multiTenancy.badge')}</span>
|
|
</div>
|
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
|
{t('marketing.features.multiTenancy.title')}
|
|
</h2>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
|
{t('marketing.features.multiTenancy.description')}
|
|
</p>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
<div className="flex gap-4">
|
|
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400 h-fit">
|
|
<Server className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">{t('marketing.features.multiTenancy.customDomains.title')}</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{t('marketing.features.multiTenancy.customDomains.description')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 dark:text-green-400 h-fit">
|
|
<Code className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">{t('marketing.features.multiTenancy.whiteLabeling.title')}</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{t('marketing.features.multiTenancy.whiteLabeling.description')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
);
|
|
};
|
|
|
|
export default FeaturesPage;
|