feat(home): add about section and footer

src/app/components/Footer/index.tsx

@@ -0,0 +1,12 @@
+import Typography from "../Typography";
+import styles from "./styles.module.css";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles["footer-wrapper"]}>
+        <Typography variant="h3">Laercio Rios - 2024</Typography>
+      </div>
+    </footer>
+  );
+}

src/app/components/Footer/styles.module.css

@@ -0,0 +1,18 @@
+.footer {
+  width: 100%;
+  border-top: 0.125rem solid var(--primary);
+  display: flex;
+  justify-content: center;
+}
+
+.footer-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  gap: 1rem;
+  width: 100%;
+  max-width: 90rem;
+  padding: 1rem 2rem;
+}

src/app/i18n/locales/en.json

@@ -16,7 +16,19 @@
     }
   },
   "pages": {
-    "home": {},
+    "home": {
+      "about": {
+        "introduction": {
+          "label": "I'm Laercio Rios"
+        },
+        "content": {
+          "label": "Fullstack developer focused on NodeJs and React"
+        },
+        "description": {
+          "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam massa, ornare eu bibendum a, venenatis non purus. Sed erat purus, porttitor eu posuere interdum, rutrum a nisl. Maecenas maximus volutpat purus sed posuere. Quisque sit amet nisl eros. Sed mollis diam eu libero sagittis cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque quis orci sed orci imperdiet suscipit. Donec cursus leo velit, eget venenatis neque vehicula ut."
+        }
+      }
+    },
     "projects": {}
   }
 }

src/app/i18n/locales/pt.json

@@ -16,7 +16,19 @@
     }
   },
   "pages": {
-    "home": {},
+    "home": {
+      "about": {
+        "introduction": {
+          "label": "Eu sou Laercio Rios"
+        },
+        "content": {
+          "label": "Programador fullstack com foco NodeJs e React"
+        },
+        "description": {
+          "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam massa, ornare eu bibendum a, venenatis non purus. Sed erat purus, porttitor eu posuere interdum, rutrum a nisl. Maecenas maximus volutpat purus sed posuere. Quisque sit amet nisl eros. Sed mollis diam eu libero sagittis cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque quis orci sed orci imperdiet suscipit. Donec cursus leo velit, eget venenatis neque vehicula ut."
+        }
+      }
+    },
     "projects": {}
   }
 }

src/app/page.module.css

@@ -76,23 +76,72 @@
   fill: var(--primary);
 }
 
-.home-about_section {
-  height: 10rem;
+.home-about {
   width: 100%;
   display: flex;
   justify-content: center;
   background: linear-gradient(180deg, var(--home) 0%, var(--background) 100%);
 }
 
-.home-about_section-wrapper {
+.home-about-wrapper {
   width: 100%;
   max-width: 90rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem 2rem;
+  display: grid;
+  padding: 3rem 2rem;
+  grid-template:
+    "a"
+    "b"
+    "c";
 
   @media (min-width: 768px) {
-    padding: 1.5rem 10rem;
+    grid-template:
+      "b a"
+      "c c";
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+
+  @media (min-width: 1024px) {
+    padding: 3rem 10rem;
+    grid-template: "b a c";
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+  }
+}
+
+.home-about-wrapper img {
+  width: 15rem;
+  height: 15rem;
+  border-radius: 50%;
+  border: 0.25rem solid var(--primary);
+  grid-area: a;
+  justify-self: center;
+
+  @media (min-width: 768px) {
+    justify-self: start;
+  }
+}
+
+.home-about-wrapper h2 {
+  border-bottom: 0.125rem solid var(--primary);
+  font-size: 2.25rem;
+
+  @media (min-width: 768px) {
+    text-align: left;
+  }
+}
+
+.home-about-wrapper h4 {
+  @media (min-width: 768px) {
+    text-align: left;
+  }
+}
+
+.home-about-wrapper p {
+  padding: 1rem 0;
+  grid-area: c;
+
+  @media (min-width: 1024px) {
+    padding: 1rem;
   }
 }

src/app/page.tsx

@@ -10,6 +10,9 @@ import GithubIcon from "./assets/icons/github-logo.svg";
 import EmailIcon from "./assets/icons/email-logo.svg";
 import LinkedinIcon from "./assets/icons/linkedin-logo.svg";
 import ArrowDownIcon from "./assets/icons/arrow-down.svg";
+import Image from "next/image";
+import profileImg from "./assets/profile.png";
+import Footer from "./components/Footer";
 
 export default function Home() {
   const { t } = useTranslation();
@@ -44,9 +47,23 @@ export default function Home() {
           <ArrowDownIcon className={styles["home-intro_section-arrow_down"]} />
         </div>
       </section>
-      <section className={styles["home-about_section"]}>
-        <div className={styles["home-about_section-wrapper"]}></div>
+      <section className={styles["home-about"]}>
+        <div className={styles["home-about-wrapper"]}>
+          <div>
+            <Typography variant="h2">
+              {t("pages.home.about.introduction.label")}
+            </Typography>
+            <Typography variant="h4">
+              {t("pages.home.about.content.label")}
+            </Typography>
+          </div>
+          <Image src={profileImg} alt="Profile photo" />
+          <Typography variant="body1">
+            &quot;{t("pages.home.about.description.label")}&quot;
+          </Typography>
+        </div>
       </section>
+      <Footer />
     </main>
   );
 }