feat: add annoucement for lyonjs 100 (#454)

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

app/lyonjs-100/LyonJS100.module.css

@@ -0,0 +1,70 @@
+.hero {
+  position: relative;
+  margin-top: 2rem;
+  height: 10rem;
+  overflow: hidden;
+  border-radius: 0.5rem;
+}
+
+.hero .background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  object-fit: cover;
+  object-position: bottom;
+}
+
+.hero h1 {
+  position: absolute;
+  left: 0.5rem;
+  bottom: 2rem;
+  font-size: 3rem;
+  color: var(--white-0);
+  z-index: 1;
+}
+
+.hero::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(12, 12, 13);
+  background: linear-gradient(
+    0deg,
+    rgba(12, 12, 13, 1) 0%,
+    rgba(12, 12, 13, 0.8421743697478992) 25%,
+    rgba(12, 12, 13, 0) 83%
+  );
+}
+
+.logo {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  height: 90%;
+  width: auto;
+  bottom: 0;
+}
+
+.cta {
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+}
+
+@media screen and (min-width: 768px) {
+  .hero {
+    height: 20rem;
+  }
+
+  .hero h1 {
+    left: 1rem;
+    font-size: 5rem;
+  }
+}

app/lyonjs-100/content.mdx

@@ -0,0 +1,63 @@
+import { ListOfPeople } from '../../modules/person/ListOfPeople';
+import { Sponsors } from '../../modules/sponsors/Sponsors';
+import { gold, silver, bronze } from '../../data/lyonjs100-sponsors';
+import { speakers } from '../../data/lyonjs100-speakers';
+import Image from 'next/image';
+import cinema from './cinema.jpg';
+import styles from './LyonJS100.module.css';
+import { ButtonLink } from '../../modules/atoms/button/Button';
+
+<div className={styles.hero}>
+  <Image className={styles.background} src={cinema} width={1200} alt="" />
+  <img className={styles.logo} src="/lyonjs100/LyonJS_100.webp" width={1440} height={810} alt="Logo du LyonJS 100" />
+</div>
+
+## Qu'est ce que LyonJS 100 ?
+
+Nous sommes ravis d'annoncer que pour célébrer notre 100ème événement, LyonJS organise une journée de conférence exceptionnelle ! 🎉
+
+Nous ne pouvions pas laisser passer cette occasion spéciale sans marquer le coup, c'est pourquoi nous avons prévu une journée entière de conférences, de rencontres et de célébrations pour célébrer ça ensemble.
+
+Pour se faire nous avons privatisez une **salle de cinéma pour l'occasion**, de quoi vous offrir un cadre agréable pour une journée rythmée par des talks de qualité.
+Un bon petit déjeuner pour commencer la journée et un buffet pour le déjeuner dans une zone du cinéma réservée pour l'occasion.
+
+Nous allons donc ouvrir la billetterie le <time dateTime="2024-12-06T09:00">6 décembre 2024</time>, alors assurez-vous de réserver votre place dès que possible, car les places seront limitées à **100**!
+
+## En résumé
+
+- **📅 Date** : 21 février 2025
+- **📌 Lieu** : UGC Part dieu
+- **🎟️ Ouverture de la billetterie** : 6 décembre 2024
+
+## Billetterie
+
+La billeterie ouvrira le 6 décembre 2024 à 9h00. Les places seront limitées à 100 avec un prix de vente fixé à 40€, alors assurez-vous de réserver la vôtre dès que possible.
+
+<div className={styles.cta}>
+  <ButtonLink href="https://www.helloasso.com/associations/lyonjs/evenements/lyon-js-100">
+    Je prends ma place ! <span aria-hidden="true">&rarr;</span>
+  </ButtonLink>
+</div>
+
+## Programme
+
+Le programme complet de la journée sera annoncé prochainement. Restez à l'affût pour découvrir les conférences prévues pour cette journée spéciale.
+
+<ListOfPeople people={speakers} />
+
+## Sponsors
+
+Un grand merci à nos sponsors pour leur soutien continu.
+Nous sommes reconnaissants de leur contribution à cet événement spécial.
+Certains de nos sponsors seront présents durant la journée, n'hésitez pas à aller à leur rencontre pour en apprendre plus sur leurs activités.
+
+<Sponsors title="🥇Sponsors Gold" sponsors={gold} />
+<Sponsors title="🥈Sponsors Silver" sponsors={silver} />
+<Sponsors title="🥉Sponsors Bronze" sponsors={bronze} />
+
+## Infos
+
+Pour toute question ou demande de sponsoring, veuillez nous contacter à l'adresse suivante : [[email protected]](mailto:[email protected]).
+
+Pour ne rien manquer des dernières nouvelles et mises à jour concernant cet événement, suivez-nous sur nos réseaux sociaux :
+Nous avons hâte de vous voir nombreux et nombreuses pour célébrer ensemble cette étape importante pour LyonJS ! 🌟

app/lyonjs-100/page.tsx

@@ -0,0 +1,23 @@
+import { Metadata } from 'next';
+// @ts-ignore
+import Content from './content.mdx';
+
+export default function LyonJS100() {
+  return <Content />;
+}
+export const revalidate = 3600;
+const title = 'LyonJS | LyonJS 💯';
+const description = "Qu'est ce que le LyonJS 100 ? Comment participer à la journée de conférence ?";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  twitter: {
+    title,
+    description,
+  },
+  openGraph: {
+    title,
+    description,
+  },
+};

app/page.tsx

@@ -7,17 +7,20 @@ import { Sponsors } from '../modules/sponsors/Sponsors';
 import { NextEvent } from '../modules/home/NextEvent';
 import { Numbers } from '../modules/home/Numbers';
 import { LastReplays } from '../modules/home/LastReplays';
+import { HomeAnnouncement } from '../modules/lyonjs100/HomeAnnouncement';
 
 export const revalidate = 3600;
+
 export default function Home() {
   return (
     <main>
       <HomeHero />
+      <HomeAnnouncement />
       <NextEvent />
       <SeePastEvents />
       <Numbers />
       <LastReplays />
-      <Sponsors title="Sponsors" sponsors={sponsors} />
+      <Sponsors title="Sponsors" sponsors={sponsors} withLink />
       <Sponsors title="Partneraires et Conférences" sponsors={partners} />
     </main>
   );

data/lyonjs100-speakers.ts

@@ -0,0 +1,36 @@
+type Speaker = {
+  name: string;
+  talk?: {
+    title: string;
+    description: string;
+  };
+  avatarUrl: string;
+  social: {
+    twitter?: string;
+    linkedin?: string;
+  };
+};
+export const speakers: Array<Speaker> = [
+  { name: 'Matthieu Lux', avatarUrl: '/speakers/matthieu-lux.webp', social: { twitter: 'swiip', linkedin: 'swiip' } },
+  // { name: 'Jérémie Patonnier', avatarUrl: '/speakers/jeremie-patonnier.jpg', social: { twitter: 'jeremiepat' } },
+  // {
+  //   name: 'Jonny Burger',
+  //   avatarUrl: '/speakers/jonny-burger.png',
+  //   social: { twitter: 'JNYBGR', linkedin: 'jonny-burger-4115109b' },
+  // },
+  {
+    name: `Bientôt lui 🤫`,
+    avatarUrl: '/speakers/secret.png',
+    social: {},
+  },
+  {
+    name: `Elle aussi !! 🤩`,
+    avatarUrl: '/speakers/secret.png',
+    social: {},
+  },
+  {
+    name: `Non pas lui !! ?? 😱`,
+    avatarUrl: '/speakers/secret.png',
+    social: {},
+  },
+];

data/lyonjs100-sponsors.ts

@@ -0,0 +1,19 @@
+import { Sponsor } from '../modules/event/types';
+import { bedrock, cleverCloud, indy, malt, theodo, wanadev, zenika } from './sponsors';
+
+export const gold: Array<Sponsor> = [malt];
+
+export const silver: Array<Sponsor> = [
+  { name: '365 Talent', url: 'https://www.365talents.com/fr/', logo: '/sponsors/365Talent.svg' },
+  zenika,
+  bedrock,
+  indy,
+  { name: 'Akawaka', url: 'https://www.akawaka.fr/', logo: '/sponsors/akawaka.svg' },
+  theodo,
+];
+
+export const bronze = [
+  cleverCloud,
+  wanadev,
+  { name: 'Feelinjob', url: 'https://www.feelinjob.com/', logo: '/sponsors/feelinjob.svg' },
+];

data/orgas.ts

@@ -1,6 +1,5 @@
 export type Orga = {
   name: string;
-  description: string;
   avatarUrl: string;
   social: {
     twitter?: string;
@@ -12,7 +11,6 @@ export const orgas: Array<Orga> = [
   {
     name: 'Paul Mougel',
     avatarUrl: '/orgas/paul.jpeg',
-    description: 'CTO @365Talents / JS lover @LyonJS / NLP, Semantics & ML enthusiast',
     social: {
       twitter: 'paul_mougel',
       linkedin: 'paulmougel',
@@ -21,8 +19,6 @@ export const orgas: Array<Orga> = [
   {
     name: 'Mathieu Mure',
     avatarUrl: '/orgas/mathieu.jpeg',
-    description:
-      'CTO @zenika also Front-end dev | Co organizer of @lyonjs | Speakers in many conf | I do stuff on Twitch 👉 http://twitch.tv/Infrazull',
     social: {
       twitter: 'mathieumure',
       linkedin: 'mathieu-mure',
@@ -31,8 +27,6 @@ export const orgas: Array<Orga> = [
   {
     name: 'Antoine Caron',
     avatarUrl: '/orgas/antoine.jpg',
-    description:
-      'Web Maker @Bedrock_Tec , internet trublion and despote teacher @PolytechLyon #LyonJS #React #Node co-organiser of @LyonJ meetup',
     social: {
       twitter: 'slashgear_',
       linkedin: 'antoine-⚙%EF%B8%8F-c-7089788a/',
@@ -41,7 +35,6 @@ export const orgas: Array<Orga> = [
   {
     name: 'Mickael Alves',
     avatarUrl: '/orgas/mickael.jpeg',
-    description: 'Consultant chez Zenika 🔴 Développeur chez Bedrock Streaming ⚫️ Co-Organisateur du LyonJS 🦁',
     social: {
       twitter: 'cruuzazul',
       linkedin: 'mickaelalves',
@@ -50,7 +43,6 @@ export const orgas: Array<Orga> = [
   {
     name: 'Mohamed Djebali',
     avatarUrl: '/orgas/mohamed.jpeg',
-    description: 'Software Developer at Worldline | Co Organizer | Quiz Lover',
     social: {
       twitter: 'MohamedDjebali',
       linkedin: 'mohamed-djebali-developpeur-web',
@@ -59,7 +51,6 @@ export const orgas: Array<Orga> = [
   {
     name: 'Johana Lavigne',
     avatarUrl: '/orgas/johana.jpg',
-    description: 'JS Developer | Co Organizer of @LyonJS & @DuchessFR | Fitness & Running Lover',
     social: {
       twitter: 'JohanaLavigne',
       linkedin: 'johana-lavigne',

modules/about/Orgas.tsx

@@ -1,40 +1,5 @@
 import React from 'react';
-import Image from 'next/image';
-import styles from './Orgas.module.css';
-import { Twitter } from '../icons/Twitter';
-import { Linkedin } from '../icons/Linkedin';
 import { orgas } from '../../data/orgas';
-import { IconLink } from '../navigation/links/IconLink';
+import { ListOfPeople } from '../person/ListOfPeople';
 
-export const Orgas: React.FC = () => (
-  <div className={styles.listOrgasContainer}>
-    {orgas.map((orga) => (
-      <figure key={orga.name} className={styles.member}>
-        <Image src={orga.avatarUrl} alt={orga.name} width="120" height="120" title={orga.name} />
-        {orga.name}
-        <div className={styles.socialsOrgas}>
-          {orga.social.twitter && (
-            <IconLink
-              href={`https://twitter.com/${orga.social.twitter}`}
-              target="_blank"
-              rel="noreferrer noopener"
-              title={`Compte Twitter de ${orga.name}`}
-            >
-              <Twitter color="currentColor" size={20} />
-            </IconLink>
-          )}
-          {orga.social.linkedin && (
-            <IconLink
-              href={`https://www.linkedin.com/in/${orga.social.linkedin}`}
-              target="_blank"
-              rel="noreferrer noopener"
-              title={`Compte Linkedin de ${orga.name}`}
-            >
-              <Linkedin color="currentColor" size={20} />
-            </IconLink>
-          )}
-        </div>
-      </figure>
-    ))}
-  </div>
-);
+export const Orgas: React.FC = () => <ListOfPeople people={orgas} />;