Refactor/to scss cardcolumns

CHANGELOG.md

@@ -184,6 +184,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Layout
   - RelatedPosts
   - Footer
+  - CardsColumns
   - Nav
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility

components/ContactUs/ContactUsCards/index.js

@@ -1,4 +1,5 @@
-import { ContactCardsColumns } from '../../containers/CardColumns/ContactCardsColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
+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} />
+        <CardsColumns cards={cards} cardComponent={ContactUsCard} />
       </RevealContentContainer>
     </article>
   );

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 { 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,12 @@ const BlogPostsContainer = ({
         {swipe ? (
           <>
             {[posts.slice(0, 6)].map((p, index) => (
-              <BlogCardsColumns key={index} cards={p} />
+              <CardsColumns
+                key={index}
+                cards={p}
+                cardComponent={BlogCard}
+                customClass='blog'
+              />
             ))}
           </>
         ) : (

components/containers/CardsColumns/CardsColumns.module.scss

@@ -0,0 +1,11 @@
+.innerContent {
+  padding-bottom: 4rem;
+}
+
+.cardColumnSwiper {
+  margin-bottom: 5rem;
+
+  :global(.swiper-pagination-bullet-active) {
+    background-color: var(--dark-bg);
+  }
+}

components/containers/CardsColumns/index.js

@@ -0,0 +1,48 @@
+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 styles from './CardsColumns.module.scss';
+
+export function CardsColumns({ cards, customClass, cardComponent }) {
+  const Card = cardComponent;
+  return (
+    <Container>
+      <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>
+  );
+}

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 { CardsColumns } from '@/components/containers/CardsColumns';
 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
+        <CardsColumns
           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>

pages/index.js

@@ -1,5 +1,6 @@
 import TwoColumn from '@/components/containers/TwoColumn';
-import { CardsColumns } 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';
 import Stick from '@/components/decorations/Stick';
@@ -63,6 +64,7 @@ export default function Home() {
               linkText: 'Learn more',
             },
           ]}
+          cardComponent={Card}
         />
       </RevealContentContainer>