mirror of
https://github.com/kingomarnajjar/gatsby-starter-netlify-cms.git
synced 2026-07-25 22:27:24 +10:00
building products page
This commit is contained in:
Austin Green
parent
c3bea9228e
commit
643ff38b3e
15 changed files with 296 additions and 10 deletions
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
18
src/components/Features.js
Normal file
18
src/components/Features.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
|
||||
const FeatureGrid = ({ gridItems }) => (
|
||||
<div className="columns is-multiline">
|
||||
{gridItems.map(item => (
|
||||
<div key={item.image} className="column is-6">
|
||||
<section className="section">
|
||||
<p>
|
||||
<img className="image is-64x64" alt="" src={item.image} />
|
||||
</p>
|
||||
<p>{item.text}</p>
|
||||
</section>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default FeatureGrid;
|
||||
|
|
@ -17,6 +17,9 @@ const Navbar = () => (
|
|||
<Link className="navbar-item" to="/about">
|
||||
About
|
||||
</Link>
|
||||
<Link className="navbar-item" to="/products">
|
||||
Products
|
||||
</Link>
|
||||
</div>
|
||||
<div className="navbar-end">
|
||||
<a className="navbar-item" href="https://github.com/AustinGreen/gatsby-netlify-cms-boilerplate" target="_blank">
|
||||
|
|
|
|||
1
src/pages/product/img/illustrations/coffee-gear.svg
Normal file
1
src/pages/product/img/illustrations/coffee-gear.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M92.316 32H105a2 2 0 0 1 1.6 3.2L93.489 52.682m7.545 133.092A3.997 3.997 0 0 1 97.041 190H15.493a3.999 3.999 0 0 1-3.995-4.213L19.684 32h72.632l8.718 153.774z" fill-opacity=".3"/><path d="M18.989 45.055l-.429 8.057-.468.038c-1.09.174-2.154.5-3.154.967a12.12 12.12 0 0 0-3.917 2.927 12.032 12.032 0 0 0-2.023 3.159 12.065 12.065 0 0 0-.691 7.51c.252 1.091.66 2.146 1.207 3.123a12.103 12.103 0 0 0 5.957 5.28l1.835.55-.429 8.073a18.475 18.475 0 0 1-4.207-1.127c-.753-.3-1.488-.64-2.2-1.027a20.122 20.122 0 0 1-7.938-7.843 19.901 19.901 0 0 1-2.019-5.228 20.125 20.125 0 0 1-.222-7.929 19.876 19.876 0 0 1 1.378-4.59 20.027 20.027 0 0 1 3.054-4.898 20.145 20.145 0 0 1 6.392-5.017 19.896 19.896 0 0 1 5.47-1.789l2.404-.236zM54 11.658A6.006 6.006 0 0 1 50 6c0-3.311 2.689-6 6-6s6 2.689 6 6a6.006 6.006 0 0 1-4 5.658v2.04A45.116 45.116 0 0 1 92.316 32H19.684A45.116 45.116 0 0 1 54 13.698v-2.04z"/><path d="M218 132c0-2.208-1.792-4-4-4h-68c-2.208 0-4 1.792-4 4v16c0 2.208 1.792 4 4 4h68c2.208 0 4-1.792 4-4v-16z" fill-opacity=".5"/><path d="M236 110v76c0 2.208-1.792 4-4 4H130c-2.208 0-4-1.792-4-4v-76h110zm-35.389-10a28.027 28.027 0 0 0 8.309-17.88 1.987 1.987 0 0 0-1.982-2.106C198.147 80 163.853 80 155.062 80a2 2 0 0 0-1.997 2.121A28.12 28.12 0 0 0 161.389 100h39.222zM183 76h-4c0-2.375-.014-4.749.001-7.124a10.023 10.023 0 0 1 2.67-6.679 9.997 9.997 0 0 1 7.205-3.196c10.391-.063 20.783.128 31.173-.002.214-.008.424-.044.625-.116a2.018 2.018 0 0 0 1.192-1.163c.091-.235.131-.481.134-.733V53h4v4.012a6.046 6.046 0 0 1-.303 1.872 6.026 6.026 0 0 1-1.561 2.463 6.021 6.021 0 0 1-3.396 1.607 6.499 6.499 0 0 1-.591.044c-10.432.131-20.867-.19-31.298.004a6.145 6.145 0 0 0-1.874.349 6.04 6.04 0 0 0-2.375 1.567 6.024 6.024 0 0 0-1.251 2.059 6.123 6.123 0 0 0-.351 2.029V76z" fill-opacity=".5"/><path d="M180 136c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4zm58-36a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H124a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h114zm-51-20a6 6 0 1 0-12 0h12zm33-33c0-2.208 1.792-4 4-4s4 1.792 4 4v6c0 2.208-1.792 4-4 4s-4-1.792-4-4v-6zM146 138c2.208 0 4 1.792 4 4v24c0 13.246-10.754 24-24 24h-14c-11.575 0-21.247-8.212-23.503-19.122l-.207.087A14.007 14.007 0 0 1 83 172c-1.81 0-3.614-.35-5.29-1.035a14.092 14.092 0 0 1-7.329-6.898 13.924 13.924 0 0 1-1.245-4.11 14.102 14.102 0 0 1 .115-4.606c.248-1.293.681-2.55 1.282-3.722a14.072 14.072 0 0 1 6.553-6.32 13.92 13.92 0 0 1 5.733-1.308h.362c.653.013 1.304.062 1.95.16.98.15 1.943.406 2.869.76V142c0-2.208 1.792-4 4-4h54zm-58 16.685a6.09 6.09 0 0 0-2.342-2.065 5.908 5.908 0 0 0-2.421-.615c-.106-.004-.211-.005-.316-.004a5.913 5.913 0 0 0-2.449.556 6.061 6.061 0 0 0-3.004 3.114 5.913 5.913 0 0 0-.428 1.632 5.94 5.94 0 0 0 .787 3.737 6.084 6.084 0 0 0 2.778 2.463c.729.319 1.52.486 2.315.496a5.99 5.99 0 0 0 2.343-.44A6.028 6.028 0 0 0 88 161.314v-6.629zm12.682-32.773c.242.014.48.049.714.116.204.059.398.142.586.24 2.356 1.313 4.672 2.695 7.007 4.044a3.016 3.016 0 0 1 .935.844 3.02 3.02 0 0 1 .54 2.145 3.027 3.027 0 0 1-1.448 2.192 2.983 2.983 0 0 1-1.647.414 3.003 3.003 0 0 1-1.3-.355c-2.356-1.313-4.672-2.696-7.008-4.044a2.996 2.996 0 0 1-1.445-3.169 2.993 2.993 0 0 1 .782-1.507c.251-.262.55-.477.877-.633a3.01 3.01 0 0 1 1.226-.289c.091 0 .09 0 .181.002zm36.817-.002a3.01 3.01 0 0 1 1.226.289 3.014 3.014 0 0 1 1.398 1.37 3.002 3.002 0 0 1-1.106 3.892c-2.315 1.384-4.671 2.698-7.006 4.047a3.034 3.034 0 0 1-1.199.387 3.018 3.018 0 0 1-2.128-.605 3.023 3.023 0 0 1-1.173-2.35 3.033 3.033 0 0 1 .464-1.634 3.027 3.027 0 0 1 .958-.948c2.315-1.383 4.67-2.698 7.006-4.046.159-.089.321-.167.493-.228.286-.102.583-.155.886-.172.091-.002.09-.002.181-.002zm-18.353-10.906c.325.021.642.083.946.202a3.02 3.02 0 0 1 1.72 1.748c.113.306.171.624.186.949.044 2.699.002 5.398.002 8.097a3.018 3.018 0 0 1-.931 2.172 3 3 0 0 1-5.067-2.075c-.044-2.699-.002-5.398-.002-8.097.006-.358.063-.71.188-1.046a3.022 3.022 0 0 1 1.811-1.782c.308-.109.627-.161.952-.172.098 0 .098 0 .195.004z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
1
src/pages/product/img/illustrations/coffee.svg
Normal file
1
src/pages/product/img/illustrations/coffee.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M67.42 0c17.84.002 46.565.797 52.787.975a.996.996 0 0 1 .761.391c.183.238.251.547.186.841l-2.209 9.921s12.475 36.373 12.475 85.399c0 51.875-3.768 84.388-3.768 84.388l6.862 6.328c.305.281.408.723.259 1.112a1 1 0 0 1-.933.645H1a.999.999 0 0 1-.932-.645 1.017 1.017 0 0 1 .258-1.112l6.863-6.328S3.42 149.402 3.42 97.527c0-49.026 12.475-85.399 12.475-85.399l-2.208-9.921a1.016 1.016 0 0 1 .185-.841.999.999 0 0 1 .761-.391C20.855.797 49.58.002 67.42 0z" fill-opacity=".5"/><path d="M75.789 82.504a2 2 0 0 1 3.305-.236c2.89 3.909 2.535 11.121-1.281 17.732-3.817 6.611-9.886 10.524-14.707 9.915a1.938 1.938 0 0 1-1.404-2.889c2.985-5.292 11.049-19.26 14.087-24.522zm-2.598-1.5a1.997 1.997 0 0 0-1.448-2.98c-4.83-.548-10.898 3.365-14.715 9.976-3.817 6.611-4.171 13.823-1.234 17.694a1.94 1.94 0 0 0 3.205-.229c3.09-5.231 11.154-19.199 14.192-24.461z"/><path d="M67.646 59.001a35.84 35.84 0 0 1 5.101.403 34.757 34.757 0 0 1 9.071 2.69 35.102 35.102 0 0 1 9.439 6.287 35.232 35.232 0 0 1 7.136 9.315 34.795 34.795 0 0 1 3.359 9.468c.75 3.782.869 7.688.358 11.51a34.796 34.796 0 0 1-3.052 10.303 35.178 35.178 0 0 1-18.02 17.271 34.727 34.727 0 0 1-6.781 2.083 35.11 35.11 0 0 1-6.611.668 34.87 34.87 0 0 1-13.45-2.587 35.15 35.15 0 0 1-18.229-17.053 34.824 34.824 0 0 1-3.176-10.249 35.304 35.304 0 0 1 .176-11.302 34.84 34.84 0 0 1 3.094-9.358 35.19 35.19 0 0 1 16.575-16.179 34.798 34.798 0 0 1 9.024-2.798 35.92 35.92 0 0 1 5.986-.472zm-.401 8c-1.32.012-2.637.111-3.942.311a26.788 26.788 0 0 0-7.132 2.138 27.194 27.194 0 0 0-12.725 12.125 26.821 26.821 0 0 0-2.51 7.145 27.276 27.276 0 0 0-.229 9.23 26.793 26.793 0 0 0 2.373 7.744 27.184 27.184 0 0 0 5.718 7.847 27.138 27.138 0 0 0 8.426 5.466 26.815 26.815 0 0 0 10.372 1.992 26.8 26.8 0 0 0 10.324-2.119 27.112 27.112 0 0 0 8.356-5.565 27.146 27.146 0 0 0 5.625-7.917 26.829 26.829 0 0 0 2.28-7.784 27.247 27.247 0 0 0-.379-9.387A26.823 26.823 0 0 0 91.086 81a27.198 27.198 0 0 0-12.865-11.751 26.795 26.795 0 0 0-6.851-1.962 27.64 27.64 0 0 0-4.125-.286z" fill-opacity=".5" fill-rule="nonzero"/><path d="M158 138c2.208 0 4 1.792 4 4v24c0 13.246-10.754 24-24 24h-14c-11.575 0-21.247-8.212-23.503-19.122l-.207.087A14.007 14.007 0 0 1 95 172c-1.81 0-3.614-.35-5.29-1.035a14.092 14.092 0 0 1-7.329-6.898 13.924 13.924 0 0 1-1.245-4.11 14.102 14.102 0 0 1 .115-4.606c.248-1.293.681-2.55 1.282-3.722a14.072 14.072 0 0 1 6.553-6.32 13.92 13.92 0 0 1 5.733-1.308h.362c.653.013 1.304.062 1.95.16.98.15 1.943.406 2.869.76V142c0-2.208 1.792-4 4-4h54zm-58 16.686a6.092 6.092 0 0 0-2.342-2.066 5.908 5.908 0 0 0-2.421-.615c-.106-.004-.211-.005-.316-.004a5.913 5.913 0 0 0-2.449.556 6.045 6.045 0 0 0-1.814 1.307 6.022 6.022 0 0 0-1.19 1.807 5.913 5.913 0 0 0-.428 1.632 5.94 5.94 0 0 0 .787 3.737 6.084 6.084 0 0 0 2.778 2.463c.729.319 1.52.486 2.315.496a5.99 5.99 0 0 0 2.343-.44 6.056 6.056 0 0 0 2.737-2.245v-6.628z"/><g><path d="M235 90h-80l-4.79 95.8a4 4 0 0 0 3.995 4.2h81.59a3.998 3.998 0 0 0 3.995-4.2L235 90z" fill-opacity=".3"/><path d="M151.802 153.96L153.2 126h83.6l1.398 27.96-.198.04h-86l-.198-.04z" fill-opacity=".5"/><path d="M236.522 82.392A2.001 2.001 0 0 0 234.56 80h-79.12a2 2 0 0 0-1.962 2.392L155 90h80l1.522-7.608z"/><ellipse cx="195" cy="140" rx="28" ry="21"/><path d="M176.682 63.912c.212.012.421.04.626.092.236.061.459.152.674.264 2.356 1.313 4.672 2.695 7.007 4.044a2.992 2.992 0 0 1 1.373 1.734c.079.261.121.532.127.804a3.026 3.026 0 0 1-1.102 2.384 3.006 3.006 0 0 1-3.318.318c-2.356-1.313-4.672-2.696-7.008-4.044a2.977 2.977 0 0 1-1.373-1.734 3.004 3.004 0 0 1 1.587-3.574 2.98 2.98 0 0 1 1.226-.289c.09-.001.09-.001.181.001zm36.817-.001a2.978 2.978 0 0 1 1.307.329 3.02 3.02 0 0 1 1.459 1.663 3.002 3.002 0 0 1-1.248 3.559c-2.315 1.383-4.671 2.698-7.006 4.046a3.034 3.034 0 0 1-1.199.387 3.018 3.018 0 0 1-2.128-.605 3.04 3.04 0 0 1-.572-.578 3.023 3.023 0 0 1-.499-2.579 3.014 3.014 0 0 1 1.32-1.775c2.315-1.383 4.67-2.698 7.006-4.046.159-.089.321-.167.493-.228.286-.102.583-.155.886-.172.091-.002.09-.002.181-.001zm-18.353-10.907c.325.021.642.083.946.202a3.02 3.02 0 0 1 1.72 1.748c.113.306.171.624.186.949.044 2.699.002 5.398.002 8.097a3.016 3.016 0 0 1-.862 2.104 2.99 2.99 0 0 1-.694.526 3 3 0 0 1-4.442-2.533C191.958 61.399 192 58.699 192 56c.006-.358.063-.71.188-1.046a3.022 3.022 0 0 1 1.811-1.782c.308-.109.627-.161.952-.172.098 0 .097 0 .195.004z" fill-opacity=".5"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
1
src/pages/product/img/illustrations/meeting-space.svg
Normal file
1
src/pages/product/img/illustrations/meeting-space.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M99.678 20h14a2 2 0 0 1 1.6 3.2l-12.487 16.649V174h-76v-53.291l-2.638-2.238c-.543-.467-1.084-.936-1.618-1.414a87.761 87.761 0 0 1-3.425-3.229 82.347 82.347 0 0 1-3.788-4.028 76.794 76.794 0 0 1-3.066-3.72 70.793 70.793 0 0 1-2.458-3.385C7.134 98.788 4.867 94.6 3.176 90.181c-1.201-3.136-2.111-6.389-2.644-9.706-.742-4.623-.75-9.392.247-13.977.604-2.778 1.579-5.478 2.949-7.971a26.203 26.203 0 0 1 3.531-4.966 25.108 25.108 0 0 1 5.032-4.267 26.124 26.124 0 0 1 5.969-2.831 29.144 29.144 0 0 1 5.914-1.268c.87-.096 1.743-.153 2.617-.179V20h72.887zM26.791 55.021l-.035.001c-1.93.088-3.851.406-5.678 1.044a15.99 15.99 0 0 0-3.543 1.746 15.12 15.12 0 0 0-3.738 3.516c-.3.396-.582.807-.845 1.229-2.021 3.251-2.88 7.112-2.948 10.909-.012.702.002 1.405.041 2.106.046.827.126 1.651.236 2.472a36.785 36.785 0 0 0 1.383 6.122c.808 2.572 1.87 5.061 3.119 7.449a56.416 56.416 0 0 0 4.897 7.708c2.151 2.863 4.545 5.539 7.111 8.034V55.021z" fill-opacity=".3"/><path d="M26.791 16c0-2.208 1.792-4 4-4h68c2.208 0 4 1.792 4 4v4h-76v-4z"/><path d="M62.791 174V8h-8a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-8v166h36v8l5.549 6.341a1.002 1.002 0 0 1-.753 1.659H21.995a.999.999 0 0 1-.753-1.659L26.791 182v-8h36z" fill-opacity=".5"/><path d="M217 124c2.208 0 4 1.792 4 4v6.541a14.774 14.774 0 0 1 1.717-.368 15.876 15.876 0 0 1 2.089-.172h.388a14.9 14.9 0 0 1 6.142 1.401 15.077 15.077 0 0 1 7.022 6.772 14.863 14.863 0 0 1 1.373 3.988c.312 1.623.353 3.298.123 4.935a14.913 14.913 0 0 1-1.334 4.404 15.064 15.064 0 0 1-7.852 7.39 15.03 15.03 0 0 1-10.111.438C218.017 178.458 204.846 190 189 190h-12c-17.661 0-32-14.339-32-32v-30c0-2.208 1.792-4 4-4h68zm4 30.743c.401.28.831.519 1.281.71.83.351 1.726.535 2.626.546a6.985 6.985 0 0 0 2.732-.513 7.045 7.045 0 0 0 2.187-1.42 7.048 7.048 0 0 0 1.487-2.039 6.925 6.925 0 0 0 .606-1.955 7.092 7.092 0 0 0-.098-2.657 6.914 6.914 0 0 0-.702-1.816 7.106 7.106 0 0 0-3.017-2.876 6.914 6.914 0 0 0-3.194-.722 6.922 6.922 0 0 0-3.908 1.257v11.485zM56 134.541V128c0-2.208 1.792-4 4-4h68c2.208 0 4 1.792 4 4v30c0 17.661-14.339 32-32 32H88c-15.846 0-29.017-11.542-31.557-26.671a15.03 15.03 0 0 1-10.111-.438 15.064 15.064 0 0 1-7.852-7.39 14.913 14.913 0 0 1-1.334-4.404 15.084 15.084 0 0 1 .123-4.935 14.863 14.863 0 0 1 1.373-3.988 15.089 15.089 0 0 1 7.022-6.772 14.9 14.9 0 0 1 6.142-1.401h.388c.7.014 1.397.066 2.089.172.579.089 1.153.211 1.717.368zm0 8.717a6.925 6.925 0 0 0-4.092-1.257 6.893 6.893 0 0 0-2.858.649 7.1 7.1 0 0 0-2.997 2.659 6.93 6.93 0 0 0-.833 1.939 7.094 7.094 0 0 0-.163 2.652 6.88 6.88 0 0 0 .558 1.973 7.074 7.074 0 0 0 3.59 3.547 7.016 7.016 0 0 0 5.356.097c.508-.2.992-.461 1.439-.775v-11.484z"/><g><path d="M205 54c0-19.317-15.683-35-35-35s-35 15.683-35 35 15.683 35 35 35a35.003 35.003 0 0 0 17.87-4.906l13.664 3.913a2 2 0 0 0 2.473-2.473l-3.913-13.664A35.003 35.003 0 0 0 205 54z" fill-opacity=".5"/><path d="M175.975 59.092a3.005 3.005 0 0 1 2.277 1.164c1.617 2.158 3.17 4.362 4.755 6.543a2.993 2.993 0 0 1 .546 2.167 3.02 3.02 0 0 1-.244.843 3.023 3.023 0 0 1-1.954 1.651 2.986 2.986 0 0 1-2.141-.227 3.028 3.028 0 0 1-1.008-.837c-1.617-2.157-3.171-4.361-4.755-6.542a2.998 2.998 0 0 1 1.156-4.481 2.98 2.98 0 0 1 1.192-.282c.088-.001.087-.001.176.001zm-11.774-.001a3 3 0 0 1 2.399 4.691c-1.553 2.204-3.168 4.363-4.753 6.544a3.028 3.028 0 0 1-1.061.907 3.023 3.023 0 0 1-2.557.083 3.031 3.031 0 0 1-1.326-1.121 3.004 3.004 0 0 1-.142-3.022c.055-.104.116-.204.181-.302 1.553-2.204 3.168-4.363 4.753-6.544a3.02 3.02 0 0 1 1.551-1.106 3.173 3.173 0 0 1 .955-.13zm-11.234-13.652c.127.006.253.015.379.035.125.02.248.049.371.083 2.579.793 5.133 1.666 7.699 2.5a3.01 3.01 0 0 1 1.713 1.428 3.02 3.02 0 0 1 .166 2.487 3.015 3.015 0 0 1-1.256 1.507 3.021 3.021 0 0 1-2.014.395 3.632 3.632 0 0 1-.372-.083c-2.579-.793-5.133-1.666-7.699-2.5a3.011 3.011 0 0 1-1.713-1.428 3.024 3.024 0 0 1-.131-2.576c.122-.293.29-.566.497-.807a3.015 3.015 0 0 1 2.169-1.04c.095-.002.095-.002.191-.001zm34.257.001a2.996 2.996 0 0 1 2.587 1.674 3.02 3.02 0 0 1 .033 2.579 3.009 3.009 0 0 1-1.708 1.567c-2.553.874-5.132 1.669-7.698 2.503a3.014 3.014 0 0 1-1.411.108 3.023 3.023 0 0 1-2.071-1.388 3.01 3.01 0 0 1-.209-2.741 2.994 2.994 0 0 1 1.746-1.654c2.553-.875 5.133-1.67 7.699-2.503.122-.038.243-.071.369-.095.125-.024.25-.037.377-.047.096-.004.19-.005.286-.003zm-17.078-12.436c.325.021.642.083.946.202a3.02 3.02 0 0 1 1.72 1.748c.113.306.171.624.186.949.044 2.699.002 5.398.002 8.097a3.016 3.016 0 0 1-.347 1.401 3.024 3.024 0 0 1-2.026 1.533 2.99 2.99 0 0 1-1.719-.14 3 3 0 0 1-1.906-2.697C166.958 41.398 167 38.699 167 36c.005-.326.052-.645.156-.955a3.022 3.022 0 0 1 1.752-1.839 3.131 3.131 0 0 1 1.043-.206c.098 0 .098 0 .195.004z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
1
src/pages/product/img/illustrations/tutorials.svg
Normal file
1
src/pages/product/img/illustrations/tutorials.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 240 190" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h240v190H0z"/><clipPath id="a"><path d="M0 0h240v190H0z"/></clipPath><g clip-path="url(#a)" fill="#f40"><path d="M36.682 67.912c.212.012.421.039.626.092.236.061.459.152.674.263 2.356 1.313 4.672 2.696 7.007 4.044a3.044 3.044 0 0 1 .935.845 3.02 3.02 0 0 1 .54 2.145 3.023 3.023 0 0 1-1.448 2.191 2.976 2.976 0 0 1-1.647.415 3.003 3.003 0 0 1-1.3-.355c-2.356-1.313-4.672-2.696-7.008-4.044a3.014 3.014 0 0 1-1.345-1.648 2.998 2.998 0 0 1 2.785-3.95c.091 0 .09 0 .181.002zm36.817-.002a3.044 3.044 0 0 1 1.226.289 3.03 3.03 0 0 1 1.398 1.37c.121.243.209.503.261.77a3.02 3.02 0 0 1-.41 2.174 2.987 2.987 0 0 1-.957.948c-2.315 1.384-4.671 2.698-7.006 4.047a2.97 2.97 0 0 1-1.199.386 2.998 2.998 0 0 1-2.7-1.182 3.023 3.023 0 0 1-.499-2.579 2.99 2.99 0 0 1 1.32-1.775c2.315-1.384 4.67-2.698 7.006-4.047.265-.147.544-.261.841-.328.177-.04.356-.061.538-.071.091-.002.09-.002.181-.002zM55.146 57.003c.325.021.642.084.946.202.79.309 1.424.953 1.72 1.748.113.306.171.624.186.95.044 2.698.002 5.398.002 8.097a3.009 3.009 0 0 1-.347 1.4 3.021 3.021 0 0 1-2.026 1.533c-.285.061-.579.08-.87.057a3.02 3.02 0 0 1-1.755-.752 3.011 3.011 0 0 1-.963-1.755 3.317 3.317 0 0 1-.037-.386C51.958 65.398 52 62.699 52 60c.005-.326.052-.646.156-.955a3.023 3.023 0 0 1 1.752-1.84 3.155 3.155 0 0 1 1.238-.202zM83 96.5V186c0 .582.125 1.135.345 1.602A46.537 46.537 0 0 1 78.974 190H31.026A55 55 0 0 1 22 96.5h61z" fill-opacity=".5"/><path d="M83 129.619V186c0 .582.125 1.135.345 1.602A46.537 46.537 0 0 1 78.974 190H31.026a55 55 0 0 1-29.939-60.381H83zM83 96.5H22l-7.266-8.72a1.999 1.999 0 0 1 1.536-3.28H83v12z"/><g><path d="M213 14c0-2.208-1.792-4-4-4H87c-2.208 0-4 1.792-4 4v172c0 2.208 1.792 4 4 4h122c2.208 0 4-1.792 4-4V14z" fill-opacity=".3"/><path d="M140.519 4A8.989 8.989 0 0 1 148 0a8.989 8.989 0 0 1 7.481 4H179c2.217.009 4 1.798 4 4v6c0 2.208-1.792 4-4 4h-62c-2.208 0-4-1.792-4-4V8a4.005 4.005 0 0 1 4-4h23.519z"/><path d="M150 144c2.208 0 4 1.792 4 4s-1.792 4-4 4h-48c-2.208 0-4-1.792-4-4s1.792-4 4-4h48zm44-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-80c-2.208 0-4-1.792-4-4s1.792-4 4-4h80zm-88 4c0-2.208-1.792-4-4-4s-4 1.792-4 4 1.792 4 4 4 4-1.792 4-4zm88-20c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92zm-88-12c0-2.208-1.792-4-4-4s-4 1.792-4 4 1.792 4 4 4 4-1.792 4-4zm88-4c2.208 0 4 1.792 4 4s-1.792 4-4 4h-80c-2.208 0-4-1.792-4-4s1.792-4 4-4h80zm0-16c2.208 0 4 1.792 4 4s-1.792 4-4 4h-92c-2.208 0-4-1.792-4-4s1.792-4 4-4h92z" fill-opacity=".5"/></g><path d="M217 124c2.208 0 4 1.792 4 4v6.541a14.774 14.774 0 0 1 1.717-.368 15.876 15.876 0 0 1 2.089-.172h.388a14.9 14.9 0 0 1 6.142 1.401 15.077 15.077 0 0 1 7.022 6.772 14.863 14.863 0 0 1 1.373 3.988c.312 1.623.353 3.298.123 4.935a14.913 14.913 0 0 1-1.334 4.404 15.064 15.064 0 0 1-7.852 7.39 15.03 15.03 0 0 1-10.111.438C218.017 178.458 204.846 190 189 190h-12c-17.661 0-32-14.339-32-32v-30c0-2.208 1.792-4 4-4h68zm4 30.743c.401.28.831.519 1.281.71.83.351 1.726.535 2.626.546a7.008 7.008 0 0 0 2.733-.513 7.04 7.04 0 0 0 2.186-1.42 7.048 7.048 0 0 0 1.487-2.039 6.912 6.912 0 0 0 .606-1.953 7.1 7.1 0 0 0-.118-2.743 6.942 6.942 0 0 0-.855-2.023 7.092 7.092 0 0 0-2.844-2.584 6.874 6.874 0 0 0-2.827-.719 7.346 7.346 0 0 0-1.349.076 6.897 6.897 0 0 0-2.926 1.177v11.485z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/pages/product/img/products/jumbotron.jpg
Normal file
BIN
src/pages/product/img/products/jumbotron.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
src/pages/product/img/products/products-full-width.jpg
Normal file
BIN
src/pages/product/img/products/products-full-width.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
src/pages/product/img/products/products-grid1.jpg
Normal file
BIN
src/pages/product/img/products/products-grid1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
src/pages/product/img/products/products-grid2.jpg
Normal file
BIN
src/pages/product/img/products/products-grid2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
src/pages/product/img/products/products-grid3.jpg
Normal file
BIN
src/pages/product/img/products/products-grid3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
101
src/pages/product/product.md
Normal file
101
src/pages/product/product.md
Normal file
|
|
@ -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: '?'
|
||||
---
|
||||
100
src/templates/product-page.js
Normal file
100
src/templates/product-page.js
Normal file
|
|
@ -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 (
|
||||
<section className="section section--gradient">
|
||||
<div className="container">
|
||||
<div className="columns">
|
||||
<div className="column is-8">
|
||||
<div className="section">
|
||||
<div className="content">
|
||||
<h2>{frontmatter.title}</h2>
|
||||
<p>{frontmatter.description}</p>
|
||||
<FeatureGrid gridItems={frontmatter.intro.blurbs} />
|
||||
<h3>{frontmatter.main.heading}</h3>
|
||||
<p>{frontmatter.main.description}</p>
|
||||
<div className="tile is-vertical is-ancestor">
|
||||
<div className="tile is-parent">
|
||||
<div className="tile is-child is-6">
|
||||
<img src={grid1} alt="" />
|
||||
</div>
|
||||
<div className="tile is-child is-6">
|
||||
<img src={grid2} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="tile is-parent">
|
||||
<div className="tile is-child">
|
||||
<img src={grid3} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column is-4">
|
||||
<pre>{JSON.stringify(frontmatter, null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -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}]}]}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue