Sbit 62: fix bugs

src/components/BannerList/Banner.scss

@@ -5,24 +5,20 @@
     p {
       text-align: justify;
       margin: 0 !important;
-      font-size: 16px;
     }
     img {
       width: 48px;
     }
   }
   &__title {
-    font-size: $second-large;
-    text-align: center;
+    font-weight: 700;
+    text-align: left;
   }
 }
 
 @media screen and (min-width: $breakpoint-xl) {
   .bannerList {
     .card_item {
-      p {
-        font-size: 20px;
-      }
       img {
         width: 70px;
       }

src/components/BannerList/BannerLis.js

@@ -4,8 +4,6 @@ import './Banner.scss';
 export default function BannerLis({ data }) {
     const title = data?.title;
     const image = data?.Card[0]?.icon?.url;
-    console.log(data)
-    console.log(image)
 
     const cards = data?.Card.map((item) => {
         return (
@@ -18,7 +16,7 @@ export default function BannerLis({ data }) {
                     />
                 </div>
                 <div className="card_item col-9 ps-2 pe-2">
-                    <p>{item.title}</p>
+                    <h4>{item.title}</h4>
                     <p>{item.description}</p>
                 </div>
             </div>
@@ -27,10 +25,13 @@ export default function BannerLis({ data }) {
     })
 
     return (
-        <div className="bannerList container-fluid mt-4 d-md-flex flex-row-reverse">
-            <div className="bannerList__title col-md-4 col-xl-5 align-self-center ps-3 pe-3 mb-4">{title}</div>
-            <div className="bannerList__cards col-md-8 col-xl-5 ms-xl-4">{cards}</div>
+        <div className="container my-3 py-3">
+            <div className="bannerList d-md-flex flex-row-reverse">
+            <h1 className="bannerList__title col-md-6 col-xl-5 align-self-center ps-4 mb-4">{title}</h1>
+            <div className="bannerList__cards col-md-6 col-xl-5 pe-5">{cards}</div>
         </div>
+        </div>
+
 
     )
 }

src/components/BitwayPage/Paragraph/Paragraph.scss

@@ -4,7 +4,6 @@
   margin-bottom: 20px;
   & p {
     font-family: $primary-font;
-    font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: 30px;
@@ -13,16 +12,13 @@
   }
   & > div > p {
     font-family: $primary-font;
-    font-size: 20px;
+
     font-style: normal;
     font-weight: 400;
     line-height: 30px;
     letter-spacing: 0em;
     text-align: justify;
     // padding: 0 80px 20px;
-    & * {
-      font-size: 20px;
-    }
     & a {
       color: $blue;
     }

src/components/CasesSection/CasesSection.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import "./CasesSection.scss"
+
+const CasesSection = ({data}) => {
+  return (
+    <div className="container my-3">
+    <div>{data.title}</div>      
+      </div>
+
+  )
+}
+
+export default CasesSection

src/components/CasesSection/CasesSection.scss

@@ -0,0 +1 @@
+

src/components/DualSection/DualSection.js

@@ -5,7 +5,7 @@ export default function DualSection({ data }) {
     const dualSectionParts = data?.dualSectionPart
 
     const listSectionParts = dualSectionParts.map((section) =>
-        <div className="dualSection p-3">
+        <div className="dualSection p-4">
             <div className="dualSection__image">
                 <img
                     src={section.image.url}
@@ -14,21 +14,24 @@ export default function DualSection({ data }) {
             </div>
 
             <div className="dualSection__textContainer">
-                <h1>{section.title}</h1>
+                <h4>{section.title}</h4>
                 <p>{section.description}</p>
                 <a href={section.button.url} target="_blank" rel="noreferrer" >
-                    <button>{section.button.content}</button>
+                    <button className="px-4">{section.button.content}</button>
                 </a>
             </div>
 
         </div>
     );
 
     return (
-
+        <div className="container my-3 py-3">
         <div className="d-flex flex-column flex-md-row">
             {listSectionParts}
+        </div>        
         </div>
 
+
+
     )
 }

src/components/DualSection/DualSection.scss

@@ -3,9 +3,21 @@
 .dualSection {
   p {
     text-align: justify;
+    font-weight: 700;
+  }
+  h4 {
+    font-weight: 700;
   }
 
   &__image {
     width: 300px;
   }
+  button {
+    background: $light-grey;
+    color: white;
+    font-weight: 500;
+    border-radius: 3px;
+    border: none;
+    padding: 0.3em;
+  }
 }

src/components/expandGrid/ExpandGrid.js

@@ -1,16 +1,20 @@
 import React, { useRef, useState } from "react"
 import { Flipper, Flipped } from "react-flip-toolkit"
+import MarkdownView from "react-showdown"
 import "./expandGrid.scss"
 
 const ExpandGrid = ({ data }) => {
   return (
+    <div className="container my-3 py-5">
     <section className="expandGrid">
       <div className="expandGrid-body">
         <h2>{data.title}</h2>
-        <h4>{data.subtitle}</h4>
+        <h6 className="px-5">{data.subtitle}</h6>
         <AnimatedList items={data.items} />
       </div>
-    </section>
+    </section>      
+    </div>
+
   )
 }
 
@@ -88,7 +92,7 @@ const ExpandedListItem = ({ index, onClick, data }) => {
 
             <div className="additional-content">
               <div>
-                <p>{data.text}</p>
+                <MarkdownView markdown={data.text} />
               </div>
             </div>
           </div>

src/components/expandGrid/expandGrid.scss

@@ -3,20 +3,17 @@
 .expandGrid {
   display: flex;
   flex-direction: column;
-  padding: 0 2em;
   justify-content: center;
-  @media screen and (max-width: 890px) {
-    padding: 0 10px;
-  }
   h2 {
-    font-size: 4em;
-    text-transform: uppercase;
     color: #333333;
     flex-grow: 1;
     text-align: center;
+    font-weight: 700;
   }
-  h4{
+  h6 {
     text-align: center;
+    line-height: 30px;
+    font-weight: 400;
 
   }
 }
@@ -111,6 +108,7 @@
   width: 100%;
   margin-top: 2rem;
 
+
   @media screen and (max-width: 890px) {
     margin: 0;
   }
@@ -120,6 +118,9 @@
   opacity: 0;
   border-radius: 3px;
   height: 5rem;
+  h4 {
+    text-align: left;
+  }
 }
 
 /* content fade in animations */

src/components/index.js

@@ -16,11 +16,13 @@ import BannerTop from "./Banners/BannerTop"
 import BannerActionCall from "./Banners/BannerActionCall"
 import PartnersSection from "./PartnersSection/PartnersSection"
 import JobsPage from "./JobsPage/JobsPage"
+import CasesSection from "./CasesSection/CasesSection"
 
 export {
   ServicesSection,
   ServiceCard,
   Cards,
+  CasesSection,
   SubModuleItems,
   SubModulesEdTech,
   Title,

src/components/layout.scss

@@ -1,5 +1,4 @@
 @import "../styles/global.scss";
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -12,7 +11,6 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2a2c2e;
-  font-family: "Roboto", sans-serif;
   font-weight: normal;
   word-wrap: break-word;
   font-kerning: normal;
@@ -83,19 +81,14 @@ h1 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Roboto", sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
   line-height: 1.1;
 }
 mark {
   background-color: #ff0;
   color: #000;
 }
-small {
-  font-size: 80%;
-}
 sub,
 sup {
   font-size: 75%;
@@ -128,7 +121,6 @@ code,
 kbd,
 pre,
 samp {
-  font-family: "Roboto", sans-serif;
   font-size: 1em;
 }
 figure {
@@ -261,10 +253,8 @@ h2 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Roboto", sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
   line-height: 1.1;
 }
 h3 {
@@ -277,10 +267,8 @@ h3 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Roboto", sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
   line-height: 1.1;
 }
 h4 {
@@ -293,10 +281,8 @@ h4 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Roboto", sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
-  font-size: 1rem;
   line-height: 1.1;
 }
 h5 {
@@ -309,10 +295,8 @@ h5 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Roboto", sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
   line-height: 1.1;
 }
 h6 {
@@ -325,10 +309,8 @@ h6 {
   padding-top: 0;
   margin-bottom: 1.45rem;
   color: inherit;
-  font-family: "Roboto", sans-serif;
   font-weight: bold;
   text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
   line-height: 1.1;
 }
 hgroup {
@@ -417,7 +399,6 @@ table {
   padding-right: 0;
   padding-top: 0;
   margin-bottom: 1.45rem;
-  font-size: 1rem;
   line-height: 1.45rem;
   border-collapse: collapse;
   width: 100%;
@@ -563,7 +544,6 @@ tt,
 code {
   background-color: hsla(0, 0%, 0%, 0.04);
   border-radius: 3px;
-  font-family: "Roboto", sans-serif;
   padding: 0;
   padding-top: 0.2em;
   padding-bottom: 0.2em;

src/components/quote/Quote.js

@@ -4,7 +4,8 @@ import React from "react"
 
 const Quote = ({ data: { description, title, variant, profile, image } }) => {
   return (
-    <section className={`quote variant-${variant}`}>
+    <div className="container my-3">
+      <section className={`quote variant-${variant}`}>
       <div className="quote-body">
         <img
           placeholder="https://via.placeholder.com/900"
@@ -14,7 +15,7 @@ const Quote = ({ data: { description, title, variant, profile, image } }) => {
       </div>
 
       <div className="quote-person">
-        <h2 className="quote-person-title">{title}</h2>
+        <h4 className="quote-person-title">{title}</h4>
         <p className="quote-person-text">{description}</p>
       </div>
 
@@ -26,6 +27,7 @@ const Quote = ({ data: { description, title, variant, profile, image } }) => {
         />
       </div>
     </section>
+      </div>
   )
 }