Refactor/about us

app/(pages)/(event-page)/event/_components/Prizes/PrizeList.module.scss

@@ -1,4 +1,4 @@
-@use 'app/(pages)/_globals/mixins';
+@use 'app/(pages)/_globals/mixins'; 
 
 .container {
   background-color: #123041;

app/(pages)/(index-page)/_components/Marquee/Logo.module.scss

@@ -1,7 +1,7 @@
 
 
 .container {
-  background: #005271;
+  background: #2B3C4C;
   border-radius: 10px;
   transition: transform 0.2s ease-in-out;
 

app/(pages)/(index-page)/about-us/_components/About/About.module.scss

@@ -10,7 +10,8 @@ $mobile-breakpoint: 758px;
     background: #FFF;
     font-family: "Metropolis", sans-serif;
     padding: 5%;
-    padding-bottom: 10%;
+    padding-bottom: 0;
+    padding-top: 0;
 
     @media (max-width: $big-tablet-breakpoint) {
         padding: 10%;
@@ -43,6 +44,10 @@ $mobile-breakpoint: 758px;
 .header {
     grid-column: 1/-1; 
     font-family: "Metropolis", sans-serif;
+    font-weight: 700;
+    color: #123041;
+    line-height: normal;
+    letter-spacing: 0.8px;
 
     @media (max-width: $big-tablet-breakpoint) {
         grid-row: 1;

app/(pages)/(index-page)/about-us/_components/About/About.tsx

@@ -1,25 +1,28 @@
 import React from 'react';
-import Image from 'next/image';
 import styles from './About.module.scss';
+import AnimalCard from './Components/AnimalCard';
 
 const aboutData = [
   {
     title: 'Inclusivity',
     text: 'We invite individuals of all backgrounds to learn new skills and grow in an inclusive environment.',
-    imagePath: '/about-us-icon/cow.png',
+    imagePath: '/about-us-icon/hd_cow.png',
     imageName: 'Cow',
+    color: 'rgba(158, 231, 229, 0.75)',
   },
   {
     title: 'Hands-on learning',
     text: 'No matter which prompt you choose, each project provides hands-on experience and an opportunity to explore a new discipline.',
-    imagePath: '/about-us-icon/froggy.png',
+    imagePath: '/about-us-icon/log_frog.png',
     imageName: 'Froggy',
+    color: 'rgba(194, 229, 103, 0.75)',
   },
   {
     title: 'Impactful projects',
     text: 'Create meaningful, impactful, and innovative solutions that benefit local and global communities.',
-    imagePath: '/about-us-icon/bunny.png',
+    imagePath: '/about-us-icon/log_rabbit.png',
     imageName: 'Bunny',
+    color: 'rgba(255, 197, 171, 0.75)',
   },
 ];
 
@@ -29,22 +32,8 @@ export default function About() {
       <div className={styles.content}>
         <h1 className={styles.header}>What we're all about</h1>
         <div className={styles.tiles}>
-          {aboutData.map((item) => (
-            <div key={item.title} className={styles.tile}>
-              <div>
-                <h1>{item.title}</h1>
-                <p>{item.text}</p>
-              </div>
-              <div className={styles.image}>
-                <Image
-                  src={item.imagePath}
-                  width={100}
-                  height={100}
-                  layout="responsive"
-                  alt={item.imageName}
-                />
-              </div>
-            </div>
+          {aboutData.map((item, index) => (
+            <AnimalCard {...item} key={index} />
           ))}
         </div>
       </div>

app/(pages)/(index-page)/about-us/_components/About/Components/AnimalCard.module.scss

@@ -0,0 +1,36 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(158, 231, 229, 0.75);
+    padding: 32px;
+    border-radius: 10px;
+    overflow: hidden;
+    width: 342px;
+    height: 342px;
+}
+
+.heading {
+    color: #123041;
+    font-family: 'Metropolis';
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: 0.48px;
+    margin-bottom: 16px;
+}
+.text {
+    color: #123041;
+    font-family: 'Metropolis';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 21px */
+    letter-spacing: 0.28px;
+}
+.animalImage {
+    height: 64%;
+    width: auto;
+    align-self: center;
+    transform: translateY(20%)
+}

app/(pages)/(index-page)/about-us/_components/About/Components/AnimalCard.tsx

@@ -0,0 +1,29 @@
+import styles from './AnimalCard.module.scss';
+
+import Image from 'next/image';
+
+export type AnimalCardProps = {
+  title: string;
+  text: string;
+  imagePath: string;
+  imageName: string;
+  color: string;
+};
+
+export default function AnimalCard(props: AnimalCardProps) {
+  const { title, text, imagePath, imageName, color } = props;
+
+  return (
+    <div className={styles.container} style={{ backgroundColor: color }}>
+      <h2 className={styles.heading}>{title}</h2>
+      <p className={styles.text}>{text}</p>
+      <Image
+        src={imagePath}
+        width={100}
+        height={100}
+        alt={imageName}
+        className={styles.animalImage}
+      />
+    </div>
+  );
+}

app/(pages)/(index-page)/about-us/_components/Archive/components/Carousel/carouselSubComponents/CarouselArrowButtons/CarouselArrowButtons.module.scss

@@ -1,38 +1,37 @@
 .single__button {
-                -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-                -webkit-appearance: none;
-                appearance: none;
-                background-color: transparent;
-                touch-action: manipulation;
-                display: inline-flex;
-                text-decoration: none;
-                cursor: pointer;
-                border: 0;
-                padding: 0;
-                margin: 0;
-                box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-                width: 3.6rem;
-                height: 3.6rem;
-                z-index: 1;
-                border-radius: 50%;
-                color: var(--text-body);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background-color: #88D8DD;
+    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    touch-action: manipulation;
+    display: inline-flex;
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+    width: 3.6rem;
+    height: 3.6rem;
+    z-index: 1;
+    border-radius: 50%;
+    color: var(--text-body);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #EEEEEE;
 
-                @media (max-width: 768px) {
-                    width: 34px;
-                    height: 34px;
-                }
+    @media (max-width: 768px) {
+        width: 34px;
+        height: 34px;
+    }
 
-                .single__button__svg {
-                    width: 35%;
-                    height: 35%;
-                }
-            }
+    .single__button__svg {
+        width: 35%;
+        height: 35%;
+    }
+}
 
-            .single__button:disabled {
-                background-color: #DBDBDB;
-                color:grey;
-            }
+.single__button:disabled {
+    opacity: 0.3;
+}

app/(pages)/(index-page)/about-us/_components/Archive/components/Carousel/carouselSubComponents/CarouselProgress/CarouselProgress.module.scss

@@ -18,7 +18,7 @@
     .carousel__progress {
         border-radius: 1.8rem;
         box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-        background-color: #B3B3B3;;
+        background-color: #EEEEEE;;
         position: relative;
         height: 0.6rem;
         justify-self: flex-end;
@@ -33,7 +33,7 @@
         }
 
         .carousel__progress__bar {
-            background-color: #005271;;
+            background-color: #AAAAAA;;
             position: absolute;
             width: 17%;
             border-radius: 10px;