From 892f3d29a04ff959a7aff5ab47b51db7b31b2d33 Mon Sep 17 00:00:00 2001
From: Brian Esteban <briangesteban@gmail.com>
Date: Wed, 9 Jul 2025 12:46:26 -0700
Subject: [PATCH 1/3] Migrate from styled-components to SCSS module.

---
 .../RevealContentContainer.module.scss          | 10 ++++++++++
 .../containers/RevealContentContainer/index.js  | 10 +++++++---
 .../containers/RevealContentContainer/styles.js | 17 -----------------
 3 files changed, 17 insertions(+), 20 deletions(-)
 create mode 100644 components/containers/RevealContentContainer/RevealContentContainer.module.scss
 delete mode 100644 components/containers/RevealContentContainer/styles.js

diff --git a/components/containers/RevealContentContainer/RevealContentContainer.module.scss b/components/containers/RevealContentContainer/RevealContentContainer.module.scss
new file mode 100644
index 00000000..c71e5291
--- /dev/null
+++ b/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);
+}
diff --git a/components/containers/RevealContentContainer/index.js b/components/containers/RevealContentContainer/index.js
index 9ac0b732..f67745c6 100644
--- a/components/containers/RevealContentContainer/index.js
+++ b/components/containers/RevealContentContainer/index.js
@@ -1,11 +1,12 @@
 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({});
   const [firstLoad, setFirstLoad] = useState(true);
   const [hiddenStyle, setHiddenStyle] = useState(true);
+  const hiddenStyleClass = hiddenStyle ? styles.sectionHidden : null; // return sectionHidden class name if hiddenStyle is true.
 
   useEffect(() => {
     if (entry.isIntersecting && firstLoad) {
@@ -15,9 +16,12 @@ const RevealContentContainer = ({ children }) => {
   }, [entry.isIntersecting]);
 
   return (
-    <S.RevealContainerWrapper ref={ref} $hiddenStyle={hiddenStyle}>
+    <div
+      ref={ref}
+      className={`${styles.revealContainerWrapper} ${hiddenStyleClass}`}
+    >
       {children}
-    </S.RevealContainerWrapper>
+    </div>
   );
 };
 
diff --git a/components/containers/RevealContentContainer/styles.js b/components/containers/RevealContentContainer/styles.js
deleted file mode 100644
index 6f5dd1b3..00000000
--- a/components/containers/RevealContentContainer/styles.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled, { css } from 'styled-components';
-import { transition } from '@/styles/themeConfig';
-
-
-const SectionHidden = css`
-  opacity: 0;
-  transform: translateY(8rem);
-`;
-
-const RevealContainerWrapper = styled.div`
-  ${transition('transform 1s, opacity 1s')};
-
-  //check props for hidden style
-  ${props => (props.$hiddenStyle ? SectionHidden : '')}
-`;
-
-export default { RevealContainerWrapper };

From 833a716e357bbefc5bdfef9a89602ef08958d93f Mon Sep 17 00:00:00 2001
From: Brian Esteban <briangesteban@gmail.com>
Date: Wed, 9 Jul 2025 12:47:24 -0700
Subject: [PATCH 2/3] Update CHANGELOG.

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65f6a0b5..187091fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -163,5 +163,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - ButtonLink
   - SubmitButton
   - AuthorBio
-  
+  - RevealContentContainer
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility

From 69460895786d90248018d82d953991d75aa0a1f1 Mon Sep 17 00:00:00 2001
From: Brian Esteban <briangesteban@gmail.com>
Date: Thu, 10 Jul 2025 09:18:55 -0700
Subject: [PATCH 3/3] Fix null set on classname

---
 components/containers/RevealContentContainer/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/containers/RevealContentContainer/index.js b/components/containers/RevealContentContainer/index.js
index f67745c6..4f6a7aa2 100644
--- a/components/containers/RevealContentContainer/index.js
+++ b/components/containers/RevealContentContainer/index.js
@@ -6,7 +6,6 @@ const RevealContentContainer = ({ children }) => {
   const [ref, entry] = useIntersect({});
   const [firstLoad, setFirstLoad] = useState(true);
   const [hiddenStyle, setHiddenStyle] = useState(true);
-  const hiddenStyleClass = hiddenStyle ? styles.sectionHidden : null; // return sectionHidden class name if hiddenStyle is true.
 
   useEffect(() => {
     if (entry.isIntersecting && firstLoad) {
@@ -18,7 +17,11 @@ const RevealContentContainer = ({ children }) => {
   return (
     <div
       ref={ref}
-      className={`${styles.revealContainerWrapper} ${hiddenStyleClass}`}
+      className={
+        hiddenStyle
+          ? `${styles.revealContainerWrapper} ${styles.sectionHidden}`
+          : styles.revealContainerWrapper
+      }
     >
       {children}
     </div>