Frontend: homepage implemented

client/src/index.css

@@ -4,14 +4,12 @@
 
 @font-face {
 	font-family: 'BalooBhai';
-	src: url('/src/assets/fonts/BalooBhai-Regular.ttf') 
-  format('truetype');
+	src: url('/src/assets/fonts/BalooBhai-Regular.ttf') format('truetype');
 }
 
 @font-face {
 	font-family: 'Montserrat';
-	src: url('/src/assets/fonts/Montserrat-Regular.ttf') 
-  format('truetype');
+	src: url('/src/assets/fonts/Montserrat-Regular.ttf') format('truetype');
 }
 
 :root {
@@ -31,3 +29,9 @@
 	-webkit-text-size-adjust: 100%;
 }
 
+body {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	margin: 0px;
+}

client/src/layout/GlobalTopbar.jsx

@@ -16,21 +16,21 @@ const GlobalTopbar = () => {
 				{/* <!-- menu --> */}
 				<div className='flex items-center'>
 					<ul className='flex'>
-						<li className='mx-2 font-Montserrat'>
+						<li className='mx-2 hidden md:block font-Montserrat'>
 							<Button className='text-primary' variant='outlined'>
 								Login
 							</Button>
 						</li>
-						<li className='mr-2 hidden md:block '>
+						<li className='mr-2 hidden md:block'>
 							<Button className='text-primary' variant='outlined'>
 								Signup
 							</Button>
 						</li>
-						<li className='mr-2 hidden md:block '>
+						{/* <li className='mr-2 hidden md:block '>
 							<Button variant='outlined' size='medium'>
 								<FaHome className='mr-1' /> Home
 							</Button>
-						</li>
+						</li> */}
 
 						<li className='ml-1'>
 							<Button variant='text'>

client/src/pages/global/index.jsx

@@ -1,7 +1,67 @@
-import GlobalTopbar from '../../layout/GlobalTopbar';
+import GlobalTopbar from "../../layout/GlobalTopbar";
+
+import appleStoreImg from "../../assets/apple_store.svg";
+import playStoreImg from "../../assets/play_store.svg";
+import contentImg from "../../assets/content.svg";
 
 const Index = () => {
-	return <GlobalTopbar />;
+  return (
+    <>
+      <GlobalTopbar />
+			{/* Main Body */}
+      <div className="container mx-auto w-4/5 mt-20 font-Montserrat mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-4 md:gap-x-40">
+          <div className="text-center">
+            <h1 className="text-left text-5xl md:text-7xl font-bold">
+              Make Learning
+              <br />
+              Fun!
+            </h1>
+          </div>
+          {/* content image */}
+          <div className="row-span-4 mt-8 pr-9">
+            <img
+              src={contentImg}
+              alt="content"
+            />
+          </div>
+          <div className="row-span-2 pt-9 md:pt-6">
+            <p className="text-2xl">
+              Where your instructor knows the best{" "}
+              <br className="hidden md:inline-block" />
+              way to make you understand.
+            </p>
+            <button className="mt-14 rounded-md bg-primary px-14 py-3 text-white text-lg font-bold">
+              Sign up for free
+            </button>
+          </div>
+          {/* play store and apple store buttons */}
+          <div className="mb-4 mt-12 sm:mt-0">
+            <p className="mb-4 text-lg">Or download the app:</p>
+            <div className="flex flex-row w-4/5">
+              <img src={playStoreImg} alt="google-play" />
+              <img className="" src={appleStoreImg} alt="google-play" />
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Footer */}
+      <div className="mt-auto w-full text-center font-Montserrat">
+        <ul className="flex flex-row flex-wrap justify-center">
+          <li className="px-4 text-lg">
+            <a href="/privacy-policy">Privacy Policy</a>
+          </li>
+          <li className="px-4 text-lg">
+            <a href="/terms-conditions.html">Terms &amp; Conditions</a>
+          </li>
+          <li className="px-4 text-lg">
+            <a href="/about">About</a>
+          </li>
+        </ul>
+        <p className="mt-3">aether © 2021</p>
+      </div>
+    </>
+  );
 };
 
 export default Index;