diff --git a/app/page.tsx b/app/page.tsx
index 5878640..62086e3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,8 @@
+import {Contact} from '../src/components/landing/contact/Contact';
import {Footer} from '../src/components/landing/footer/Footer';
import {Header} from '../src/components/landing/header/Header';
import {Story} from '../src/components/landing/story/Story';
+import {Team} from '../src/components/landing/team/Team';
import styles from './page.module.css';
export default function Home() {
@@ -9,6 +11,8 @@ export default function Home() {
+
+
>
diff --git a/public/illustrations/contact/illustration.svg b/public/illustrations/contact/illustration.svg
new file mode 100644
index 0000000..2140662
--- /dev/null
+++ b/public/illustrations/contact/illustration.svg
@@ -0,0 +1,307 @@
+
diff --git a/public/illustrations/team/boyadijan.png b/public/illustrations/team/boyadijan.png
new file mode 100644
index 0000000..ab7a4e6
Binary files /dev/null and b/public/illustrations/team/boyadijan.png differ
diff --git a/public/illustrations/team/kompaore.png b/public/illustrations/team/kompaore.png
new file mode 100644
index 0000000..d97402a
Binary files /dev/null and b/public/illustrations/team/kompaore.png differ
diff --git a/public/illustrations/team/laville.jpeg b/public/illustrations/team/laville.jpeg
new file mode 100644
index 0000000..c7e9cc3
Binary files /dev/null and b/public/illustrations/team/laville.jpeg differ
diff --git a/public/illustrations/team/moreau.png b/public/illustrations/team/moreau.png
new file mode 100644
index 0000000..1e77914
Binary files /dev/null and b/public/illustrations/team/moreau.png differ
diff --git a/public/illustrations/team/sermet.jpeg b/public/illustrations/team/sermet.jpeg
new file mode 100644
index 0000000..fddfee7
Binary files /dev/null and b/public/illustrations/team/sermet.jpeg differ
diff --git a/src/components/landing/contact/Contact.tsx b/src/components/landing/contact/Contact.tsx
new file mode 100644
index 0000000..38f3297
--- /dev/null
+++ b/src/components/landing/contact/Contact.tsx
@@ -0,0 +1,29 @@
+import Image from 'next/image';
+
+import {contactData} from '../../../data/landingPageContact';
+import {PrimaryButton} from '../../buttons/PrimaryButton';
+import styles from './contact.module.css';
+
+export const Contact = () => {
+ const imgUrl = contactData.illustration.imgUrl;
+ const textData = contactData.text;
+ return (
+
+ );
+};
diff --git a/src/components/landing/contact/contact.module.css b/src/components/landing/contact/contact.module.css
new file mode 100644
index 0000000..8cc48fa
--- /dev/null
+++ b/src/components/landing/contact/contact.module.css
@@ -0,0 +1,45 @@
+.contact {
+ height: 800px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 100px;
+
+ h1 {
+ margin-bottom: 50px;
+ text-align: center;
+ }
+
+ .contactContent {
+ height: 700px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ }
+ @media (max-width: 768px) {
+ .contactContent {
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ height: 500px;
+ }
+ }
+
+ img {
+ width: 675px;
+ height: 450px;
+ }
+ @media (max-width: 768px) {
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+
+ .textContainer {
+ width: 30%;
+ min-width: 400px;
+ }
+}
diff --git a/src/components/landing/team/Member.tsx b/src/components/landing/team/Member.tsx
new file mode 100644
index 0000000..c26e833
--- /dev/null
+++ b/src/components/landing/team/Member.tsx
@@ -0,0 +1,55 @@
+'use client';
+import {useEffect, useState} from 'react';
+
+import Image from 'next/image';
+
+import styles from './member.module.css';
+
+type MemberTypes = {
+ name: string;
+ post: string;
+ profilePicture: string;
+};
+
+export const Member = ({name, post, profilePicture}: MemberTypes) => {
+ const [vw, setVw] = useState(0);
+ const [memberSideLenght, setMemberSideLenght] = useState(0);
+
+ useEffect(() => {
+ const handleResize = () => {
+ const newVw = Math.max(
+ document.documentElement.clientWidth || 0,
+ window.innerWidth || 0,
+ );
+ setVw(newVw);
+ if (newVw < 768) {
+ setMemberSideLenght(newVw / 2);
+ } else {
+ setMemberSideLenght(newVw / 5);
+ }
+ };
+
+ handleResize();
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+ return (
+
+ );
+};
diff --git a/src/components/landing/team/Team.tsx b/src/components/landing/team/Team.tsx
new file mode 100644
index 0000000..a64a4e4
--- /dev/null
+++ b/src/components/landing/team/Team.tsx
@@ -0,0 +1,23 @@
+import {teamData} from '../../../data/landingPageTeam';
+import {Member} from './Member';
+import styles from './team.module.css';
+
+export const Team = () => {
+ return (
+
+ l’équipe uncover
+
+ {teamData.map(({nom, prenom, post, profilePicture}, id) => {
+ return (
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/components/landing/team/member.module.css b/src/components/landing/team/member.module.css
new file mode 100644
index 0000000..a3b2e5c
--- /dev/null
+++ b/src/components/landing/team/member.module.css
@@ -0,0 +1,28 @@
+.member {
+ position: relative;
+ transition: 0.5s;
+}
+.member::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(to top, #1c1d1c7d, #1c1d1c00);
+ z-index: 1;
+}
+
+.textOverlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: white;
+ z-index: 2;
+}
+
+.name {
+ font-weight: bold;
+}
diff --git a/src/components/landing/team/team.module.css b/src/components/landing/team/team.module.css
new file mode 100644
index 0000000..96bc5a1
--- /dev/null
+++ b/src/components/landing/team/team.module.css
@@ -0,0 +1,24 @@
+.team {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 450px;
+ background-color: #ecf7f4;
+
+ h1 {
+ margin-bottom: 50px;
+ }
+ .membersContainer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ }
+ @media (max-width: 768px) {
+ .membersContainer {
+ flex-wrap: wrap;
+ width: 100vw;
+ justify-content: center;
+ }
+ }
+}
diff --git a/src/data/landingPageContact.ts b/src/data/landingPageContact.ts
new file mode 100644
index 0000000..d021552
--- /dev/null
+++ b/src/data/landingPageContact.ts
@@ -0,0 +1,24 @@
+export const contactData = {
+ illustration: {
+ description: 'Image (illustration) for product component',
+ imgUrl: '/illustrations/contact/illustration.svg',
+ },
+ text: {
+ description: 'Text data for product component',
+ title: 'NOUS CONTACTER',
+ content: [
+ {
+ description: 'First paragraph of the text',
+ text: 'A terme, nous souhaitons permettre à tous nos utilisateurs de voyager partout dans le monde avec notre application.',
+ },
+ {
+ description: 'Second paragraph of the text',
+ text: 'Chez Uncover, nous sommes à votre écoute ! Une suggestion, une remarque, un avis ? Contactez nous !',
+ },
+ {
+ description: 'Third paragraph of the text',
+ text: 'L’application UnVoy bientôt disponible pour tous vos voyages au Japon.',
+ },
+ ],
+ },
+};
diff --git a/src/data/landingPageTeam.ts b/src/data/landingPageTeam.ts
new file mode 100644
index 0000000..e57254c
--- /dev/null
+++ b/src/data/landingPageTeam.ts
@@ -0,0 +1,32 @@
+export const teamData = [
+ {
+ nom: 'Kompaore',
+ prenom: 'Relba',
+ post: 'Directrice artistique',
+ profilePicture: '/illustrations/team/kompaore.png',
+ },
+ {
+ nom: 'Moreau',
+ prenom: 'Souleman',
+ post: 'Développeur fullstack',
+ profilePicture: '/illustrations/team/moreau.png',
+ },
+ {
+ nom: 'Boyadijan',
+ prenom: 'Emeric',
+ post: 'Lead développeur / Scrum master',
+ profilePicture: '/illustrations/team/boyadijan.png',
+ },
+ {
+ nom: 'Sermet',
+ prenom: 'Elodie',
+ post: 'Product owner / Webdesigner',
+ profilePicture: '/illustrations/team/sermet.jpeg',
+ },
+ {
+ nom: 'Laville',
+ prenom: 'Andrea',
+ post: 'Webdesigner',
+ profilePicture: '/illustrations/team/laville.jpeg',
+ },
+];