Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 1x 6x 6x | import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowRight, Play, CheckCircle2 } from 'lucide-react';
const Hero: React.FC = () => {
const { t } = useTranslation();
return (
<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">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
{/* Text Content */}
<div className="text-center lg:text-left">
<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.hero.badge')}
</span>
</div>
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 dark:text-white mb-6">
{t('marketing.hero.title')} <span className="text-brand-600 dark:text-brand-400">{t('marketing.hero.titleHighlight')}</span>
</h1>
<p className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto lg:mx-0">
{t('marketing.hero.description')}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-10">
<Link
to="/signup"
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.startFreeTrial')}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<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="mr-2 h-5 w-5 fill-current" />
{t('marketing.hero.watchDemo')}
</Link>
</div>
<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">
<CheckCircle2 className="h-4 w-4 text-green-500" />
<span>{t('marketing.hero.noCreditCard')}</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle2 className="h-4 w-4 text-green-500" />
<span>{t('marketing.hero.freeTrial')}</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle2 className="h-4 w-4 text-green-500" />
<span>{t('marketing.hero.cancelAnytime')}</span>
</div>
</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">{t('marketing.hero.visualContent.automatedSuccess')}</h3>
<p className="text-gray-400">{t('marketing.hero.visualContent.autopilot')}</p>
<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">{t('marketing.hero.visualContent.revenue')}</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">{t('marketing.hero.visualContent.noShows')}</div>
</div>
</div>
</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">{t('marketing.hero.visualContent.revenueOptimized')}</div>
<div className="text-xs text-gray-500 dark:text-gray-400">{t('marketing.hero.visualContent.thisWeek')}</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Hero;
|