Add missing frontend platform components and update production deployment
This commit adds all previously untracked files and modifications needed for production deployment: - New marketing components (BenefitsSection, CodeBlock, PluginShowcase, PricingTable) - Platform admin components (EditPlatformEntityModal, PlatformListRow, PlatformListing, PlatformTable) - Updated deployment configuration and scripts - Various frontend API and component improvements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -1,170 +1,161 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Calendar,
|
||||
Users,
|
||||
CreditCard,
|
||||
Building2,
|
||||
Palette,
|
||||
BarChart3,
|
||||
Plug,
|
||||
UserCircle,
|
||||
Bell,
|
||||
Zap,
|
||||
Shield,
|
||||
Smartphone,
|
||||
Clock,
|
||||
Code,
|
||||
Server,
|
||||
Database,
|
||||
Lock,
|
||||
CheckCircle2
|
||||
} from 'lucide-react';
|
||||
import FeatureCard from '../../components/marketing/FeatureCard';
|
||||
import CodeBlock from '../../components/marketing/CodeBlock';
|
||||
import CTASection from '../../components/marketing/CTASection';
|
||||
|
||||
const FeaturesPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const featureCategories = [
|
||||
{
|
||||
title: 'Scheduling & Calendar',
|
||||
features: [
|
||||
{
|
||||
icon: Calendar,
|
||||
titleKey: 'marketing.features.scheduling.title',
|
||||
descriptionKey: 'marketing.features.scheduling.description',
|
||||
color: 'brand',
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: 'Real-Time Availability',
|
||||
description: 'Customers see only available time slots. No double bookings, ever.',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
title: 'Automated Reminders',
|
||||
description: 'Reduce no-shows with email and SMS reminders sent automatically.',
|
||||
color: 'purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resource Management',
|
||||
features: [
|
||||
{
|
||||
icon: Users,
|
||||
titleKey: 'marketing.features.resources.title',
|
||||
descriptionKey: 'marketing.features.resources.description',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: 'Staff Mobile App',
|
||||
description: 'Your team can view schedules and manage appointments on the go.',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Role-Based Access',
|
||||
description: 'Control what each team member can see and do with granular permissions.',
|
||||
color: 'cyan',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Customer Experience',
|
||||
features: [
|
||||
{
|
||||
icon: UserCircle,
|
||||
titleKey: 'marketing.features.customers.title',
|
||||
descriptionKey: 'marketing.features.customers.description',
|
||||
color: 'brand',
|
||||
},
|
||||
{
|
||||
icon: CreditCard,
|
||||
titleKey: 'marketing.features.payments.title',
|
||||
descriptionKey: 'marketing.features.payments.description',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
titleKey: 'marketing.features.whiteLabel.title',
|
||||
descriptionKey: 'marketing.features.whiteLabel.description',
|
||||
color: 'purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Business Growth',
|
||||
features: [
|
||||
{
|
||||
icon: Building2,
|
||||
titleKey: 'marketing.features.multiTenant.title',
|
||||
descriptionKey: 'marketing.features.multiTenant.description',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
titleKey: 'marketing.features.analytics.title',
|
||||
descriptionKey: 'marketing.features.analytics.description',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: Plug,
|
||||
titleKey: 'marketing.features.integrations.title',
|
||||
descriptionKey: 'marketing.features.integrations.description',
|
||||
color: 'cyan',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const pluginExample = `# Custom Webhook Plugin
|
||||
import requests
|
||||
|
||||
def execute(context):
|
||||
event = context['event']
|
||||
|
||||
# Send data to external CRM
|
||||
response = requests.post(
|
||||
'https://api.crm.com/leads',
|
||||
json={
|
||||
'name': event.customer.name,
|
||||
'email': event.customer.email,
|
||||
'source': 'SmoothSchedule'
|
||||
}
|
||||
)
|
||||
|
||||
return response.status_code == 200`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header Section */}
|
||||
<section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<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">
|
||||
Built for Developers, Designed for Business
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
SmoothSchedule isn't just cloud software. It's a programmable platform that adapts to your unique business logic.
|
||||
</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="text-center mb-16">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.features.title')}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{t('marketing.features.subtitle')}
|
||||
</p>
|
||||
<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">
|
||||
<Zap className="w-4 h-4" />
|
||||
<span>Automation Engine</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Automated Task Manager
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
Most schedulers only book appointments. SmoothSchedule runs your business.
|
||||
Our "Automated Task Manager" executes internal tasks without blocking your calendar.
|
||||
</p>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
'Run recurring jobs (e.g., "Every Monday at 9am")',
|
||||
'Execute custom logic securely',
|
||||
'Access full customer and event context',
|
||||
'Zero infrastructure management'
|
||||
].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" />
|
||||
<CodeBlock code={pluginExample} filename="webhook_plugin.py" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature Categories */}
|
||||
{featureCategories.map((category, categoryIndex) => (
|
||||
<section
|
||||
key={categoryIndex}
|
||||
className={`py-20 ${
|
||||
categoryIndex % 2 === 0
|
||||
? 'bg-white dark:bg-gray-900'
|
||||
: 'bg-gray-50 dark:bg-gray-800/50'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-10 text-center">
|
||||
{category.title}
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{category.features.map((feature, featureIndex) => (
|
||||
<FeatureCard
|
||||
key={featureIndex}
|
||||
icon={feature.icon}
|
||||
title={feature.titleKey ? t(feature.titleKey) : feature.title || ''}
|
||||
description={
|
||||
feature.descriptionKey
|
||||
? t(feature.descriptionKey)
|
||||
: feature.description || ''
|
||||
}
|
||||
iconColor={feature.color}
|
||||
/>
|
||||
))}
|
||||
{/* 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>Strict Data Isolation</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>Enterprise Security</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
True Data Isolation
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
We don't just filter your data. We use dedicated secure vaults to physically
|
||||
separate your data from others. This provides the security of a private
|
||||
database with the cost-efficiency of cloud software.
|
||||
</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">Custom Domains</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Serve the app on your own domain (e.g., `schedule.yourbrand.com`).
|
||||
</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">White Labeling</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Remove our branding and make the platform your own.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<CTASection />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,21 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Calendar,
|
||||
Users,
|
||||
CreditCard,
|
||||
Building2,
|
||||
Palette,
|
||||
BarChart3,
|
||||
Plug,
|
||||
UserCircle,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
Globe
|
||||
} from 'lucide-react';
|
||||
import Hero from '../../components/marketing/Hero';
|
||||
import FeatureCard from '../../components/marketing/FeatureCard';
|
||||
import HowItWorks from '../../components/marketing/HowItWorks';
|
||||
import StatsSection from '../../components/marketing/StatsSection';
|
||||
import PluginShowcase from '../../components/marketing/PluginShowcase';
|
||||
import BenefitsSection from '../../components/marketing/BenefitsSection';
|
||||
import TestimonialCard from '../../components/marketing/TestimonialCard';
|
||||
import CTASection from '../../components/marketing/CTASection';
|
||||
|
||||
@@ -25,142 +21,115 @@ const HomePage: React.FC = () => {
|
||||
const features = [
|
||||
{
|
||||
icon: Calendar,
|
||||
titleKey: 'marketing.features.scheduling.title',
|
||||
descriptionKey: 'marketing.features.scheduling.description',
|
||||
title: 'Intelligent Scheduling',
|
||||
description: 'Handle complex resources like staff, rooms, and equipment with concurrency limits.',
|
||||
color: 'brand',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
titleKey: 'marketing.features.resources.title',
|
||||
descriptionKey: 'marketing.features.resources.description',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: UserCircle,
|
||||
titleKey: 'marketing.features.customers.title',
|
||||
descriptionKey: 'marketing.features.customers.description',
|
||||
icon: Zap,
|
||||
title: 'Automation Engine',
|
||||
description: 'Install plugins from our marketplace or build your own to automate tasks.',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: 'Multi-Tenant Architecture',
|
||||
description: 'Dedicated secure vaults for enterprise-grade security and white-labeling.',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: CreditCard,
|
||||
titleKey: 'marketing.features.payments.title',
|
||||
descriptionKey: 'marketing.features.payments.description',
|
||||
title: 'Integrated Payments',
|
||||
description: 'Seamlessly accept payments with Stripe integration and automated invoicing.',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
titleKey: 'marketing.features.multiTenant.title',
|
||||
descriptionKey: 'marketing.features.multiTenant.description',
|
||||
icon: Users,
|
||||
title: 'Customer Management',
|
||||
description: 'CRM features to track history, preferences, and engagement.',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
titleKey: 'marketing.features.whiteLabel.title',
|
||||
descriptionKey: 'marketing.features.whiteLabel.description',
|
||||
color: 'cyan',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
titleKey: 'marketing.features.analytics.title',
|
||||
descriptionKey: 'marketing.features.analytics.description',
|
||||
title: 'Advanced Analytics',
|
||||
description: 'Deep insights into revenue, utilization, and staff performance.',
|
||||
color: 'indigo',
|
||||
},
|
||||
{
|
||||
icon: Plug,
|
||||
titleKey: 'marketing.features.integrations.title',
|
||||
descriptionKey: 'marketing.features.integrations.description',
|
||||
color: 'teal',
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "SmoothSchedule transformed how we manage appointments. Our no-show rate dropped by 40% with automated reminders.",
|
||||
author: "Sarah Johnson",
|
||||
quote: "I installed the 'Client Win-Back' plugin and recovered $2k in bookings the first week. No setup required.",
|
||||
author: "Alex Rivera",
|
||||
role: "Owner",
|
||||
company: "Luxe Salon",
|
||||
company: "TechSalon",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
quote: "The white-label feature is perfect for our multi-location business. Each location has its own branded booking experience.",
|
||||
author: "Michael Chen",
|
||||
role: "CEO",
|
||||
company: "FitLife Studios",
|
||||
quote: "Finally, a scheduler that understands 'rooms' and 'equipment' are different from 'staff'. Perfect for our medical spa.",
|
||||
author: "Dr. Sarah Chen",
|
||||
role: "Owner",
|
||||
company: "Lumina MedSpa",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
quote: "Setup was incredibly easy. We were up and running in under an hour, and our clients love the self-service booking.",
|
||||
author: "Emily Rodriguez",
|
||||
role: "Manager",
|
||||
company: "Peak Performance Therapy",
|
||||
quote: "We white-labeled SmoothSchedule for our franchise. The multi-tenant architecture made it effortless.",
|
||||
author: "Marcus Johnson",
|
||||
role: "Director of Ops",
|
||||
company: "FitNation",
|
||||
rating: 5,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Hero Section */}
|
||||
{/* Hero Section - Updated Copy */}
|
||||
<Hero />
|
||||
|
||||
{/* Features Section */}
|
||||
{/* Feature Grid */}
|
||||
<section className="py-20 lg:py-28 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.features.title')}
|
||||
The Operating System for Service Businesses
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{t('marketing.features.subtitle')}
|
||||
More than just a calendar. A complete platform engineered for growth, automation, and scale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{features.map((feature) => (
|
||||
<FeatureCard
|
||||
key={feature.titleKey}
|
||||
key={feature.title}
|
||||
icon={feature.icon}
|
||||
title={t(feature.titleKey)}
|
||||
description={t(feature.descriptionKey)}
|
||||
title={feature.title}
|
||||
description={feature.description}
|
||||
iconColor={feature.color}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* View All Features Link */}
|
||||
<div className="text-center mt-12">
|
||||
<Link
|
||||
to="/features"
|
||||
className="inline-flex items-center gap-2 text-brand-600 dark:text-brand-400 font-medium hover:text-brand-700 dark:hover:text-brand-300 transition-colors"
|
||||
>
|
||||
{t('common.viewAll')} {t('marketing.nav.features').toLowerCase()}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<HowItWorks />
|
||||
{/* Plugin Showcase - NEW */}
|
||||
<PluginShowcase />
|
||||
|
||||
{/* Stats Section */}
|
||||
<StatsSection />
|
||||
{/* Benefits Section (Replaces Stats) */}
|
||||
<BenefitsSection />
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-20 lg:py-28 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.testimonials.title')}
|
||||
Trusted by Modern Businesses
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
{t('marketing.testimonials.subtitle')}
|
||||
See why forward-thinking companies choose SmoothSchedule.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<TestimonialCard key={index} {...testimonial} />
|
||||
@@ -169,98 +138,6 @@ const HomePage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Preview Section */}
|
||||
<section className="py-20 lg:py-28 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.pricing.title')}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
{t('marketing.pricing.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pricing Cards Preview */}
|
||||
<div className="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">
|
||||
{/* Free */}
|
||||
<div className="p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('marketing.pricing.tiers.free.name')}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
{t('marketing.pricing.tiers.free.description')}
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900 dark:text-white">$0</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">{t('marketing.pricing.perMonth')}</span>
|
||||
</div>
|
||||
<Link
|
||||
to="/signup"
|
||||
className="block w-full py-3 px-4 text-center text-sm font-medium text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
|
||||
>
|
||||
{t('marketing.pricing.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Professional - Highlighted */}
|
||||
<div className="relative p-6 bg-brand-600 rounded-2xl shadow-xl shadow-brand-600/20">
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-brand-500 text-white text-xs font-semibold rounded-full">
|
||||
{t('marketing.pricing.mostPopular')}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
{t('marketing.pricing.tiers.professional.name')}
|
||||
</h3>
|
||||
<p className="text-sm text-brand-100 mb-4">
|
||||
{t('marketing.pricing.tiers.professional.description')}
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-white">$29</span>
|
||||
<span className="text-brand-200">{t('marketing.pricing.perMonth')}</span>
|
||||
</div>
|
||||
<Link
|
||||
to="/signup"
|
||||
className="block w-full py-3 px-4 text-center text-sm font-medium text-brand-600 bg-white rounded-lg hover:bg-brand-50 transition-colors"
|
||||
>
|
||||
{t('marketing.pricing.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Business */}
|
||||
<div className="p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('marketing.pricing.tiers.business.name')}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
{t('marketing.pricing.tiers.business.description')}
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900 dark:text-white">$79</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">{t('marketing.pricing.perMonth')}</span>
|
||||
</div>
|
||||
<Link
|
||||
to="/signup"
|
||||
className="block w-full py-3 px-4 text-center text-sm font-medium text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
|
||||
>
|
||||
{t('marketing.pricing.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View Full Pricing Link */}
|
||||
<div className="text-center mt-10">
|
||||
<Link
|
||||
to="/pricing"
|
||||
className="inline-flex items-center gap-2 text-brand-600 dark:text-brand-400 font-medium hover:text-brand-700 dark:hover:text-brand-300 transition-colors"
|
||||
>
|
||||
View full pricing details
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<CTASection />
|
||||
</div>
|
||||
|
||||
@@ -1,122 +1,56 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import PricingCard from '../../components/marketing/PricingCard';
|
||||
import PricingTable from '../../components/marketing/PricingTable';
|
||||
import FAQAccordion from '../../components/marketing/FAQAccordion';
|
||||
import CTASection from '../../components/marketing/CTASection';
|
||||
|
||||
const PricingPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annual'>('monthly');
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: t('marketing.faq.questions.freePlan.question'),
|
||||
answer: t('marketing.faq.questions.freePlan.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.cancel.question'),
|
||||
answer: t('marketing.faq.questions.cancel.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.payment.question'),
|
||||
answer: t('marketing.faq.questions.payment.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.migrate.question'),
|
||||
answer: t('marketing.faq.questions.migrate.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.support.question'),
|
||||
answer: t('marketing.faq.questions.support.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.customDomain.question'),
|
||||
answer: t('marketing.faq.questions.customDomain.answer'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header Section */}
|
||||
<section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.pricing.title')}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{t('marketing.pricing.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-900 min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="pt-24 pb-12 text-center px-4 sm:px-6 lg:px-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Simple, Transparent Pricing
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Start for free, upgrade as you grow. No hidden fees.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Billing Toggle */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 mb-12">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`text-sm font-medium whitespace-nowrap transition-colors ${
|
||||
billingPeriod === 'monthly'
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{t('marketing.pricing.monthly')}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setBillingPeriod(billingPeriod === 'monthly' ? 'annual' : 'monthly')}
|
||||
className="relative flex-shrink-0 w-12 h-6 bg-brand-600 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
||||
aria-label="Toggle billing period"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200 ${
|
||||
billingPeriod === 'annual' ? 'translate-x-6' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
className={`text-sm font-medium whitespace-nowrap transition-colors ${
|
||||
billingPeriod === 'annual'
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{t('marketing.pricing.annual')}
|
||||
</span>
|
||||
</div>
|
||||
{billingPeriod === 'annual' && (
|
||||
<span className="px-2 py-1 text-xs font-semibold text-brand-700 bg-brand-100 dark:bg-brand-900/30 dark:text-brand-300 rounded-full whitespace-nowrap">
|
||||
{t('marketing.pricing.annualSave')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
|
||||
<PricingCard tier="free" billingPeriod={billingPeriod} />
|
||||
<PricingCard tier="professional" billingPeriod={billingPeriod} highlighted />
|
||||
<PricingCard tier="business" billingPeriod={billingPeriod} />
|
||||
<PricingCard tier="enterprise" billingPeriod={billingPeriod} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Pricing Table */}
|
||||
<div className="pb-20">
|
||||
<PricingTable />
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-20 lg:py-28 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.faq.title')}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
{t('marketing.faq.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
|
||||
<h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<FAQAccordion items={[
|
||||
{
|
||||
question: "Do I need to know Python to use SmoothSchedule?",
|
||||
answer: "Not at all! You can use our pre-built plugins from the marketplace for common tasks like email reminders and reports. Python is only needed if you want to write custom scripts."
|
||||
},
|
||||
{
|
||||
question: "What happens if I exceed my plan's limits?",
|
||||
answer: "We'll notify you when you're close to your limit. If you exceed it, we'll give you a grace period to upgrade. We won't cut off your service immediately."
|
||||
},
|
||||
{
|
||||
question: "Can I use my own domain name?",
|
||||
answer: "Yes! On the Pro and Business plans, you can connect your own custom domain (e.g., booking.yourcompany.com) for a fully branded experience."
|
||||
},
|
||||
{
|
||||
question: "Is my data safe?",
|
||||
answer: "Absolutely. We use dedicated secure vaults (Postgres schemas) to physically isolate your data from other customers. It's the gold standard for multi-tenant security."
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
|
||||
<FAQAccordion items={faqItems} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<CTASection variant="minimal" />
|
||||
{/* CTA */}
|
||||
<CTASection />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -317,7 +317,7 @@ const SignupPage: React.FC = () => {
|
||||
{t('marketing.signup.success.yourUrl')}
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-brand-600 dark:text-brand-400">
|
||||
{formData.subdomain}.smoothschedule.com
|
||||
{formData.subdomain}.{getBaseDomain()}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||||
@@ -357,13 +357,12 @@ const SignupPage: React.FC = () => {
|
||||
<React.Fragment key={step.number}>
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
|
||||
currentStep > step.number
|
||||
className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${currentStep > step.number
|
||||
? 'bg-green-500 text-white'
|
||||
: currentStep === step.number
|
||||
? 'bg-brand-600 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-400'
|
||||
}`}
|
||||
? 'bg-brand-600 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{currentStep > step.number ? (
|
||||
<Check className="w-6 h-6" />
|
||||
@@ -372,22 +371,20 @@ const SignupPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`mt-2 text-xs font-medium hidden sm:block ${
|
||||
currentStep >= step.number
|
||||
className={`mt-2 text-xs font-medium hidden sm:block ${currentStep >= step.number
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-400'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{step.title}
|
||||
</span>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div
|
||||
className={`flex-1 h-1 mx-2 rounded ${
|
||||
currentStep > step.number
|
||||
className={`flex-1 h-1 mx-2 rounded ${currentStep > step.number
|
||||
? 'bg-green-500'
|
||||
: 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
@@ -419,11 +416,10 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleInputChange}
|
||||
autoComplete="organization"
|
||||
placeholder={t('marketing.signup.businessInfo.namePlaceholder')}
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.businessName
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.businessName
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.businessName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.businessName}</p>
|
||||
@@ -446,13 +442,12 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleSubdomainChange}
|
||||
autoComplete="off"
|
||||
placeholder="your-business"
|
||||
className={`flex-1 px-4 py-3 rounded-l-xl border-y border-l ${
|
||||
errors.subdomain
|
||||
className={`flex-1 px-4 py-3 rounded-l-xl border-y border-l ${errors.subdomain
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: subdomainAvailable === true
|
||||
? 'border-green-500 focus:ring-green-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
? 'border-green-500 focus:ring-green-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
<span className="px-4 py-3 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-r-xl text-gray-500 dark:text-gray-400 text-sm">
|
||||
.smoothschedule.com
|
||||
@@ -508,11 +503,10 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleInputChange}
|
||||
autoComplete="address-line1"
|
||||
placeholder={t('marketing.signup.businessInfo.addressLine1Placeholder')}
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.addressLine1
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.addressLine1
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.addressLine1 && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.addressLine1}</p>
|
||||
@@ -553,11 +547,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.city}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="address-level2"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.city
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.city
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.city && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.city}</p>
|
||||
@@ -578,11 +571,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.state}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="address-level1"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.state
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.state
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.state && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.state}</p>
|
||||
@@ -605,11 +597,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.postalCode}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="postal-code"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.postalCode
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.postalCode
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.postalCode && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.postalCode}</p>
|
||||
@@ -663,11 +654,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="given-name"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.firstName
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.firstName
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.firstName}</p>
|
||||
@@ -688,11 +678,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="family-name"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.lastName
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.lastName
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.lastName}</p>
|
||||
@@ -715,11 +704,10 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleInputChange}
|
||||
autoComplete="email"
|
||||
placeholder="you@example.com"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.email
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.email
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.email}</p>
|
||||
@@ -740,11 +728,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="new-password"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.password
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.password
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.password}</p>
|
||||
@@ -765,11 +752,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="new-password"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.confirmPassword
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.confirmPassword
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.confirmPassword}</p>
|
||||
@@ -791,11 +777,10 @@ const SignupPage: React.FC = () => {
|
||||
key={plan.id}
|
||||
type="button"
|
||||
onClick={() => setFormData((prev) => ({ ...prev, plan: plan.id }))}
|
||||
className={`relative text-left p-4 rounded-xl border-2 transition-all ${
|
||||
formData.plan === plan.id
|
||||
className={`relative text-left p-4 rounded-xl border-2 transition-all ${formData.plan === plan.id
|
||||
? 'border-brand-600 bg-brand-50 dark:bg-gray-800 dark:border-brand-500'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{plan.popular && (
|
||||
<span className="absolute -top-3 left-4 px-2 py-0.5 text-xs font-semibold text-white bg-brand-600 rounded-full">
|
||||
@@ -817,11 +802,10 @@ const SignupPage: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
|
||||
formData.plan === plan.id
|
||||
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${formData.plan === plan.id
|
||||
? 'border-brand-600 bg-brand-600'
|
||||
: 'border-gray-300 dark:border-gray-600'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{formData.plan === plan.id && (
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
|
||||
Reference in New Issue
Block a user