nickovchinnikov · nickovchinnikov · Apr 12, 2022 · Apr 12, 2022
diff --git a/README.md b/README.md
@@ -114,3 +114,8 @@
 ### Course component refactoring
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/23)
+
+### Home page
+### Home page part 2
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/24)
diff --git a/components/Layout/Layout.test.tsx b/components/Layout/Layout.test.tsx
@@ -16,7 +16,11 @@ describe("Layout test cases", () => {
   );
 
   it("Render check", () => {
-    const { asFragment } = render(<Layout>{child}</Layout>);
+    const { asFragment } = render(
+      <Layout isDark onThemeToggle={() => undefined}>
+        {child}
+      </Layout>
+    );
 
     expect(asFragment()).toMatchSnapshot();
   });

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -14,42 +14,47 @@ const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.background};
   padding: 0.5rem;
   grid-template-areas:
-    "header"
-    "nav"
-    "search"
-    "content"
-    "footer";
+    "header  nav"
+    "search  search"
+    "content content"
+    "footer  footer";
+  nav {
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 5vmin;
+  }
   @media (min-width: 500px) {
     grid-template-columns: 1fr 3fr;
-    grid-template-areas:
-      "header  search"
-      "nav     nav"
-      "content content"
-      "footer  footer";
-    nav {
-      flex-direction: row;
-      justify-content: space-between;
-    }
   }
-  @media (min-width: 700px) {
+  @media (min-width: 960px) {
     grid-template-columns: 1fr 4fr 2fr;
     grid-template-areas:
       "header  search  nav"
       "content content content"
       "footer  footer  footer";
-    nav {
-      flex-direction: row;
-    }
   }
 `;
 
+const LogoLink = styled(StyledLink)`
+  padding-right: 1vw;
+`;
+
 const StyledLogo = styled(Logo)`
   grid-area: header;
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   height: 4rem;
-  @media (max-width: 500px) {
-    justify-content: center;
+  & .logo_full {
+    display: none;
+  }
+  @media (min-width: 560px) {
+    & .logo_short {
+      display: none;
+    }
+    & .logo_full {
+      display: inline;
+    }
   }
 `;
 
@@ -58,7 +63,7 @@ const MainNav = styled.nav`
   display: flex;
   justify-content: space-around;
   align-items: center;
-  padding: 0.5rem;
+  margin: 0 2vmin;
   a {
     cursor: pointer;
     color: ${({ theme }) => theme.font.regular};
@@ -95,9 +100,12 @@ type Props = {
 export const Layout: FC<Props> = ({ children, isDark, onThemeToggle }) => (
   <Wrapper>
     <Link href="/" passHref>
-      <StyledLink>
-        <StyledLogo size={3}>C8X</StyledLogo>
-      </StyledLink>
+      <LogoLink>
+        <StyledLogo size={3}>
+          <span className="logo_short">C8X</span>
+          <span className="logo_full">CoursesBox</span>
+        </StyledLogo>
+      </LogoLink>
     </Link>
     <MainNav>
       <Link href="/all">All</Link>

diff --git a/components/Layout/__snapshots__/Layout.test.tsx.snap b/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -3,21 +3,30 @@
 exports[`Layout test cases Render check 1`] = `
 <DocumentFragment>
   <div
-    class="css-9q9p2w"
+    class="css-u0jlnf"
   >
     <a
-      class="css-8q5j4o"
+      class="css-1oh0t5x"
       href="/"
     >
       <header
-        class="css-1he53g1"
+        class="css-rq0vky"
         size="3"
       >
-        C8X
+        <span
+          class="logo_short"
+        >
+          C8X
+        </span>
+        <span
+          class="logo_full"
+        >
+          CoursesBox
+        </span>
       </header>
     </a>
     <nav
-      class="css-gfwwxb"
+      class="css-kkkasr"
     >
       <a
         href="/all"
@@ -31,22 +40,23 @@ exports[`Layout test cases Render check 1`] = `
       </a>
       <button
         class="css-15xqhy1"
-        title="Sun"
+        title="Moon"
       >
         <svg
-          aria-label="Sun"
+          aria-label="Moon"
           class="css-z3g3v6"
-          fill="none"
+          fill="currentColor"
           height="1rem"
           role="img"
           viewBox="0 0 24 24"
           width="1rem"
         >
           <path
-            clip-rule="evenodd"
-            d="M12 16a4 4 0 100-8 4 4 0 000 8zm0 2a6 6 0 100-12 6 6 0 000 12zM11 0h2v4.062a8.079 8.079 0 00-2 0V0zM7.094 5.68L4.222 2.808 2.808 4.222 5.68 7.094A8.048 8.048 0 017.094 5.68zM4.062 11H0v2h4.062a8.079 8.079 0 010-2zm1.618 5.906l-2.872 2.872 1.414 1.414 2.872-2.872a8.048 8.048 0 01-1.414-1.414zM11 19.938V24h2v-4.062a8.069 8.069 0 01-2 0zm5.906-1.618l2.872 2.872 1.414-1.414-2.872-2.872a8.048 8.048 0 01-1.414 1.414zM19.938 13H24v-2h-4.062a8.069 8.069 0 010 2zM18.32 7.094l2.872-2.872-1.414-1.414-2.872 2.872c.528.41 1.003.886 1.414 1.414z"
-            fill="currentColor"
-            fill-rule="evenodd"
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path
+            d="M10 6a8 8 0 0011.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0010 6zm-6 6a8 8 0 008 8 8.006 8.006 0 006.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 004 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 00-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 00-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0015.29.836L15.5 0h1l.209.836a2 2 0 001.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 00-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 00-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 001.455-1.455L20.5 5h1l.209.836a2 2 0 001.455 1.455z"
           />
         </svg>
       </button>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,3 @@
-import "../styles/globals.css";
 import { useState, useEffect } from "react";
 import type { AppProps } from "next/app";
 import { ThemeProvider } from "@emotion/react";

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,4 +1,7 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import { Global } from "@emotion/react";
+
+import { GlobalStyles } from "@/styles/global";
 
 export default function Document() {
   return (
@@ -8,6 +11,7 @@ export default function Document() {
           rel="stylesheet"
           href="https://fonts.googleapis.com/css?family=Poppins|Monoton&display=swap"
         />
+        <Global styles={GlobalStyles} />
       </Head>
       <body>
         <Main />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,71 +1,52 @@
 import type { NextPage } from "next";
 import Head from "next/head";
-import Image from "next/image";
-import styles from "../styles/Home.module.css";
+import styled from "@emotion/styled";
+
+import { Course } from "@/components/Course";
+
+const CoursesWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2vw;
+  margin: 2vh 1vw;
+`;
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
+        <title>CoursesBox</title>
+        <meta name="description" content="IT courses for everyone" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!!!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
+      <CoursesWrapper>
+        {Array(4).fill(
+          <Course
+            header="Hands-On React. Build advanced React JS Frontend with expert"
+            link="/hands-on-reactjs"
+            imageProps={{
+              width: 1368,
+              height: 770,
+              alt: "Logo for Hands-On React",
+              src: "/covers/hands-on_reactjs_cover.png",
+            }}
           >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
+            <>
+              React is the most popular library for building frontend web
+              applications. Step-by-step by diving into all the basics,
+              I&apos;ll introduce you to advanced concepts as well. We&apos;ll
+              build the minesweeper application from scratch We&apos;ll build
+              the minesweeper application from scratch:
+              <ul>
+                <li>setup of the development environment</li>
+                <li>configuration of the React JS app</li>
+                <li>basic algorithms of Minesweeper</li>
+              </ul>
+            </>
+          </Course>
+        )}
+      </CoursesWrapper>
+    </>
   );
 };