AboutPage

Page "À propos" réutilisable — remplace le copier-coller de app/about/page.tsx. Affiche le logo, le nom/version, les contacts du concepteur et une grille de fonctionnalités. Tout est configurable via props.

Remplace : le fichier src/app/about/page.tsx dupliqué dans chaque projet. Une seule import, plus de synchronisation manuelle.

Démo en direct

À propos

Informations sur l'application CBK Toolkit

CBK TOOLKIT

Chaque projet devient une amélioration du précédent

Version 3.2.1

Concepteur

Caleb BALEGO

WhatsApp : +236 72 23 26 99 Email : cbk.exauce@gmail.com

Fonctionnalités

Structures

Gestion des diocèses, paroisses et fraternités

Membres

Suivi des membres et transferts

Dons

Gestion des contributions

Administration

Rôles, scopes et utilisateurs

Démo avec CBK Toolkit + 4 fonctionnalités. Version depuis package.json.

Code source complet — copier-coller

Créez app/about/page.tsx et passez vos données — plus besoin de dupliquer le layout.

"use client";

import { AboutPage } from "@ramses1er/cbk-toolkit/client";
import { Church, UsersRound, Gift, Shield } from "lucide-react";
import pkg from "../../../package.json";

const features = [
  { icon: Church, title: "Structures", description: "Gestion des diocèses, paroisses et fraternités" },
  { icon: UsersRound, title: "Membres", description: "Suivi des membres" },
  { icon: Gift, title: "Dons", description: "Gestion des contributions" },
  { icon: Shield, title: "Administration", description: "Rôles et utilisateurs" },
];

export default function AboutPageWrapper() {
  return (
    <AboutPage
      appName={pkg.name}
      appTagline="Application de gestion communautaire"
      logo="/img/logo.png"
      version={pkg.version}
      authorName="Caleb BALEGO"
      whatsappHref="https://wa.me/23672232699"
      whatsappLabel="WhatsApp : +236 72 23 26 99"
      emailHref="mailto:cbk.exauce@gmail.com"
      emailLabel="Email : cbk.exauce@gmail.com"
      features={features}
    />
  );
}

Variante minimale

Seules `appName`, `logo` et `features` sont requis.

import { AboutPage } from "@ramses1er/cbk-toolkit/client";
import { Shield } from "lucide-react";

<AboutPage appName="Mon App" logo="/logo.png" features={[{ icon: Shield, title: "Admin", description: "..." }]} />

Props

Prop	Type	Défaut	Description
appName	string	requis	Nom affiché en majuscules + footer/header
logo	string	requis	Chemin logo (next/image 96x96 rounded-full)
features	AboutFeature[]	requis	{ icon: LucideIcon, title, description }
appTagline	string	—	Sous-titre sous le nom
version	string	—	Badge "Version X" (pkg.version)
authorName	string	—	Nom du concepteur
whatsappHref	string	—	Lien https://wa.me/...
whatsappLabel	string	href	Label bouton WhatsApp
emailHref	string	—	mailto:...
emailLabel	string	href	Label bouton email
headerTitle	string	"À propos"	Titre HeaderContent
headerDescription	string	"Informations sur {appName}"	Description header
footerAppName	string	appName	Nom dans © footer
className	string	—	Classes wrapper

Type — AboutFeature

type AboutFeature = {
  icon: LucideIcon;
  title: string;
  description: string;
};

Comportement

Utilise HeaderContent en haut
Carte app : logo 96 rounded-full + nom uppercase + tagline + badge version si fourni
Carte concepteur masquée si aucun de authorName/whatsapp/email fourni
Grille features masquée si tableau vide
Importer pkg.version depuis package.json pour version dynamique