reviews

app/lyonjs-100/content.mdx

@@ -6,7 +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 { Gift } from '../../modules/icons/Gift';
+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="" />
@@ -54,16 +55,16 @@ Certains de nos sponsors seront présents durant la journée, n'hésitez pas à
 
 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} />
 
+## 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

@@ -1,21 +1,22 @@
 import { malt, zenika } from './sponsors';
+import { kolecto, fulll, _365talents } from './lyonjs100-sponsors';
 import { Job } from '../modules/jobs/jobs.types';
 
-export const lyonjs100Jobs: Array<Job> = [
+/** 3 jobs max per gold sponsors */
+const goldSponsorJobs: Array<Job> = [
   {
-    title: 'Développeur Fullstack',
-    url: 'https://www.zenika.com',
-    sponsor: zenika,
+    title: 'Développeur Frontend',
+    url: 'https://www.google.com',
+    sponsor: malt,
     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.',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec nisl',
   },
   {
-    title: 'Développeur Frontend',
+    title: 'Développeur Backend',
     url: 'https://www.google.com',
     sponsor: malt,
     type: 'CDI',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec nisl',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fus',
   },
   {
     title: 'Développeur Backend',
@@ -24,4 +25,47 @@ export const lyonjs100Jobs: Array<Job> = [
     type: 'CDI',
     description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fus',
   },
+  {
+    title: 'Développeur Backend',
+    url: 'https://www.google.com',
+    sponsor: kolecto,
+    type: 'CDI',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fus',
+  },
+  {
+    title: 'Développeur Backend',
+    url: 'https://www.google.com',
+    sponsor: kolecto,
+    type: 'CDI',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fus',
+  },
+  {
+    title: 'Développeur Backend',
+    url: 'https://www.google.com',
+    sponsor: fulll,
+    type: 'CDI',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fus',
+  },
+];
+
+/** 1 job max per silver sponsors */
+const silverSponsorJobs: 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 Fullstack',
+    url: 'https://www.zenika.com',
+    sponsor: _365talents,
+    type: 'Stage',
+    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.',
+  },
 ];
+
+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',
-  },
-];
-
-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' },
-];
+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

@@ -1,13 +1,15 @@
 .container {
-  margin-top: 2rem;
+  gap: 2rem;
+  display: grid;
+  grid-template-columns: 1fr;
 }
 
 .card {
   display: flex;
   position: relative;
   flex-direction: column;
   background: var(--background-card);
-  margin: auto auto min(4vw, 32px);
+  margin: auto;
   padding: 16px;
   border-radius: 12px;
   align-items: center;
@@ -83,3 +85,9 @@
     display: none;
   }
 }
+
+@media screen and (min-width: 956px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+}