Migrate hero layout from styled-components to SCSS module

Author: briangesteban

components/layout/Hero/Hero.module.scss

@@ -0,0 +1,57 @@
+@use '@/styles/index' as *;
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+
+  @include desktop {
+    height: 100vh;
+    max-height: 56.25rem;
+  }
+}
+
+.headerContent {
+  z-index: 10;
+  color: var(--color-white);
+  padding-top: 9%;
+}
+
+.headerContentUpper {
+  max-width: 41rem;
+
+  span {
+    color: var(--color-primary-accent);
+    font-style: italic;
+    font-weight: bold;
+    line-height: 3.5rem;
+
+    @include desktop {
+      font-size: 4.5rem;
+      line-height: 5rem;
+    }
+  }
+}
+
+.headerContentBottom {
+  max-width: 19rem;
+  padding-bottom: 5rem;
+
+  @include desktop {
+    padding-bottom: 0;
+
+    p {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+.imageBg {
+  object-fit: cover;
+  object-position: center;
+}
+
+.title {
+  color: var(--color-primary-accent);
+}

components/layout/Hero/index.js

@@ -1,6 +1,8 @@
 import { useState } from 'react';
+import Image from 'next/image';
 import Nav from '@/components/layout/Nav';
-import S from './styles';
+import Container from '@/components/containers/Container';
+import styles from './Hero.module.scss';
 
 export default function Hero({
   title,
@@ -20,20 +22,26 @@ export default function Hero({
   setTimeout(handleTitleIndex, 1550);
 
   return (
-    <S.Header>
+    <div className={styles.header}>
       <Nav />
-      <S.ImageBg src={imgBg} alt={imgAlt} fill priority />
-      <S.HeaderContent>
-        <S.HeaderContentUpper>
-          <S.Title $hasAccent={hasAccent}>
+      <Image
+        className={styles.imageBg}
+        src={imgBg}
+        alt={imgAlt}
+        fill
+        priority
+      />
+      <Container className={styles.headerContent}>
+        <div className={styles.headerContentUpper}>
+          <h1 className={hasAccent ? styles.title : null}>
             {title}
             {dynamicTitles && <span> {dynamicTitles[titleIndex]}</span>}
-          </S.Title>
-        </S.HeaderContentUpper>
-        <S.HeaderContentBottom>
+          </h1>
+        </div>
+        <div className={styles.headerContentBottom}>
           <p>{content}</p>
-        </S.HeaderContentBottom>
-      </S.HeaderContent>
-    </S.Header>
+        </div>
+      </Container>
+    </div>
   );
 }