From 21684b300b841e573f5bc858aa8e56efb10a1f04 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Tue, 19 Aug 2025 02:13:37 +0100
Subject: [PATCH 1/8] style: Convert style-components to scss

---
 CHANGELOG.md                                  |  1 +
 .../CardColumns/CardColumnsInterface.js       | 71 +++++++++----------
 .../CardColumnsInterface.module.scss          | 19 +++++
 components/containers/CardColumns/styles.js   | 24 -------
 4 files changed, 55 insertions(+), 60 deletions(-)
 create mode 100644 components/containers/CardColumns/CardColumnsInterface.module.scss
 delete mode 100644 components/containers/CardColumns/styles.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index faca34eb..05347d3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -184,6 +184,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Layout
   - RelatedPosts
   - Footer
+  - CardColumnsInterface
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling
diff --git a/components/containers/CardColumns/CardColumnsInterface.js b/components/containers/CardColumns/CardColumnsInterface.js
index dd977507..51dbfb59 100644
--- a/components/containers/CardColumns/CardColumnsInterface.js
+++ b/components/containers/CardColumns/CardColumnsInterface.js
@@ -1,49 +1,48 @@
-import { SwiperSlide } from 'swiper/react';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import Container from '@/components/containers/Container';
-import * as S from './styles';
+import styles from './CardColumnsInterface.module.scss';
 
 export function CardsColumnsInterface({ cards, customClass, cardComponent }) {
   const Card = cardComponent;
   return (
     <Container>
-      <div>
-        <S.Swiper
-          mousewheel={true}
-          grabCursor={true}
-          modules={[Pagination]}
-          pagination
-          centerInsufficientSlides={false}
-          slidesPerView={1}
-          breakpoints={{
-            768: {
-              slidesPerView: 2,
-              spaceBetween: 20,
-            },
-            1334:
-              customClass === 'blog'
-                ? {
-                    slidesPerView: 3,
-                    spaceBetween: 20,
-                  }
-                : {
-                    slidesPerView: cards.length,
-                    spaceBetween: cards.length < 3 ? 75 : 20,
-                  },
-          }}
-        >
-          {cards.map((card, index) => (
-            <SwiperSlide key={index}>
-              <S.InnerContent>
-                <Card key={index} card={card} $cardType={customClass} />
-              </S.InnerContent>
-            </SwiperSlide>
-          ))}
-        </S.Swiper>
-      </div>
+      <Swiper
+        className={styles.cardColumnSwiper}
+        mousewheel={true}
+        grabCursor={true}
+        modules={[Pagination]}
+        pagination
+        centerInsufficientSlides={false}
+        slidesPerView={1}
+        breakpoints={{
+          768: {
+            slidesPerView: 2,
+            spaceBetween: 20,
+          },
+          1334:
+            customClass === 'blog'
+              ? {
+                  slidesPerView: 3,
+                  spaceBetween: 20,
+                }
+              : {
+                  slidesPerView: cards.length,
+                  spaceBetween: cards.length < 3 ? 75 : 20,
+                },
+        }}
+      >
+        {cards.map((card, index) => (
+          <SwiperSlide key={index}>
+            <div className={styles.innerContent}>
+              <Card key={index} card={card} $cardType={customClass} />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </Container>
   );
 }
diff --git a/components/containers/CardColumns/CardColumnsInterface.module.scss b/components/containers/CardColumns/CardColumnsInterface.module.scss
new file mode 100644
index 00000000..b7acccfc
--- /dev/null
+++ b/components/containers/CardColumns/CardColumnsInterface.module.scss
@@ -0,0 +1,19 @@
+@use '@/styles/mixins' as *;
+
+.innerContent {
+  margin: 0 auto;
+  padding-bottom: 4rem;
+  justify-content: center;
+
+  @include desktop-breakpoint-plus {
+    display: flex;
+  }
+}
+
+.cardColumnSwiper {
+  margin-bottom: 5rem;
+
+  :global(.swiper-pagination-bullet-active) {
+    background-color: var(--dark-bg);
+  }
+}
diff --git a/components/containers/CardColumns/styles.js b/components/containers/CardColumns/styles.js
deleted file mode 100644
index 04b1685a..00000000
--- a/components/containers/CardColumns/styles.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Swiper } from 'swiper/react';
-
-const InnerContent = styled.div`
-  margin: 0 auto;
-  padding-bottom: 4rem;
-  justify-content: center;
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktopPlus}) {
-      display: flex;
-    }
-  `}
-`;
-
-const CardColumnSwiper = styled(Swiper)`
-  margin-bottom: 5rem;
-
-  & .swiper-pagination-bullet-active {
-    background-color: ${({ theme }) => theme.colors.darkBg};
-  }
-`;
-
-export { CardColumnSwiper as Swiper, InnerContent };

From c0b17de9ed9f558fa334df43de1c6d53bb8ada41 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Tue, 19 Aug 2025 02:38:37 +0100
Subject: [PATCH 2/8] style: Remove redundant rules

---
 .../containers/CardColumns/CardColumnsInterface.module.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/components/containers/CardColumns/CardColumnsInterface.module.scss b/components/containers/CardColumns/CardColumnsInterface.module.scss
index b7acccfc..eaefc669 100644
--- a/components/containers/CardColumns/CardColumnsInterface.module.scss
+++ b/components/containers/CardColumns/CardColumnsInterface.module.scss
@@ -1,13 +1,7 @@
 @use '@/styles/mixins' as *;
 
 .innerContent {
-  margin: 0 auto;
   padding-bottom: 4rem;
-  justify-content: center;
-
-  @include desktop-breakpoint-plus {
-    display: flex;
-  }
 }
 
 .cardColumnSwiper {

From ef355a6e2b8c37872bbb5f159d50625264931684 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Tue, 19 Aug 2025 02:40:13 +0100
Subject: [PATCH 3/8] style: Removed unused mixins import

---
 .../containers/CardColumns/CardColumnsInterface.module.scss     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/containers/CardColumns/CardColumnsInterface.module.scss b/components/containers/CardColumns/CardColumnsInterface.module.scss
index eaefc669..d715e8f4 100644
--- a/components/containers/CardColumns/CardColumnsInterface.module.scss
+++ b/components/containers/CardColumns/CardColumnsInterface.module.scss
@@ -1,5 +1,3 @@
-@use '@/styles/mixins' as *;
-
 .innerContent {
   padding-bottom: 4rem;
 }

From a035af2f9bb817126ba93244f3db09649cdb4857 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Tue, 19 Aug 2025 03:20:36 +0100
Subject: [PATCH 4/8] refactor: Use CardsColumnsInterface directly

---
 components/ContactUs/ContactUsCards/index.js         |  5 +++--
 components/blog/BlogPostsContainer/index.js          |  9 +++++++--
 .../containers/CardColumns/BlogCardsColumns.js       | 12 ------------
 .../containers/CardColumns/ContactCardsColumns.js    |  6 ------
 .../containers/CardColumns/OurGoalsCardsColumns.js   |  6 ------
 components/containers/CardColumns/index.js           |  6 ------
 pages/about.js                                       |  6 ++++--
 pages/index.js                                       |  6 ++++--
 8 files changed, 18 insertions(+), 38 deletions(-)
 delete mode 100644 components/containers/CardColumns/BlogCardsColumns.js
 delete mode 100644 components/containers/CardColumns/ContactCardsColumns.js
 delete mode 100644 components/containers/CardColumns/OurGoalsCardsColumns.js
 delete mode 100644 components/containers/CardColumns/index.js

diff --git a/components/ContactUs/ContactUsCards/index.js b/components/ContactUs/ContactUsCards/index.js
index d198833b..7bf0f45d 100644
--- a/components/ContactUs/ContactUsCards/index.js
+++ b/components/ContactUs/ContactUsCards/index.js
@@ -1,4 +1,5 @@
-import { ContactCardsColumns } from '../../containers/CardColumns/ContactCardsColumns';
+import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
+import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
 import RevealContentContainer from '../../containers/RevealContentContainer';
 import styles from './ContactUsCards.module.scss';
 
@@ -34,7 +35,7 @@ export default function ContactUsCards() {
   return (
     <article className={styles.contactCards}>
       <RevealContentContainer>
-        <ContactCardsColumns cards={cards} />
+        <CardsColumnsInterface cards={cards} cardComponent={ContactUsCard} />
       </RevealContentContainer>
     </article>
   );
diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
index 5c51ce91..84d25849 100644
--- a/components/blog/BlogPostsContainer/index.js
+++ b/components/blog/BlogPostsContainer/index.js
@@ -1,6 +1,6 @@
 import Link from 'next/link';
-import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
+import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -37,7 +37,12 @@ const BlogPostsContainer = ({
         {swipe ? (
           <>
             {[posts.slice(0, 6)].map((p, index) => (
-              <BlogCardsColumns key={index} cards={p} />
+              <CardsColumnsInterface
+                key={index}
+                cards={p}
+                cardComponent={BlogCard}
+                customClass='blog'
+              />
             ))}
           </>
         ) : (
diff --git a/components/containers/CardColumns/BlogCardsColumns.js b/components/containers/CardColumns/BlogCardsColumns.js
deleted file mode 100644
index 416fdb7b..00000000
--- a/components/containers/CardColumns/BlogCardsColumns.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { BlogCard } from '@/components/containers/Card/BlogCard';
-
-export function BlogCardsColumns({ cards }) {
-  return (
-    <CardsColumnsInterface
-      cards={cards}
-      cardComponent={BlogCard}
-      customClass='blog'
-    />
-  );
-}
diff --git a/components/containers/CardColumns/ContactCardsColumns.js b/components/containers/CardColumns/ContactCardsColumns.js
deleted file mode 100644
index 93786b0f..00000000
--- a/components/containers/CardColumns/ContactCardsColumns.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
-
-export function ContactCardsColumns({ cards }) {
-  return <CardsColumnsInterface cards={cards} cardComponent={ContactUsCard} />;
-}
diff --git a/components/containers/CardColumns/OurGoalsCardsColumns.js b/components/containers/CardColumns/OurGoalsCardsColumns.js
deleted file mode 100644
index 45eb6d9e..00000000
--- a/components/containers/CardColumns/OurGoalsCardsColumns.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { AboutUsCard } from '@/components/containers/Card/AboutUsCard';
-
-export function OurGoalsCardsColumns({ cards }) {
-  return <CardsColumnsInterface cards={cards} cardComponent={AboutUsCard} />;
-}
diff --git a/components/containers/CardColumns/index.js b/components/containers/CardColumns/index.js
deleted file mode 100644
index 537181ca..00000000
--- a/components/containers/CardColumns/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { Card } from '@/components/containers/Card';
-
-export function CardsColumns({ cards }) {
-  return <CardsColumnsInterface cards={cards} cardComponent={Card} />;
-}
diff --git a/pages/about.js b/pages/about.js
index dfd396c5..98699dd9 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,6 +1,7 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
-import { OurGoalsCardsColumns } from '@/components/containers/CardColumns/OurGoalsCardsColumns';
+import { AboutUsCard } from '@/components/containers/Card/AboutUsCard';
+import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -95,7 +96,7 @@ export default function AboutUs() {
         <Container>
           <h2>Our goals</h2>
         </Container>
-        <OurGoalsCardsColumns
+        <CardsColumnsInterface
           cards={[
             {
               title: '1',
@@ -108,6 +109,7 @@ export default function AboutUs() {
                 'To offer more detailed tasks (GitHub issues) and help the developer assimilate the logical mindset required in a structured project, under guidance following the industry’s best practices throughout the entire process.',
             },
           ]}
+          cardComponent={AboutUsCard}
         />
       </RevealContentContainer>
       <RevealContentContainer>
diff --git a/pages/index.js b/pages/index.js
index 3baa8192..05ceae4d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,6 @@
 import TwoColumn from '@/components/containers/TwoColumn';
-import { CardsColumns } from '@/components/containers/CardColumns';
+import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
+import { Card } from '@/components/containers/Card';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
 import Stick from '@/components/decorations/Stick';
@@ -33,7 +34,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <CardsColumns
+        <CardsColumnsInterface
           cards={[
             {
               title: 'Join the project',
@@ -63,6 +64,7 @@ export default function Home() {
               linkText: 'Learn more',
             },
           ]}
+          cardComponent={Card}
         />
       </RevealContentContainer>
 

From 71638974c7e684a60ec9a4ec9abf6702266053fe Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Tue, 19 Aug 2025 03:25:30 +0100
Subject: [PATCH 5/8] refactor: Rename CardsColumnsInterface to CardsColumns

---
 components/ContactUs/ContactUsCards/index.js                  | 4 ++--
 components/blog/BlogPostsContainer/index.js                   | 4 ++--
 ...rdColumnsInterface.module.scss => CardColumns.module.scss} | 0
 .../CardColumns/{CardColumnsInterface.js => CardsColumns.js}  | 4 ++--
 pages/about.js                                                | 4 ++--
 pages/index.js                                                | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)
 rename components/containers/CardColumns/{CardColumnsInterface.module.scss => CardColumns.module.scss} (100%)
 rename components/containers/CardColumns/{CardColumnsInterface.js => CardsColumns.js} (90%)

diff --git a/components/ContactUs/ContactUsCards/index.js b/components/ContactUs/ContactUsCards/index.js
index 7bf0f45d..36cb9363 100644
--- a/components/ContactUs/ContactUsCards/index.js
+++ b/components/ContactUs/ContactUsCards/index.js
@@ -1,4 +1,4 @@
-import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
+import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
 import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
 import RevealContentContainer from '../../containers/RevealContentContainer';
 import styles from './ContactUsCards.module.scss';
@@ -35,7 +35,7 @@ export default function ContactUsCards() {
   return (
     <article className={styles.contactCards}>
       <RevealContentContainer>
-        <CardsColumnsInterface cards={cards} cardComponent={ContactUsCard} />
+        <CardsColumns cards={cards} cardComponent={ContactUsCard} />
       </RevealContentContainer>
     </article>
   );
diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
index 84d25849..47099624 100644
--- a/components/blog/BlogPostsContainer/index.js
+++ b/components/blog/BlogPostsContainer/index.js
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
-import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
+import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -37,7 +37,7 @@ const BlogPostsContainer = ({
         {swipe ? (
           <>
             {[posts.slice(0, 6)].map((p, index) => (
-              <CardsColumnsInterface
+              <CardsColumns
                 key={index}
                 cards={p}
                 cardComponent={BlogCard}
diff --git a/components/containers/CardColumns/CardColumnsInterface.module.scss b/components/containers/CardColumns/CardColumns.module.scss
similarity index 100%
rename from components/containers/CardColumns/CardColumnsInterface.module.scss
rename to components/containers/CardColumns/CardColumns.module.scss
diff --git a/components/containers/CardColumns/CardColumnsInterface.js b/components/containers/CardColumns/CardsColumns.js
similarity index 90%
rename from components/containers/CardColumns/CardColumnsInterface.js
rename to components/containers/CardColumns/CardsColumns.js
index 51dbfb59..17a3a3e1 100644
--- a/components/containers/CardColumns/CardColumnsInterface.js
+++ b/components/containers/CardColumns/CardsColumns.js
@@ -4,9 +4,9 @@ import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import Container from '@/components/containers/Container';
-import styles from './CardColumnsInterface.module.scss';
+import styles from './CardColumns.module.scss';
 
-export function CardsColumnsInterface({ cards, customClass, cardComponent }) {
+export function CardsColumns({ cards, customClass, cardComponent }) {
   const Card = cardComponent;
   return (
     <Container>
diff --git a/pages/about.js b/pages/about.js
index 98699dd9..eb70f04b 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,7 +1,7 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { AboutUsCard } from '@/components/containers/Card/AboutUsCard';
-import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
+import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -96,7 +96,7 @@ export default function AboutUs() {
         <Container>
           <h2>Our goals</h2>
         </Container>
-        <CardsColumnsInterface
+        <CardsColumns
           cards={[
             {
               title: '1',
diff --git a/pages/index.js b/pages/index.js
index 05ceae4d..84b5f020 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import TwoColumn from '@/components/containers/TwoColumn';
-import { CardsColumnsInterface } from '@/components/containers/CardColumns/CardColumnsInterface';
+import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
 import { Card } from '@/components/containers/Card';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
@@ -34,7 +34,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <CardsColumnsInterface
+        <CardsColumns
           cards={[
             {
               title: 'Join the project',

From 9653d7b54ab6de26865da52094bdf159c81da5ed Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Wed, 20 Aug 2025 18:35:23 +0100
Subject: [PATCH 6/8] refactor: Rename CardColumns to CardColumns

---
 components/ContactUs/ContactUsCards/index.js                  | 4 ++--
 components/blog/BlogPostsContainer/index.js                   | 4 ++--
 .../containers/CardColumns/{CardsColumns.js => index.js}      | 2 +-
 pages/about.js                                                | 4 ++--
 pages/index.js                                                | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)
 rename components/containers/CardColumns/{CardsColumns.js => index.js} (94%)

diff --git a/components/ContactUs/ContactUsCards/index.js b/components/ContactUs/ContactUsCards/index.js
index 36cb9363..2512da99 100644
--- a/components/ContactUs/ContactUsCards/index.js
+++ b/components/ContactUs/ContactUsCards/index.js
@@ -1,4 +1,4 @@
-import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
+import { CardColumns } from '@/components/containers/CardColumns';
 import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
 import RevealContentContainer from '../../containers/RevealContentContainer';
 import styles from './ContactUsCards.module.scss';
@@ -35,7 +35,7 @@ export default function ContactUsCards() {
   return (
     <article className={styles.contactCards}>
       <RevealContentContainer>
-        <CardsColumns cards={cards} cardComponent={ContactUsCard} />
+        <CardColumns cards={cards} cardComponent={ContactUsCard} />
       </RevealContentContainer>
     </article>
   );
diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
index 47099624..2048b9e8 100644
--- a/components/blog/BlogPostsContainer/index.js
+++ b/components/blog/BlogPostsContainer/index.js
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
-import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
+import { CardColumns } from '@/components/containers/CardColumns';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -37,7 +37,7 @@ const BlogPostsContainer = ({
         {swipe ? (
           <>
             {[posts.slice(0, 6)].map((p, index) => (
-              <CardsColumns
+              <CardColumns
                 key={index}
                 cards={p}
                 cardComponent={BlogCard}
diff --git a/components/containers/CardColumns/CardsColumns.js b/components/containers/CardColumns/index.js
similarity index 94%
rename from components/containers/CardColumns/CardsColumns.js
rename to components/containers/CardColumns/index.js
index 17a3a3e1..aa746bc2 100644
--- a/components/containers/CardColumns/CardsColumns.js
+++ b/components/containers/CardColumns/index.js
@@ -6,7 +6,7 @@ import 'swiper/css/navigation';
 import Container from '@/components/containers/Container';
 import styles from './CardColumns.module.scss';
 
-export function CardsColumns({ cards, customClass, cardComponent }) {
+export function CardColumns({ cards, customClass, cardComponent }) {
   const Card = cardComponent;
   return (
     <Container>
diff --git a/pages/about.js b/pages/about.js
index eb70f04b..5b833dd9 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,7 +1,7 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { AboutUsCard } from '@/components/containers/Card/AboutUsCard';
-import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
+import { CardColumns } from '@/components/containers/CardColumns';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -96,7 +96,7 @@ export default function AboutUs() {
         <Container>
           <h2>Our goals</h2>
         </Container>
-        <CardsColumns
+        <CardColumns
           cards={[
             {
               title: '1',
diff --git a/pages/index.js b/pages/index.js
index 84b5f020..58c9228f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import TwoColumn from '@/components/containers/TwoColumn';
-import { CardsColumns } from '@/components/containers/CardColumns/CardsColumns';
+import { CardColumns } from '@/components/containers/CardColumns';
 import { Card } from '@/components/containers/Card';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
@@ -34,7 +34,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <CardsColumns
+        <CardColumns
           cards={[
             {
               title: 'Join the project',

From 66c7dcbfc29fd71aa6170876987809a798fde5c4 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Wed, 20 Aug 2025 18:47:41 +0100
Subject: [PATCH 7/8] refactor: Rename CardColumns to CardsColumns

---
 components/ContactUs/ContactUsCards/index.js                  | 4 ++--
 components/blog/BlogPostsContainer/index.js                   | 4 ++--
 .../CardsColumns.module.scss}                                 | 0
 components/containers/{CardColumns => CardsColumns}/index.js  | 4 ++--
 pages/about.js                                                | 4 ++--
 pages/index.js                                                | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)
 rename components/containers/{CardColumns/CardColumns.module.scss => CardsColumns/CardsColumns.module.scss} (100%)
 rename components/containers/{CardColumns => CardsColumns}/index.js (91%)

diff --git a/components/ContactUs/ContactUsCards/index.js b/components/ContactUs/ContactUsCards/index.js
index 2512da99..dd84da5e 100644
--- a/components/ContactUs/ContactUsCards/index.js
+++ b/components/ContactUs/ContactUsCards/index.js
@@ -1,4 +1,4 @@
-import { CardColumns } from '@/components/containers/CardColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
 import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
 import RevealContentContainer from '../../containers/RevealContentContainer';
 import styles from './ContactUsCards.module.scss';
@@ -35,7 +35,7 @@ export default function ContactUsCards() {
   return (
     <article className={styles.contactCards}>
       <RevealContentContainer>
-        <CardColumns cards={cards} cardComponent={ContactUsCard} />
+        <CardsColumns cards={cards} cardComponent={ContactUsCard} />
       </RevealContentContainer>
     </article>
   );
diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
index 2048b9e8..d8248f63 100644
--- a/components/blog/BlogPostsContainer/index.js
+++ b/components/blog/BlogPostsContainer/index.js
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
-import { CardColumns } from '@/components/containers/CardColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -37,7 +37,7 @@ const BlogPostsContainer = ({
         {swipe ? (
           <>
             {[posts.slice(0, 6)].map((p, index) => (
-              <CardColumns
+              <CardsColumns
                 key={index}
                 cards={p}
                 cardComponent={BlogCard}
diff --git a/components/containers/CardColumns/CardColumns.module.scss b/components/containers/CardsColumns/CardsColumns.module.scss
similarity index 100%
rename from components/containers/CardColumns/CardColumns.module.scss
rename to components/containers/CardsColumns/CardsColumns.module.scss
diff --git a/components/containers/CardColumns/index.js b/components/containers/CardsColumns/index.js
similarity index 91%
rename from components/containers/CardColumns/index.js
rename to components/containers/CardsColumns/index.js
index aa746bc2..2a9e0006 100644
--- a/components/containers/CardColumns/index.js
+++ b/components/containers/CardsColumns/index.js
@@ -4,9 +4,9 @@ import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import Container from '@/components/containers/Container';
-import styles from './CardColumns.module.scss';
+import styles from './CardsColumns.module.scss';
 
-export function CardColumns({ cards, customClass, cardComponent }) {
+export function CardsColumns({ cards, customClass, cardComponent }) {
   const Card = cardComponent;
   return (
     <Container>
diff --git a/pages/about.js b/pages/about.js
index 5b833dd9..d1f6bde9 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,7 +1,7 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { AboutUsCard } from '@/components/containers/Card/AboutUsCard';
-import { CardColumns } from '@/components/containers/CardColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -96,7 +96,7 @@ export default function AboutUs() {
         <Container>
           <h2>Our goals</h2>
         </Container>
-        <CardColumns
+        <CardsColumns
           cards={[
             {
               title: '1',
diff --git a/pages/index.js b/pages/index.js
index 58c9228f..3e13f167 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import TwoColumn from '@/components/containers/TwoColumn';
-import { CardColumns } from '@/components/containers/CardColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
 import { Card } from '@/components/containers/Card';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
@@ -34,7 +34,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <CardColumns
+        <CardsColumns
           cards={[
             {
               title: 'Join the project',

From 84f9ffdfbecf394666f1da3e255db7f8f77a588f Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Wed, 20 Aug 2025 19:08:50 +0100
Subject: [PATCH 8/8] docs: Reflect updated name

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ffeef8e..5b75da35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -184,7 +184,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Layout
   - RelatedPosts
   - Footer
-  - CardColumnsInterface
+  - CardsColumns
   - Nav
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility