Update stylesheet file name, and migrate from style-components to scss

Author: briangesteban

pages/contact.js

@@ -1,29 +1,33 @@
 import { useState } from 'react';
 import ContactUsFormSubscribe from '@/components/ContactUs';
 import ContactUsCards from '@/components/ContactUs/ContactUsCards';
-import S from '@/styles/pages/contactStyles';
+import styles from '@/styles/pages/contact.module.scss';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
 
   return (
     <>
-      <S.ContactUsContainer>
-        <S.FormAndDecorations>
+      <div className={styles.contactUsContainer}>
+        <div className={styles.formAndDecorations}>
           <Bracket className={bracketStyles.yellowBracket} />
           <ContactUsFormSubscribe setMsg={setMessage} />
-          <S.YellowColon src='/images/svg/yellow-colon.svg' />
-          <S.ResponseMessage>
+          <img
+            className={styles.yellowColon}
+            src='/images/svg/yellow-colon.svg'
+            alt=''
+          />
+          <div className={styles.responseMessage}>
             {message?.map((m, i) => (
               <span key={i}>
                 {m}
                 <br />
               </span>
             ))}
-          </S.ResponseMessage>
-        </S.FormAndDecorations>
-      </S.ContactUsContainer>
+          </div>
+        </div>
+      </div>
       <ContactUsCards />
     </>
   );

styles/pages/contact.module.scss

@@ -0,0 +1,62 @@
+@use '@/styles/index' as *;
+
+.contactUsContainer {
+  background-color: var(--color-light-bg);
+  height: 42rem;
+  position: relative;
+  margin-bottom: -10rem;
+
+  @include mobile {
+    height: unset;
+    padding-bottom: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  @include desktop {
+    height: 32rem;
+  }
+}
+
+.formAndDecorations {
+  @include tablet {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    position: absolute;
+    bottom: 48%;
+    right: 4%;
+    z-index: 11;
+  }
+
+  @include desktop {
+    bottom: 52%;
+    right: 8%;
+  }
+}
+
+.yellowColon {
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
+
+  @include tablet {
+    position: absolute;
+    top: -10%;
+    right: -5%;
+  }
+
+  @include desktop {
+    right: -15%;
+  }
+}
+
+.responseMessage {
+  position: unset;
+  bottom: -5%;
+  padding: 0 2rem;
+
+  @include tablet {
+    position: absolute;
+    margin-top: 1rem;
+  }
+}