From 9060b6cc5b51996610dcc82a7b3164b590fb29bf Mon Sep 17 00:00:00 2001 From: Viviana Date: Wed, 31 Mar 2021 19:51:35 -0400 Subject: [PATCH] #31 Added styling to the Featured Product section on the Products page --- src/pages/products.js | 81 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 75 insertions(+), 6 deletions(-) diff --git a/src/pages/products.js b/src/pages/products.js index 825eda0..41a128a 100644 --- a/src/pages/products.js +++ b/src/pages/products.js @@ -1,16 +1,85 @@ import React from "react" import { graphql } from "gatsby" +import Layout from "../components/layout" +import styled from "styled-components" +import dimensions from "../style/dimensions" + +const ProductPageHeading = styled.div` + font-size: calc(90px + (90 - 32) * ((100vw - 300px) / (1440 - 300))); + font-weight: bold; +` + +const FeaturedProductSection = styled.div` + width: 100%; + padding-top: 40px; + + @media (min-width: ${dimensions.maxwidthTablet}px) { + width: 86vw; + display: flex; + } +` + +const FeaturedProductImage = styled.div` + width: 47vw; + height: 432px; + background-color: #C4C4C4; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + width: 100%; + height: 225px; + } +` + +const FeaturedProductText = styled.div` + padding-left: 5vw; + padding-top: 52px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-left: 0vw; + padding-top: 26px; + } +` + +const FeaturedProductHeading = styled.div` + font-size: calc(20px + (20 - 16) * ((100vw - 300px) / (1440 - 300))); + text-transform: uppercase; +` + +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; + } +` + +const FeaturedProductDescription = styled.div` + font-size: calc(18px + (18 - 16) * ((100vw - 300px) / (1440 - 300))); + padding-top: 32px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-top: 15px; + + } +` export default function ProductSection({ data }) { const productSectionData = data.prismicProductPage.data return ( -
- {/* Mapping over individual products. TODO: separate products based on category (homeowner or commerical) */} - {productSectionData.products.map(product => { - return

{product.product.document.data.product_title}

- })} -
+ + {productSectionData.product_page_main_heading} + + + + {productSectionData.featured_product_heading} + {productSectionData.featured_product_name} + {productSectionData.featured_product_description} + + + ) }