removed bg color default from wrapper and added in index; added yellow background to about-us section and formatting

Author: klezi10

pages/about.js

@@ -9,9 +9,10 @@ export default function AboutUs() {
     <div className='about-us'>
       <RevealContentContainer>
         {/* ================================OUR BACKGROUND SECTION============== */}
-        <Container>
-          <Title title='Our background' />
+        {/* <Container> */}
+          {/* <Title title='Our background' /> */}
           <TwoColumn
+          title="Our background"
             content={
               <div>
                 The Web Dev Path project was idealized in 2020 in consequence of
@@ -29,9 +30,9 @@ export default function AboutUs() {
             image='/images/svg/square-brackets.svg'
             color={primary}
             bgColor={primaryAccent}
-            customInnerClass='about-content'
+            customInnerClass='our-background'
           />
-        </Container>
+        {/* </Container> */}
         {/* ================================OUR BACKGROUND SECTION============== */}
       </RevealContentContainer>
 

pages/index.js

@@ -3,7 +3,7 @@ import Stick from '@/components/decorations/Stick';
 import TwoColumn from '@/components/containers/TwoColumn';
 import CardsColumns from '@/components/containers/CardsColumns';
 import styles from '@/styles/Home.module.scss';
-import { white, primary } from '@/styles/TwoColumn.module.scss';
+import { white, primary, lightBgColor } from '@/styles/TwoColumn.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 
 export default function Home() {
@@ -17,6 +17,7 @@ export default function Home() {
           content='The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey.'
           link='/about'
           customBtnClass='inverted-grey'
+          bgColor={lightBgColor}
         />
       </RevealContentContainer>
 

styles/TwoColumn.module.scss

@@ -2,7 +2,8 @@
 @use './mixins' as *;
 
 .wrapper {
-  background-color: $light-bg-color;
+  // background-color: $light-bg-color;
+  // background-color: $primary-accent-color;
 
   .inner {
     padding: 5rem 0;
@@ -24,6 +25,21 @@
       }
     }
 
+    //added============================
+    &.our-background {
+      .inner__image {
+        flex-basis: 30rem;
+        // height: 24rem;
+        .img {
+          max-width: 24rem;
+          object-fit: contain;
+          transform: scale(0.65);
+        }
+      }
+    }
+
+    //added============================
+
     &.about-content {
       align-items: center;
       padding: 0px;
@@ -110,5 +126,6 @@
   white: $white;
   primary: $primary-content-color;
   primaryAccent: $primary-accent-color;
+  lightBgColor: $light-bg-color;
   //kl added export primaryAccent
 }