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

BIN
.next/dev/cache/turbopack/23c46498/CURRENT vendored
View File

Binary file not shown.

12
.next/dev/cache/turbopack/23c46498/LOG vendored
View File

@@ -2108,3 +2108,15 @@ FAM | META SEQ | SST SEQ | RANGE
0 | 00003327 | 00003326 SST | [=======================================================================] | 3aefa6fd5cf2deb4-f42f94001fcb5351 (0 MiB, fresh) 0 | 00003327 | 00003326 SST | [=======================================================================] | 3aefa6fd5cf2deb4-f42f94001fcb5351 (0 MiB, fresh)
1 | 00003328 | 00003324 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh) 1 | 00003328 | 00003324 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh)
2 | 00003329 | 00003325 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh) 2 | 00003329 | 00003325 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh)
Time 2026-03-04T14:02:11.6694894Z
Commit 00011431 4 keys in 8ms 335µs 200ns
FAM | META SEQ | SST SEQ | RANGE
0 | 00011429 | 00011428 SST | [=======================================================================] | 3aefa6fd5cf2deb4-f42f94001fcb5351 (0 MiB, fresh)
1 | 00011430 | 00011426 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh)
2 | 00011431 | 00011427 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh)
Time 2026-03-04T14:02:14.7644028Z
Commit 00011437 4 keys in 16ms 501µs 800ns
FAM | META SEQ | SST SEQ | RANGE
0 | 00011435 | 00011434 SST | [=======================================================================] | 3aefa6fd5cf2deb4-f42f94001fcb5351 (0 MiB, fresh)
1 | 00011436 | 00011432 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh)
2 | 00011437 | 00011433 SST | O | 3ffdfb3b7d50fcf1-3ffdfb3b7d50fcf1 (0 MiB, fresh)

6
src/app/cgu/page.tsx
View File

@@ -11,7 +11,7 @@ export default function CGUPage() {
return ( return (
<div className="min-h-screen bg-[#eef2ff] font-sans selection:bg-blue-200"> <div className="min-h-screen bg-[#eef2ff] font-sans selection:bg-blue-200">
<nav className="bg-white/80 backdrop-blur-md z-50 border-b border-indigo-100 px-8 h-16 flex items-center justify-between sticky top-0"> <nav className="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 sticky top-0">
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity"> <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
<div className="bg-blue-600 p-1.5 rounded-lg"> <div className="bg-blue-600 p-1.5 rounded-lg">
<Book className="text-white" size={24} /> <Book className="text-white" size={24} />
@@ -26,9 +26,9 @@ export default function CGUPage() {
</div> </div>
</nav> </nav>
<main className="max-w-4xl mx-auto py-20 px-8"> <main className="max-w-4xl mx-auto py-20 px-4 md:px-8">
<h1 className="text-4xl md:text-5xl font-black text-slate-900 mb-8 tracking-tight">{t('legal.cgu_title')}</h1> <h1 className="text-4xl md:text-5xl font-black text-slate-900 mb-8 tracking-tight">{t('legal.cgu_title')}</h1>
<div className="bg-white p-8 sm:p-12 rounded-3xl shadow-xl border border-indigo-50 text-slate-600 leading-relaxed space-y-6"> <div className="bg-white p-6 sm:p-12 rounded-3xl shadow-xl border border-indigo-50 text-slate-600 leading-relaxed space-y-6">
<p>{t('legal.cgu_content')}</p> <p>{t('legal.cgu_content')}</p>
<p><i>(Ceci est un document type en attente de la version finale par un conseiller juridique)</i></p> <p><i>(Ceci est un document type en attente de la version finale par un conseiller juridique)</i></p>
</div> </div>

6
src/app/cgv/page.tsx
View File

@@ -11,7 +11,7 @@ export default function CGVPage() {
return ( return (
<div className="min-h-screen bg-[#eef2ff] font-sans selection:bg-blue-200"> <div className="min-h-screen bg-[#eef2ff] font-sans selection:bg-blue-200">
<nav className="bg-white/80 backdrop-blur-md z-50 border-b border-indigo-100 px-8 h-16 flex items-center justify-between sticky top-0"> <nav className="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 sticky top-0">
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity"> <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
<div className="bg-blue-600 p-1.5 rounded-lg"> <div className="bg-blue-600 p-1.5 rounded-lg">
<Book className="text-white" size={24} /> <Book className="text-white" size={24} />
@@ -26,9 +26,9 @@ export default function CGVPage() {
</div> </div>
</nav> </nav>
<main className="max-w-4xl mx-auto py-20 px-8"> <main className="max-w-4xl mx-auto py-20 px-4 md:px-8">
<h1 className="text-4xl md:text-5xl font-black text-slate-900 mb-8 tracking-tight">{t('legal.cgv_title')}</h1> <h1 className="text-4xl md:text-5xl font-black text-slate-900 mb-8 tracking-tight">{t('legal.cgv_title')}</h1>
<div className="bg-white p-8 sm:p-12 rounded-3xl shadow-xl border border-indigo-50 text-slate-600 leading-relaxed space-y-6"> <div className="bg-white p-6 sm:p-12 rounded-3xl shadow-xl border border-indigo-50 text-slate-600 leading-relaxed space-y-6">
<p>{t('legal.cgv_content')}</p> <p>{t('legal.cgv_content')}</p>
<p><i>(Ceci est un document type en attente de la version finale par un conseiller juridique)</i></p> <p><i>(Ceci est un document type en attente de la version finale par un conseiller juridique)</i></p>
</div> </div>

2
src/components/AuthPage.tsx
View File

@@ -89,7 +89,7 @@ const AuthPage: React.FC<AuthPageProps> = ({ onBack, onSuccess, initialMode = 's
</div> </div>
{/* Formulaire */} {/* Formulaire */}
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 bg-white overflow-y-auto"> <div className="w-full lg:w-1/2 flex items-center justify-center p-6 md:p-8 bg-white overflow-y-auto">
<div className="w-full max-w-md animate-in fade-in slide-in-from-right-10 duration-500 py-8"> <div className="w-full max-w-md animate-in fade-in slide-in-from-right-10 duration-500 py-8">
<div className="text-center mb-10"> <div className="text-center mb-10">
<h1 className="text-3xl font-black text-slate-900 mb-2"> <h1 className="text-3xl font-black text-slate-900 mb-2">

16
src/components/Dashboard.tsx
View File

@@ -21,11 +21,11 @@ const Dashboard: React.FC<DashboardProps> = ({ user, projects, onSelect, onCreat
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<div className="min-h-screen bg-theme-bg p-8 font-sans transition-colors duration-300"> <div className="min-h-screen bg-theme-bg p-4 md:p-8 font-sans transition-colors duration-300">
<div className="max-w-6xl mx-auto space-y-8"> <div className="max-w-6xl mx-auto space-y-8">
{/* User Card */} {/* User Card */}
<div className="flex flex-col md:flex-row justify-between items-center bg-theme-panel p-8 rounded-[2rem] shadow-sm border border-theme-border gap-6"> <div className="flex flex-col md:flex-row justify-between items-center bg-theme-panel p-6 md:p-8 rounded-[2rem] shadow-sm border border-theme-border gap-6">
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<div className="relative"> <div className="relative">
<img src={user.avatar} className="w-20 h-20 rounded-full border-4 border-slate-50 shadow-lg object-cover" alt="Avatar" /> <img src={user.avatar} className="w-20 h-20 rounded-full border-4 border-slate-50 shadow-lg object-cover" alt="Avatar" />
@@ -41,7 +41,7 @@ const Dashboard: React.FC<DashboardProps> = ({ user, projects, onSelect, onCreat
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<LanguageSwitcher /> <LanguageSwitcher />
<button onClick={onProfile} className="bg-theme-bg text-theme-text px-5 py-2.5 rounded-xl text-sm font-bold hover:opacity-80 transition-all flex items-center gap-2 border border-theme-border"> <button onClick={onProfile} className="bg-theme-bg text-theme-text px-4 md:px-5 py-2 md:py-2.5 rounded-xl text-xs md:text-sm font-bold hover:opacity-80 transition-all flex items-center gap-2 border border-theme-border">
<User size={18} /> {t('dashboard.my_profile')} <User size={18} /> {t('dashboard.my_profile')}
</button> </button>
<button onClick={onLogout} title={t('sidebar.logout')} className="p-3 text-theme-muted hover:text-red-500 rounded-full hover:bg-red-500/10 transition-colors"><LogOut size={20} /></button> <button onClick={onLogout} title={t('sidebar.logout')} className="p-3 text-theme-muted hover:text-red-500 rounded-full hover:bg-red-500/10 transition-colors"><LogOut size={20} /></button>
@@ -50,21 +50,21 @@ const Dashboard: React.FC<DashboardProps> = ({ user, projects, onSelect, onCreat
{/* Stats Section */} {/* Stats Section */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-theme-panel p-6 rounded-3xl shadow-sm border border-theme-border flex items-center gap-4"> <div className="bg-theme-panel p-4 sm:p-6 rounded-3xl shadow-sm border border-theme-border flex items-center gap-4">
<div className="bg-orange-100 p-3 rounded-2xl text-orange-600"><Flame size={24} /></div> <div className="bg-orange-100 p-3 rounded-2xl text-orange-600"><Flame size={24} /></div>
<div> <div>
<p className="text-xs font-bold text-theme-muted uppercase tracking-wider">{t('dashboard.streak')}</p> <p className="text-xs font-bold text-theme-muted uppercase tracking-wider">{t('dashboard.streak')}</p>
<p className="text-2xl font-black text-theme-text">{user.stats.writingStreak} {t('dashboard.days')}</p> <p className="text-2xl font-black text-theme-text">{user.stats.writingStreak} {t('dashboard.days')}</p>
</div> </div>
</div> </div>
<div className="bg-theme-panel p-6 rounded-3xl shadow-sm border border-theme-border flex items-center gap-4"> <div className="bg-theme-panel p-4 sm:p-6 rounded-3xl shadow-sm border border-theme-border flex items-center gap-4">
<div className="bg-blue-100 p-3 rounded-2xl text-blue-600"><Edit3 size={24} /></div> <div className="bg-blue-100 p-3 rounded-2xl text-blue-600"><Edit3 size={24} /></div>
<div> <div>
<p className="text-xs font-bold text-theme-muted uppercase tracking-wider">{t('dashboard.words_written')}</p> <p className="text-xs font-bold text-theme-muted uppercase tracking-wider">{t('dashboard.words_written')}</p>
<p className="text-2xl font-black text-theme-text">{user.stats.totalWordsWritten.toLocaleString()}</p> <p className="text-2xl font-black text-theme-text">{user.stats.totalWordsWritten.toLocaleString()}</p>
</div> </div>
</div> </div>
<div className="bg-theme-panel p-6 rounded-3xl shadow-sm border border-theme-border flex items-center gap-4"> <div className="bg-theme-panel p-4 sm:p-6 rounded-3xl shadow-sm border border-theme-border flex items-center gap-4">
<div className="bg-indigo-100 p-3 rounded-2xl text-indigo-600"><Target size={24} /></div> <div className="bg-indigo-100 p-3 rounded-2xl text-indigo-600"><Target size={24} /></div>
<div> <div>
<p className="text-xs font-bold text-theme-muted uppercase tracking-wider">{t('dashboard.daily_goal')}</p> <p className="text-xs font-bold text-theme-muted uppercase tracking-wider">{t('dashboard.daily_goal')}</p>
@@ -91,7 +91,7 @@ const Dashboard: React.FC<DashboardProps> = ({ user, projects, onSelect, onCreat
<div <div
key={p.id} key={p.id}
onClick={() => onSelect(p.id)} onClick={() => onSelect(p.id)}
className="bg-theme-panel p-8 rounded-[2.5rem] border border-theme-border shadow-sm hover:shadow-2xl hover:scale-[1.02] transition-all cursor-pointer group flex flex-col justify-between h-64" className="bg-theme-panel p-6 md:p-8 rounded-[2.5rem] border border-theme-border shadow-sm hover:shadow-2xl hover:scale-[1.02] transition-all cursor-pointer group flex flex-col justify-between h-64"
> >
<div> <div>
<div className="bg-blue-500/10 w-12 h-12 rounded-2xl flex items-center justify-center text-blue-500 mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors"> <div className="bg-blue-500/10 w-12 h-12 rounded-2xl flex items-center justify-center text-blue-500 mb-6 group-hover:bg-blue-600 group-hover:text-white transition-colors">
@@ -118,7 +118,7 @@ const Dashboard: React.FC<DashboardProps> = ({ user, projects, onSelect, onCreat
{/* Sidebar Stats & Plan */} {/* Sidebar Stats & Plan */}
<div className="space-y-6"> <div className="space-y-6">
<div className="bg-slate-900 text-white p-8 rounded-[2.5rem] shadow-xl relative overflow-hidden"> <div className="bg-slate-900 text-white p-6 md:p-8 rounded-[2.5rem] shadow-xl relative overflow-hidden">
<div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/20 blur-[60px] -z-1" /> <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/20 blur-[60px] -z-1" />
<h3 className="font-black text-xl mb-6 flex items-center gap-2"><Star size={20} className="text-yellow-400" /> {t('dashboard.usage')}</h3> <h3 className="font-black text-xl mb-6 flex items-center gap-2"><Star size={20} className="text-yellow-400" /> {t('dashboard.usage')}</h3>
<div className="space-y-8"> <div className="space-y-8">

10
src/components/FeaturesPage.tsx
View File

@@ -26,7 +26,7 @@ const FeaturesPage: React.FC<FeaturesPageProps> = ({ onBack }) => {
return ( return (
<div className="min-h-screen bg-[#eef2ff] font-sans"> <div className="min-h-screen bg-[#eef2ff] font-sans">
{/* Header */} {/* Header */}
<div className="bg-slate-900 text-white pt-20 pb-32 px-8 relative overflow-hidden"> <div className="bg-slate-900 text-white pt-20 pb-32 px-4 md:px-8 relative overflow-hidden">
<div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/20 blur-[100px] rounded-full" /> <div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/20 blur-[100px] rounded-full" />
<div className="max-w-7xl mx-auto relative z-10"> <div className="max-w-7xl mx-auto relative z-10">
<div className="flex justify-between items-center mb-12"> <div className="flex justify-between items-center mb-12">
@@ -35,15 +35,15 @@ const FeaturesPage: React.FC<FeaturesPageProps> = ({ onBack }) => {
</button> </button>
<LanguageSwitcher /> <LanguageSwitcher />
</div> </div>
<h1 className="text-5xl font-black text-white mb-4 text-center">{t('features.title')}</h1> <h1 className="text-4xl md:text-5xl font-black text-white mb-4 text-center">{t('features.title')}</h1>
<p className="text-slate-300 text-xl text-center max-w-3xl mx-auto"> <p className="text-slate-300 text-lg md:text-xl text-center max-w-3xl mx-auto">
{t('features.subtitle')} {t('features.subtitle')}
</p> </p>
</div> </div>
</div> </div>
{/* Features Grid */} {/* Features Grid */}
<div className="max-w-7xl mx-auto px-8 -mt-20 relative z-20"> <div className="max-w-7xl mx-auto px-4 md:px-8 -mt-20 relative z-20">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((f, i) => ( {features.map((f, i) => (
<div key={i} className="bg-white p-8 rounded-3xl shadow-xl border border-indigo-50 hover:scale-105 transition-transform"> <div key={i} className="bg-white p-8 rounded-3xl shadow-xl border border-indigo-50 hover:scale-105 transition-transform">
@@ -57,7 +57,7 @@ const FeaturesPage: React.FC<FeaturesPageProps> = ({ onBack }) => {
</div> </div>
</div> </div>
{/* Footer */} {/* Footer */}
<footer className="bg-slate-900 text-slate-400 py-12 px-8 mt-20 text-center relative z-20"> <footer className="bg-slate-900 text-slate-400 py-12 px-4 md:px-8 mt-20 text-center relative z-20">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="flex flex-wrap items-center justify-center gap-6 mb-8 text-sm"> <div className="flex flex-wrap items-center justify-center gap-6 mb-8 text-sm">
<Link href="/cgu" className="hover:text-white transition-colors">{t('footer.cgu')}</Link> <Link href="/cgu" className="hover:text-white transition-colors">{t('footer.cgu')}</Link>

20
src/components/LandingPage.tsx
View File

@@ -18,7 +18,7 @@ const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeature
return ( return (
<div className="min-h-screen bg-[#eef2ff] font-sans selection:bg-blue-200"> <div className="min-h-screen bg-[#eef2ff] font-sans selection:bg-blue-200">
{/* Navbar */} {/* 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="flex items-center gap-2">
<div className="bg-blue-600 p-1.5 rounded-lg"> <div className="bg-blue-600 p-1.5 rounded-lg">
<Book className="text-white" size={24} /> <Book className="text-white" size={24} />
@@ -32,22 +32,22 @@ const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeature
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<LanguageSwitcher /> <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="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-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="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> </div>
</nav> </nav>
{/* Hero Section */} {/* 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"> <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')} <Sparkles size={14} className="animate-pulse" /> {t('landing.new_feature')}
</div> </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> <span dangerouslySetInnerHTML={{ __html: t('landing.hero_title') }}></span>
<br /> <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-500">{t('landing.hero_subtitle')}</span> <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-500">{t('landing.hero_subtitle')}</span>
</h1> </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')} {t('landing.hero_description')}
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <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 <img
src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&q=80&w=2000" src="https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&q=80&w=2000"
alt="Editor Preview" 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>
</div> </div>
</header> </header>
{/* Social Proof */} {/* 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"> <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> <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-3xl font-serif font-black italic">FantasyMag</span>
<span className="text-2xl font-sans font-bold">Writer's Hub</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-3xl font-serif">L'Éditeur</span>
@@ -85,7 +85,7 @@ const LandingPage: React.FC<LandingPageProps> = ({ onLogin, onPricing, onFeature
</section> </section>
{/* Footer */} {/* 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="max-w-7xl mx-auto">
<div className="flex items-center justify-center gap-2 text-white mb-6"> <div className="flex items-center justify-center gap-2 text-white mb-6">
<Book className="text-blue-500" size={24} /> <Book className="text-blue-500" size={24} />

2
src/components/LoginPage.tsx
View File

@@ -37,7 +37,7 @@ const LoginPage: React.FC<LoginPageProps> = ({ onSuccess, onRegister }) => {
return ( return (
<div className="min-h-screen bg-slate-50 flex overflow-hidden font-sans text-slate-900 items-center justify-center p-4"> <div className="min-h-screen bg-slate-50 flex overflow-hidden font-sans text-slate-900 items-center justify-center p-4">
{/* Using styles similar to AuthPage for consistency */} {/* Using styles similar to AuthPage for consistency */}
<div className="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden p-8 animate-in fade-in zoom-in duration-300"> <div className="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden p-6 md:p-8 animate-in fade-in zoom-in duration-300">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-3xl font-black text-slate-900 mb-2">{t('auth.login_title')}</h1> <h1 className="text-3xl font-black text-slate-900 mb-2">{t('auth.login_title')}</h1>
<p className="text-slate-500">{t('auth.login_subtitle')}</p> <p className="text-slate-500">{t('auth.login_subtitle')}</p>

4
src/components/Pricing.tsx
View File

@@ -29,7 +29,7 @@ const Pricing: React.FC<PricingProps> = ({ plans, currentPlan, onBack, onSelectP
const { t } = useLanguage(); const { t } = useLanguage();
return ( return (
<div className="min-h-screen bg-[#eef2ff] py-20 px-8"> <div className="min-h-screen bg-[#eef2ff] py-20 px-4 md:px-8">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="flex justify-between items-center mb-12"> <div className="flex justify-between items-center mb-12">
<button onClick={onBack} className="flex items-center gap-2 text-slate-500 hover:text-blue-600 font-bold transition-colors"> <button onClick={onBack} className="flex items-center gap-2 text-slate-500 hover:text-blue-600 font-bold transition-colors">
@@ -38,7 +38,7 @@ const Pricing: React.FC<PricingProps> = ({ plans, currentPlan, onBack, onSelectP
<LanguageSwitcher /> <LanguageSwitcher />
</div> </div>
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl font-black text-slate-900 mb-4">{t('pricing.title')}</h2> <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-4">{t('pricing.title')}</h2>
<p className="text-slate-500">{t('pricing.subtitle')}</p> <p className="text-slate-500">{t('pricing.subtitle')}</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

10
src/components/WorldBuilder.tsx
View File

@@ -559,8 +559,8 @@ const WorldBuilder: React.FC<WorldBuilderProps> = ({ entities, onCreate, onUpdat
if (mode === 'templates') { if (mode === 'templates') {
return ( return (
<div className="flex h-full gap-6 p-6 bg-theme-bg"> <div className="flex flex-col md:flex-row h-full gap-4 md:gap-6 p-4 md:p-6 bg-theme-bg">
<div className="w-1/3 opacity-50 pointer-events-none filter blur-[1px]"> <div className="hidden md:block w-1/3 opacity-50 pointer-events-none filter blur-[1px]">
<div className="bg-theme-panel rounded-lg p-6 shadow-sm border border-theme-border"> <div className="bg-theme-panel rounded-lg p-6 shadow-sm border border-theme-border">
<h3 className="font-bold text-theme-text mb-4">{t('wb.preview_cards')}</h3> <h3 className="font-bold text-theme-text mb-4">{t('wb.preview_cards')}</h3>
<div className="space-y-2"> <div className="space-y-2">
@@ -576,8 +576,8 @@ const WorldBuilder: React.FC<WorldBuilderProps> = ({ entities, onCreate, onUpdat
} }
return ( return (
<div className="flex h-full gap-6 p-6 bg-theme-bg"> <div className="flex flex-col md:flex-row h-full gap-4 md:gap-6 p-4 md:p-6 bg-theme-bg">
<div className="w-1/3 flex flex-col gap-4"> <div className={`${(editingId) ? 'hidden md:flex' : 'flex'} w-full md:w-1/3 flex-col gap-4 h-full`}>
<div className="flex justify-between items-center px-1"> <div className="flex justify-between items-center px-1">
<h2 className="text-lg font-bold text-theme-text">{t('wb.explorer')}</h2> <h2 className="text-lg font-bold text-theme-text">{t('wb.explorer')}</h2>
<button <button
@@ -631,7 +631,7 @@ const WorldBuilder: React.FC<WorldBuilderProps> = ({ entities, onCreate, onUpdat
</div> </div>
</div> </div>
<div className="flex-1 bg-theme-panel rounded-xl shadow-lg border border-theme-border p-8 overflow-y-auto"> <div className={`${(!editingId) ? 'hidden md:block' : 'block'} flex-1 bg-theme-panel rounded-xl shadow-lg border border-theme-border p-4 sm:p-6 md:p-8 overflow-y-auto h-full`}>
{editingId && tempEntity ? ( {editingId && tempEntity ? (
<div className="space-y-6 animate-in fade-in duration-200"> <div className="space-y-6 animate-in fade-in duration-200">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">

32
src/components/layout/EditorShell.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { BookProject, UserProfile, ViewMode, ChatMessage } from '@/lib/types'; import { BookProject, UserProfile, ViewMode, ChatMessage } from '@/lib/types';
import AIPanel from '@/components/AIPanel'; import AIPanel from '@/components/AIPanel';
import { Book, FileText, Globe, GitGraph, Lightbulb, Settings, Menu, ChevronRight, ChevronLeft, Share2, HelpCircle, LogOut, LayoutDashboard, User, Plus, Trash2 } from 'lucide-react'; import { Book, FileText, Globe, GitGraph, Lightbulb, Settings, Menu, ChevronRight, ChevronLeft, Share2, HelpCircle, LogOut, LayoutDashboard, User, Plus, Trash2 } from 'lucide-react';
@@ -36,11 +36,27 @@ const EditorShell: React.FC<EditorShellProps> = (props) => {
const currentChapter = project.chapters.find(c => c.id === currentChapterId); const currentChapter = project.chapters.find(c => c.id === currentChapterId);
// Auto-close sidebars on mobile when navigating
useEffect(() => {
if (typeof window !== 'undefined' && window.innerWidth < 1024) {
setIsSidebarOpen(false);
setIsAiPanelOpen(false);
}
}, [viewMode, currentChapterId]);
return ( return (
<div className="flex h-screen overflow-hidden no-print bg-theme-bg text-theme-text transition-colors duration-300"> <div className="flex h-screen overflow-hidden no-print bg-theme-bg text-theme-text transition-colors duration-300 relative">
{/* Mobile Sidebar Overlay */}
{isSidebarOpen && (
<div
className="fixed inset-0 bg-black/50 z-30 lg:hidden"
onClick={() => setIsSidebarOpen(false)}
/>
)}
{/* SIDEBAR */} {/* SIDEBAR */}
<aside className={`${isSidebarOpen ? 'w-64' : 'w-0'} bg-slate-900 text-slate-300 flex-shrink-0 transition-all duration-300 overflow-hidden flex flex-col border-r border-slate-800`}> <aside className={`${isSidebarOpen ? 'w-64' : 'w-0'} bg-slate-900 text-slate-300 flex-shrink-0 transition-all duration-300 overflow-hidden flex flex-col border-r border-slate-800 absolute lg:relative z-40 h-full shadow-2xl lg:shadow-none`}>
<div className="p-4 border-b border-slate-700"> <div className="p-4 border-b border-slate-700">
<h1 className="text-white font-bold flex items-center gap-2 mb-4 cursor-pointer" onClick={() => props.onViewModeChange('dashboard')}> <h1 className="text-white font-bold flex items-center gap-2 mb-4 cursor-pointer" onClick={() => props.onViewModeChange('dashboard')}>
<Book className="text-blue-400" /> Pluume <Book className="text-blue-400" /> Pluume
@@ -129,8 +145,16 @@ const EditorShell: React.FC<EditorShellProps> = (props) => {
</main> </main>
</div> </div>
{/* Mobile AI Panel Overlay */}
{isAiPanelOpen && (
<div
className="fixed inset-0 bg-black/50 z-30 lg:hidden"
onClick={() => setIsAiPanelOpen(false)}
/>
)}
{/* AI PANEL */} {/* AI PANEL */}
<div className={`${isAiPanelOpen ? 'w-80 lg:w-96' : 'w-0'} transition-all duration-300 flex-shrink-0 h-full border-l border-theme-border relative bg-theme-panel`}> <div className={`${isAiPanelOpen ? 'w-80 lg:w-96' : 'w-0'} transition-all duration-300 flex-shrink-0 h-full border-l border-theme-border flex flex-col bg-theme-panel absolute right-0 lg:relative z-40 shadow-2xl lg:shadow-none`}>
{isAiPanelOpen && <AIPanel chatHistory={props.chatHistory} onSendMessage={props.onSendMessage} onInsertText={props.onInsertText} selectedText="" isGenerating={props.isGenerating} usage={user.usage} />} {isAiPanelOpen && <AIPanel chatHistory={props.chatHistory} onSendMessage={props.onSendMessage} onInsertText={props.onInsertText} selectedText="" isGenerating={props.isGenerating} usage={user.usage} />}
</div> </div>
</div> </div>