107 lines
6.5 KiB
TypeScript
107 lines
6.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Book, Sparkles, Feather, Globe, ShieldCheck, Zap, ArrowRight, Star } from 'lucide-react';
|
|
import { useLanguage } from '@/providers/LanguageProvider';
|
|
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
|
|
import Link from 'next/link';
|
|
|
|
interface LandingPageProps {
|
|
onLogin: () => void;
|
|
onPricing: () => void;
|
|
onFeatures: () => void;
|
|
}
|
|
|
|
const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeatures }) => {
|
|
const { t } = useLanguage();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#eef2ff] font-sans selection:bg-blue-200">
|
|
{/* Navbar */}
|
|
<nav className="fixed top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b border-indigo-100 px-4 md:px-8 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-blue-600 p-1.5 rounded-lg">
|
|
<Book className="text-white" size={24} />
|
|
</div>
|
|
<span className="text-xl font-black text-slate-900 tracking-tight">Pluume</span>
|
|
</div>
|
|
<div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
|
|
<button onClick={onFeatures} className="hover:text-blue-600 transition-colors">{t('landing.nav_features')}</button>
|
|
<button onClick={onPricing} className="hover:text-blue-600 transition-colors">{t('landing.nav_pricing')}</button>
|
|
<a href="#" className="hover:text-blue-600 transition-colors">{t('landing.nav_blog')}</a>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<LanguageSwitcher />
|
|
<button onClick={onLogin} className="hidden sm:block text-sm font-bold text-slate-700 hover:text-blue-600 px-4 py-2">{t('landing.login')}</button>
|
|
<button onClick={onLogin} className="bg-slate-900 text-white px-4 sm:px-5 py-2 sm:py-2.5 rounded-full text-xs sm:text-sm font-bold hover:bg-blue-600 transition-all shadow-lg hover:shadow-blue-200">{t('landing.free_trial')}</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<header className="pt-32 pb-20 px-4 md:px-8 max-w-7xl mx-auto text-center">
|
|
<div className="inline-flex items-center gap-2 bg-white border border-indigo-100 px-4 py-2 rounded-full text-xs font-bold text-blue-600 mb-8 shadow-sm">
|
|
<Sparkles size={14} className="animate-pulse" /> {t('landing.new_feature')}
|
|
</div>
|
|
<h1 className="text-4xl md:text-7xl font-black text-slate-900 leading-[1.1] mb-6">
|
|
<span dangerouslySetInnerHTML={{ __html: t('landing.hero_title') }}></span>
|
|
<br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-500">{t('landing.hero_subtitle')}</span>
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
{t('landing.hero_description')}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<button onClick={onLogin} className="w-full sm:w-auto bg-blue-600 text-white px-8 py-4 rounded-full text-lg font-bold hover:bg-blue-700 transition-all shadow-xl shadow-blue-200 flex items-center gap-2 justify-center">
|
|
{t('landing.start_book')} <ArrowRight size={20} />
|
|
</button>
|
|
<button onClick={onFeatures} className="w-full sm:w-auto bg-white text-slate-900 border border-slate-200 px-8 py-4 rounded-full text-lg font-bold hover:bg-slate-50 transition-all">
|
|
{t('landing.see_demo')}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-20 relative">
|
|
<div className="absolute -inset-4 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 blur-3xl -z-10 rounded-full" />
|
|
<div className="bg-white rounded-2xl shadow-2xl border border-indigo-100 p-2 overflow-hidden max-w-5xl mx-auto">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&q=80&w=2000"
|
|
alt="Editor Preview"
|
|
className="rounded-xl object-cover h-64 sm:h-[400px] md:h-[500px] w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Social Proof */}
|
|
<section className="bg-white py-16 md:py-24 px-4 md:px-8 border-y border-indigo-100">
|
|
<div className="max-w-7xl mx-auto text-center">
|
|
<h2 className="text-slate-400 text-sm font-bold uppercase tracking-widest mb-12">{t('landing.used_by')}</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 items-center grayscale opacity-60">
|
|
<span className="text-3xl font-serif font-black italic">FantasyMag</span>
|
|
<span className="text-2xl font-sans font-bold">Writer's Hub</span>
|
|
<span className="text-3xl font-serif">L'Éditeur</span>
|
|
<span className="text-2xl font-sans font-black tracking-tight underline underline-offset-4 decoration-blue-500">Novelty</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-slate-900 text-slate-400 py-12 px-4 md:px-8 text-center">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex items-center justify-center gap-2 text-white mb-6">
|
|
<Book className="text-blue-500" size={24} />
|
|
<span className="text-xl font-bold">Pluume</span>
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-center gap-6 mb-8 text-sm">
|
|
<Link href="/cgu" className="hover:text-blue-400 transition-colors">{t('footer.cgu')}</Link>
|
|
<Link href="/cgv" className="hover:text-blue-400 transition-colors">{t('footer.cgv')}</Link>
|
|
<Link href="/sitemap" className="hover:text-blue-400 transition-colors">{t('footer.sitemap')}</Link>
|
|
</div>
|
|
<p className="text-sm">{t('landing.copyright')}</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|