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,165 +1,109 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Play, ArrowRight, CheckCircle } from 'lucide-react';
|
||||
import { ArrowRight, Play, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-brand-100 dark:bg-brand-500/10 rounded-full blur-3xl opacity-50 dark:opacity-30" />
|
||||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-brand-100 dark:bg-brand-500/10 rounded-full blur-3xl opacity-50 dark:opacity-30" />
|
||||
<div className="relative overflow-hidden bg-white dark:bg-gray-900 pt-16 pb-20 lg:pt-24 lg:pb-28">
|
||||
{/* Background Elements */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl pointer-events-none">
|
||||
<div className="absolute top-20 right-0 w-[600px] h-[600px] bg-brand-500/10 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-purple-500/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{/* Left Content */}
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
|
||||
{/* Text Content */}
|
||||
<div className="text-center lg:text-left">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-50 dark:bg-brand-900/30 border border-brand-200 dark:border-brand-800 mb-6">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 dark:bg-brand-900/30 border border-brand-100 dark:border-brand-800 mb-6">
|
||||
<span className="flex h-2 w-2 rounded-full bg-brand-600 dark:bg-brand-400 animate-pulse" />
|
||||
<span className="text-sm font-medium text-brand-700 dark:text-brand-300">
|
||||
{t('marketing.pricing.startToday')}
|
||||
New: Automation Marketplace
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight mb-6">
|
||||
{t('marketing.hero.headline')}
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 dark:text-white mb-6">
|
||||
The Operating System for <span className="text-brand-600 dark:text-brand-400">Service Businesses</span>
|
||||
</h1>
|
||||
|
||||
{/* Subheadline */}
|
||||
<p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-xl mx-auto lg:mx-0">
|
||||
{t('marketing.hero.subheadline')}
|
||||
<p className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto lg:mx-0">
|
||||
Orchestrate your entire operation with intelligent scheduling and powerful automation. No coding required.
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start mb-8">
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-10">
|
||||
<Link
|
||||
to="/signup"
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3.5 text-base font-semibold text-white bg-brand-600 rounded-xl hover:bg-brand-700 shadow-lg shadow-brand-600/25 hover:shadow-brand-600/40 transition-all duration-200"
|
||||
className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-brand-600 hover:bg-brand-700 rounded-lg transition-colors shadow-lg shadow-brand-600/20"
|
||||
>
|
||||
{t('marketing.hero.cta')}
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
Start Free Trial
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {/* TODO: Open demo modal/video */}}
|
||||
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3.5 text-base font-semibold text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
|
||||
<Link
|
||||
to="/features"
|
||||
className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<Play className="h-5 w-5" />
|
||||
{t('marketing.hero.secondaryCta')}
|
||||
</button>
|
||||
<Play className="mr-2 h-5 w-5 fill-current" />
|
||||
Watch Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 text-sm text-gray-500 dark:text-gray-400 justify-center lg:justify-start">
|
||||
<div className="flex flex-wrap gap-x-8 gap-y-4 justify-center lg:justify-start text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-500" />
|
||||
<span>{t('marketing.pricing.noCredit')}</span>
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
<span>No credit card required</span>
|
||||
</div>
|
||||
<div className="hidden sm:block w-1 h-1 bg-gray-300 dark:bg-gray-600 rounded-full" />
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-500" />
|
||||
<span>{t('marketing.pricing.startToday')}</span>
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
<span>14-day free trial</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
<span>Cancel anytime</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Dashboard Preview */}
|
||||
<div className="relative">
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-brand-600/10 border border-gray-200 dark:border-gray-700">
|
||||
{/* Mock Dashboard */}
|
||||
<div className="bg-white dark:bg-gray-800 aspect-[4/3]">
|
||||
{/* Mock Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-400" />
|
||||
</div>
|
||||
<div className="flex-1 text-center">
|
||||
<div className="inline-block px-4 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400">
|
||||
dashboard.smoothschedule.com
|
||||
</div>
|
||||
</div>
|
||||
{/* Visual Content */}
|
||||
<div className="relative lg:ml-auto w-full max-w-lg lg:max-w-none mx-auto">
|
||||
<div className="relative rounded-2xl bg-gray-900 shadow-2xl border border-gray-800 overflow-hidden aspect-[4/3] flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-900">
|
||||
{/* Abstract Representation of Marketplace/Dashboard */}
|
||||
<div className="text-center p-8">
|
||||
<div className="inline-flex p-4 bg-brand-500/20 rounded-2xl mb-6">
|
||||
<CheckCircle2 className="w-16 h-16 text-brand-400" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2">Automated Success</h3>
|
||||
<p className="text-gray-400">Your business, running on autopilot.</p>
|
||||
|
||||
{/* Mock Content */}
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ label: 'Today', value: '12', color: 'brand' },
|
||||
{ label: 'This Week', value: '48', color: 'green' },
|
||||
{ label: 'Revenue', value: '$2.4k', color: 'purple' },
|
||||
].map((stat) => (
|
||||
<div key={stat.label} className="p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mb-1">{stat.label}</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">{stat.value}</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="mt-8 grid grid-cols-2 gap-4">
|
||||
<div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
|
||||
<div className="text-green-400 font-bold">+24%</div>
|
||||
<div className="text-xs text-gray-500">Revenue</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar Mock */}
|
||||
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 p-3">
|
||||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-3">Today's Schedule</div>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ time: '9:00 AM', title: 'Sarah J. - Haircut', color: 'brand' },
|
||||
{ time: '10:30 AM', title: 'Mike T. - Consultation', color: 'green' },
|
||||
{ time: '2:00 PM', title: 'Emma W. - Color', color: 'purple' },
|
||||
].map((apt, i) => (
|
||||
<div key={i} className="flex items-center gap-3 p-2 rounded-lg bg-white dark:bg-gray-800">
|
||||
<div className={`w-1 h-8 rounded-full ${
|
||||
apt.color === 'brand' ? 'bg-brand-500' :
|
||||
apt.color === 'green' ? 'bg-green-500' : 'bg-purple-500'
|
||||
}`} />
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{apt.time}</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">{apt.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
|
||||
<div className="text-blue-400 font-bold">-40%</div>
|
||||
<div className="text-xs text-gray-500">No-Shows</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Elements */}
|
||||
<div className="absolute -bottom-4 -left-4 px-4 py-3 rounded-xl bg-white dark:bg-gray-800 shadow-xl border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
|
||||
<CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-gray-900 dark:text-white">New Booking!</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Just now</div>
|
||||
</div>
|
||||
{/* Floating Badge */}
|
||||
<div className="absolute -bottom-6 -left-6 bg-white dark:bg-gray-800 p-4 rounded-xl shadow-xl border border-gray-100 dark:border-gray-700 flex items-center gap-3 animate-bounce-slow">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 dark:text-green-400">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">Revenue Optimized</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">+$2,400 this week</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trust Badge */}
|
||||
<div className="mt-16 text-center">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||||
{t('marketing.hero.trustedBy')}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-8 opacity-50">
|
||||
{/* Mock company logos - replace with actual logos */}
|
||||
{['TechCorp', 'Innovate', 'StartupX', 'GrowthCo', 'ScaleUp'].map((name) => (
|
||||
<div key={name} className="text-lg font-bold text-gray-400 dark:text-gray-500">
|
||||
{name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user