diff --git a/app/budget-et-financement/content.mdx b/app/budget-et-financement/content.mdx
new file mode 100644
index 00000000..b3e5e4ca
--- /dev/null
+++ b/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
+
+
+
+## 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.
diff --git a/app/budget-et-financement/opengraph-image.tsx b/app/budget-et-financement/opengraph-image.tsx
new file mode 100644
index 00000000..132939be
--- /dev/null
+++ b/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(, size);
+}
diff --git a/app/budget-et-financement/page.tsx b/app/budget-et-financement/page.tsx
new file mode 100644
index 00000000..f85f371c
--- /dev/null
+++ b/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 ;
+}
+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,
+ },
+};
diff --git a/app/devenir-sponsor/content.mdx b/app/devenir-sponsor/content.mdx
index 5e809556..678eaaef 100644
--- a/app/devenir-sponsor/content.mdx
+++ b/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)
diff --git a/data/budget.tsx b/data/budget.tsx
new file mode 100644
index 00000000..8a44db8d
--- /dev/null
+++ b/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,
+ },
+];
diff --git a/modules/budget/budgetTable.module.css b/modules/budget/budgetTable.module.css
new file mode 100644
index 00000000..964c81d3
--- /dev/null
+++ b/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;
+}
diff --git a/modules/budget/budgetTable.tsx b/modules/budget/budgetTable.tsx
new file mode 100644
index 00000000..f816131f
--- /dev/null
+++ b/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 (
+
+
+
+
+ Dépense
+ |
+
+ Description
+ |
+
+ Coût
+ |
+
+
+
+ {budgetRows.map((row) => {
+ return (
+
+
+ {row.expense}
+ |
+ {row.description} |
+ {costFormat.format(row.cost)} |
+
+ );
+ })}
+
+
+ Total
+ |
+ |
+
+ {costFormat.format(
+ budgetRows.reduce((total, currentValue) => {
+ return total + currentValue.cost;
+ }, 0),
+ )}
+ |
+
+
+
+ );
+};