Refactor/to-scss-reveal-content-container

CHANGELOG.md

@@ -164,4 +164,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - SubmitButton
   - AuthorBio
   - BlogPostsContainer
+  - RevealContentContainer
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility

components/containers/RevealContentContainer/RevealContentContainer.module.scss

@@ -0,0 +1,10 @@
+@use '@/styles/mixins' as *;
+
+.sectionHidden {
+  opacity: 0;
+  transform: translateY(8rem);
+}
+
+.revealContainerWrapper {
+  @include transition(transform 1s, opacity 1s);
+}

components/containers/RevealContentContainer/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useIntersect } from '@/hooks/useIntersect';
-import S from './styles';
+import styles from './RevealContentContainer.module.scss';
 
 const RevealContentContainer = ({ children }) => {
   const [ref, entry] = useIntersect({});
@@ -15,9 +15,16 @@ const RevealContentContainer = ({ children }) => {
   }, [entry.isIntersecting]);
 
   return (
-    <S.RevealContainerWrapper ref={ref} $hiddenStyle={hiddenStyle}>
+    <div
+      ref={ref}
+      className={
+        hiddenStyle
+          ? `${styles.revealContainerWrapper} ${styles.sectionHidden}`
+          : styles.revealContainerWrapper
+      }
+    >
       {children}
-    </S.RevealContainerWrapper>
+    </div>
   );
 };