add arrow box in features

@@ -18,9 +18,84 @@ const Section = styled.section`
 const SectionBox = styled.div`
   max-width: 80%;
   margin: 0 auto;
-  &.image-section {
-    max-width: 60%;
+`;
+
+const ImageSection = styled.div`
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+`;
+
+const ItemContainer = styled.div`
+  display: flex;
+  transform: translateX(-75deg);
+`;
+
+const ItemBox = styled.div`
+  padding: 0 10px;
+`;
+
+const ArrowContainer = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+`;
+
+const ArrowWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const ArrowLeftBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 40px;
+  width: 64px;
+  height: 64px;
+  background-color: rgba(35, 39, 42, 0.3);
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+const ArrowRightBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 40px;
+  width: 64px;
+  height: 64px;
+  background-color: rgba(35, 39, 42, 0.3);
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+const ArrowSvg = styled.svg`
+  width: 32px;
+  height: 32px;
+  &.arrow-left-svg {
+    transform: rotate(180deg);
   }
+  &.arrow-right-svg {
+    transform: rotate(0deg);
+  }
+`;
+
+const LeftArrowPath = styled.path`
+  fill-rule: evenodd;
+  clip-rule: evenodd;
+  fill: white;
+`;
+
+const RightArrowPath = styled.path`
+  fill-rule: evenodd;
+  clip-rule: evenodd;
+  fill: white;
 `;
 
 const DescriptionBox = styled.div`
@@ -61,7 +136,8 @@ const ParagraphBox = styled.div`
 `;
 
 const Image = styled.img`
-  height: 500px;
+  width: 100%;
+  height: auto;
   border-radius: 10px;
 `;
 
@@ -110,14 +186,37 @@ export default () => {
           </SectionBox>
         </Section>
         <Section>
-          <SectionBox className="image-section">
-            <DescriptionBox>
-              <TitleBox className="desc-header-title">
-                Look Around Linker
-              </TitleBox>
+          <TitleBox className="desc-header-title">Look Around Linker</TitleBox>
+          <ImageSection className="image-section">
+            <ItemContainer>
+              <ItemBox>
                 <Image src={ChatImage} alt={"Back Image"} />
-            </DescriptionBox>
-          </SectionBox>
+              </ItemBox>
+              <ItemBox>
+                <Image src={ChatImage} alt={"Back Image"} />
+              </ItemBox>
+              <ItemBox>
+                <Image src={ChatImage} alt={"Back Image"} />
+              </ItemBox>
+              <ItemBox>
+                <Image src={ChatImage} alt={"Back Image"} />
+              </ItemBox>
+            </ItemContainer>
+            <ArrowContainer>
+              <ArrowWrapper>
+                <ArrowLeftBox>
+                  <ArrowSvg fill="none" className="arrow-left-svg">
+                    <LeftArrowPath d="M22.2398 17.0778L11.8576 27.5689C11.2532 28.1437 10.3287 28.1437 9.75984 27.5689C9.19095 26.994 9.19095 26.0599 9.75984 25.4491L19.1109 16L9.75984 6.5509C9.19095 5.97605 9.19095 5.00599 9.75984 4.43114C10.3287 3.85629 11.2532 3.85629 11.8576 4.43114L22.2398 14.9581C22.8087 15.5329 22.8087 16.4671 22.2398 17.0778Z" />
+                  </ArrowSvg>
+                </ArrowLeftBox>
+                <ArrowRightBox>
+                  <ArrowSvg fill="none" className="arrow-right-svg">
+                    <RightArrowPath d="M22.2398 17.0778L11.8576 27.5689C11.2532 28.1437 10.3287 28.1437 9.75984 27.5689C9.19095 26.994 9.19095 26.0599 9.75984 25.4491L19.1109 16L9.75984 6.5509C9.19095 5.97605 9.19095 5.00599 9.75984 4.43114C10.3287 3.85629 11.2532 3.85629 11.8576 4.43114L22.2398 14.9581C22.8087 15.5329 22.8087 16.4671 22.2398 17.0778Z" />
+                  </ArrowSvg>
+                </ArrowRightBox>
+              </ArrowWrapper>
+            </ArrowContainer>
+          </ImageSection>
         </Section>
       </Main>
       <Footer />