feat(lyonjs100): add job-board page

Author: mathieumure-disney

app/lyonjs-100/content.mdx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import cinema from './cinema.jpg';
 import styles from './LyonJS100.module.css';
 import { ButtonLink } from '../../modules/atoms/button/Button';
+import { Gift } from '../../modules/icons/Gift';
 
 <div className={styles.hero}>
   <Image className={styles.background} src={cinema} width={1200} alt="" />
@@ -51,6 +52,14 @@ 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.
+
+<div className={styles.cta}>
+  <ButtonLink href="/lyonjs-100/job-board">
+    Les offres d'emploi <Gift />
+  </ButtonLink>
+</div>
+
 <Sponsors title="🥇Sponsors Gold" sponsors={gold} />
 <Sponsors title="🥈Sponsors Silver" sponsors={silver} />
 <Sponsors title="🥉Sponsors Bronze" sponsors={bronze} />

app/lyonjs-100/job-board/content.mdx

@@ -0,0 +1,12 @@
+import { lyonjs100Jobs } from '../../../data/lyonjs100-jobs';
+import { ListOfJobs } from '../../../modules/jobs/ListOfJobs';
+
+# Les Offres d'emploi de ce LyonJS 100
+
+## Nos sponsors recrutent
+
+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.
+
+## Liste des offres d'emploi
+
+<ListOfJobs jobs={lyonjs100Jobs} />

app/lyonjs-100/job-board/page.tsx

@@ -0,0 +1,24 @@
+import { Metadata } from 'next';
+// @ts-ignore
+import Content from './content.mdx';
+
+export const revalidate = 3600;
+const title = "LyonJS | LyonJS 💯 | Offres d'emploi";
+const description = "Les offres d'emploi de nos sponsors pour ce LyonJS 💯";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  twitter: {
+    title,
+    description,
+  },
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+export default function JobBoard() {
+  return <Content />;
+}

data/lyonjs100-jobs.ts

@@ -0,0 +1,27 @@
+import { malt, zenika } from './sponsors';
+import { Job } from '../modules/jobs/jobs.types';
+
+export const lyonjs100Jobs: Array<Job> = [
+  {
+    title: 'Développeur Fullstack',
+    url: 'https://www.zenika.com',
+    sponsor: zenika,
+    type: 'CDI',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet error fuga illum perspiciatis possimus quam, quibusdam recusandae. Culpa dolores est facere ipsum minima molestias neque placeat quam quis. Accusantium, architecto.',
+  },
+  {
+    title: 'Développeur Frontend',
+    url: 'https://www.google.com',
+    sponsor: malt,
+    type: 'CDI',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec nisl',
+  },
+  {
+    title: 'Développeur Backend',
+    url: 'https://www.google.com',
+    sponsor: malt,
+    type: 'CDI',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fus',
+  },
+];

modules/jobs/ListOfJobs.module.css

@@ -0,0 +1,85 @@
+.container {
+  margin-top: 2rem;
+}
+
+.card {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: var(--background-card);
+  margin: auto auto min(4vw, 32px);
+  padding: 16px;
+  border-radius: 12px;
+  align-items: center;
+  gap: 18px;
+  transition:
+    background-color 100ms,
+    border-color 100ms;
+  border: 1px solid transparent;
+  max-width: 800px;
+}
+
+.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: 1rem;
+  align-self: flex-start;
+  color: var(--white-0);
+  min-height: 72px;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.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;
+  }
+}

modules/jobs/ListOfJobs.tsx

@@ -0,0 +1,34 @@
+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';
+
+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>
+              <p className={styles.description}>{job.description}</p>
+              <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) {