deleting unsued layouts and adding CaseCards

components/CaseCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./modules/CaseCard.module.css";
+
+export default function CaseCard(props) {
+  const study = props.study;
+
+  return (
+    <div className={styles.container}>
+      <img
+        className={`${styles.cover}`}
+        src={props.study.cover}
+        alt="The one and only bongo cat!"
+      />
+      <div className={styles.cardInfo}>
+        <b className={styles.title}>{study.title}</b>
+        <p className={styles.description}>{study.short_description}</p>
+        <b>{study.date}</b>
+      </div>
+    </div>
+  );
+}
+
+CaseCard.propTypes = {
+  study: PropTypes.object.isRequired,
+};

components/CaseSection.js

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React from "react";
+import styles from "./modules/CaseSection.module.css";
+import Section from "./Section";
+import CaseCard from "./CaseCard";
+
+export default function CaseSection(props) {
+  return (
+    <Section>
+      <div className={styles.bg} />
+      <div className={styles.content}>
+        <h1 className={styles.title}>Case Studies</h1>
+        <div className={styles.cardRow}>
+          {props.caseStudies.map((study) => (
+            <CaseCard key={study.title} study={props.caseStudies[0]} />
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+CaseSection.propTypes = {
+  caseStudies: PropTypes.arrayOf(PropTypes.object).isRequired,
+};

components/HomeSection.js

@@ -0,0 +1,33 @@
+import PropTypes from "prop-types";
+import React from "react";
+import Avatar from "../components/Avatar";
+import Infos from "../components/Infos";
+import Presentation from "../components/Presentation";
+import styles from "./modules/HomeSection.module.css";
+import Section from "./Section";
+
+export default function HomeSection(props) {
+  const person = props.person;
+  return (
+    <Section>
+      <div className={styles.bg} />
+
+      <div className={styles.flexCenter}>
+        <div className={styles.container}>
+          <Presentation
+            firstName={person.firstName}
+            lastName={person.lastName}
+            description={person.description}
+          />
+          <Avatar />
+
+          <Infos infos={person.infos} />
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+HomeSection.propTypes = {
+  person: PropTypes.object.isRequired,
+};

components/HorizontalSection.js

@@ -1,16 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import styles from "./modules/HorizontalSection.module.css";
-
-export default function HorizontalSection(props) {
-  return (
-    <section className={"wrapper"} {...props}>
-      <div className={styles.bg} />
-      {props.children}
-    </section>
-  );
-}
-
-HorizontalSection.propTypes = {
-  children: PropTypes.node.isRequired,
-};

components/Layout.js

@@ -1,29 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styles from "./modules/Layout.module.css";
-
-export default function Layout(props) {
-  const childrenArray = React.Children.toArray(props.children);
-  let gridItems = [];
-  let otherChild = [];
-  for (let i in childrenArray) {
-    if (i <= 1) {
-      gridItems.push(childrenArray[i]);
-    } else {
-      otherChild.push(childrenArray[i]);
-    }
-  }
-  return (
-    <div className={styles.grid}>
-      <div className={styles.gridItem}>{gridItems[0]}</div>
-      <div className={`${styles.gridItem} ${styles.darkbg}`}>
-        {gridItems[1]}
-      </div>
-      {otherChild}
-    </div>
-  );
-}
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-};

components/modules/Avatar.module.css

@@ -4,12 +4,8 @@
 }
 
 .absolute {
-  position: absolute;
+  width: 256px;
-
+  height: 256px;
-  max-width: 256px;
-  max-height: 256px;
-  top: calc(50vh - 128px);
-  left: calc(50vw - 128px);
 }
 
 @media screen and (max-width: 1440px) {

components/modules/CaseCard.module.css

@@ -0,0 +1,25 @@
+.container {
+  height: 100%;
+  border-radius: 16px;
+  background-color: var(--lightDark);
+  overflow: hidden;
+}
+
+.cover {
+  height: 198px;
+  width: 100%;
+}
+
+.cardInfo {
+  padding: 2rem;
+}
+
+.title {
+  font-size: 1.25em;
+}
+
+.description {
+  width: auto;
+  max-width: 320px;
+  margin: 1rem 0;
+}

components/modules/CaseSection.module.css

@@ -0,0 +1,34 @@
+.content {
+  height: 100%;
+
+  position: relative;
+  z-index: 1;
+
+  padding: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.title {
+  color: var(--primary);
+
+  margin-bottom: 8rem;
+}
+
+.cardRow {
+  width: 100%;
+
+  align-self: center;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+@media screen and (max-width: 1280px) {
+  .cardRow {
+    flex-direction: column;
+  }
+}

components/modules/HomeSection.module.css

@@ -0,0 +1,24 @@
+.bg {
+  position: absolute;
+  right: 0%;
+  width: 50vw;
+  height: 100%;
+  background-color: var(--lightDark);
+}
+
+.flexCenter {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+}

components/modules/HorizontalSection.module.css

@@ -1,6 +0,0 @@
-.bg {
-  position: absolute;
-  width: 100%;
-  height: 50vh;
-  background-color: var(--lightDark);
-}

components/modules/Layout.module.css

@@ -1,18 +0,0 @@
-.grid {
-  position: relative;
-  display: grid;
-  width: 100%;
-  height: inherit;
-  grid-template-columns: 1fr 1fr;
-}
-
-.gridItem {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.darkbg {
-  background-color: var(--lightDark);
-}

pages/index.js

@@ -1,10 +1,6 @@
 import Head from "next/head";
-import Layout from "../components/Layout";
+import HomeSection from "../components/HomeSection";
-import Section from "../components/Section";
+import CaseSection from "../components/CaseSection";
-import Presentation from "../components/Presentation";
-import Infos from "../components/Infos";
-import Avatar from "../components/Avatar";
-import HorizontalSection from "../components/HorizontalSection";
 
 export default function Home({ person, caseStudies }) {
   return (
@@ -14,21 +10,9 @@ export default function Home({ person, caseStudies }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Section>
+      <HomeSection person={person} />
-        <Layout>
-          <Presentation
-            firstName={person.firstName}
-            lastName={person.lastName}
-            description={person.description}
-          />
-          <Infos infos={person.infos} />
-          <Avatar />
-        </Layout>
-      </Section>
 
-      <HorizontalSection>
+      <CaseSection caseStudies={caseStudies} />
-        <div>Lol</div>
-      </HorizontalSection>
     </div>
   );
 }
@@ -64,21 +48,21 @@ export async function getStaticProps() {
       short_description:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
       date: "June 12, 2020",
-      cover: "/public/images/bongo.svg",
+      cover: "/images/bongo.png",
     },
     {
       title: "Doodle",
       short_description:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
       date: "June 12, 2020",
-      cover: "/public/images/bongo.svg",
+      cover: "/images/bongo.png",
     },
     {
       title: "Poodle",
       short_description:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
       date: "June 12, 2020",
-      cover: "/public/images/bongo.svg",
+      cover: "/images/bongo.png",
     },
   ];
 

styles/global.css

@@ -56,6 +56,8 @@ p {
   font-style: normal;
   font-size: 1em;
   color: var(--light);
+
+  line-height: 1.35;
 }
 
 a,