before animation title underline

src/app/components/SlideMain/SlideMain.module.css

@@ -7,13 +7,3 @@
   padding: var(--components-gap-50);
   color: var(--white);
 }
-
-.title {
-  font: 800 6rem/0.8 var(--font-family-sans);
-  letter-spacing: -3px;
-}
-
-.subtitle {
-  font: 400 italic 4rem var(--font-family-sans);
-  letter-spacing: -3px;
-}

src/app/components/SlideMain/SlideMain.tsx

@@ -1,12 +1,10 @@
+import { ReactNode } from "react";
 import styles from "./SlideMain.module.css";
 
-export default function Home() {
-  return (
-    <section className={styles.section}>
-      <h1 className={styles.title}>Ricardo Gouveia</h1>
-      <h2 className={styles.subtitle}>
-        <span>developer</span> & <span>designer</span>
-      </h2>
-    </section>
-  );
+interface ComponentProps {
+  children?: ReactNode;
+}
+
+export default function Home({ children }: Readonly<ComponentProps>) {
+  return <section className={styles.section}>{children}</section>;
 }

src/app/page.tsx

@@ -17,7 +17,13 @@ export default function Home() {
           <Navbar centerButton={false} />
           <IconBar />
         </LateralBarContainer>
-        <SlideMain />
+        <SlideMain>
+          <h1 className={styles.title}>Ricardo Gouveia</h1>
+          <h2 className={styles.subtitle}>
+            <span className={styles.subtitleDev}>developer</span> &{" "}
+            <span className={styles.subtitleDsg}>designer</span>
+          </h2>
+        </SlideMain>
         <LateralBarContainer>
           <RoundLink
             icon="/dribbble.png"

src/app/styles/Hero.module.css

@@ -5,6 +5,28 @@
   gap: var(--components-gap-50);
 }
 
-.section {
-  width: 100%;
+.title {
+  font: 800 6rem/0.8 var(--font-family-sans);
+  letter-spacing: -3px;
+}
+
+.subtitle {
+  font: 400 italic 4rem/1.5 var(--font-family-sans);
+  letter-spacing: -3px;
+}
+
+.subtitleDev {
+  text-decoration: wavy underline;
+  text-underline-offset: 0.5rem;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: 0.225rem;
+  text-decoration-color: var(--medium-turquoise);
+}
+
+.subtitleDsg {
+  text-decoration: wavy underline;
+  text-underline-offset: 0.5rem;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: 0.225rem;
+  text-decoration-color: var(--begonia);
 }