Merge pull request #144 from Web-Dev-Path/feature/contact-us-card

Added "Contact Us Cards" section to Contact page

Author: mariana-caldas

CHANGELOG.md

@@ -55,7 +55,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - contact form functionalities (email form using sendgrid, subscription if selected, google recaptcha)
 - who we are section to about page
 - still got questions section to about page
-
+- Contact us cards section to contact page
 
 
 ### Fixed

components/ContactUsCards.js

@@ -0,0 +1,33 @@
+import contactCardStyles from '@/styles/ContactUsCards.module.scss';
+import CardsColumns from './containers/CardsColumns';
+import RevealContentContainer from './containers/RevealContentContainer';
+
+export default function ContactUsCards() {
+  return (
+    <div className={contactCardStyles.contactCards}>
+      <RevealContentContainer>
+        <CardsColumns
+          titles={['FAQ', 'Blog', 'Repository']}
+          images={[
+            '/images/svg/faq-icon.svg',
+            '/images/svg/blog-icon.svg',
+            '/images/svg/repository-icon.svg',
+          ]}
+          altTags={['FAQ', 'Blog', 'Repository']}
+          content={[
+            'Find the main questions about the project.',
+            'Share your projects and ideas with our community.',
+            'Check out our codebase and guidelines.',
+          ]}
+          links={[
+            'https://github.com/Web-Dev-Path/web-dev-path/wiki/FAQ',
+            '/blog',
+            'https://github.com/Web-Dev-Path/web-dev-path',
+          ]}
+          linkText={['Our FAQ', 'Our Blog', 'Our Repository']}
+          customClass='contact-cards'
+        />
+      </RevealContentContainer>
+    </div>
+  );
+}

components/containers/Card.js

@@ -11,6 +11,13 @@ export default function Card({
   linkText,
   customClass,
 }) {
+  const LinkComponent = link?.startsWith('http') ? (
+    <a href={link} target='_blank' rel='noopener noreferrer'>
+      {linkText}
+    </a>
+  ) : (
+    <Link href={link}>{linkText}</Link>
+  );
   return (
     <div
       className={
@@ -32,7 +39,7 @@ export default function Card({
       <h2 className={styles.title}>{title}</h2>
       <div className={styles.content}>
         <p>
-          {content} {link && <Link href={link}>{linkText}</Link>}
+          {content} {link && LinkComponent}
         </p>
       </div>
     </div>

components/containers/CardsColumns.js

@@ -1,5 +1,5 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination, Navigation } from 'swiper';
+import { Pagination } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';

pages/contact.js

@@ -1,29 +1,33 @@
 import { useState } from 'react';
 import { ContactUsFormSubscribe } from '@/components/ContactUsForm';
+import ContactUsCards from '@/components/ContactUsCards';
 import contactUsFormStyles from '@/styles/Contact.module.scss';
 import Bracket from '@/components/decorations/Bracket';
 
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
 
   return (
-    <div className={contactUsFormStyles.contact}>
-      <div className={contactUsFormStyles.contact__formAndDecorations}>
-        <Bracket className={contactUsFormStyles.contact__yellowBracket} />
-        <ContactUsFormSubscribe setMsg={setMessage} />
-        <img
-          src='/images/svg/yellow-colon.svg'
-          className={contactUsFormStyles.contact__yellowColon}
-        />
-        <div className={contactUsFormStyles.contact__response_message}>
-          {message?.map((m, i) => (
-            <span key={i}>
-              {m}
-              <br />
-            </span>
-          ))}
+    <>
+      <div className={contactUsFormStyles.contact}>
+        <div className={contactUsFormStyles.contact__formAndDecorations}>
+          <Bracket className={contactUsFormStyles.contact__yellowBracket} />
+          <ContactUsFormSubscribe setMsg={setMessage} />
+          <img
+            src='/images/svg/yellow-colon.svg'
+            className={contactUsFormStyles.contact__yellowColon}
+          />
+          <div className={contactUsFormStyles.contact__response_message}>
+            {message?.map((m, i) => (
+              <span key={i}>
+                {m}
+                <br />
+              </span>
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+      <ContactUsCards />
+    </>
   );
 }

public/images/svg/blog-icon.svg

@@ -88,4 +88,29 @@
       }
     }
   }
+
+  // Contact us cards
+  &.contact-cards {
+    height: 27rem;
+    background-color: $white;
+
+    @include desktop {
+      height: 25rem;
+    }
+
+    .card__image {
+      width: auto;
+      position: relative;
+      height: 5rem;
+      margin-right: 75%;
+      margin-top: 3rem;
+      margin-bottom: 3rem;
+
+      .img {
+        margin: 0;
+        position: absolute;
+        object-fit: contain !important;
+      }
+    }
+  }
 }

public/images/svg/faq-icon.svg

@@ -5,6 +5,10 @@
   background-color: $light-bg-color;
   height: 42rem;
   position: relative;
+  margin-bottom: -10rem;
+  @include mobile {
+    margin-bottom: 3rem;
+  }
 
   &__formAndDecorations {
     @include tablet {