diff --git a/src/components/product_page/product-page-styles.js b/src/components/product_page/product-page-styles.js index 50be851..72488a0 100644 --- a/src/components/product_page/product-page-styles.js +++ b/src/components/product_page/product-page-styles.js @@ -1,9 +1,12 @@ import styled from "styled-components" import dimensions from "../../style/dimensions" +import colors from "../../style/colors" export const FeaturedProductSection = styled.div` width: 100%; margin-top: 40px; + margin-bottom: 148px; + color: ${colors.blue900}; @media (min-width: ${dimensions.maxwidthTablet}px) { width: 86vw; @@ -11,6 +14,26 @@ export const FeaturedProductSection = styled.div` } ` +export const FeaturedCTA = styled.div` + margin-top: 64px; + a { + background-color: ${colors.orange900}; + text-transform: uppercase; + color: ${colors.white900}; + padding-left: 48px; + font-size: 16px; + padding-right: 48px; + padding-top: 16px; + padding-bottom: 16px; + text-decoration: none; + } +` + +export const ProductsHeading = styled.div` + padding-top: 135px; + color: ${colors.blue900}; +` + export const FeaturedProductImage = styled.div` img { width: 47vw; @@ -25,6 +48,7 @@ export const FeaturedProductImage = styled.div` export const FeaturedProductText = styled.div` margin-left: 5vw; margin-top: 52px; + color: ${colors.blue900}; @media (max-width: ${dimensions.maxwidthTablet}px) { margin-left: 0vw; @@ -46,11 +70,45 @@ export const ProductImage = styled.div` width: 21vw; height: 245px; + img { + width: 21vw; + height: 245px; + object-fit: cover; + } + @media (max-width: ${dimensions.maxwidthTablet}px) { width: 100%; + + img { + width: 100%; + height: 244px; + object-fit: cover; + } } ` -export const HomeownerSection = styled.div`` +export const HomeownerSection = styled.div` + color: ${colors.blue900}; +` + +export const CommercialSection = styled.div` + color: ${colors.blue900}; +` + +export const ProductCTA = styled.div` +margin-top: 58px; +margin-bottom: 58px; -export const CommercialSection = styled.div`` \ No newline at end of file + a { + padding-right: 60px; + padding-left: 60px; + padding-top: 16px; + padding-bottom: 16px; + border: solid ${colors.orange900}; 1px; + font-size: 16px; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + color: ${colors.orange900}; + } +` diff --git a/src/components/product_page/product-page.js b/src/components/product_page/product-page.js index 5278ed4..4efc108 100644 --- a/src/components/product_page/product-page.js +++ b/src/components/product_page/product-page.js @@ -8,14 +8,20 @@ import { ProductImage, HomeownerSection, CommercialSection, + ProductsHeading, + FeaturedCTA, + ProductCTA, } from "./product-page-styles" export default function ProductSection({ data }) { return (
-

{data.product_page_main_heading}

+ +

{data.product_page_main_heading}

+ + {console.log(data.featured_product_image)} {data.featured_product_image.alt}{data.featured_product_heading}

{data.featured_product_name}

{data.featured_product_description} + + {console.log(data)} + + {data.learn_more_button_text} + + @@ -36,13 +48,25 @@ export default function ProductSection({ data }) { product.product.document.data.product_type === "Homeowner" && (
- {product.product.document.data.product_images[0].image.alt}/ + {

{product.product.document.data.product_title}

{product.product.document.data.product_price}

- + {product.product_description} + + + {product.button_text} + +
) ) @@ -53,18 +77,32 @@ export default function ProductSection({ data }) { {data.model_scope[1].model_scope_heading} + {console.log(data.products)} {data.products.map(product => { return ( product.product.document.data.product_type === "Commercial" && (
- {product.product.document.data.product_images[0].image.alt}/ + {

{product.product.document.data.product_title}

+

{product.product.document.data.product_price}

- + {product.product_description} + + + {product.button_text} + +
) ) diff --git a/src/pages/products.js b/src/pages/products.js index 324d7f1..6f7480c 100644 --- a/src/pages/products.js +++ b/src/pages/products.js @@ -8,7 +8,7 @@ export default function ProductSection({ data }) { return ( - + ) } @@ -32,9 +32,12 @@ export const query = graphql` product_page_main_heading products { + button_text + product_description product { document { ... on PrismicProduct { + uid data { product_title button_destination diff --git a/src/schemas/product_page.json b/src/schemas/product_page.json index 8cdba23..3a43bda 100644 --- a/src/schemas/product_page.json +++ b/src/schemas/product_page.json @@ -1,89 +1,101 @@ { - "Main" : { }, - "Featured Section" : { - "product_page_main_heading" : { - "type" : "Text", - "config" : { - "label" : "Product Page Main Heading" + "Main": {}, + "Featured Section": { + "product_page_main_heading": { + "type": "Text", + "config": { + "label": "Product Page Main Heading" } }, - "featured_product_heading" : { - "type" : "Text", - "config" : { - "label" : "Featured Product Heading" + "featured_product_heading": { + "type": "Text", + "config": { + "label": "Featured Product Heading" } }, - "featured_product_name" : { - "type" : "Text", - "config" : { - "label" : "Featured Product Name" + "featured_product_name": { + "type": "Text", + "config": { + "label": "Featured Product Name" } }, - "featured_product_description" : { - "type" : "Text", - "config" : { - "label" : "Featured Product Description" + "featured_product_description": { + "type": "Text", + "config": { + "label": "Featured Product Description" } }, - "featured_product_image" : { - "type" : "Image", - "config" : { - "constraint" : { }, - "thumbnails" : [ ], - "label" : "Featured Product Image" + "featured_product_image": { + "type": "Image", + "config": { + "constraint": {}, + "thumbnails": [], + "label": "Featured Product Image" } }, - "learn_more_button_text" : { - "type" : "Text", - "config" : { - "label" : "Learn More Button Text" + "learn_more_button_text": { + "type": "Text", + "config": { + "label": "Learn More Button Text" } }, - "learn_more_button_text_destination" : { - "type" : "Text", - "config" : { - "label" : "Learn More Button Text Destination" + "learn_more_button_text_destination": { + "type": "Text", + "config": { + "label": "Learn More Button Text Destination" } } }, - "Models Section" : { - "model_scope" : { - "type" : "Group", - "config" : { - "fields" : { - "model_scope_heading" : { - "type" : "Text", - "config" : { - "label" : "Model Scope Heading" + "Models Section": { + "model_scope": { + "type": "Group", + "config": { + "fields": { + "model_scope_heading": { + "type": "Text", + "config": { + "label": "Model Scope Heading" } } }, - "label" : "Model Scope" + "label": "Model Scope" } }, - "products" : { - "type" : "Group", - "config" : { - "fields" : { - "product" : { - "type" : "Link", - "config" : { - "select" : "document", - "customtypes" : [ "product" ], - "label" : "product" + "products": { + "type": "Group", + "config": { + "fields": { + "product": { + "type": "Link", + "config": { + "select": "document", + "customtypes": ["product"], + "label": "product" + } + }, + "button_text": { + "type": "Text", + "config": { + "label": "Button Text" + } + }, + "product_description": { + "type": "Text", + "config": { + "label": "Product Description" } } }, - "label" : "Products" + "label": "Products" } }, - "test" : { - "type" : "Link", - "config" : { - "select" : "document", - "customtypes" : [ "product" ], - "label" : "test" + "test": { + "type": "Link", + "config": { + "select": "document", + "customtypes": ["product"], + "label": "test" } } } -} \ No newline at end of file +}