feat(lyonjs100): add job-board page (#455)

app/lyonjs-100/content.mdx

@@ -6,6 +6,8 @@ import Image from 'next/image';
 import cinema from './cinema.jpg';
 import styles from './LyonJS100.module.css';
 import { ButtonLink } from '../../modules/atoms/button/Button';
+import { lyonJS100Jobs } from '../../data/lyonjs100-jobs';
+import { ListOfJobs } from '../../modules/jobs/ListOfJobs';
 
 <div className={styles.hero}>
   <Image className={styles.background} src={cinema} width={1200} alt="" />
@@ -51,10 +53,18 @@ 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.
 
+Nos sponsors sont également à la recherche de nouveaux talents, alors n'hésitez pas à consulter les offres d'emploi disponibles sur notre site.
+
 <Sponsors title="🥇Sponsors Gold" sponsors={gold} />
 <Sponsors title="🥈Sponsors Silver" sponsors={silver} />
 <Sponsors title="🥉Sponsors Bronze" sponsors={bronze} />
 
+## Recrutement
+
+Nos sponsors ont des offres d'emploi à vous proposer. N'hésites pas à les consulter, postuler ou les contacters si vous êtes intéressé·es.
+
+<ListOfJobs jobs={lyonJS100Jobs} />
+
 ## Infos
 
 Pour toute question ou demande de sponsoring, veuillez nous contacter à l'adresse suivante : [[email protected]](mailto:[email protected]).

data/lyonjs100-jobs.ts

@@ -0,0 +1,31 @@
+import { indy, malt, zenika } from './sponsors';
+import { kolecto, fulll, _365talents } from './lyonjs100-sponsors';
+import { Job } from '../modules/jobs/jobs.types';
+
+/** 3 jobs max per gold sponsors */
+const goldSponsorJobs: Array<Job> = [];
+
+/** 1 job max per silver sponsors */
+const silverSponsorJobs: Array<Job> = [
+  {
+    title: 'Engineering Manager',
+    url: 'https://jobs.indy.fr/jobs/5370711-engineering-manager',
+    sponsor: indy,
+    type: 'CDI',
+    description: `**Missions** :
+* Au sein de l'équipe Tech & Product d'Indy composée de 75 personnes réparties en 2 tribes avec dans chacunes d'elles 5-6 squads.
+* Pour rejoindre notre squad Tetris (dans la tribe premium) en charge de rendre hyper fluide et intuitif les déclarations fiscales de nos clients.
+* Rôle de Tech Lead dans une squad composée de 3 développeurs fullstack et d'1 Product Manager
+* A la fois de manager de l'équipe de développeurs et garant technique des développements de ta squad.
+
+**Profile** :
+  - Posture de servant-leader, l'équipe est la priorité. 
+  - Tu considères que le travail est bien fait quand ta squad se sent bien et est performante.
+  - Tu as évolué dans une entreprise customer-oriented et ton appétence pour le produit se traduit en solutions efficaces pour les utilisateurs.
+  - Tu es capable de faire monter en compétence ta squad sur le plan individuel et collectif.
+  - Tu as une légitimité technique grâce à tes connaissances en d’architecture, en test et sur des sujets DevOps ou Monitoring.
+  - Tu veux rester proche de l’opérationnel en participant à la delivery et aux code-reviews`,
+  },
+];
+
+export const lyonJS100Jobs = [...goldSponsorJobs, ...silverSponsorJobs];

data/lyonjs100-sponsors.ts

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

modules/jobs/ListOfJobs.module.css

@@ -0,0 +1,105 @@
+.container {
+  gap: 2rem;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.card {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: var(--background-card);
+  margin: auto;
+  padding: 16px;
+  border-radius: 12px;
+  align-items: center;
+  gap: 18px;
+  transition:
+    background-color 100ms,
+    border-color 100ms;
+  border: 1px solid transparent;
+  max-width: 800px;
+  height: 100%;
+}
+
+.card:hover {
+  background-color: var(--background-card-hover);
+  border-color: var(--border-light);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: -18px;
+  max-height: 24px;
+}
+
+.title {
+  font-size: 1.5rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+  align-self: flex-start;
+}
+
+.type,
+.sponsor {
+  font-size: 1rem;
+  align-self: flex-start;
+}
+
+.description {
+  font-size: 0.9rem;
+  align-self: flex-start;
+  color: var(--white-0);
+  min-height: 72px;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  flex-grow: 1;
+}
+
+.description p,
+.description ul {
+  margin-bottom: 10px;
+}
+
+.description ul {
+  list-style: initial;
+  margin-left: 20px;
+}
+
+.header .logo {
+  display: none;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 7rem;
+  max-height: 80px;
+}
+
+.logo {
+  width: 5rem;
+  height: auto;
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 600px) {
+  .header .logo {
+    display: block;
+  }
+
+  .header .sponsor {
+    display: none;
+  }
+
+  .card > .logo {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 956px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+}

modules/jobs/ListOfJobs.tsx

@@ -0,0 +1,37 @@
+import { Job } from './jobs.types';
+import styles from './ListOfJobs.module.css';
+import { H2 } from '../atoms/remark/Titles';
+import React from 'react';
+import { ButtonLink } from '../atoms/button/Button';
+import dynamic from 'next/dynamic';
+
+const ReactMarkdown = dynamic(() => import('react-markdown').then((module) => module.default));
+
+type Props = {
+  jobs: Array<Job>;
+};
+export const ListOfJobs = ({ jobs }: Props) => {
+  return (
+    <ul className={styles.container}>
+      {jobs.map((job, index) => {
+        return (
+          <li key={index}>
+            <article className={styles.card}>
+              <div className={styles.header}>
+                <p className={styles.type}>{job.type}</p>
+                <p className={styles.sponsor}>{job.sponsor.name}</p>
+                <img className={styles.logo} src={job.sponsor.logo} alt={job.sponsor.name} />
+              </div>
+              <H2 className={styles.title}>{job.title}</H2>
+              <ReactMarkdown className={styles.description}>{job.description}</ReactMarkdown>
+              <img className={styles.logo} src={job.sponsor.logo} alt={job.sponsor.name} />
+              <ButtonLink href={job.url} target="_blank" rel="noreferrer noopener" className={styles.participate}>
+                Voir l'annonce <span aria-hidden="true">&rarr;</span>
+              </ButtonLink>
+            </article>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

modules/jobs/jobs.types.ts

@@ -0,0 +1,9 @@
+import { Sponsor } from '../event/types';
+
+export type Job = {
+  title: string;
+  sponsor: Sponsor;
+  type: string;
+  description: string;
+  url: string;
+};

modules/lyonjs100/HomeAnnouncement.module.css

@@ -36,6 +36,7 @@
   right: 0;
   display: flex;
   justify-content: center;
+  gap: 1rem;
 }
 
 @media screen and (min-width: 768px) {