#31 Updated styling of featured section on product page to match styl…

…ing of Hi-fi wireframes.
Scout-NU · Apr 28, 2021 · ce8264c · ce8264c
1 parent d4c2f17
commit ce8264c
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 66 deletions.
diff --git a/src/components/product_page/product-page-styles.js b/src/components/product_page/product-page-styles.js
@@ -1,14 +1,9 @@
 import styled from "styled-components"
 import dimensions from "../../style/dimensions"
 
-export const ProductPageHeading = styled.div`
-  font-size: calc(90px + (90 - 32) * ((100vw - 300px) / (1440 - 300)));
-  font-weight: bold;
-`
-
 export const FeaturedProductSection = styled.div`
   width: 100%;
-  padding-top: 40px;
+  margin-top: 40px;
 
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     width: 86vw;
@@ -17,47 +12,23 @@ export const FeaturedProductSection = styled.div`
 `
 
 export const FeaturedProductImage = styled.div`
-  width: 47vw;
-  height: 432px;
-  background-color: #C4C4C4;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    width: 100%;
-    height: 225px;
+  img {
+    width: 47vw;
+    margin-left: -80px;
+    @media (max-width: ${dimensions.maxwidthTablet}px) {
+      width: 100%;
+      margin-left: 0px;
+    }
   }
 `
 
 export const FeaturedProductText = styled.div`
-  padding-left: 5vw;
-  padding-top: 52px;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-left: 0vw;
-    padding-top: 26px;
-  }
-`
-
-export const FeaturedProductHeading = styled.div`
-  font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300)));
-  text-transform: uppercase;
-`
-
-export const FeaturedProductName = styled.div`
-  font-size: calc(40px + (40 - 24) * ((100vw - 300px) / (1440 - 300)));
-  font-weight: bold;
-  padding-top: 17px;
-
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 8px;
-  }
-`
-
-export const FeaturedProductDescription = styled.div`
-  font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300)));
-  padding-top: 32px;
+  margin-left: 5vw;
+  margin-top: 52px;
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding-top: 15px;
+    margin-left: 0vw;
+    margin-top: 26px;
   }
 `
 
@@ -69,11 +40,6 @@ export const ModelScope = styled.div`
   }
 `
 
-export const ModelScopeHeading = styled.div`
-  font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300)));
-  text-transform: uppercase;
-`
-
 export const ProductsGroup = styled.div`
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     display: flex;
@@ -100,8 +66,6 @@ export const ProductImage = styled.div`
 `
 
 export const ProductName = styled.div`
-  font-size: calc(30px + (30 - 24) * ((100vw - 300px) / (1440 - 300)));
-  font-weight: bold;
   padding-top: 49px;
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {
@@ -110,7 +74,6 @@ export const ProductName = styled.div`
 `
 
 export const ProductDescription = styled.div`
-  font-size: 15px;
   padding-top: 15px;
 
   @media (max-width: ${dimensions.maxwidthTablet}px) {

diff --git a/src/components/product_page/product-page.js b/src/components/product_page/product-page.js
@@ -1,14 +1,10 @@
 import React from "react"
+import { H1, H2, H3, Body, Sub1 } from "../../style/type-styles"
 import {
-    ProductPageHeading,
     FeaturedProductSection,
     FeaturedProductImage,
     FeaturedProductText,
-    FeaturedProductHeading,
-    FeaturedProductName,
-    FeaturedProductDescription,
     ModelScope,
-    ModelScopeHeading,
     ProductsGroup,
     Product,
     ProductImage,
@@ -19,28 +15,33 @@ import {
 export default function ProductSection({ data }) {
     return (
         <div>
-            <ProductPageHeading>{data.product_page_main_heading}</ProductPageHeading>
+            <H1>{data.product_page_main_heading}</H1>
             <FeaturedProductSection>
-                <FeaturedProductImage></FeaturedProductImage>
+                <FeaturedProductImage>
+                    <img src={data.featured_product_image.url} alt={data.featured_product_image.alt}/>
+                </FeaturedProductImage>
                 <FeaturedProductText>
-                    <FeaturedProductHeading>{data.featured_product_heading}</FeaturedProductHeading>
-                    <FeaturedProductName>{data.featured_product_name}</FeaturedProductName>
-                    <FeaturedProductDescription>{data.featured_product_description}</FeaturedProductDescription>
+                    <Sub1>{data.featured_product_heading}</Sub1>
+                    <H2>{data.featured_product_name}</H2>
+                    <Body>{data.featured_product_description}</Body>
                 </FeaturedProductText>
             </FeaturedProductSection>
 
             <div>
                 {data.model_scope.map(scope => {
                     return (
                         <ModelScope>
-                            <ModelScopeHeading>{scope.model_scope_heading}</ModelScopeHeading>
+                            <Sub1>{scope.model_scope_heading}</Sub1>
                             <ProductsGroup>
                                 {data.products.map(product => {
                                     return (
                                         <Product>
                                             <ProductImage></ProductImage>
-                                            <ProductName>{product.product_title}</ProductName>
-                                            <ProductDescription>{product.product_description}</ProductDescription>
+                                            <ProductName>
+                                                {product.product_title}
+                                            </ProductName>
+                                            <H3></H3>
+                                            <Body>{product.product_description}</Body>
                                         </Product>
                                     )
                                 })}

diff --git a/src/pages/about.js b/src/pages/about.js
@@ -23,7 +23,9 @@ export const query = graphql`
         company_background_section_heading
         company_comparison_section_heading
         company_team_heading
-        cta_button_destination
+        cta_button_destination {
+          url
+        }
         cta_button_text
         industry_context_explanation {
           explanation_description
@@ -37,10 +39,14 @@ export const query = graphql`
         product_feature {
           product_feature_name
         }
-        products_navigation_button_destination
+        products_navigation_button_destination {
+          url
+        }
         products_navigation_button_text
         team_member_information {
-          contact_button_destination
+          contact_button_destination {
+            url
+          }
           contact_button_text
           team_member_description
           team_member_title

diff --git a/src/pages/product_page.js b/src/pages/product_page.js
@@ -19,6 +19,10 @@ export const query = graphql`
       data {
         featured_product_description
         featured_product_heading
+        featured_product_image {
+          alt
+          url
+        }
         featured_product_name
         learn_more_button_text
         learn_more_button_text_destination

diff --git a/src/style/type-styles.js b/src/style/type-styles.js
@@ -4,7 +4,10 @@ const minSize = {
   h1: 50,
   h2: 30,
   h3: 20,
+  nav: 16,
+  sub1: 25,
   p: 16,
+  body: 14,
 }
 
 const devices = {
@@ -20,6 +23,9 @@ const fontSizes = {
   h2: `calc(${minSize.h2}px + (48 - ${minSize.h2}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   h3: `calc(${minSize.h3}px + (32 - ${minSize.h3}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   p: `calc(${minSize.p}px + (24 - ${minSize.p}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  NavText: `calc(${minSize.nav}px + (24 - ${minSize.nav}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  Sub1: `calc(${minSize.sub1}px + (36 - ${minSize.sub1}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  body: `calc(${minSize.body}px + (18 - ${minSize.body}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
 }
 
 const H1 = styled.h1`
@@ -41,4 +47,17 @@ const P = styled.p`
   font-size: ${fontSizes.p};
 `
 
-export { H1, H2, H3, P }
+const NavText = styled.div`
+  font-size: ${fontSizes.nav};
+`
+
+const Sub1 = styled.div`
+  font-size: ${fontSizes.Sub1};
+  text-transform: uppercase;
+`
+
+const Body = styled.div`
+  font-size: ${fontSizes.body};
+`
+
+export { H1, H2, H3, P, NavText, Sub1, Body }