implements FE listing cards

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true
+  reactStrictMode: true,
+  images: {
+    domains: ['images.pexels.com', 'fonts.googleapis.com'],
+  },
 }
 
 module.exports = nextConfig

src/components/Card.tsx

@@ -0,0 +1,63 @@
+import { FC, ReactElement } from 'react'
+import Image from 'next/image'
+
+interface CardProps {
+  title: string
+  date: string
+  imgSrc: string
+  children: ReactElement | ReactElement[]
+  order?: Number
+  bgClass?: string
+  textClass?: string
+  colSpan?: Number
+  rowSpan?: Number
+}
+
+const Card: FC<CardProps> = ({
+  title,
+  date,
+  imgSrc,
+  order = 1,
+  children,
+  bgClass = 'bg-indigo-600',
+  textClass = 'text-white',
+  colSpan = 1,
+  rowSpan = 1,
+}) => (
+  <div
+    className={`${bgClass} lg:order-${order} ${textClass} lg:row-span-${rowSpan} 2xl:row-span-${rowSpan} lg:col-span-${colSpan} rounded-lg shadow-xl mb-5 lg:mb-0`}
+  >
+    <div className="mx-6 my-8 2xl:mx-10">
+      <div className="w-8 md:w-9 relative lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 ml-1 lg:ml-3 2xl:ml-0 md:-mt-1 2xl:-mt-4">
+        <Image
+          alt={title}
+          className="rounded-full"
+          layout="fill"
+          src={imgSrc}
+        />
+      </div>
+
+      <h1 className="text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-20 2xl:mx-8">
+        5 min read
+      </h1>
+      <h2
+        className={`${textClass} text-opacity-50 text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 2xl:my-2 2xl:mx-8`}
+      >
+        {date}
+      </h2>
+    </div>
+    <div className="-mt-6 relative">
+      <h2 className="text-xl 2xl:text-4xl font-bold px-7 lg:px-9 2xl:pt-6 2xl:mx-2">
+        {title}
+      </h2>
+      <br />
+      <div
+        className={`${textClass} text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-7 lg:px-9 mb-3 2xl:pb-8 2xl:mx-2`}
+      >
+        {children}
+      </div>
+    </div>
+  </div>
+)
+
+export default Card

src/components/Layout.tsx

@@ -15,11 +15,11 @@ const Layout: FC<LayoutProps> = ({ children }) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <header>
+      <header className=" w-1/12 relative">
         <Navbar />
       </header>
 
-      <main className="min-h-screen grid place-content-center">{children}</main>
+      <main className="h-screen w-11/12">{children}</main>
 
       <footer className=""></footer>
     </>

src/components/Navbar.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import Link from 'next/link'
 
 const Navbar: FC = () => (
-  <nav className="bg-nature-dark text-nature-light z-20 fixed flex flex-col items-center h-screen top-0 left-0">
+  <nav className="bg-nature-dark w-1/12 text-nature-light z-20 fixed flex flex-col items-center h-screen top-0 left-0">
     <div className="mb-6 mt-2">
       <img
         className="rounded-full w-8 h-8"

src/pages/index.tsx

@@ -1,16 +1,118 @@
 // import Head from "next/head"
-import { useAuth } from '../context/AuthContext'
 import { NextPage } from 'next'
+import Card from '../components/Card'
 
 const Home: NextPage = () => {
-  const { user } = useAuth()
-
   return (
-    <>
-      <h1 className="text-3xl font-bold">
-        Hello {user ? (user as any).attributes.email : 'world!'}!
+    <div className="flex flex-col h-full content-start gap-2">
+      <h1 className="h-2/12 text-3xl font-bold mt-2 place-self-center">
+        Selam 👋
       </h1>
-    </>
+      <div className="h-10/12 grid gap-4 p-4">
+        <Card
+          title="I received a job offer mid-course, and the subjects I learned were
+        current, if not more so, in the company I joined. I honestly feel I got
+        every penny’s worth."
+          order={1}
+          imgSrc={
+            'https://images.pexels.com/photos/3775534/pexels-photo-3775534.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+          }
+          date={'12 days ago'}
+          colSpan={2}
+        >
+          <p>
+            “ I was an EMT for many years before I joined the bootcamp. I’ve
+            been looking to make a transition and have heard some people who had
+            an amazing experience here. I signed up for the free intro course
+            and found it incredibly fun! I enrolled shortly thereafter. The next
+            12 weeks was the best - and most grueling - time of my life. Since
+            completing the course, I’ve successfully switched careers, working
+            as a Software Engineer at a VR startup. ”
+          </p>
+        </Card>
+
+        <Card
+          title="The team was very supportive and kept me motivated"
+          order={2}
+          imgSrc={
+            'https://images.pexels.com/photos/634021/pexels-photo-634021.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+          }
+          date={'12 days ago'}
+          bgClass="bg-gray-900"
+        >
+          <p>
+            “ I started as a total newbie with virtually no coding skills. I now
+            work as a mobile engineer for a big company. This was one of the
+            best investments I’ve made in myself. ”
+          </p>
+        </Card>
+
+        <Card
+          title="An overall wonderful and rewarding experience"
+          order={3}
+          imgSrc={
+            'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+          }
+          date={'2 days ago'}
+          bgClass="bg-white"
+          textClass="text-black"
+          rowSpan={2}
+        >
+          <p>
+            “ Thank you for the wonderful experience! I now have a job I really
+            enjoy, and make a good living while doing something I love. ”
+          </p>
+        </Card>
+
+        <Card
+          title="Awesome teaching support from TAs who did the bootcamp themselves.
+              Getting guidance from them and learning from their experiences was
+              easy."
+          order={4}
+          imgSrc={
+            'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+          }
+          date={'3 days ago'}
+          bgClass="bg-purple-800"
+          textClass="text-white"
+          rowSpan={2}
+          colSpan={2}
+        >
+          <p>
+            “ The staff seem genuinely concerned about my progress which I find
+            really refreshing. The program gave me the confidence necessary to
+            be able to go out in the world and present myself as a capable
+            junior developer. The standard is above the rest. You will get the
+            personal attention you need from an incredible community of lgart
+            and amazing people. ”
+          </p>
+        </Card>
+
+        <Card
+          title="Such a life-changing experience. Highly recommended!"
+          order={2}
+          imgSrc={
+            'https://images.pexels.com/photos/3762804/pexels-photo-3762804.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
+          }
+          date={'3 days ago'}
+          bgClass="bg-white"
+          textClass="text-black"
+          rowSpan={4}
+        >
+          <p>
+            “ Before joining the bootcamp, I’ve never written a line of code. I
+            needed some structure from professionals who can help me learn
+            programming step by step. I was encouraged to enroll by a former
+            student of theirs who can only say wonderful things about the
+            program. The entire curriculum and staff did not disappoint. They
+            were very hands-on and I never had to wait long for assistance. The
+            agile team project, in particular, was outstanding. It certainly
+            helped me land a job as a full-stack developer after receiving
+            multiple offers. 100% recommend! ”
+          </p>
+        </Card>
+      </div>
+    </div>
   )
 }
 

styles/globals.css

@@ -1,3 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');
+
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+html, body {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    font-family: 'Barlow Semi Condensed', sans-serif;
+}
+
+main {
+    margin-left: calc(100vw/12);
+}

tailwind.config.js

@@ -1,19 +1,22 @@
 module.exports = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx}",
-    "./src/components/**/*.{js,ts,jsx,tsx}",
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {
       colors: {
         nature: {
-          darker: "#252626",
-          dark: "#35403A",
-          medium: "#4C594F",
-          light: "#A4A69C",
-          lighter: "#BFBFB8",
+          darker: '#252626',
+          dark: '#35403A',
+          medium: '#4C594F',
+          light: '#A4A69C',
+          lighter: '#BFBFB8',
         },
       },
+      fontFamily: {
+        'press-start': ['Barlow Semi Condensed', 'sans-serif'],
+      },
     },
   },
   plugins: [],