#36 Added basic styling to image highlight section. More styling is n…

…eeded for unique structure of images and descriptions.
Scout-NU · Apr 7, 2021 · 33cfb9f · 33cfb9f
1 parent 9e4534d
commit 33cfb9f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
@@ -115,3 +115,43 @@ export const IconImage = styled.div`
 export const IconCaption = styled.div`
   font-size: 15px;
 `
+
+export const ImageHighlightSection = styled.div`
+  padding-top: 76px;
+  
+`
+
+export const ImageHighlightHeading = styled.div`
+  font-size: calc(64px + (64 - 32) * ((100vw - 300px) / (1440 - 300)));
+  font-weight: bold;
+  padding-top: 147px;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-top: 43px;
+  }  
+`
+
+export const ImageHighlightGroupContainer = styled.div`
+  
+`
+
+export const ImageHighlightGroup = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+  }  
+`
+
+export const HighlightedImage = styled.div`
+  
+`
+
+export const ImageHighlightDescription = styled.div`
+  font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
+  width: 35vw;
+  
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+    padding-top: 32px;
+  }  
+
+`
diff --git a/src/components/singular-product/singular-product.js b/src/components/singular-product/singular-product.js
@@ -17,6 +17,12 @@ import {
     Icon,
     IconImage,
     IconCaption,
+    ImageHighlightSection,
+    ImageHighlightHeading,
+    ImageHighlightGroupContainer,
+    ImageHighlightGroup,
+    HighlightedImage,
+    ImageHighlightDescription,
   } from "./singular-product-styles"
 
   export default function SingularProductPage({ data }) {
@@ -52,6 +58,19 @@ import {
               })}
             </IconContainer>
           </IconSection>
+          <ImageHighlightSection>
+            <ImageHighlightHeading>{data.image_highlight_heading}</ImageHighlightHeading>
+            <ImageHighlightGroupContainer>
+              {data.image_highlight_group.map(highlight => {
+                return (
+                  <ImageHighlightGroup>
+                    <HighlightedImage></HighlightedImage>
+                    <ImageHighlightDescription>{highlight.image_highlight_description}</ImageHighlightDescription>
+                  </ImageHighlightGroup>
+                )
+              })}
+            </ImageHighlightGroupContainer>
+          </ImageHighlightSection>
       </SingularProductContainer>
     )
   }