maverick/gatsby-starter-netlify-cms
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/gatsby-starter-netlify-cms.git synced 2026-07-26 06:37:25 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

pricing page without styling

Browse source
This commit is contained in:
Austin Green 2017-10-27 23:54:11 -04:00
parent afe0817ba9
commit 03d24037e2
5 changed files with 71 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/Pricing.js Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
export default ({ data }) => (
<div className="columns">
{data.map(price => (
<div key={price.plan} className="column">
<section className="section">
<h4>{price.plan}</h4>
<h2>${price.price}</h2>
<p>{price.description}</p>
<ul>{price.items.map(item => <li key={item}>{item}</li>)}</ul>
</section>
</div>
))}
</div>
);

15
src/components/Testimonials.js Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
export default ({ testimonials }) => (
<div>
{testimonials.map(testimonial => (
<article className="message">
<div className="message-body">
{testimonial.quote}
<br />
<cite> – {testimonial.author}</cite>
</div>
</article>
))}
</div>
);

8
src/layouts/index.css Normal file
View file

@ -0,0 +1,8 @@
.full-width-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

1
src/layouts/index.js
View file

@ -4,6 +4,7 @@ import Link from 'gatsby-link';
import Helmet from 'react-helmet';
import github from '../img/github-icon.svg';
import 'bulma';
import './index.css';
const Navbar = () => (
<nav className="navbar is-light">

58
src/templates/product-page.js
View file

@ -1,8 +1,11 @@
import React from 'react';
import FeatureGrid from '../components/Features';
import Features from '../components/Features';
import Testimonials from '../components/Testimonials';
import Pricing from '../components/Pricing';
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';
import fullWidth from '../pages/product/img/products/products-full-width.jpg';
export default ({ data }) => {
const { markdownRemark: post } = data;
@ -10,35 +13,36 @@ export default ({ data }) => {
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 className="section">
<div className="content">
<h2>{frontmatter.title}</h2>
<p>{frontmatter.description}</p>
<Features 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 className="column is-4">
<pre>{JSON.stringify(frontmatter, null, 2)}</pre>
<Testimonials testimonials={frontmatter.testimonials} />
<div className="full-width-container">
<img src={fullWidth} alt="" />
</div>
<h2>{frontmatter.pricing.heading}</h2>
<p>{frontmatter.pricing.description}</p>
{console.log(frontmatter.pricing.plans)}
<Pricing data={frontmatter.pricing.plans} />
</div>
</div>
</div>