Refactor scss CardContainer

CHANGELOG.md

@@ -190,6 +190,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - contactStyles
   - CardsColumns
   - Nav
+  - CardsContainers
   - NewsletterSubscribe
   - Hero
 - Extracted :root from themes.scss to globals.scss

components/ContactUs/ContactUsCards/index.js

@@ -1,5 +1,5 @@
 import { CardsColumns } from '@/components/containers/CardsColumns';
-import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
+import { Card } from '@/components/containers/Card';
 import RevealContentContainer from '../../containers/RevealContentContainer';
 import styles from './ContactUsCards.module.scss';
 
@@ -35,7 +35,10 @@ export default function ContactUsCards() {
   return (
     <article className={styles.contactCards}>
       <RevealContentContainer>
-        <CardsColumns cards={cards} cardComponent={ContactUsCard} />
+        <CardsColumns
+          cards={cards}
+          cardComponent={props => <Card {...props} cardType='contact' />}
+        />
       </RevealContentContainer>
     </article>
   );

components/blog/BlogPostsContainer/index.js

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { BlogCard } from '@/components/containers/Card/BlogCard';
+import { Card } from '@/components/containers/Card';
 import { CardsColumns } from '@/components/containers/CardsColumns';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
@@ -40,7 +40,7 @@ const BlogPostsContainer = ({
               <CardsColumns
                 key={index}
                 cards={p}
-                cardComponent={BlogCard}
+                cardComponent={props => <Card {...props} cardType='blog' />}
                 customClass='blog'
               />
             ))}
@@ -49,7 +49,7 @@ const BlogPostsContainer = ({
           <Container>
             <div className={styles.postContainer}>
               {posts?.map((p, index) => (
-                <BlogCard $cardType='blog' key={index} card={p} />
+                <Card cardType='blog' key={index} card={p} />
               ))}
             </div>
           </Container>

components/containers/Card/Cards.module.scss

@@ -0,0 +1,156 @@
+@use '@/styles/index' as *;
+
+// Base Card
+.card {
+  margin: 1rem 1rem 0 0.5rem;
+  padding: 1.5rem;
+  border-radius: 1.5rem;
+  box-shadow: var(--shadow-default);
+  min-width: 32%;
+  height: 37rem;
+
+  a {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+      opacity: 0.6;
+      text-decoration: none;
+    }
+  }
+
+  @include small-mobile-min {
+    height: 42rem;
+  }
+
+  @include desktop {
+    height: 37rem;
+    margin: 1.5rem 1.5rem 0 1.5rem;
+
+    &:first-child,
+    &:last-child {
+      margin: 1.5rem 0.5rem 0 0.5rem;
+    }
+  }
+}
+
+.title {
+  font-family: $font-family-secondary;
+  font-weight: bold;
+  font-size: 1.75rem;
+  color: var(--color-primary-content);
+  margin: 1rem 0 0 0;
+  line-height: unset;
+
+  @include tablet {
+    font-size: 2.25rem;
+  }
+}
+
+.contentWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.imageWrapper {
+  width: 100%;
+  height: 18rem;
+  position: relative;
+}
+
+.cardImage {
+  border-radius: 0.25rem;
+  object-fit: cover;
+}
+
+.tagContainer {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 12rem;
+  overflow: hidden;
+  gap: 0.5rem;
+  margin-bottom: -1rem;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+// About Us Card Variant
+.card--about {
+  background-color: var(--color-primary-accent);
+  max-height: 35rem;
+
+  @include desktop {
+    max-height: 37rem;
+  }
+
+  .title {
+    @extend .title;
+    font-size: 3.5rem;
+    text-align: center;
+
+    @include desktop {
+      font-size: 5rem;
+    }
+  }
+
+  .contentWrapper {
+    @include desktop {
+      p {
+        font-size: 1.8rem;
+        line-height: 2.2rem;
+      }
+    }
+  }
+}
+
+// Contact Card Variant
+.card--contact {
+  height: 27rem;
+  background-color: var(--color-white);
+
+  @include desktop {
+    height: 25rem;
+  }
+
+  .imageWrapper {
+    width: auto;
+    position: relative;
+    height: 5rem;
+    margin-right: 75%;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .cardImage {
+    margin: 0;
+    position: absolute;
+    object-fit: contain;
+  }
+}
+
+// Blog Card Variant
+.card--blog {
+  margin: 1rem 0.5rem 0 0.5rem;
+
+  @include tablet {
+    height: 40rem;
+  }
+
+  .title {
+    @extend .title;
+    font-size: 1.3rem;
+    margin-bottom: 0.7rem;
+    max-height: 7rem;
+    overflow: hidden;
+
+    @include tablet {
+      font-size: 1.3rem;
+    }
+  }
+
+  .imageWrapper {
+    height: 12rem;
+  }
+}

components/containers/Card/index.js

@@ -1,6 +1,48 @@
-import { CardInterface } from './CardInterface';
-import { CardStyles } from './styles';
+import { Tag } from '@/components/blog/Tag';
+import Link from 'next/link';
+import Image from 'next/image';
+import styles from './Cards.module.scss';
 
-export function Card({ card }) {
-  return <CardInterface card={card} styledComponents={CardStyles} />;
+export function Card({ card, cardType = 'default' }) {
+  const { image, altTag, title, content, link, linkText, tagList } = card;
+
+  const LinkComponent = link?.startsWith('http') ? (
+    <a href={link} target='_blank' rel='noopener noreferrer'>
+      {linkText}
+    </a>
+  ) : (
+    link && <Link href={link}>{linkText}</Link>
+  );
+
+  return (
+    <div className={`${styles.card} ${styles[`card--${cardType}`] || ''}`}>
+      {image && (
+        <div className={styles.imageWrapper}>
+          <Image className={styles.cardImage} src={image} alt={altTag} fill />
+        </div>
+      )}
+
+      {title && (
+        <h2 className={styles.title} title={title}>
+          {title}
+        </h2>
+      )}
+
+      {tagList?.length > 0 && (
+        <div className={styles.tagContainer}>
+          {tagList.slice(0, 8).map((tag, i) => (
+            <Tag key={i} text={tag} />
+          ))}
+        </div>
+      )}
+
+      {content && (
+        <div className={styles.contentWrapper}>
+          <p>
+            {content} {LinkComponent}
+          </p>
+        </div>
+      )}
+    </div>
+  );
 }