49 lines
2.3 KiB
JavaScript
49 lines
2.3 KiB
JavaScript
// Rôle : affiche la page d'accueil et les contenus éditoriaux principaux.
|
|
import React from "react";
|
|
import { TOOLBOX_MODULES } from "../features/toolboxes/modules/index.jsx";
|
|
import { RichText } from "../components/RichText.jsx";
|
|
|
|
export function HomePage({ siteContent, toolboxes }) {
|
|
const content = siteContent.home;
|
|
const toolCount = Object.keys(TOOLBOX_MODULES).length;
|
|
return (
|
|
<>
|
|
<section className="hero">
|
|
<div>
|
|
<p className="eyebrow">{content.hero.eyebrow}</p>
|
|
<h1>{content.hero.title}</h1>
|
|
<p>{content.hero.description}</p>
|
|
<div className="actions">
|
|
<a className="button primary" href="#/toolboxes">{content.hero.primaryAction}</a>
|
|
<a className="button" href="#/games">{content.hero.secondaryAction}</a>
|
|
</div>
|
|
</div>
|
|
<div className="home-stats hero-stats" aria-label="Statistiques locales du site">
|
|
<article><strong>{toolboxes.length}</strong><span>{toolboxes.length > 1 ? content.stats.toolboxPlural : content.stats.toolboxSingular}</span></article>
|
|
<article><strong>{toolCount}</strong><span>{toolCount > 1 ? content.stats.toolPlural : content.stats.toolSingular}</span></article>
|
|
</div>
|
|
</section>
|
|
<section className="origin-section nebula-panel" aria-labelledby="origin-title">
|
|
<div className="origin-copy">
|
|
<p className="eyebrow">{content.origin.eyebrow}</p>
|
|
<h2 id="origin-title">{content.origin.title}</h2>
|
|
<div className="home-dialogue" aria-label={content.origin.dialogueAriaLabel}>
|
|
{content.origin.lines.map((line, index) => <DialogueLine key={index} line={line} />)}
|
|
<small className="dialogue-caption">{content.origin.caption}</small>
|
|
</div>
|
|
</div>
|
|
<div className="home-visual" aria-label="Illustration Sokko G">
|
|
<img src="/static/img/dragon.png" alt={content.origin.visualAlt} />
|
|
</div>
|
|
</section>
|
|
<footer className="home-legal">
|
|
<p>{content.legal.copyright}</p>
|
|
<p>{content.legal.disclaimer}</p>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DialogueLine({ line }) {
|
|
return <p className={`dialogue-line dialogue-line-${line.speaker === "app" ? "app" : "user"}`}><RichText text={line.text || ""} /></p>;
|
|
}
|