add main component style

 import React from "react";
 import React from "react";
 import styled from "styled-components";
 import styled from "styled-components";
+import Button from "./Button";
 import Laptop from "../Imgs/laptop.jpg";
 import Laptop from "../Imgs/laptop.jpg";
+import Phone from "../Imgs/leftImage.jpg";
 
 
 const Main = styled.main`
 const Main = styled.main`
   display: flex;
   display: flex;
@@ -8,8 +10,12 @@ const Main = styled.main`
 `;
 `;
 
 
 const Section = styled.section`
 const Section = styled.section`
-  padding: 10rem 0;
+  padding-top: 8rem;
+  padding-bottom: 5rem;
   max-width: none;
   max-width: none;
+  &.color-section {
+    background-color: #341f97;
+  }
 `;
 `;
 
 
 const SectionBox = styled.div`
 const SectionBox = styled.div`
@@ -21,15 +27,60 @@ const SectionBox = styled.div`
   margin: 0 auto;
   margin: 0 auto;
 `;
 `;
 
 
-const DescriptionBox = styled.div``;
+const DescriptionBox = styled.div`
+  p {
+    font-size: 1.1rem;
+    word-spacing: 7px;
+    line-height: 1.4;
+  }
+`;
+
+const TitleBox = styled.div`
+  margin-bottom: 10px;
+  font-size: 2rem;
+  font-weight: 600;
 
 
-const TitleBox = styled.div``;
+  &.color-title {
+    color: #ffffff;
+  }
+`;
 
 
 const IllustrationBox = styled.div``;
 const IllustrationBox = styled.div``;
 
 
 const Image = styled.img`
 const Image = styled.img`
-  src: url(${(props) => props.src});
-  alt: ${(props) => props.alt};
+  width: 100%;
+  height: 100%;
+`;
+
+const ColorBox = styled.div`
+  max-width: 80%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ButtonBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 10px;
+  button {
+    cursor: pointer;
+    width: 200px;
+    height: 50px;
+    background-color: #474787;
+    color: white;
+    border-radius: 10px;
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+    &:last-child {
+      background-color: white;
+      border: 1px solid #474787;
+      color: #474787;
+    }
+  }
 `;
 `;
 
 
 export default () => {
 export default () => {
@@ -57,6 +108,37 @@ export default () => {
           </IllustrationBox>
           </IllustrationBox>
         </SectionBox>
         </SectionBox>
       </Section>
       </Section>
+      <Section>
+        <SectionBox>
+          <IllustrationBox>
+            <Image src={Phone} alt={"Back Image"}></Image>
+          </IllustrationBox>
+          <DescriptionBox>
+            <TitleBox>Why do we use it?</TitleBox>
+            <p>
+              It is a long established fact that a reader will be distracted by
+              the readable content of a page when looking at its layout. The
+              point of using Lorem Ipsum is that it has a more-or-less normal
+              distribution of letters, as opposed to using 'Content here,
+              content here', making it look like readable English. Many desktop
+              publishing packages and web page editors now use Lorem Ipsum as
+              their default model text, and a search for 'lorem ipsum' will
+              uncover many web sites still in their infancy. Various versions
+              have evolved over the years, sometimes by accident, sometimes on
+              purpose (injected humour and the like).
+            </p>
+          </DescriptionBox>
+        </SectionBox>
+      </Section>
+      <Section className="color-section">
+        <ColorBox>
+          <TitleBox className="color-title">Ipsum Lorem</TitleBox>
+          <ButtonBox>
+            <Button text={"Ipsum"} />
+            <Button text={"Lorem"} />
+          </ButtonBox>
+        </ColorBox>
+      </Section>
     </Main>
     </Main>
   );
   );
 };
 };