diff --git a/gatsby-node.js b/gatsby-node.js index 04e0284..6581868 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -16,6 +16,48 @@ exports.createPages = ({ boundActionCreators, graphql }) => { path date title + image + heading + description + intro { + blurbs { + image + text + } + heading + description + } + main { + heading + description + image1 { + alt + image + } + image2 { + alt + image + } + image3 { + alt + image + } + } + testimonials { + author + quote + } + full_image + pricing { + heading + description + plans { + description + items + plan + price + } + } } } } diff --git a/src/components/Features.js b/src/components/Features.js new file mode 100644 index 0000000..030db59 --- /dev/null +++ b/src/components/Features.js @@ -0,0 +1,18 @@ +import React from 'react'; + +const FeatureGrid = ({ gridItems }) => ( +
+ {gridItems.map(item => ( +
+
+

+ +

+

{item.text}

+
+
+ ))} +
+); + +export default FeatureGrid; diff --git a/src/layouts/index.js b/src/layouts/index.js index 3da51cf..2ebff8d 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -17,6 +17,9 @@ const Navbar = () => ( About + + Products +
diff --git a/src/pages/product/img/illustrations/coffee-gear.svg b/src/pages/product/img/illustrations/coffee-gear.svg new file mode 100644 index 0000000..93b797e --- /dev/null +++ b/src/pages/product/img/illustrations/coffee-gear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/product/img/illustrations/coffee.svg b/src/pages/product/img/illustrations/coffee.svg new file mode 100644 index 0000000..baa46a7 --- /dev/null +++ b/src/pages/product/img/illustrations/coffee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/product/img/illustrations/meeting-space.svg b/src/pages/product/img/illustrations/meeting-space.svg new file mode 100644 index 0000000..043eafb --- /dev/null +++ b/src/pages/product/img/illustrations/meeting-space.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/product/img/illustrations/tutorials.svg b/src/pages/product/img/illustrations/tutorials.svg new file mode 100644 index 0000000..64f42a1 --- /dev/null +++ b/src/pages/product/img/illustrations/tutorials.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/product/img/products/jumbotron.jpg b/src/pages/product/img/products/jumbotron.jpg new file mode 100644 index 0000000..dfb2dbe Binary files /dev/null and b/src/pages/product/img/products/jumbotron.jpg differ diff --git a/src/pages/product/img/products/products-full-width.jpg b/src/pages/product/img/products/products-full-width.jpg new file mode 100644 index 0000000..b1a0194 Binary files /dev/null and b/src/pages/product/img/products/products-full-width.jpg differ diff --git a/src/pages/product/img/products/products-grid1.jpg b/src/pages/product/img/products/products-grid1.jpg new file mode 100644 index 0000000..600be3c Binary files /dev/null and b/src/pages/product/img/products/products-grid1.jpg differ diff --git a/src/pages/product/img/products/products-grid2.jpg b/src/pages/product/img/products/products-grid2.jpg new file mode 100644 index 0000000..b066a88 Binary files /dev/null and b/src/pages/product/img/products/products-grid2.jpg differ diff --git a/src/pages/product/img/products/products-grid3.jpg b/src/pages/product/img/products/products-grid3.jpg new file mode 100644 index 0000000..df47e06 Binary files /dev/null and b/src/pages/product/img/products/products-grid3.jpg differ diff --git a/src/pages/product/product.md b/src/pages/product/product.md new file mode 100644 index 0000000..5e4c4fd --- /dev/null +++ b/src/pages/product/product.md @@ -0,0 +1,101 @@ +--- +path: /products +templateKey: 'product-page' +title: Our Coffee +image: /img/products/jumbotron.jpg +heading: What we offer +description: >- + Kaldi is the ultimate spot for coffee lovers who want to learn about their + java’s origin and support the farmers that grew it. We take coffee production, + roasting and brewing seriously and we’re glad to pass that knowledge to + anyone. +intro: + blurbs: + - image: /img/illustrations/coffee.svg + text: > + We sell green and roasted coffee beans that are sourced directly from + independent farmers and farm cooperatives. We’re proud to offer a + variety of coffee beans grown with great care for the environment and + local communities. Check our post or contact us directly for current + availability. + - image: /img/illustrations/coffee-gear.svg + text: > + We offer a small, but carefully curated selection of brewing gear and + tools for every taste and experience level. No matter if you roast your + own beans or just bought your first french press, you’ll find a gadget + to fall in love with in our shop. + - image: /img/illustrations/tutorials.svg + text: > + Love a great cup of coffee, but never knew how to make one? Bought a + fancy new Chemex but have no clue how to use it? Don't worry, we’re here + to help. You can schedule a custom 1-on-1 consultation with our baristas + to learn anything you want to know about coffee roasting and brewing. + Email us or call the store for details. + - image: /img/illustrations/meeting-space.svg + text: > + We believe that good coffee has the power to bring people together. + That’s why we decided to turn a corner of our shop into a cozy meeting + space where you can hang out with fellow coffee lovers and learn about + coffee making techniques. All of the artwork on display there is for + sale. The full price you pay goes to the artist. + heading: What we offer + description: > + Kaldi is the ultimate spot for coffee lovers who want to learn about their + java’s origin and support the farmers that grew it. We take coffee + production, roasting and brewing seriously and we’re glad to pass that + knowledge to anyone. This is an edit via identity... +main: + heading: Great coffee with no compromises + description: > + We hold our coffee to the highest standards from the shrub to the cup. + That’s why we’re meticulous and transparent about each step of the coffee’s + journey. We personally visit each farm to make sure the conditions are + optimal for the plants, farmers and the local environment. + image1: + alt: A close-up of a paper filter filled with ground coffee + image: /img/products/products-grid3.jpg + image2: + alt: A green cup of a coffee on a wooden table + image: /img/products/products-grid2.jpg + image3: + alt: Coffee beans + image: /img/products/products-grid1.jpg +testimonials: + - author: Elisabeth Kaurismäki + quote: >- + The first time I tried Kaldi’s coffee, I couldn’t even believe that was + the same thing I’ve been drinking every morning. + - author: Philipp Trommler + quote: >- + Kaldi is the place to go if you want the best quality coffee. I love their + stance on empowering farmers and transparency. +full_image: /img/products/products-full-width.jpg +pricing: + heading: Monthly subscriptions + description: >- + We make it easy to make great coffee a part of your life. Choose one of our + monthly subscription plans to receive great coffee at your doorstep each + month. Contact us about more details and payment info. + plans: + - description: Perfect for the drinker who likes to enjoy 1-2 cups per day. + items: + - 3 lbs of coffee per month + - Green or roasted beans" + - One or two varieties of beans" + plan: Small + price: '50' + - description: 'Great for avid drinkers, java-nsoving couples and bigger crowds' + items: + - 6 lbs of coffee per month + - Green or roasted beans + - Up to 4 different varieties of beans + plan: Big + price: '80' + - description: Want a few tiny batches from different varieties? Try our custom plan + items: + - Whatever you need + - Green or roasted beans + - Unlimited varieties + plan: Custom + price: '?' +--- diff --git a/src/templates/product-page.js b/src/templates/product-page.js new file mode 100644 index 0000000..1182767 --- /dev/null +++ b/src/templates/product-page.js @@ -0,0 +1,100 @@ +import React from 'react'; +import FeatureGrid from '../components/Features'; +import grid1 from '../pages/product/img/products/products-grid1.jpg'; +import grid2 from '../pages/product/img/products/products-grid2.jpg'; +import grid3 from '../pages/product/img/products/products-grid3.jpg'; + +export default ({ data }) => { + const { markdownRemark: post } = data; + const { frontmatter } = post; + return ( +
+
+
+
+
+
+

{frontmatter.title}

+

{frontmatter.description}

+ +

{frontmatter.main.heading}

+

{frontmatter.main.description}

+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ 
{JSON.stringify(frontmatter, null, 2)}
+
+
+
+
+ ); +}; + +export const productPageQuery = graphql` + query ProductPage($path: String!) { + markdownRemark(frontmatter: { path: { eq: $path } }) { + frontmatter { + title + path + image + heading + description + intro { + blurbs { + image + text + } + heading + description + } + main { + heading + description + image1 { + alt + image + } + image2 { + alt + image + } + image3 { + alt + image + } + } + testimonials { + author + quote + } + full_image + pricing { + heading + description + plans { + description + items + plan + price + } + } + } + } + } +`; diff --git a/static/admin/config.yml b/static/admin/config.yml index 86432cb..b588cbd 100644 --- a/static/admin/config.yml +++ b/static/admin/config.yml @@ -18,13 +18,31 @@ collections: - {label: "Publish Date", name: "date", widget: "datetime"} - {label: "Body", name: "body", widget: "markdown"} - - name: "about" - label: "About" - folder: "src/pages/about" - create: false - slug: "{{slug}}" - fields: - - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"} - - {label: "Path", name: "path", widget: "hidden", default: "/about"} - - {label: "Title", name: "title", widget: "string"} - - {label: "Body", name: "body", widget: "markdown"} + - name: "pages" + label: "Pages" + files: + - name: "about" + label: "About" + folder: "src/pages/about" + create: false + slug: "{{slug}}" + fields: + - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"} + - {label: "Path", name: "path", widget: "hidden", default: "/about"} + - {label: "Title", name: "title", widget: "string"} + - {label: "Body", name: "body", widget: "markdown"} + - file: "src/pages/product" + label: "Products Page" + name: "products" + create: false + fields: + - {label: "Template Key", name: "templateKey", widget: "hidden", default: "products-page"} + - {label: Title, name: title, widget: string} + - {label: Image, name: image, widget: image} + - {label: Heading, name: heading, widget: string} + - {label: Description, name: description, widget: string} + - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]} + - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]} + - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]} + - {label: Full_image, name: full_image, widget: image} + - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}