|
|
|
@@ -1,91 +1,9 @@
|
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
import '../styles/home.css';
|
|
|
|
|
|
|
|
|
|
const features = [
|
|
|
|
|
{ icon: '📚', title: 'Enregistrer un livre', desc: 'Ajoutez un nouveau titre au catalogue de la bibliothèque.', role: 'admin', path: '/books/new' },
|
|
|
|
|
{ icon: '🛒', title: 'Passer une commande', desc: 'Commandez vos livres préférés en quelques secondes.', role: 'user', path: '/orders/new' },
|
|
|
|
|
{ icon: '🏷️', title: 'Appliquer une promotion', desc: 'Créez et gérez vos codes promotionnels.', role: 'admin', path: '/promotions/new' },
|
|
|
|
|
{ icon: '📌', title: 'Réserver un livre', desc: 'Réservez un exemplaire avant sa disponibilité.', role: 'user', path: '/reservations/new' },
|
|
|
|
|
{ icon: '↩️', title: 'Retour de livre', desc: 'Gérez les retours et remises en stock.', role: 'admin', path: '/returns/new' },
|
|
|
|
|
{ icon: '⭐', title: 'Points de fidélité', desc: 'Consultez et utilisez vos points cumulés.', role: 'user', path: '/loyalty' },
|
|
|
|
|
{ icon: '💬', title: 'Laisser un avis', desc: 'Partagez votre opinion sur vos dernières lectures.', role: 'user', path: '/reviews/new' },
|
|
|
|
|
{ icon: '🎫', title: 'Créer un abonnement', desc: 'Souscrivez à un abonnement mensuel ou annuel.', role: 'user', path: '/subscriptions/new' },
|
|
|
|
|
{ icon: '🤝', title: 'Prêt entre lecteurs', desc: "Prêtez vos livres à d'autres membres de la communauté.", role: 'user', path: '/loans/new' },
|
|
|
|
|
{ icon: '👥', title: 'Commande groupée', desc: 'Participez à des achats groupés avantageux.', role: 'user', path: '/group-orders' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const stats = [
|
|
|
|
|
{ value: '10 000+', label: 'Livres disponibles' },
|
|
|
|
|
{ value: '5 000+', label: 'Lecteurs actifs' },
|
|
|
|
|
{ value: '50+', label: 'Catégories' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default function Home() {
|
|
|
|
|
return (
|
|
|
|
|
<main>
|
|
|
|
|
{/* Hero */}
|
|
|
|
|
<section className="hero">
|
|
|
|
|
<p className="hero__eyebrow">Votre bibliothèque en ligne</p>
|
|
|
|
|
<h1 className="hero__title">
|
|
|
|
|
Des livres pour tous,
|
|
|
|
|
<span className="hero__title-italic">partout, toujours.</span>
|
|
|
|
|
</h1>
|
|
|
|
|
<div className="hero__rule" />
|
|
|
|
|
<p className="hero__subtitle">
|
|
|
|
|
Commandez, réservez, prêtez et partagez vos lectures.
|
|
|
|
|
Une plateforme pensée pour les vrais amoureux des livres.
|
|
|
|
|
</p>
|
|
|
|
|
<div className="hero__actions">
|
|
|
|
|
<Link to="/books">
|
|
|
|
|
<button className="hero__btn-primary">Explorer le catalogue</button>
|
|
|
|
|
</Link>
|
|
|
|
|
<button className="hero__btn-secondary">En savoir plus</button>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
{/* Stats */}
|
|
|
|
|
<section className="stats">
|
|
|
|
|
{stats.map(({ value, label }) => (
|
|
|
|
|
<div key={label} className="stats__item">
|
|
|
|
|
<div className="stats__value">{value}</div>
|
|
|
|
|
<div className="stats__label">{label}</div>
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
{/* Features */}
|
|
|
|
|
<div className="section-header">
|
|
|
|
|
<p className="section-header__eyebrow">Fonctionnalités</p>
|
|
|
|
|
<h2 className="section-header__title">Tout ce dont vous avez besoin</h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<section className="features">
|
|
|
|
|
<div className="features__grid">
|
|
|
|
|
{features.map((f) => (
|
|
|
|
|
<Link to={f.path} key={f.title} className="feature-card">
|
|
|
|
|
<div className="feature-card__glyph">{f.icon}</div>
|
|
|
|
|
<span className={`badge badge--${f.role}`}>
|
|
|
|
|
{f.role === 'admin' ? 'Administrateur' : 'Utilisateur'}
|
|
|
|
|
</span>
|
|
|
|
|
<h3 className="feature-card__title">{f.title}</h3>
|
|
|
|
|
<p className="feature-card__desc">{f.desc}</p>
|
|
|
|
|
<span className="feature-card__arrow">→ Accéder</span>
|
|
|
|
|
</Link>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
{/* Footer CTA */}
|
|
|
|
|
<section className="home-cta">
|
|
|
|
|
<div className="home-cta__rule" />
|
|
|
|
|
<h2 className="home-cta__title">
|
|
|
|
|
Prêt à commencer<br />votre aventure ?
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="home-cta__sub">Rejoignez des milliers de lecteurs dès aujourd'hui.</p>
|
|
|
|
|
<Link to="/register">
|
|
|
|
|
<span className="home-cta__btn">Créer un compte gratuit</span>
|
|
|
|
|
</Link>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
);
|
|
|
|
|
}
|
