diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js index 2ad2dfb..c5c99d3 100644 --- a/src/components/singular-product/singular-product-styles.js +++ b/src/components/singular-product/singular-product-styles.js @@ -6,7 +6,6 @@ import { } from "../../style/variables" import colors from "../../style/colors" - export const SingularProductContainer = styled.div`` export const HeroSection = styled.div` diff --git a/src/pages/products.js b/src/pages/products.js index 6f7480c..1633d97 100644 --- a/src/pages/products.js +++ b/src/pages/products.js @@ -43,6 +43,13 @@ export const query = graphql` button_destination button_title cta_title + feature_icon { + url + dimensions { + height + width + } + } feature_title features { feature_name diff --git a/src/schemas/product.json b/src/schemas/product.json index 5b14b3c..75669f0 100644 --- a/src/schemas/product.json +++ b/src/schemas/product.json @@ -32,6 +32,12 @@ "label" : "Product Description" } }, + "product_recommendation" : { + "type" : "Text", + "config" : { + "label" : "Product Recommendation" + } + }, "product_images" : { "type" : "Group", "config" : { diff --git a/src/templates/product.js b/src/templates/product.js index 4d89338..a4a5d2d 100644 --- a/src/templates/product.js +++ b/src/templates/product.js @@ -1,20 +1,178 @@ -import React from "react" +import React, { useState } from "react" import { graphql } from "gatsby" +import { H1, H2, H3, Sub1, P } from "../style/type-styles" +import { + SingularProductContainer, + HeroSection, + ImageContainer, + TextContainer, + ProductType, + IconSection, + IconContainer, + Icon, + IconImage, + IconCaption, + ImageHighlightSection, + ImageHighlightHeading, + ImageHighlightGroupContainer, + ImageHighlightGroup, + HighlightedImage, + ImageHighlightDescription, + ThirdSection, + FeatureSpecSection, + FeatureIcon, + Feature, + FeatureName, + FeatureImage, + FeatureDescription, + IconHeader, +} from "../components/singular-product/singular-product-styles" +import Layout from "../components/layout" export default function Product({ data }) { const products = data.allPrismicProduct.edges[0].node + const [mainImage, setMainImage] = useState(0) - return
{products.data.product_description.text}
+{icon.icon_text}
+{feature.feature_description}
+