added cards to page

Author: klezi10

components/snippets/Title.js

@@ -0,0 +1,5 @@
+const Title = ({ title }) => {
+  return <h2>{title}</h2>;
+};
+
+export default Title;

pages/about.js

@@ -1,6 +1,9 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { white, primary, primaryAccent } from '@/styles/TwoColumn.module.scss';
+import CardsColumns from '@/components/containers/CardsColumns';
+import { Container } from '@/components/containers/Container';
+import Title from '@/components/snippets/Title';
 
 export default function AboutUs() {
   return (
@@ -88,6 +91,28 @@ export default function AboutUs() {
           customInnerClass='about-content'
         />
       </RevealContentContainer>
+      <RevealContentContainer>
+        <Title 
+          title='Our goals'
+        />
+        <CardsColumns
+          titles={['1', '2']}
+          images={[
+            '/images/join-us.webp',
+            '/images/volunteer.webp',
+          ]}
+          altTags={[
+            'Join the project',
+            'Volunteer to learn together',
+          ]}
+          content={[
+            'To provide a safe space for juniors to learn how to communicate in a simulated professional environment.',
+            'To offer more detailed tasks (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.',
+          ]}
+          links={['/about', '/contact']}
+          linkText={['Learn more', 'Contact us']}
+        />
+      </RevealContentContainer>
     </div>
   );
 }

styles/Container.module.scss

@@ -5,3 +5,4 @@
   width: 90%;
   max-width: $large-desktop-breakpoint;
 }
+