#35 Added styling to icon section of the singular product page. Revis…

…ion is still needed for styling mobile version of this section.
Scout-NU · Apr 4, 2021 · 1e9cc1b · 1e9cc1b
1 parent f1055c6
commit 1e9cc1b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
@@ -83,3 +83,35 @@ export const ProductDescription = styled.div`
     padding-top: 24px;
   }
 `
+
+export const IconSection = styled.div`
+  margin-top: 127px;
+`
+
+export const IconSectionHeading = styled.div`
+  text-transform: uppercase;
+  font-size: 20px;
+`
+
+export const IconContainer = styled.div`
+  display: flex;
+  padding-top: 80px;
+  justify-content: space-between;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    flex: 50%;
+    padding-top: 54px;
+  }
+`
+
+export const Icon = styled.div``
+
+export const IconImage = styled.div`
+  width: 4vw;
+  height: 55px;
+  background-color: #C4C4C4;
+`
+
+export const IconCaption = styled.div`
+  font-size: 15px;
+`
diff --git a/src/components/singular-product/singular-product.js b/src/components/singular-product/singular-product.js
@@ -11,6 +11,12 @@ import {
     ProductType,
     ProductName,
     ProductDescription,
+    IconSection,
+    IconSectionHeading,
+    IconContainer,
+    Icon,
+    IconImage,
+    IconCaption,
   } from "./singular-product-styles"
 
   export default function SingularProductPage({ data }) {
@@ -33,6 +39,19 @@ import {
                 <ProductDescription>{data.product_description.text}</ProductDescription>
               </TextContainer>
           </HeroSection>
+          <IconSection>
+            <IconSectionHeading>{data.icon_section_title}</IconSectionHeading>
+            <IconContainer>
+              {data.icons.map(icon => {
+                return (
+                  <Icon>
+                    <IconImage></IconImage>
+                    <IconCaption>{icon.icon_text}</IconCaption>
+                  </Icon>
+                )
+              })}
+            </IconContainer>
+          </IconSection>
       </SingularProductContainer>
     )
   }