feat(page): add page about budget (#405)

Co-authored-by: Mathieu Mure <[email protected]>

app/budget-et-financement/content.mdx

@@ -0,0 +1,20 @@
+import { BudgetTable } from '../../modules/budget/budgetTable';
+
+# Budget et financement
+
+LyonJS est une association dédiée à la promotion et au développement de la communauté JavaScript à Lyon.
+Nos événements, ateliers et rencontres sont organisés grâce à l'implication et au soutien de nos membres actifs.
+Pour assurer le bon fonctionnement de l'association et garantir la qualité de nos activités, nous devons couvrir certaines dépenses.
+
+Actuellement, LyonJS est financée par ses membres actifs.
+Voici un aperçu des principales dépenses annuelles de l'association ainsi que leur coût.
+
+## Tableau des dépenses
+
+<BudgetTable />
+
+## Financement futur par des Sponsors
+
+Afin de soutenir notre croissance et d'améliorer la qualité des événements que nous organisons, nous souhaitons à l'avenir financer l'association grâce à des dons de sponsors.
+Ce changement de modèle de financement nous permettra de réduire la charge financière sur nos membres actifs et d'offrir des activités encore plus diversifiées et accessibles à toute la communauté.
+Avec le soutien de sponsors, LyonJS pourra continuer à grandir et à créer des opportunités de partage et d'apprentissage.

app/budget-et-financement/opengraph-image.tsx

@@ -0,0 +1,15 @@
+import { ImageResponse } from 'next/og';
+import { SimpleText } from '../../modules/og/SimpleText';
+
+export const runtime = 'edge';
+
+export const alt = 'Budget';
+export const size = {
+  width: 1200,
+  height: 630,
+};
+export const contentType = 'image/png';
+
+export default function Image() {
+  return new ImageResponse(<SimpleText text={`Budget`} />, size);
+}

app/budget-et-financement/page.tsx

@@ -0,0 +1,23 @@
+import { Metadata } from 'next';
+// @ts-ignore
+import Content from './content.mdx';
+
+export default function BudgetEtFinancement() {
+  return <Content />;
+}
+export const revalidate = 3600;
+const title = 'LyonJS | Budget et financement de l’association';
+const description = "Quelles sont les dépenses de l'association LyonJS, comment elle se finance";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  twitter: {
+    title,
+    description,
+  },
+  openGraph: {
+    title,
+    description,
+  },
+};

app/devenir-sponsor/content.mdx

@@ -68,3 +68,5 @@ Si vous souhaitez héberger l'un de nos événements, vérifiez que vous pouvez
 - avoir au moins une personne de vos équipes présente le soir de l'événement.
 - être assuré pour ce type d'événements.
 - être capable de baliser l'accès à vos locaux pour aider notre communauté à bien trouver le lieu.
+
+[**En savoir plus sur les dépenses et le financement de l'association LyonJS**](/budget-et-financement)

data/budget.tsx

@@ -0,0 +1,43 @@
+export type BudgetRowType = {
+  expense: string;
+  description: string;
+  cost: number;
+};
+
+export const budgetRows: BudgetRowType[] = [
+  {
+    expense: 'Abonnement plateforme Meetup',
+    description: 'Plateforme pour publier nos événements, 90$ par semestre',
+    cost: 160,
+  },
+  {
+    expense: "Compte en banque d'association",
+    description: 'Compte business associatif sur banque en ligne',
+    cost: 120,
+  },
+  {
+    expense: 'Nom de domaine et hébergement',
+    description: "Actuellement acheté auprès d'OVH",
+    cost: 15.59,
+  },
+  {
+    expense: 'Hébergement du site',
+    description: 'Offert par Vercel et Clever Cloud',
+    cost: 0,
+  },
+  {
+    expense: 'T-shirts / Hoodies',
+    description: "100 par personne, on prévoit jusqu'à 2 arrivée dans l'asso par ans",
+    cost: 200,
+  },
+  {
+    expense: 'Assurances',
+    description: 'Couverture juridique et responsabilité morale',
+    cost: 200,
+  },
+  {
+    expense: 'Location de salle',
+    description: 'Les salles et les lieux de nos événements sont offerts par nos sponsors',
+    cost: 0,
+  },
+];

modules/budget/budgetTable.module.css

@@ -0,0 +1,14 @@
+.budgetTable thead {
+  color: var(--yellow-1);
+  text-align: left;
+}
+.budgetTable tbody tr {
+  padding: 0.75rem;
+}
+
+.budgetTable,
+.budgetTable th,
+.budgetTable td {
+  border: 1px solid white;
+  padding: 1rem;
+}

modules/budget/budgetTable.tsx

@@ -0,0 +1,50 @@
+import styles from './budgetTable.module.css';
+import { budgetRows } from '../../data/budget';
+
+const costFormat = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
+
+export const BudgetTable = () => {
+  return (
+    <table className={styles.budgetTable}>
+      <thead>
+        <tr>
+          <th>
+            <strong>Dépense</strong>
+          </th>
+          <th>
+            <strong>Description</strong>
+          </th>
+          <th>
+            <strong>Coût</strong>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {budgetRows.map((row) => {
+          return (
+            <tr key={row.expense}>
+              <td>
+                <strong>{row.expense}</strong>
+              </td>
+              <td>{row.description}</td>
+              <td>{costFormat.format(row.cost)}</td>
+            </tr>
+          );
+        })}
+        <tr>
+          <td>
+            <strong>Total</strong>
+          </td>
+          <td></td>
+          <td>
+            {costFormat.format(
+              budgetRows.reduce((total, currentValue) => {
+                return total + currentValue.cost;
+              }, 0),
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};