feat: update HeaderHome component,

enhance the quality of code used in the scss files,
see also: #12

components/HeaderHome/index.tsx

@@ -1,23 +1,19 @@
 import React from "react";
 import Link from "next/link";
 
-import styles from "../Layout/styles.module.scss";
-import utilStyles from "../../styles/utils.module.css";
-
 import headerStyles from "./styles.module.scss";
 
 const Header: React.FC = () => {
   return (
-    <div className={headerStyles.backgroundHeader}>
+    <div className={headerStyles['header-home']}>
       <Link href="/contato">
         <img
           src="/images/profile.jpg"
-          className={`${styles.headerHomeImage} ${utilStyles.borderCircle}
-              ${utilStyles.shadow}`}
+          className={headerStyles['header-home__image']}
           alt="Vinícius Gajo"
         />
       </Link>
-      <h1>
+      <h1 className={headerStyles['header-home__title']}>
         Vinícius Gajo's Blog
       </h1>
     </div >

components/HeaderHome/styles.module.scss

@@ -1,20 +1,38 @@
-.backgroundHeader {
+.header-home {
   background: url("../../public/gifs/matrix-animation-background.gif");
   background-repeat: no-repeat;
   background-size: 100% 12rem;
 
   width: 100%;
+  max-width: var(--maxWidth);
   min-width: 30rem;
   padding-top: 6rem;
 
-  h1 {
-    margin-bottom: 0;
-    font-size: 3rem;
-    color: var(--white);
-  }
-
   @media (max-width: 34rem) {
     margin: 0;
     border-radius: 0;
   }
 }
+
+.header-home__image {
+  width: 11rem;
+  height: 11rem;
+  margin: 0 auto;
+  border: 4px solid rgba(255, 255, 255, 0.5);
+  border-radius: 9999px;
+  cursor: pointer;
+
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.4s;
+
+  &:hover {
+    box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
+    transition: box-shadow 0.4s;
+  }
+}
+
+.header-home__title {
+  margin-bottom: 0;
+  font-size: 3rem;
+  color: var(--white);
+}