feat: created and styled home page

mstarkRules · Dec 6, 2021 · 591551a · 591551a
1 parent 840e305
commit 591551a
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git a/src/pages/home.module.scss b/src/pages/home.module.scss
@@ -0,0 +1,41 @@
+.contentContainer {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  height: calc(100vh - 5rem);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.hero {
+  max-width: 600px;
+
+  > span {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 4.5rem;
+    line-height: 4.5rem;
+    font-weight: 900;
+    margin-top: 2.5rem;
+
+    span {
+      color: var(--cyan-500);
+    }
+  }
+
+  p {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    margin-top: 1.5rem;
+
+    span {
+      color: var(--cyan-500);
+      font-weight: bold;
+    }
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,12 +1,26 @@
 import Head from "next/head";
 
+import styles from "./home.module.scss";
+
 export default function Home() {
   return (
     <>
       <Head>
-        <title>Inicio | ig.news</title>
+        <title>Home | ig.news</title>
       </Head>
-      <h1>Hello World!</h1>
+      <main className={styles.contentContainer}>
+        <section className={styles.hero}>
+          <span>👏 Hey, welcome!</span>
+          <h1>
+            News about the <span>React</span> world.
+          </h1>
+          <p>
+            Get access to all the publications <br />
+            <span>for $9.90</span>
+          </p>
+        </section>
+        <img src="/images/avatar.svg" alt="Girl coding" />
+      </main>
     </>
   );
 }