debut projet

2026-03-16 16:43:17 +01:00
parent 5564a5b807
commit 038c52efc0
26 changed files with 18668 additions and 0 deletions
@@ -0,0 +1,91 @@
+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>
+  );
+}