Merge pull request #34 from Boyadjie/landing-team-contact

feat(landingPage): team & contact

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() {
       <Header />
       <main className={styles.main}>
         <Story />
+        <Team />
+        <Contact />
       </main>
       <Footer />
     </>

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 (
+    <section className={styles.contact} id="contact">
+      <h1>{textData.title}</h1>
+      <div className={styles.contactContent}>
+        <Image src={imgUrl} alt="illustration" width={675} height={450} />
+        <div className={styles.textContainer}>
+          {textData.content.map(({text}, id) => {
+            return (
+              <>
+                <p key={`contact-${id + 1}`}>{text}</p>
+                <br />
+              </>
+            );
+          })}
+          <PrimaryButton url="/Acceuil">Je veux l'application</PrimaryButton>
+        </div>
+      </div>
+    </section>
+  );
+};

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;
+  }
+}

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 (
+    <div
+      className={styles.member}
+      style={{width: `${memberSideLenght}px`, height: `${memberSideLenght}px`}}
+    >
+      <div className={styles.textOverlay}>
+        <p className={styles.name}>{name}</p>
+        <p>{post}</p>
+      </div>
+      <Image
+        src={profilePicture}
+        alt={`${name} profile picture`}
+        fill={true}
+        sizes="(max-width: 768px) 100vw, 33vw"
+      />
+    </div>
+  );
+};

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 (
+    <section className={styles.team}>
+      <h1>l’équipe uncover</h1>
+      <div className={styles.membersContainer} id="team">
+        {teamData.map(({nom, prenom, post, profilePicture}, id) => {
+          return (
+            <Member
+              key={`story-${id + 1}`}
+              name={`${nom} ${prenom}`}
+              post={post}
+              profilePicture={profilePicture}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+};

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;
+}

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;
+    }
+  }
+}

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.',
+      },
+    ],
+  },
+};

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',
+  },
+];