Merged latest changes from main

Author: Satoshi-Sh

CHANGELOG.md

@@ -164,6 +164,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - SubmitButton
   - AuthorBio
   - SearchBar
+  - BlogPostsContainer
+  - RevealContentContainer
 
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling 

components/blog/BlogPostsContainer/BlogPostsContainer.module.scss

@@ -0,0 +1,57 @@
+@use '@/styles/mixins' as *;
+@use '@/styles/variables' as *;
+
+.blogContainer {
+  display: flex;
+  flex-direction: column;
+  margin: 3rem 0;
+}
+
+.postContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 3rem;
+
+  @include tablet {
+    justify-content: flex-start;
+  }
+
+  & > div {
+    @include desktop {
+      flex-basis: 48%;
+    }
+  }
+
+  @include large-desktop {
+    flex-basis: 32%;
+  }
+}
+
+.bottomLink {
+  font-size: 1.5rem;
+  font-weight: bold;
+  position: relative;
+  display: block;
+  text-align: center;
+}
+
+.viewAllBottomLink {
+  @extend .bottomLink;
+  top: -3rem;
+
+  @include desktop {
+    float: right;
+    top: -5rem;
+  }
+}
+
+.backBottomLink {
+  @extend .bottomLink;
+  top: -2rem;
+
+  @include desktop {
+    float: left;
+    top: -1rem;
+  }
+}

components/blog/BlogPostsContainer/index.js

@@ -1,10 +1,11 @@
+import Link from 'next/link';
 import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
 import Title from '@/components/snippets/Title';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
-import S from './styles';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
+import styles from './BlogPostsContainer.module.scss';
 
 const BlogPostsContainer = ({
   posts,
@@ -24,7 +25,7 @@ const BlogPostsContainer = ({
 
   return (
     <RevealContentContainer>
-      <S.BlogContainer>
+      <section className={styles.blogContainer}>
         {heading ? (
           <Container>
             <Title title={heading} />
@@ -34,40 +35,41 @@ const BlogPostsContainer = ({
             <Title title={tagToHeading[tag]} />
           </Container>
         ) : null}
-        {
-          swipe ? (
-            <>
-              {[posts.slice(0,6)].map((p, index) => (
-                <BlogCardsColumns key={index} cards={p} />
+        {swipe ? (
+          <>
+            {[posts.slice(0, 6)].map((p, index) => (
+              <BlogCardsColumns key={index} cards={p} />
+            ))}
+          </>
+        ) : (
+          <Container>
+            <div className={styles.postContainer}>
+              {posts?.map((p, index) => (
+                <BlogCard $cardType='blog' key={index} card={p} />
               ))}
-            </>
-          ) : (
-            <Container>
-              <S.PostContainer>
-                {posts?.map((p, index) => (
-                  <BlogCard $cardType='blog' key={index} card={p} />
-                ))}
-              </S.PostContainer>
-            </Container>
-          )
-        }
+            </div>
+          </Container>
+        )}
 
         {viewall && posts.length >= 3 ? (
           <Container>
-            <S.ViewAllBottomLink
+            <Link
               href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
+              className={styles.viewAllBottomLink}
             >
               view all
-            </S.ViewAllBottomLink>
+            </Link>
           </Container>
         ) : null}
 
         {back ? (
           <Container>
-            <S.BackBottomLink href={`/blog`}>&#60; back</S.BackBottomLink>
+            <Link href={`/blog`} className={styles.backBottomLink}>
+              &#60; back
+            </Link>
           </Container>
         ) : null}
-      </S.BlogContainer>
+      </section>
     </RevealContentContainer>
   );
 };

components/blog/BlogPostsContainer/styles.js

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

components/containers/RevealContentContainer/RevealContentContainer.module.scss

@@ -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>
   );
 };