streaper2/plume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

premiere version responsive sur mobile

Browse Source
This commit is contained in:
streaper2
2026-03-04 15:02:16 +01:00
parent 5101f39ba0
commit a03675ed7f
12 changed files with 78 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/LandingPage.tsx
View File

@@ -18,7 +18,7 @@ const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeature
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-8 h-16 flex items-center justify-between">
<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} />
@@ -32,22 +32,22 @@ const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeature
</div>
<div className="flex items-center gap-4">
<LanguageSwitcher />
<button onClick={onLogin} className="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-5 py-2.5 rounded-full text-sm font-bold hover:bg-blue-600 transition-all shadow-lg hover:shadow-blue-200">{t('landing.free_trial')}</button>
<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-8 max-w-7xl mx-auto text-center">
<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-5xl md:text-7xl font-black text-slate-900 leading-[1.1] mb-6">
<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-xl text-slate-600 max-w-2xl mx-auto mb-10 leading-relaxed">
<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">
@@ -65,17 +65,17 @@ const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeature
<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-[500px] w-full"
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-24 px-8 border-y border-indigo-100">
<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-12 items-center grayscale opacity-60">
<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>
@@ -85,7 +85,7 @@ const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeature
</section>
{/* Footer */}
<footer className="bg-slate-900 text-slate-400 py-12 px-8 text-center">
<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} />