From 0355cd96892b12e7447b5876b4c15f45127aaaab Mon Sep 17 00:00:00 2001
From: Jesse Egbosionu <j3bsie@gmail.com>
Date: Thu, 29 Apr 2021 10:32:58 +0100
Subject: [PATCH] Feat - add main section

---
 components/main/Main.js                     |  7 ++++++
 components/main/main.module.css             |  4 ++++
 components/navigation/navigation.module.css |  4 ++--
 pages/index.js                              | 25 ++++++++++++---------
 4 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 components/main/Main.js
 create mode 100644 components/main/main.module.css

diff --git a/components/main/Main.js b/components/main/Main.js
new file mode 100644
index 0000000..82a84fd
--- /dev/null
+++ b/components/main/Main.js
@@ -0,0 +1,7 @@
+import mainStyles from './main.module.css';
+
+const Main = ({ children }) => {
+  return <main className={mainStyles.site__main}>{children}</main>;
+};
+
+export default Main;
diff --git a/components/main/main.module.css b/components/main/main.module.css
new file mode 100644
index 0000000..89ccaf6
--- /dev/null
+++ b/components/main/main.module.css
@@ -0,0 +1,4 @@
+.site__main {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/components/navigation/navigation.module.css b/components/navigation/navigation.module.css
index 05c959f..31e793c 100644
--- a/components/navigation/navigation.module.css
+++ b/components/navigation/navigation.module.css
@@ -1,5 +1,5 @@
 .site__header {
-  padding: 20px 0;
+  margin: 60px 0;
 }
 
 .site__navbar {
@@ -13,5 +13,5 @@
 }
 
 .site__navbar li:not(:last-child) {
-  padding-right: 10px;
+  margin-right: 30px;
 }
diff --git a/pages/index.js b/pages/index.js
index 28171e9..1b1d900 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,9 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import Header from '../components/navigation/Header';
+import Main from '../components/main/Main';
 import NavBar from '../components/navigation/NavBar';
+
 export default function Home() {
   return (
     <div className="container">
@@ -12,16 +14,19 @@ export default function Home() {
       <Header>
         <NavBar />
       </Header>
-      <main>
-        <h2>Hi I'm Jesse</h2>
-        <Image
-          src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
-          width={468}
-          height={468}
-          // className={styles.hero__img}
-        />
-        <p>I'm a software engineer from Lagos, Nigeria</p>
-      </main>
+      <Main>
+        <aside>
+          <h2 style={{ fontWeight: 300 }}>Hi I'm Jesse</h2>
+          <p>I'm a software engineer from Lagos, Nigeria</p>
+        </aside>
+        <aside>
+          <Image
+            src="https://res.cloudinary.com/dqfjoblug/image/upload/v1619192037/site__hero_rg5gzv.jpg"
+            width={468}
+            height={468}
+          />
+        </aside>
+      </Main>
     </div>
   );
 }