👌 IMPROVE: layout

components/Card.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+import styles from '../styles/Card.module.css';
+
+const Card = ({ url, name, pod }) => {
+    const [podClass, setPodClass] = useState(styles.card);
+    useEffect(() => {
+        if (pod === true) {
+            setPodClass(styles.pod);
+        }
+    }, []);
+
+    return (
+        <div className={podClass}>
+            <img src={url} alt={name} />
+            <h3>{name}</h3>
+        </div>
+    );
+};
+
+export default Card;

components/Coding_Crow.js

@@ -0,0 +1,12 @@
+import styles from '../styles/Coding_Crow.module.css';
+
+const Coding_Crow = () => {
+    return (
+        <div className={styles.pod_img}>
+            <img src='/images/logo.png' alt='coding crow' />
+            <h1>Coding Crows</h1>
+        </div>
+    );
+};
+
+export default Coding_Crow;

components/Pod.js

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import Card from './Card';
+import styles from '../styles/Pod.module.css';
+
+const Pod = () => {
+    const [podMembers] = useState([
+        { name: 'Angelina Gasharova', url: '/images/Angelina_Gasharova.jpg' },
+        { name: 'Saad Irfan', url: '/images/saad.jpg' },
+        { name: 'Aneesh Kodali', url: '/images/Aneesh_Kodali.jpeg' },
+        { name: 'Nkosilathi_Tauro', url: '/images/Nkosilathi_Tauro.png' },
+    ]);
+
+    return (
+        <div className={styles.pod_details}>
+            <h2>Meet the pod</h2>
+            <div className={styles.pod_members}>
+                {podMembers.map(member => (
+                    <Card
+                        url={member.url}
+                        name={member.name}
+                        pod={true}
+                        key={Math.floor(Math.random() * 10000)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Pod;

components/Pod_Leader.js

@@ -0,0 +1,13 @@
+import styles from '../styles/Pod_leader.module.css';
+import Card from './Card';
+
+const Pod_Leader = () => {
+    return (
+        <div className={styles.pod_leader}>
+            <h2>Meet our pod leader</h2>
+            <Card url='/images/arsalan.jpg' name='Arslan Khattak' pod='' />
+        </div>
+    );
+};
+
+export default Pod_Leader;

pages/index.js

@@ -1,16 +1,15 @@
 import SEO from '../components/Seo';
-import styles from '../styles/Home.module.css';
+import Pod_Leader from '../components/Pod_Leader';
+import Pod from '../components/Pod';
+import Coding_Crow from '../components/Coding_Crow';
 
 export default function Home() {
     return (
         <>
             <SEO />
-            <div className={styles.main}>
-                <div className={styles.pod_img}>
-                    <img src='/images/logo.png' alt='coding crow' />
-                    <h1>Coding Crows</h1>
-                </div>
-            </div>
+            <Coding_Crow />
+            <Pod_Leader />
+            <Pod />
         </>
     );
 }

styles/Card.module.css

@@ -0,0 +1,53 @@
+.card {
+    width: 300px;
+    height: 400px;
+    margin-top: 50px;
+    border-radius: 5px;
+    box-shadow: #9e9e9e 1px 1px 10px;
+    transition: all 0.5s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #000000;
+}
+
+.card:hover {
+    cursor: pointer;
+    box-shadow: #9e9e9e 1px 1px 40px;
+}
+
+.card img,
+.pod img {
+    width: 250px;
+    height: 250px;
+    border-radius: 200px;
+    margin-top: 30px;
+}
+
+.card h3 {
+    font-size: 1.5rem;
+    color: #ffffff;
+}
+
+.pod {
+    width: 300px;
+    height: 400px;
+    margin: 50px 25px 0px 25px;
+    border-radius: 5px;
+    box-shadow: #ffffff 1px 1px 10px;
+    transition: all 0.5s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #ffffff;
+}
+
+.pod:hover {
+    cursor: pointer;
+    box-shadow: #ffffff 1px 1px 20px;
+}
+
+.pod h3 {
+    font-size: 1.5rem;
+    color: #000000;
+}

styles/Home.module.css → styles/Coding_Crow.module.css

@@ -2,8 +2,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 150px;
+    justify-content: center;
     color: #ffffff;
+    height: 100vh;
+    background-color: #000000;
 }
 
 .pod_img img {
@@ -12,5 +14,5 @@
 
 .pod_img h1 {
     text-transform: uppercase;
-    font-size: 2.5rem;
+    font-size: 3rem;
 }

styles/Pod.module.css

@@ -0,0 +1,20 @@
+.pod_details h2 {
+    font-size: 2.5rem;
+    text-transform: uppercase;
+}
+
+.pod_details {
+    background-color: #000000;
+    color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 50px;
+    padding-bottom: 100px;
+}
+
+.pod_members {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}

styles/Pod_leader.module.css

@@ -0,0 +1,12 @@
+.pod_leader {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 50px;
+}
+
+.pod_leader h2 {
+    font-size: 2.5rem;
+    text-transform: uppercase;
+}

styles/globals.css

@@ -4,7 +4,6 @@ body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
         Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    background-color: black;
 }
 
 a {