Now let me build all the files. I'll start with the shared data types, mock data, print CSS, then all 3 variants.
Now I have all the context I need. Let me build everything:
Now write the shared print CSS:
Now build Variant A — Editorial Minimal:
Now update the layout with proper fonts and metadata, and import the print CSS globally:
Now update globals.css to add the Inter font variable to the theme and add custom report CSS tokens:
Here is the complete file structure delivered:
lib/
report-types.ts ← Interface ReportData (contrat de données partagé)
mock-report.ts ← mockReport — remplacez ici pour brancher votre générateur
app/
print.css ← @page { size: A4; margin: 0 }, .pdf-page, .billboard-card
page.tsx ← Switcher screen-only (A / B / C) + bouton Imprimer
components/
variant-a/pages.tsx ← Editorial Minimal (accent orange, fond blanc, typo massive)
variant-b/pages.tsx ← Corporate Bold (fond #0b0f1a, KPI cards contrastées)
variant-c/pages.tsx ← Premium Sobre (noir #111, traits fins, hiérarchie luxe)Architecture des données : les 3 variantes importent toutes mockReport depuis lib/mock-report.ts — un seul fichier à modifier pour changer tout le contenu. Toutes les clés demandées (campaignName, clientLine, zoneLine, zones[], primaryColor, coverLogos, etc.) sont typées dans ReportData. Pour imprimer en PDF, cliquez le bouton "Imprimer / PDF" en haut à droite — le switcher screen-only disparaît grâce à la classe .screen-only { display: none } dans print.css.
Parfait ! Je vais créer deux nouvelles variantes : Variant D (Tech Modern) avec un design épuré et contemporain, et Variant E (Creative Dynamic) avec une approche plus visuelle et dynamique. Je vais ensuite mettre à jour la page principale.
Maintenant, je mets à jour la page principale pour inclure les 2 nouvelles variantes :
Parfait ! J'ai ajouté deux nouvelles variantes au système de rapports PDF :
Variant D — Tech Modern : Un design épuré avec une esthétique contemporaine. Fond gris clair, bordures nettes, alignements propres, utilise des bordures colorées et une typographie élégante pour une impression moderne et professionnelle.
Variant E — Creative Dynamic : Une approche visuelle et colorée avec des éléments décor (cercles décor, bordures arrondies) et des cartes avec fond teinté. La couverture utilise le fond d'accent principal avec texture, les statistiques apparaissent dans des cartes superposées semi-transparentes — style plus contemporain et engageant.
Les deux variantes partagent la même structure de données mockReport que les 3 premières, et le switcher principal permet de basculer entre toutes les 5 variantes avant impression.