├── .env.development ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json └── src ├── components ├── Global │ ├── Footer.js │ └── Navbar │ │ ├── Navbar.js │ │ ├── NavbarHeader.js │ │ ├── NavbarIcons.js │ │ ├── NavbarLinks.js │ │ └── package.json ├── HomePageComponents │ ├── Gallery.js │ ├── Menu.js │ ├── Product.js │ └── QuickInfo.js ├── image.js ├── layout.css ├── layout.js └── seo.js ├── images ├── bcg │ ├── aboutBcg.jpeg │ ├── contactBcg.jpeg │ ├── homeBcg.jpeg │ └── menuBcg.jpeg ├── gatsby-astronaut.png ├── gatsby-icon.png ├── homeGallery │ ├── img-1.jpeg │ ├── img-2.jpeg │ └── img-3.jpeg └── logo.svg ├── pages ├── 404.js ├── about.js ├── contact.js ├── index.js ├── menu.js └── page-2.js └── utils ├── Banner.js ├── Button.js ├── Header.js ├── Section.js ├── Title.js ├── index.js └── styles.js /.env.development: -------------------------------------------------------------------------------- 1 | SPACE_ID=qz1k4i0kbshi 2 | ACCESS_TOKEN=949e74e105b619f35dd649adbbdf1bab6289268dfcff0fc7b5188063d6863115 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | Gatsby 5 | 6 |

7 |

8 | Gatsby's default starter 9 |

10 | 11 | Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the default starter. 20 | 21 | ```sh 22 | # create a new Gatsby site using the default starter 23 | npx gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```sh 31 | cd my-default-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | \_Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).\_ 40 | 41 | Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 68 | 69 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 70 | 71 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 72 | 73 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 74 | 75 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 76 | 77 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 78 | 79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 80 | 81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 88 | 89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 90 | 91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 92 | 93 | ## 💫 Deploy 94 | 95 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) 96 | 97 | 98 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config({ 2 | path: `.env.${process.env.NODE_ENV}`, 3 | }) 4 | module.exports = { 5 | siteMetadata: { 6 | title: `Bob's Eatery`, 7 | description: `restaurant site made with gatsby.`, 8 | author: `john`, 9 | }, 10 | plugins: [ 11 | `gatsby-plugin-react-helmet`, 12 | { 13 | resolve: `gatsby-source-filesystem`, 14 | options: { 15 | name: `images`, 16 | path: `${__dirname}/src/images`, 17 | }, 18 | }, 19 | `gatsby-transformer-sharp`, 20 | `gatsby-plugin-sharp`, 21 | 22 | `gatsby-plugin-sass`, 23 | `gatsby-plugin-styled-components`, 24 | { 25 | resolve: `gatsby-source-contentful`, 26 | options: { 27 | spaceId: process.env.SPACE_ID, 28 | // Learn about environment variables: https://gatsby.app/env-vars 29 | accessToken: process.env.ACCESS_TOKEN, 30 | }, 31 | }, 32 | { 33 | resolve: `gatsby-plugin-manifest`, 34 | options: { 35 | name: `gatsby-starter-default`, 36 | short_name: `starter`, 37 | start_url: `/`, 38 | background_color: `#663399`, 39 | theme_color: `#663399`, 40 | display: `minimal-ui`, 41 | icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. 42 | }, 43 | }, 44 | // this (optional) plugin enables Progressive Web App + Offline functionality 45 | // To learn more, visit: https://gatsby.app/offline 46 | // 'gatsby-plugin-offline', 47 | ], 48 | } 49 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Node APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/node-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-default", 3 | "private": true, 4 | "description": "A simple starter to get up and developing quickly with Gatsby", 5 | "version": "0.1.0", 6 | "author": "Kyle Mathews ", 7 | "dependencies": { 8 | "babel-plugin-styled-components": "^1.10.0", 9 | "dotenv": "^6.2.0", 10 | "gatsby": "^2.20.12", 11 | "gatsby-image": "^2.0.20", 12 | "gatsby-plugin-manifest": "^2.0.9", 13 | "gatsby-plugin-offline": "^2.0.16", 14 | "gatsby-plugin-react-helmet": "^3.0.2", 15 | "gatsby-plugin-sass": "^2.0.7", 16 | "gatsby-plugin-sharp": "^2.5.4", 17 | "gatsby-plugin-styled-components": "^3.0.4", 18 | "gatsby-source-contentful": "^2.0.21", 19 | "gatsby-source-filesystem": "^2.2.2", 20 | "gatsby-transformer-sharp": "^2.1.8", 21 | "node-sass": "^4.13.1", 22 | "prop-types": "^15.6.2", 23 | "react": "^16.6.3", 24 | "react-dom": "^16.6.3", 25 | "react-helmet": "^5.2.0", 26 | "react-icons": "^3.2.2", 27 | "styled-components": "^4.1.3" 28 | }, 29 | "keywords": [ 30 | "gatsby" 31 | ], 32 | "license": "MIT", 33 | "scripts": { 34 | "build": "gatsby build", 35 | "develop": "gatsby develop", 36 | "start": "npm run develop", 37 | "format": "prettier --write \"src/**/*.js\"", 38 | "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"" 39 | }, 40 | "devDependencies": { 41 | "prettier": "^1.15.2" 42 | }, 43 | "repository": { 44 | "type": "git", 45 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 46 | }, 47 | "bugs": { 48 | "url": "https://github.com/gatsbyjs/gatsby/issues" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/Global/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import styled from 'styled-components' 3 | import { styles } from '../../utils' 4 | import { FaInstagram, FaTwitter, FaFacebook } from 'react-icons/fa' 5 | export default class Footer extends Component { 6 | state = { 7 | icons: [ 8 | { 9 | id: 1, 10 | icon: , 11 | path: `https://www.facebook.com`, 12 | }, 13 | { 14 | id: 2, 15 | icon: , 16 | path: `https://www.facebook.com`, 17 | }, 18 | { 19 | id: 3, 20 | icon: , 21 | path: `https://www.facebook.com`, 22 | }, 23 | ], 24 | } 25 | render() { 26 | return ( 27 | 28 |
eatery
29 |
30 | {this.state.icons.map(item => ( 31 | 37 | {item.icon} 38 | 39 | ))} 40 |
41 |

copyright © 2018 deluxe properties

42 | 43 | ) 44 | } 45 | } 46 | 47 | const FooterWrapper = styled.footer` 48 | padding: 2rem 0; 49 | background: ${styles.colors.mainBlack}; 50 | .icons { 51 | width: 10rem; 52 | display: flex; 53 | justify-content: space-between; 54 | margin: 0 auto; 55 | } 56 | .icon { 57 | color: ${styles.colors.mainWhite}; 58 | font-size: 1.3rem; 59 | ${styles.transition({})}; 60 | &:hover { 61 | color: ${styles.colors.mainPrimary}; 62 | } 63 | } 64 | .copyright { 65 | color: ${styles.colors.mainWhite}; 66 | text-transform: capitalize; 67 | text-align: center; 68 | margin: 1rem 0; 69 | } 70 | .title { 71 | text-align: center; 72 | width: 10rem; 73 | color: ${styles.colors.mainYellow}; 74 | text-transform: uppercase; 75 | padding: 0.3rem 1rem; 76 | margin: 0 auto 2rem auto; 77 | font-size: 1.5rem; 78 | ${styles.border({ color: `${styles.colors.mainYellow}` })} 79 | } 80 | ` 81 | -------------------------------------------------------------------------------- /src/components/Global/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import NavbarHeader from './NavbarHeader' 3 | import NavbarLinks from './NavbarLinks' 4 | import NavbarIcons from './NavbarIcons' 5 | import styled from 'styled-components' 6 | export default class Navbar extends Component { 7 | state = { 8 | navbarOpen: false, 9 | } 10 | handleNavbar = () => { 11 | this.setState(() => { 12 | return { navbarOpen: !this.state.navbarOpen } 13 | }) 14 | } 15 | render() { 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | } 25 | 26 | const NavWrapper = styled.nav` 27 | @media (min-width: 768px) { 28 | display: flex; 29 | align-items: center; 30 | } 31 | ` 32 | -------------------------------------------------------------------------------- /src/components/Global/Navbar/NavbarHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import logo from '../../../images/logo.svg' 4 | import { FaAlignRight } from 'react-icons/fa' 5 | import styled from 'styled-components' 6 | import { styles } from '../../../utils' 7 | export default function NavbarHeader({ handleNavbar }) { 8 | return ( 9 | 10 | 11 | company logo 12 | 13 | { 16 | handleNavbar() 17 | }} 18 | /> 19 | 20 | ) 21 | } 22 | 23 | const HeaderWrapper = styled.div` 24 | padding: 0.4rem 1rem; 25 | display: flex; 26 | align-items: center; 27 | justify-content: space-between; 28 | .toggle-icon { 29 | font-size: 1.75rem; 30 | color: ${styles.colors.mainYellow}; 31 | cursor: pointer; 32 | } 33 | @media (min-width: 768px) { 34 | .toggle-icon { 35 | display: none; 36 | } 37 | padding: 0.4rem 1rem; 38 | } 39 | ` 40 | -------------------------------------------------------------------------------- /src/components/Global/Navbar/NavbarIcons.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { FaInstagram, FaTwitter, FaFacebook } from 'react-icons/fa' 3 | import styled from 'styled-components' 4 | import { styles } from '../../../utils' 5 | export default class NavbarIcons extends Component { 6 | state = { 7 | icons: [ 8 | { 9 | id: 1, 10 | icon: , 11 | path: `https://www.facebook.com`, 12 | }, 13 | { 14 | id: 2, 15 | icon: , 16 | path: `https://www.facebook.com`, 17 | }, 18 | { 19 | id: 3, 20 | icon: , 21 | path: `https://www.facebook.com`, 22 | }, 23 | ], 24 | } 25 | render() { 26 | return ( 27 | 28 | {this.state.icons.map(item => ( 29 | 35 | {item.icon} 36 | 37 | ))} 38 | 39 | ) 40 | } 41 | } 42 | 43 | const IconWrapper = styled.div` 44 | .icon { 45 | // margin-right: 2rem; 46 | font-size: 1.3rem; 47 | cursor: pointer; 48 | ${styles.transFunction()}; 49 | } 50 | 51 | .facebook-icon { 52 | color: #3b579d; 53 | } 54 | .twitter-icon { 55 | color: #3ab7f0; 56 | } 57 | .instagram-icon { 58 | color: #da5f53; 59 | } 60 | .icon:hover { 61 | color: ${styles.colors.mainYellow}; 62 | } 63 | display: none; 64 | @media (min-width: 768px) { 65 | width: 10rem; 66 | display: flex; 67 | justify-content: space-around; 68 | } 69 | ` 70 | -------------------------------------------------------------------------------- /src/components/Global/Navbar/NavbarLinks.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import styled from 'styled-components' 3 | import { Link } from 'gatsby' 4 | import { styles } from '../../../utils' 5 | export default class NavbarLinks extends Component { 6 | state = { 7 | links: [ 8 | { 9 | id: 0, 10 | path: '/', 11 | name: 'home', 12 | }, 13 | { 14 | id: 1, 15 | path: '/about/', 16 | name: 'about', 17 | }, 18 | { 19 | id: 2, 20 | path: '/menu/', 21 | name: 'menu', 22 | }, 23 | { 24 | id: 3, 25 | path: '/contact/', 26 | name: 'contact', 27 | }, 28 | ], 29 | } 30 | render() { 31 | return ( 32 | 33 | {this.state.links.map(item => { 34 | return ( 35 |
  • 36 | 37 | {item.name} 38 | 39 |
    • 40 | ) 41 | })} 42 |     43 | ) 44 | } 45 | } 46 | 47 | const LinkWrapper = styled.ul` 48 | li { 49 | list-style-type: none; 50 | } 51 | .nav-link { 52 | display: block; 53 | text-decoration: none; 54 | padding: 0.5rem 1rem 0.5rem 1rem; 55 | color: ${styles.colors.mainGrey}; 56 | font-weight: 700; 57 | text-transform: capitalize; 58 | cursor: pointer; 59 | ${styles.transDefault}; 60 | &:hover { 61 | background: ${styles.colors.mainGrey}; 62 | color: ${styles.colors.mainYellow}; 63 | padding: 0.5rem 1rem 0.5rem 1.3rem; 64 | } 65 | } 66 | // 67 | height: ${props => (props.open ? '152px' : '0px')}; 68 | overflow: hidden; 69 | ${styles.transObject({ time: '1s' })}; 70 | // 71 | 72 | @media (min-width: 768px) { 73 | // 74 | height: auto; 75 | // 76 | display: flex; 77 | margin: 0 auto; 78 | .nav-link:hover { 79 | background: ${styles.colors.mainWhite}; 80 | padding: 0.5rem 1rem 0.5rem 1rem; 81 | } 82 | } 83 | ` 84 | -------------------------------------------------------------------------------- /src/components/Global/Navbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main" : "Navbar.js" 3 | } -------------------------------------------------------------------------------- /src/components/HomePageComponents/Gallery.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { StaticQuery, graphql } from 'gatsby' 4 | import { styles, Section } from '../../utils' 5 | import Img from 'gatsby-image' 6 | export default function Gallery() { 7 | return ( 8 | { 35 | const img1 = data.img1.childImageSharp.fluid 36 | const img2 = data.img2.childImageSharp.fluid 37 | const img3 = data.img3.childImageSharp.fluid 38 | return ( 39 |
    40 | 41 |
    42 | 43 |

    awesome pizza

    44 |
    45 |
    46 | 47 |

    awesome pork

    48 |
    49 |
    50 | 51 |

    awesome steak

    52 |
    53 |     54 |
    55 | ) 56 | }} 57 | /> 58 | ) 59 | } 60 | 61 | const GalleryWrapper = styled.div` 62 | display: grid; 63 | grid-template-columns: auto; 64 | grid-row-gap: 1rem; 65 | .item { 66 | position: relative; 67 | } 68 | .info { 69 | position: absolute; 70 | top: 0; 71 | left: 0; 72 | background: ${styles.colors.mainYellow}; 73 | padding: 0.1rem 0.3rem; 74 | text-transform: capitalize; 75 | } 76 | @media (min-width: 576px) { 77 | grid-template-columns: 1fr 1fr; 78 | grid-column-gap: 1rem; 79 | } 80 | @media (min-width: 768px) { 81 | grid-template-columns: repeat(3, 1fr); 82 | } 83 | @media (min-width: 992px) { 84 | .gatsby-image-wrapper { 85 | height: 100%; 86 | } 87 | grid-template-areas: 88 | 'one one two two ' 89 | 'one one three three '; 90 | .item-1 { 91 | grid-area: one; 92 | } 93 | .item-2 { 94 | grid-area: two; 95 | } 96 | .item-3 { 97 | grid-area: three; 98 | } 99 | } 100 | ` 101 | -------------------------------------------------------------------------------- /src/components/HomePageComponents/Menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StaticQuery, graphql } from 'gatsby' 3 | import { Section, Title, SectionButton } from '../../utils' 4 | import styled from 'styled-components' 5 | import Product from './Product' 6 | import { Link } from 'gatsby' 7 | export default function Menu() { 8 | return ( 9 |
    10 | 11 | <ProductList> 12 | <StaticQuery 13 | query={graphql` 14 | { 15 | items: allContentfulMenu { 16 | edges { 17 | node { 18 | name 19 | price 20 | id 21 | ingredients 22 | img { 23 | fixed(width: 150, height: 150) { 24 | ...GatsbyContentfulFixed_tracedSVG 25 | } 26 | } 27 | } 28 | } 29 | } 30 | } 31 | `} 32 | render={data => { 33 | const { edges: sweets } = data.items 34 | return sweets.map(item => { 35 | return <Product key={item.node.id} product={item.node} /> 36 | }) 37 | }} 38 | /> 39 | </ProductList> 40 | <Link to="/menu/" style={{ textDecoration: 'none' }}> 41 | <SectionButton style={{ margin: '2rem auto' }}> menu</SectionButton> 42 | </Link> 43 | </Section> 44 | ) 45 | } 46 | 47 | export const ProductList = styled.div` 48 | margin: 3rem 0; 49 | display: grid; 50 | grid-template-columns: 100%; 51 | grid-row-gap: 3rem; 52 | @media (min-width: 576px) { 53 | display: grid; 54 | grid-template-columns: 95%; 55 | } 56 | @media (min-width: 776px) { 57 | grid-template-columns: 80%; 58 | justify-content: center; 59 | } 60 | @media (min-width: 992px) { 61 | grid-template-columns: 1fr 1fr; 62 | grid-gap: 2rem; 63 | } 64 | ` 65 | -------------------------------------------------------------------------------- /src/components/HomePageComponents/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { styles } from '../../utils' 4 | import Img from 'gatsby-image' 5 | export default function Product({ product }) { 6 | const { name, price, ingredients } = product 7 | const { fixed } = product.img 8 | 9 | return ( 10 | <ProductWrapper> 11 | <Img fixed={fixed} className="img" /> 12 | <div className="text"> 13 | <div className="product-content"> 14 | <h3 className="name">{name}</h3> 15 | <h3 className="price">${price}</h3> 16 | </div> 17 | <p className="info">{ingredients}</p> 18 | </div> 19 | </ProductWrapper> 20 | ) 21 | } 22 | 23 | export const ProductWrapper = styled.div` 24 | @media (min-width: 576px) { 25 | display: grid; 26 | grid-template-columns: auto 1fr; 27 | grid-column-gap: 1rem; 28 | } 29 | .img { 30 | border-radius: 0.5rem; 31 | } 32 | .product-content { 33 | display: flex; 34 | justify-content: space-between; 35 | font-size: 1.4rem; 36 | text-transform: uppercase; 37 | } 38 | .name { 39 | color: ${styles.colors.mainGrey}; 40 | margin-top: 0.5rem; 41 | } 42 | .price { 43 | color: ${styles.colors.mainYellow}; 44 | margin-top: 0.5rem; 45 | } 46 | .info { 47 | margin-top: 0.5rem; 48 | word-spacing: 0.2rem; 49 | text-transform: lowercase; 50 | } 51 | // @media (min-width: 650px) { 52 | // display: grid; 53 | // grid-template-columns: 1fr 1fr; 54 | // grid-column-gap: 1rem; 55 | // } 56 | ` 57 | -------------------------------------------------------------------------------- /src/components/HomePageComponents/QuickInfo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Section, Title, SectionButton } from '../../utils' 3 | import styled from 'styled-components' 4 | import { styles } from '../../utils' 5 | import { Link } from 'gatsby' 6 | export default class QuickInfo extends Component { 7 | render() { 8 | return ( 9 | <Section> 10 | <Title message="let us tell you" title="our misson" /> 11 | <QuickInfoWrapper> 12 | <p className="text"> 13 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde 14 | blanditiis dolorum quae doloremque molestias expedita, eum voluptas 15 | distinctio! Molestiae fuga temporibus nemo non vel mollitia nesciunt 16 | quaerat facere voluptate earum. 17 | </p> 18 | <Link to="/about/" style={{ textDecoration: 'none' }}> 19 | <SectionButton style={{ margin: '2rem auto' }}>about</SectionButton> 20 | </Link> 21 | </QuickInfoWrapper> 22 | </Section> 23 | ) 24 | } 25 | } 26 | 27 | const QuickInfoWrapper = styled.div` 28 | width: 90%; 29 | margin: 2rem auto; 30 | .text { 31 | line-height: 2em; 32 | color: ${styles.colors.mainGrey}; 33 | word-spacing: 0.2rem; 34 | } 35 | 36 | @media (min-width: 768px) { 37 | width: 70%; 38 | } 39 | @media (min-width: 992px) { 40 | width: 60%; 41 | } 42 | ` 43 | -------------------------------------------------------------------------------- /src/components/image.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StaticQuery, graphql } from 'gatsby' 3 | import Img from 'gatsby-image' 4 | 5 | /* 6 | * This component is built using `gatsby-image` to automatically serve optimized 7 | * images with lazy loading and reduced file sizes. The image is loaded using a 8 | * `StaticQuery`, which allows us to load the image from directly within this 9 | * component, rather than having to pass the image data down from pages. 10 | * 11 | * For more information, see the docs: 12 | * - `gatsby-image`: https://gatsby.app/gatsby-image 13 | * - `StaticQuery`: https://gatsby.app/staticquery 14 | */ 15 | 16 | const Image = () => ( 17 | <StaticQuery 18 | query={graphql` 19 | query { 20 | placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { 21 | childImageSharp { 22 | fluid(maxWidth: 300) { 23 | ...GatsbyImageSharpFluid 24 | } 25 | } 26 | } 27 | } 28 | `} 29 | render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />} 30 | /> 31 | ) 32 | export default Image 33 | -------------------------------------------------------------------------------- /src/components/layout.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: 'Caveat', cursive; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | // import styled from 'styled-components' 4 | import { createGlobalStyle } from 'styled-components' 5 | import Navbar from '../components/Global/Navbar' 6 | import Footer from '../components/Global/Footer' 7 | // import '../styles/sass/layout.scss' 8 | 9 | const Layout = ({ children }) => ( 10 | <div> 11 | <GlobalStyle /> 12 | <Navbar /> 13 | {children} 14 | <Footer /> 15 | </div> 16 | ) 17 | 18 | const GlobalStyle = createGlobalStyle` 19 | * { 20 | margin: 0; 21 | padding: 0; 22 | box-sizing: border-box; 23 | } 24 | body { 25 | font-family: 'Open Sans', sans-serif; 26 | color:#262626; 27 | background:#fff; 28 | } 29 | ` 30 | 31 | Layout.propTypes = { 32 | children: PropTypes.node.isRequired, 33 | } 34 | 35 | export default Layout 36 | -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Helmet from 'react-helmet' 4 | import { StaticQuery, graphql } from 'gatsby' 5 | 6 | function SEO({ description, lang, meta, keywords, title }) { 7 | return ( 8 | <StaticQuery 9 | query={detailsQuery} 10 | render={data => { 11 | const metaDescription = 12 | description || data.site.siteMetadata.description 13 | return ( 14 | <Helmet 15 | htmlAttributes={{ 16 | lang, 17 | }} 18 | title={title} 19 | titleTemplate={`%s | ${data.site.siteMetadata.title}`} 20 | meta={[ 21 | { 22 | name: `description`, 23 | content: metaDescription, 24 | }, 25 | { 26 | property: `og:title`, 27 | content: title, 28 | }, 29 | { 30 | property: `og:description`, 31 | content: metaDescription, 32 | }, 33 | { 34 | property: `og:type`, 35 | content: `website`, 36 | }, 37 | { 38 | name: `twitter:card`, 39 | content: `summary`, 40 | }, 41 | { 42 | name: `twitter:creator`, 43 | content: data.site.siteMetadata.author, 44 | }, 45 | { 46 | name: `twitter:title`, 47 | content: title, 48 | }, 49 | { 50 | name: `twitter:description`, 51 | content: metaDescription, 52 | }, 53 | ] 54 | .concat( 55 | keywords.length > 0 56 | ? { 57 | name: `keywords`, 58 | content: keywords.join(`, `), 59 | } 60 | : [] 61 | ) 62 | .concat(meta)} 63 | /> 64 | ) 65 | }} 66 | /> 67 | ) 68 | } 69 | 70 | SEO.defaultProps = { 71 | lang: `en`, 72 | meta: [], 73 | keywords: [], 74 | } 75 | 76 | SEO.propTypes = { 77 | description: PropTypes.string, 78 | lang: PropTypes.string, 79 | meta: PropTypes.array, 80 | keywords: PropTypes.arrayOf(PropTypes.string), 81 | title: PropTypes.string.isRequired, 82 | } 83 | 84 | export default SEO 85 | 86 | const detailsQuery = graphql` 87 | query DefaultSEOQuery { 88 | site { 89 | siteMetadata { 90 | title 91 | description 92 | author 93 | } 94 | } 95 | } 96 | ` 97 | -------------------------------------------------------------------------------- /src/images/bcg/aboutBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/bcg/aboutBcg.jpeg -------------------------------------------------------------------------------- /src/images/bcg/contactBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/bcg/contactBcg.jpeg -------------------------------------------------------------------------------- /src/images/bcg/homeBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/bcg/homeBcg.jpeg -------------------------------------------------------------------------------- /src/images/bcg/menuBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/bcg/menuBcg.jpeg -------------------------------------------------------------------------------- /src/images/gatsby-astronaut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/gatsby-astronaut.png -------------------------------------------------------------------------------- /src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /src/images/homeGallery/img-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/homeGallery/img-1.jpeg -------------------------------------------------------------------------------- /src/images/homeGallery/img-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/homeGallery/img-2.jpeg -------------------------------------------------------------------------------- /src/images/homeGallery/img-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/gatsby-restaurant-project/b8cdcfef75c20ecae9e9bb663818c78c36e78327/src/images/homeGallery/img-3.jpeg -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | <svg width="149" height="38" viewBox="0 0 149 38" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <rect x="1.30827" y="1.30827" width="146.383" height="35.3835" stroke="#262626" stroke-width="2.61654"/> 3 | <path d="M24.2069 28V11.2H32.1989L31.9589 12.88H26.2709V18.736H31.4789V20.416H26.2709V26.32H32.4389V28H24.2069ZM42.3426 28H40.2306L44.2146 11.2H47.7186L51.7026 28H49.5906L48.6066 23.752H43.3266L42.3426 28ZM48.1986 22.072L46.0386 12.736H45.8946L43.7106 22.072H48.1986ZM57.8181 12.88V11.2H66.9381V12.88H63.4101V28H61.3461V12.88H57.8181ZM75.3475 28V11.2H83.3395L83.0995 12.88H77.4115V18.736H82.6195V20.416H77.4115V26.32H83.5795V28H75.3475ZM96.3153 21.568H94.7553V28H92.6913V11.2H96.3153C98.2353 11.2 99.6033 11.592 100.419 12.376C101.235 13.144 101.643 14.48 101.643 16.384C101.643 17.696 101.451 18.736 101.067 19.504C100.699 20.256 100.107 20.792 99.2913 21.112L102.051 28H99.9393L97.2993 21.544C97.0913 21.56 96.7633 21.568 96.3153 21.568ZM99.5553 16.912V15.856C99.5553 15.408 99.5473 15.08 99.5313 14.872C99.5153 14.648 99.4513 14.384 99.3393 14.08C99.2433 13.776 99.0833 13.552 98.8593 13.408C98.2993 13.072 97.4593 12.904 96.3393 12.904H94.7553V19.864H96.3393C97.4593 19.864 98.2993 19.696 98.8593 19.36C99.0833 19.216 99.2433 18.992 99.3393 18.688C99.4513 18.384 99.5153 18.128 99.5313 17.92C99.5473 17.696 99.5553 17.36 99.5553 16.912ZM116.188 28H114.268V22.6L110.092 11.2H112.204L115.156 20.344H115.3L118.252 11.2H120.364L116.188 22.6V28Z" fill="#262626"/> 4 | <path d="M24.2069 28H23.2069V29H24.2069V28ZM24.2069 11.2V10.2H23.2069V11.2H24.2069ZM32.1989 11.2L33.1888 11.3414L33.3519 10.2H32.1989V11.2ZM31.9589 12.88V13.88H32.8262L32.9488 13.0214L31.9589 12.88ZM26.2709 12.88V11.88H25.2709V12.88H26.2709ZM26.2709 18.736H25.2709V19.736H26.2709V18.736ZM31.4789 18.736H32.4789V17.736H31.4789V18.736ZM31.4789 20.416V21.416H32.4789V20.416H31.4789ZM26.2709 20.416V19.416H25.2709V20.416H26.2709ZM26.2709 26.32H25.2709V27.32H26.2709V26.32ZM32.4389 26.32H33.4389V25.32H32.4389V26.32ZM32.4389 28V29H33.4389V28H32.4389ZM25.2069 28V11.2H23.2069V28H25.2069ZM24.2069 12.2H32.1989V10.2H24.2069V12.2ZM31.2089 11.0586L30.9689 12.7386L32.9488 13.0214L33.1888 11.3414L31.2089 11.0586ZM31.9589 11.88H26.2709V13.88H31.9589V11.88ZM25.2709 12.88V18.736H27.2709V12.88H25.2709ZM26.2709 19.736H31.4789V17.736H26.2709V19.736ZM30.4789 18.736V20.416H32.4789V18.736H30.4789ZM31.4789 19.416H26.2709V21.416H31.4789V19.416ZM25.2709 20.416V26.32H27.2709V20.416H25.2709ZM26.2709 27.32H32.4389V25.32H26.2709V27.32ZM31.4389 26.32V28H33.4389V26.32H31.4389ZM32.4389 27H24.2069V29H32.4389V27ZM42.3426 28V29H43.1375L43.3168 28.2257L42.3426 28ZM40.2306 28L39.2576 27.7693L38.9657 29H40.2306V28ZM44.2146 11.2V10.2H43.424L43.2416 10.9693L44.2146 11.2ZM47.7186 11.2L48.6916 10.9693L48.5092 10.2H47.7186V11.2ZM51.7026 28V29H52.9675L52.6756 27.7693L51.7026 28ZM49.5906 28L48.6164 28.2257L48.7958 29H49.5906V28ZM48.6066 23.752L49.5808 23.5263L49.4015 22.752H48.6066V23.752ZM43.3266 23.752V22.752H42.5318L42.3524 23.5263L43.3266 23.752ZM48.1986 22.072V23.072H49.4564L49.1729 21.8466L48.1986 22.072ZM46.0386 12.736L47.0129 12.5106L46.8337 11.736H46.0386V12.736ZM45.8946 12.736V11.736H45.1016L44.9209 12.5082L45.8946 12.736ZM43.7106 22.072L42.7369 21.8442L42.4497 23.072H43.7106V22.072ZM42.3426 27H40.2306V29H42.3426V27ZM41.2036 28.2307L45.1876 11.4307L43.2416 10.9693L39.2576 27.7693L41.2036 28.2307ZM44.2146 12.2H47.7186V10.2H44.2146V12.2ZM46.7456 11.4307L50.7296 28.2307L52.6756 27.7693L48.6916 10.9693L46.7456 11.4307ZM51.7026 27H49.5906V29H51.7026V27ZM50.5648 27.7743L49.5808 23.5263L47.6324 23.9777L48.6164 28.2257L50.5648 27.7743ZM48.6066 22.752H43.3266V24.752H48.6066V22.752ZM42.3524 23.5263L41.3684 27.7743L43.3168 28.2257L44.3008 23.9777L42.3524 23.5263ZM49.1729 21.8466L47.0129 12.5106L45.0644 12.9614L47.2244 22.2974L49.1729 21.8466ZM46.0386 11.736H45.8946V13.736H46.0386V11.736ZM44.9209 12.5082L42.7369 21.8442L44.6843 22.2998L46.8683 12.9638L44.9209 12.5082ZM43.7106 23.072H48.1986V21.072H43.7106V23.072ZM57.8181 12.88H56.8181V13.88H57.8181V12.88ZM57.8181 11.2V10.2H56.8181V11.2H57.8181ZM66.9381 11.2H67.9381V10.2H66.9381V11.2ZM66.9381 12.88V13.88H67.9381V12.88H66.9381ZM63.4101 12.88V11.88H62.4101V12.88H63.4101ZM63.4101 28V29H64.4101V28H63.4101ZM61.3461 28H60.3461V29H61.3461V28ZM61.3461 12.88H62.3461V11.88H61.3461V12.88ZM58.8181 12.88V11.2H56.8181V12.88H58.8181ZM57.8181 12.2H66.9381V10.2H57.8181V12.2ZM65.9381 11.2V12.88H67.9381V11.2H65.9381ZM66.9381 11.88H63.4101V13.88H66.9381V11.88ZM62.4101 12.88V28H64.4101V12.88H62.4101ZM63.4101 27H61.3461V29H63.4101V27ZM62.3461 28V12.88H60.3461V28H62.3461ZM61.3461 11.88H57.8181V13.88H61.3461V11.88ZM75.3475 28H74.3475V29H75.3475V28ZM75.3475 11.2V10.2H74.3475V11.2H75.3475ZM83.3395 11.2L84.3294 11.3414L84.4925 10.2H83.3395V11.2ZM83.0995 12.88V13.88H83.9668L84.0894 13.0214L83.0995 12.88ZM77.4115 12.88V11.88H76.4115V12.88H77.4115ZM77.4115 18.736H76.4115V19.736H77.4115V18.736ZM82.6195 18.736H83.6195V17.736H82.6195V18.736ZM82.6195 20.416V21.416H83.6195V20.416H82.6195ZM77.4115 20.416V19.416H76.4115V20.416H77.4115ZM77.4115 26.32H76.4115V27.32H77.4115V26.32ZM83.5795 26.32H84.5795V25.32H83.5795V26.32ZM83.5795 28V29H84.5795V28H83.5795ZM76.3475 28V11.2H74.3475V28H76.3475ZM75.3475 12.2H83.3395V10.2H75.3475V12.2ZM82.3496 11.0586L82.1096 12.7386L84.0894 13.0214L84.3294 11.3414L82.3496 11.0586ZM83.0995 11.88H77.4115V13.88H83.0995V11.88ZM76.4115 12.88V18.736H78.4115V12.88H76.4115ZM77.4115 19.736H82.6195V17.736H77.4115V19.736ZM81.6195 18.736V20.416H83.6195V18.736H81.6195ZM82.6195 19.416H77.4115V21.416H82.6195V19.416ZM76.4115 20.416V26.32H78.4115V20.416H76.4115ZM77.4115 27.32H83.5795V25.32H77.4115V27.32ZM82.5795 26.32V28H84.5795V26.32H82.5795ZM83.5795 27H75.3475V29H83.5795V27ZM94.7553 21.568V20.568H93.7553V21.568H94.7553ZM94.7553 28V29H95.7553V28H94.7553ZM92.6913 28H91.6913V29H92.6913V28ZM92.6913 11.2V10.2H91.6913V11.2H92.6913ZM100.419 12.376L99.7264 13.0971L99.7339 13.1042L100.419 12.376ZM101.067 19.504L100.173 19.0568L100.169 19.0644L101.067 19.504ZM99.2913 21.112L98.9262 20.181L97.9883 20.5488L98.363 21.4839L99.2913 21.112ZM102.051 28V29H103.529L102.98 27.6281L102.051 28ZM99.9393 28L99.0136 28.3785L99.2678 29H99.9393V28ZM97.2993 21.544L98.2249 21.1655L97.9491 20.4911L97.2226 20.5469L97.2993 21.544ZM99.5313 14.872L98.5338 14.9432L98.5342 14.9487L99.5313 14.872ZM99.3393 14.08L98.3857 14.3811L98.3928 14.4036L98.4009 14.4257L99.3393 14.08ZM98.8593 13.408L99.4 12.5668L99.387 12.5585L99.3737 12.5505L98.8593 13.408ZM94.7553 12.904V11.904H93.7553V12.904H94.7553ZM94.7553 19.864H93.7553V20.864H94.7553V19.864ZM98.8593 19.36L99.3737 20.2175L99.387 20.2095L99.4 20.2012L98.8593 19.36ZM99.3393 18.688L98.4009 18.3423L98.3928 18.3644L98.3857 18.3869L99.3393 18.688ZM99.5313 17.92L100.528 17.9967L100.529 17.9912L99.5313 17.92ZM96.3153 20.568H94.7553V22.568H96.3153V20.568ZM93.7553 21.568V28H95.7553V21.568H93.7553ZM94.7553 27H92.6913V29H94.7553V27ZM93.6913 28V11.2H91.6913V28H93.6913ZM92.6913 12.2H96.3153V10.2H92.6913V12.2ZM96.3153 12.2C98.1448 12.2 99.1901 12.5818 99.7264 13.0971L101.112 11.6549C100.016 10.6022 98.3257 10.2 96.3153 10.2V12.2ZM99.7339 13.1042C100.247 13.5868 100.643 14.5733 100.643 16.384H102.643C102.643 14.3867 102.224 12.7012 101.105 11.6478L99.7339 13.1042ZM100.643 16.384C100.643 17.6153 100.46 18.4817 100.173 19.0568L101.962 19.9512C102.442 18.9903 102.643 17.7767 102.643 16.384H100.643ZM100.169 19.0644C99.9166 19.5804 99.5212 19.9477 98.9262 20.181L99.6563 22.043C100.693 21.6363 101.482 20.9316 101.965 19.9436L100.169 19.0644ZM98.363 21.4839L101.123 28.3719L102.98 27.6281L100.22 20.7401L98.363 21.4839ZM102.051 27H99.9393V29H102.051V27ZM100.865 27.6215L98.2249 21.1655L96.3736 21.9225L99.0136 28.3785L100.865 27.6215ZM97.2226 20.5469C97.0553 20.5598 96.7597 20.568 96.3153 20.568V22.568C96.7668 22.568 97.1272 22.5602 97.3759 22.5411L97.2226 20.5469ZM100.555 16.912V15.856H98.5553V16.912H100.555ZM100.555 15.856C100.555 15.4045 100.547 15.0441 100.528 14.7953L98.5342 14.9487C98.5471 15.1159 98.5553 15.4115 98.5553 15.856H100.555ZM100.529 14.8008C100.504 14.4516 100.409 14.0911 100.278 13.7343L98.4009 14.4257C98.4934 14.6768 98.5267 14.8444 98.5338 14.9432L100.529 14.8008ZM100.293 13.7789C100.141 13.298 99.8574 12.8608 99.4 12.5668L98.3185 14.2492C98.3202 14.2503 98.3247 14.2529 98.3335 14.2652C98.3437 14.2795 98.3644 14.3138 98.3857 14.3811L100.293 13.7789ZM99.3737 12.5505C98.5834 12.0763 97.5266 11.904 96.3393 11.904V13.904C97.3919 13.904 98.0151 14.0677 98.3448 14.2655L99.3737 12.5505ZM96.3393 11.904H94.7553V13.904H96.3393V11.904ZM93.7553 12.904V19.864H95.7553V12.904H93.7553ZM94.7553 20.864H96.3393V18.864H94.7553V20.864ZM96.3393 20.864C97.5266 20.864 98.5834 20.6917 99.3737 20.2175L98.3448 18.5025C98.0151 18.7003 97.3919 18.864 96.3393 18.864V20.864ZM99.4 20.2012C99.8574 19.9072 100.141 19.47 100.293 18.9891L98.3857 18.3869C98.3644 18.4542 98.3437 18.4885 98.3335 18.5028C98.3247 18.5151 98.3202 18.5177 98.3185 18.5188L99.4 20.2012ZM100.278 19.0337C100.406 18.6853 100.502 18.3327 100.528 17.9967L98.5342 17.8433C98.528 17.9233 98.4965 18.0827 98.4009 18.3423L100.278 19.0337ZM100.529 17.9912C100.547 17.7304 100.555 17.3653 100.555 16.912H98.5553C98.5553 17.3547 98.5472 17.6616 98.5338 17.8488L100.529 17.9912ZM116.188 28V29H117.188V28H116.188ZM114.268 28H113.268V29H114.268V28ZM114.268 22.6H115.268V22.4226L115.207 22.256L114.268 22.6ZM110.092 11.2V10.2H108.661L109.153 11.544L110.092 11.2ZM112.204 11.2L113.156 10.8928L112.932 10.2H112.204V11.2ZM115.156 20.344L114.205 20.6512L114.428 21.344H115.156V20.344ZM115.3 20.344V21.344H116.028L116.252 20.6512L115.3 20.344ZM118.252 11.2V10.2H117.524L117.301 10.8928L118.252 11.2ZM120.364 11.2L121.303 11.544L121.795 10.2H120.364V11.2ZM116.188 22.6L115.249 22.256L115.188 22.4226V22.6H116.188ZM116.188 27H114.268V29H116.188V27ZM115.268 28V22.6H113.268V28H115.268ZM115.207 22.256L111.031 10.856L109.153 11.544L113.329 22.944L115.207 22.256ZM110.092 12.2H112.204V10.2H110.092V12.2ZM111.253 11.5072L114.205 20.6512L116.108 20.0368L113.156 10.8928L111.253 11.5072ZM115.156 21.344H115.3V19.344H115.156V21.344ZM116.252 20.6512L119.204 11.5072L117.301 10.8928L114.349 20.0368L116.252 20.6512ZM118.252 12.2H120.364V10.2H118.252V12.2ZM119.425 10.856L115.249 22.256L117.127 22.944L121.303 11.544L119.425 10.856ZM115.188 22.6V28H117.188V22.6H115.188Z" fill="black"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Layout from '../components/layout' 4 | import SEO from '../components/seo' 5 | 6 | const NotFoundPage = () => ( 7 | <Layout> 8 | <SEO title="404: Not found" /> 9 | <h1>NOT FOUND</h1> 10 | <p>You just hit a route that doesn't exist... the sadness.</p> 11 | </Layout> 12 | ) 13 | 14 | export default NotFoundPage 15 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | import SEO from '../components/seo' 4 | import { PageHeader, Banner } from '../utils' 5 | import img from '../images/bcg/aboutBcg.jpeg' 6 | export default function about() { 7 | return ( 8 | <Layout> 9 | <SEO title="About" /> 10 | <PageHeader img={img}> 11 | <Banner title="about us" subtitle="a little about us" /> 12 | </PageHeader> 13 | </Layout> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/contact.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | import SEO from '../components/seo' 4 | import { PageHeader, Banner } from '../utils' 5 | import img from '../images/bcg/contactBcg.jpeg' 6 | export default function about() { 7 | return ( 8 | <Layout> 9 | <SEO title="Contact" /> 10 | <PageHeader img={img}> 11 | <Banner title="contact us" subtitle="let's get in touch" /> 12 | </PageHeader> 13 | </Layout> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | import Layout from '../components/layout' 5 | import SEO from '../components/seo' 6 | import { HomeHeader, Banner, BannerButton } from '../utils' 7 | import img from '../images/bcg/homeBcg.jpeg' 8 | import QuickInfo from '../components/HomePageComponents/QuickInfo' 9 | import Gallery from '../components/HomePageComponents/Gallery' 10 | import Menu from '../components/HomePageComponents/Menu' 11 | const IndexPage = () => ( 12 | <Layout> 13 | <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} /> 14 | <HomeHeader img={img}> 15 | <Banner title="eatery" subtitle="55 main street- Santa Monica, CA"> 16 | <Link to="/menu/" style={{ textDecoration: 'none' }}> 17 | <BannerButton style={{ margin: '2rem auto' }}>menu</BannerButton> 18 | </Link> 19 | </Banner> 20 | </HomeHeader> 21 | <QuickInfo /> 22 | <Gallery /> 23 | <Menu /> 24 | </Layout> 25 | ) 26 | 27 | export default IndexPage 28 | -------------------------------------------------------------------------------- /src/pages/menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | import SEO from '../components/seo' 4 | import { PageHeader, Banner } from '../utils' 5 | import img from '../images/bcg/menuBcg.jpeg' 6 | export default function about() { 7 | return ( 8 | <Layout> 9 | <SEO title="Menu" /> 10 | <PageHeader img={img}> 11 | <Banner title="our menu" subtitle={`let's dig in`} /> 12 | </PageHeader> 13 | </Layout> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/page-2.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | import Layout from '../components/layout' 5 | import SEO from '../components/seo' 6 | 7 | const SecondPage = () => ( 8 | <Layout> 9 | <SEO title="Page two" /> 10 | <h1>Hi from the second page</h1> 11 | <p>Welcome to page 2</p> 12 | <Link to="/">Go back to the homepage</Link> 13 | </Layout> 14 | ) 15 | 16 | export default SecondPage 17 | -------------------------------------------------------------------------------- /src/utils/Banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { styles } from '../utils' 4 | export const Banner = ({ title, subtitle, children }) => { 5 | return ( 6 | <BannerWrapper> 7 | <h1>{title}</h1> 8 | <h3>{subtitle}</h3> 9 | {children} 10 | </BannerWrapper> 11 | ) 12 | } 13 | 14 | const BannerWrapper = styled.div` 15 | margin-bottom: 3rem; 16 | text-align: center; 17 | h1 { 18 | color: ${styles.colors.mainWhite}; 19 | font-size: 3rem; 20 | text-transform: uppercase; 21 | ${styles.letterSpacing({ spacing: '0.75rem' })}; 22 | } 23 | h3 { 24 | color: ${styles.colors.mainWhite}; 25 | ${styles.textSlanted}; 26 | ${styles.letterSpacing({ spacing: '0.15rem' })}; 27 | font-size: 1.5rem; 28 | text-transform: capitalize; 29 | } 30 | ` 31 | Banner.defaultProps = { 32 | title: 'default title', 33 | } 34 | -------------------------------------------------------------------------------- /src/utils/Button.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { styles } from '../utils' 3 | const BannerButton = styled.button` 4 | display: block; 5 | color: ${styles.colors.mainWhite}; 6 | background: transparent; 7 | padding: 0.5rem 1rem; 8 | text-transform: uppercase; 9 | font-size: 1.5rem; 10 | letter-spacing: 0.5rem; 11 | font-weight: 700; 12 | ${styles.border({ color: `${styles.colors.mainWhite}` })}; 13 | margin-top: 1rem; 14 | ${styles.transition({})}; 15 | &:hover { 16 | background: ${styles.colors.mainWhite}; 17 | color: ${styles.colors.mainBlack}; 18 | cursor: pointer; 19 | } 20 | ` 21 | 22 | const SectionButton = styled(BannerButton)` 23 | color: ${styles.colors.mainBlack}; 24 | ${styles.border({ color: `${styles.colors.mainBlack}` })}; 25 | &:hover { 26 | background: ${styles.colors.mainBlack}; 27 | color: ${styles.colors.mainYellow}; 28 | cursor: pointer; 29 | } 30 | ` 31 | 32 | export { BannerButton, SectionButton } 33 | -------------------------------------------------------------------------------- /src/utils/Header.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import React from 'react' 3 | import img from '../images/bcg/homeBcg.jpeg' 4 | function HomeHeader({ img, children }) { 5 | return <IndexHeader img={img}>{children}</IndexHeader> 6 | } 7 | function PageHeader({ img, children }) { 8 | return <DefaultHeader img={img}>{children}</DefaultHeader> 9 | } 10 | 11 | const IndexHeader = styled.header` 12 | min-height: calc(100vh - 68px); 13 | background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 14 | url(${props => props.img}) center/cover fixed no-repeat; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | ` 19 | const DefaultHeader = styled(IndexHeader)` 20 | min-height: 60vh; 21 | ` 22 | 23 | HomeHeader.defaultProps = { 24 | img: img, 25 | } 26 | PageHeader.defaultProps = { 27 | img: img, 28 | } 29 | 30 | export { HomeHeader, PageHeader } 31 | -------------------------------------------------------------------------------- /src/utils/Section.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | export const Section = styled.section` 3 | padding: 2rem 0; 4 | width: 90vw; 5 | margin: 0 auto; 6 | ` 7 | -------------------------------------------------------------------------------- /src/utils/Title.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { styles } from '.' 4 | export function Title({ title, message }) { 5 | return ( 6 | <TitleWrapper> 7 | <h3>{message}</h3> 8 | <h1>{title}</h1> 9 | <div className="underline" /> 10 | </TitleWrapper> 11 | ) 12 | } 13 | Title.defaultProps = { 14 | message: 'our message', 15 | title: 'our title', 16 | } 17 | 18 | const TitleWrapper = styled.div` 19 | text-align: center; 20 | h3 { 21 | ${styles.textSlanted}; 22 | ${styles.letterSpacing({ spacing: '0.3rem' })}; 23 | font-size: 2rem; 24 | color: ${styles.colors.mainYellow}; 25 | } 26 | h1 { 27 | ${styles.letterSpacing({ spacing: '0.3rem' })}; 28 | font-size: 2rem; 29 | text-transform: uppercase; 30 | } 31 | .underline { 32 | width: 5rem; 33 | height: 0.2rem; 34 | background: ${styles.colors.mainYellow}; 35 | margin: 0.5rem auto; 36 | } 37 | ` 38 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | import * as styles from './styles' 2 | import { HomeHeader, PageHeader } from './Header' 3 | import { Banner } from './Banner' 4 | import { BannerButton, SectionButton } from './Button' 5 | import { Section } from './Section' 6 | import { Title } from './Title' 7 | export { 8 | styles, 9 | HomeHeader, 10 | Banner, 11 | BannerButton, 12 | PageHeader, 13 | Section, 14 | Title, 15 | SectionButton, 16 | } 17 | -------------------------------------------------------------------------------- /src/utils/styles.js: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | mainWhite: `#fff`, 3 | mainBlack: `#262626`, 4 | mainYellow: `#d2aa5c`, 5 | mainYellow2: `#F2AF29`, 6 | mainGrey: `#474747`, 7 | } 8 | export const textSlanted = `font-family:'Caveat', cursive;` 9 | 10 | export const transDefault = 'transition:all 0.5s ease-in-out' 11 | export const transFunction = ( 12 | property = 'all', 13 | time = '0.5s', 14 | type = 'linear' 15 | ) => { 16 | return `transition:${property} ${time} ${type}` 17 | } 18 | export const transObject = ({ 19 | property = 'all', 20 | time = '0.5s', 21 | type = 'ease-in-out', 22 | }) => { 23 | return `transition: ${property} ${time} ${type}` 24 | } 25 | 26 | export const transition = ({ 27 | property = 'all', 28 | time = '0.5s', 29 | type = 'ease-in-out', 30 | }) => { 31 | return `transition: ${property} ${time} ${type}` 32 | } 33 | 34 | export const border = ({ 35 | width = '0.15rem', 36 | type = 'solid', 37 | color = 'white', 38 | }) => { 39 | return `border:${width} ${type} ${color}` 40 | } 41 | 42 | export const letterSpacing = ({ spacing = '0.1rem' }) => { 43 | return `letter-spacing:${spacing}` 44 | } 45 | --------------------------------------------------------------------------------