#37 Added styling to the features and spec section of singular produc…

…t page. Styling for feature with an image instead of description is still needed.
Scout-NU · Apr 7, 2021 · 7d01d76 · 7d01d76
1 parent 1e9cc1b
commit 7d01d76
Show file tree

Hide file tree

Showing 2 changed files with 70 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,52 @@ export const IconImage = styled.div`
 export const IconCaption = styled.div`
   font-size: 15px;
 `
+
+export const FeatureSpecSection = styled.div`
+  margin-top: 100px;
+`
+
+export const FeatureIcon = styled.div`
+  width: 3vw;
+  height: 45px;
+  background-color: #9D9D9D;
+`
+
+export const FeatureSpecHeading = styled.div`
+  font-size: calc(40px + (40 - 32) * ((100vw - 300px) / (1440 - 300)));
+  font-weight: bold;
+  padding-top: 20px;
+`
+
+export const FeatureSpecFeatures = styled.div`
+`
+
+export const Feature = styled.div`
+  padding-top: 90px;
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+  }
+`
+
+export const FeatureName = styled.div`
+  text-transform: uppercase;
+  font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300)));
+  width: 20vw;
+  padding-right: 2vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+    padding-right: 0px;
+  }
+`
+
+export const FeatureDescription = styled.div`
+  font-size: 15px;
+  width: 35vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    width: 100%;
+    padding-top: 16px;
+  }
+`
diff --git a/src/components/singular-product/singular-product.js b/src/components/singular-product/singular-product.js
@@ -17,6 +17,13 @@ import {
     Icon,
     IconImage,
     IconCaption,
+    FeatureSpecSection,
+    FeatureIcon,
+    FeatureSpecHeading,
+    FeatureSpecFeatures,
+    Feature,
+    FeatureName,
+    FeatureDescription,
   } from "./singular-product-styles"
 
   export default function SingularProductPage({ data }) {
@@ -52,6 +59,20 @@ import {
               })}
             </IconContainer>
           </IconSection>
+          <FeatureSpecSection>
+            <FeatureIcon></FeatureIcon>
+            <FeatureSpecHeading>{data.feature_title}</FeatureSpecHeading>
+            <FeatureSpecFeatures>
+              {data.features.map(feature => {
+                return (
+                  <Feature>
+                    <FeatureName>{feature.feature_name}</FeatureName>
+                    <FeatureDescription>{feature.feature_description.text}</FeatureDescription>
+                  </Feature>
+                )
+              })}
+            </FeatureSpecFeatures>
+          </FeatureSpecSection>
       </SingularProductContainer>
     )
   }