├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json ├── site-config.js ├── src ├── components │ ├── layout.js │ ├── seo.js │ └── style.js ├── images │ ├── appstore.png │ ├── black.png │ ├── blue.png │ ├── coral.png │ ├── headerimage.png │ ├── icon.png │ ├── playstore.png │ ├── screenshot │ │ └── yourscreenshot.png │ ├── squircle.svg │ ├── squircle120.svg │ ├── videos │ │ ├── Place-video-files-here.txt │ │ └── yourvideohere.mp4 │ ├── white.png │ └── yellow.png └── pages │ ├── 404.js │ └── index.js └── yarn.lock /.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 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Imed Adel 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 | Automatic GatsbyJS App Landing Page 9 |

10 |

11 | Create and deploy an iOS app landing page on GitHub Pages and Netlify in a couple of minutes

12 | GitHub 13 | GitHub stars 14 | GitHub forks 15 |

16 | 17 | 18 | ![Automatic GatsbyJS App Landing Page](https://raw.githubusercontent.com/ImedAdel/Mac-Arabic-Keyboard-for-Windows/master/68747470733a2f2f656d696c62616568722e636f6d2f66696c65732f6a6179736f6e312e706e67.png) 19 | ![Automatic GatsbyJS App Landing Page](https://raw.githubusercontent.com/ImedAdel/Mac-Arabic-Keyboard-for-Windows/master/68747470733a2f2f656d696c62616568722e636f6d2f66696c65732f736c6f72312e706e67.png) 20 | 21 | ---- 22 | 23 | 🔧 Fork this repo 24 | 25 | 📲 Upload video preview or screenshot 26 | 27 | 🎨 Customise site in `site-config.js` (no HTML/CSS) 28 | 29 | ✅ Deploy to Netlify! 30 | 31 | 32 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ImedAdel/automatic-gatsbyjs-app-landing-page) 33 | 34 | 42 | ---- 43 | 44 | Or you can use this repo as a Gatsby Starter 45 | `` 46 | gatsby new YourProjectName https://github.com/ImedAdel/automatic-gatsbyjs-app-landing-page 47 | npm run develop # or gatsby develop 48 | `` 49 | 50 | Then, configure `site-config.js`, run `npm run build`, and deploy the public repository to GitHub 🎉. 51 | 52 | ## Credits 53 | - Based on [Automatic App Landing Page](https://github.com/emilbaehr/automatic-app-landing-page) by [Emil Baehr](https://emilbaehr.com/) 54 | - Built using [GatsbyJS](https://gatsbyjs.org) 55 | - Uses [FontAwesome](https://fortawesome.github.io/Font-Awesome/) 56 | 57 | ## Author 58 | [Imed Adel](https://github.com/ImedAdel) 59 | 60 | ## License 61 | [MIT](LICENSE) 62 | -------------------------------------------------------------------------------- /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 | const urljoin = require("url-join") 2 | const configs = require("./site-config") 3 | 4 | module.exports = { 5 | siteMetadata: { 6 | siteUrl: urljoin(configs.app_url, configs.path_prefix), 7 | title: configs.app_name, 8 | description: configs.app_description, 9 | author: configs.twitter_username, 10 | }, 11 | plugins: [ 12 | `gatsby-plugin-react-helmet`, 13 | { 14 | resolve: `gatsby-source-filesystem`, 15 | options: { 16 | name: `images`, 17 | path: `${__dirname}/src/images`, 18 | }, 19 | }, 20 | `gatsby-transformer-sharp`, 21 | `gatsby-plugin-sharp`, 22 | `gatsby-plugin-sitemap`, 23 | { 24 | resolve: `gatsby-plugin-manifest`, 25 | options: { 26 | name: configs.app_name, 27 | short_name: configs.app_name, 28 | start_url: configs.path_prefix, 29 | background_color: configs.body_background_color, 30 | theme_color: configs.app_title_color, 31 | display: `minimal-ui`, 32 | icon: `src/images/icon.png`, // This path is relative to the root of the site. 33 | }, 34 | }, 35 | { 36 | resolve: `gatsby-plugin-google-analytics`, 37 | options: { 38 | trackingId: configs.google_analytics_ID 39 | } 40 | }, 41 | `gatsby-plugin-styled-components`, 42 | `gatsby-plugin-offline`, 43 | `gatsby-plugin-netlify`, 44 | // this (optional) plugin enables Progressive Web App + Offline functionality 45 | // To learn more, visit: https://gatsby.dev/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": "automatic-gatsbyjs-app-landing-page", 3 | "description": "Automatically generate iOS app landing page using GatsbyJS", 4 | "version": "1.0.0", 5 | "author": "Imed Adel ", 6 | "dependencies": { 7 | "babel-plugin-styled-components": "^1.10.0", 8 | "gatsby": "^2.1.27", 9 | "gatsby-image": "^2.0.31", 10 | "gatsby-plugin-google-analytics": "^2.0.17", 11 | "gatsby-plugin-manifest": "^2.0.22", 12 | "gatsby-plugin-netlify": "^2.0.13", 13 | "gatsby-plugin-offline": "^2.0.24", 14 | "gatsby-plugin-react-helmet": "^3.0.8", 15 | "gatsby-plugin-sharp": "^2.0.25", 16 | "gatsby-plugin-sitemap": "^2.0.10", 17 | "gatsby-plugin-styled-components": "^3.0.7", 18 | "gatsby-source-filesystem": "^2.0.23", 19 | "gatsby-transformer-sharp": "^2.1.15", 20 | "prop-types": "^15.7.2", 21 | "react": "^16.8.4", 22 | "react-dom": "^16.8.4", 23 | "react-helmet": "^5.2.0", 24 | "styled-components": "^4.1.3", 25 | "url-join": "^4.0.0" 26 | }, 27 | "devDependencies": { 28 | "@fortawesome/fontawesome-free": "^5.8.1", 29 | "husky": "^1.3.1", 30 | "prettier": "^1.16.4", 31 | "pretty-quick": "^1.10.0" 32 | }, 33 | "keywords": [ 34 | "gatsby" 35 | ], 36 | "license": "MIT", 37 | "scripts": { 38 | "build": "gatsby build", 39 | "develop": "gatsby develop", 40 | "format": "prettier --write src/**/*.{js,jsx}", 41 | "start": "npm run develop", 42 | "serve": "gatsby serve", 43 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" 44 | }, 45 | "husky": { 46 | "hooks": { 47 | "pre-commit": "pretty-quick --staged --pattern src/**/*.{js,jsx}" 48 | } 49 | }, 50 | "repository": { 51 | "type": "git", 52 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 53 | }, 54 | "bugs": { 55 | "url": "https://github.com/gatsbyjs/gatsby/issues" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /site-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // App Info 3 | appstore_link : "https://imedadel.me", // Enter App Store URL. 4 | playstore_link : "https://imedadel.me", // Enter Google Play Store URL. 5 | google_analytics_ID : "UA-47311644-5", // Enter Google Analytics ID or "" 6 | presskit_download_link: "https://imedadel.me", // Enter a link to downloadable file or (e.g. public Dropbox link to a .zip file). 7 | video_or_screenshot : "screenshot", // "screenshot" or "video" 8 | app_url : "https://agalp.imedadel.me", // Domain of your website without path_prefix. 9 | path_prefix : "/", // Prefixes all links. For cases when deployed to example.github.io/automatic-gatsbyjs-app-landing-page/. 10 | app_name : "AGALP", 11 | app_price : "Free", 12 | app_description : "Automatically generate GatsbyJS app landing pages.", 13 | app_keywords : ["automatic", "gatsbyjs", "app", "landing page"], 14 | 15 | // Personal Info 16 | your_name : "Imed Adel", 17 | your_link : "https://imedadel.me", 18 | your_city : "Sousse", 19 | email_address : "hello@imedadel.me", 20 | linkedin_username : null, 21 | facebook_username : null, 22 | instagram_username : "ed_adel", 23 | twitter_username : "Imed_Adel", 24 | github_username : "ImedAdel", 25 | youtube_username : null, 26 | 27 | // Features List 28 | features : [ 29 | { 30 | title: "GitHub Pages GatsbyJS Starter", 31 | description: 32 | "Designed for GitHub Pages and Netlify. Fork. Edit site-config.js. Upload screenshot/video. Push to gh-pages branch. Voilà!", 33 | fontawesome_icon_name: "magic", 34 | }, 35 | { 36 | title: "iPhone Device Preview", 37 | description: 38 | "Preview your app in the context of an iPhone device. Five different device colors included.", 39 | fontawesome_icon_name: "mobile", 40 | }, 41 | { 42 | title: "Video Support", 43 | description: 44 | "Preview app video on the iPhone device simply by placing your video files in the videos folder.", 45 | fontawesome_icon_name: "play-circle", 46 | }, 47 | { 48 | title: "Optimized Performance", 49 | description: 50 | "No need to worry about page performance or optimizing images and videos. Everything is already configured for the best performance possible!", 51 | fontawesome_icon_name: "sync", 52 | }, 53 | { 54 | title: "Easy to Tweak", 55 | description: 56 | "Tweak accent color, images, icons and transparency via the site-config.js file. No HTML/CSS needed.", 57 | fontawesome_icon_name: "adjust", 58 | }, 59 | { 60 | title: "Feature List", 61 | description: 62 | "Add features (like this one) to your site via the site-config.js file. No HTML/CSS needed.", 63 | fontawesome_icon_name: "star", 64 | }, 65 | { 66 | title: "Deploy to Netlify", 67 | description: "Easily deploy your GatsbyJS landing page to Netlify.", 68 | fontawesome_icon_name: "arrow-alt-circle-down", 69 | }, 70 | { 71 | title: "Social Links", 72 | description: 73 | "Easily add social media accounts and contact info in the footer via the site-config.js file. No HTML/CSS needed.", 74 | fontawesome_icon_name: "link", 75 | }, 76 | { 77 | title: "FontAwesome Support", 78 | description: 79 | "Pick custom Font Awesome icons for the feature list via the site-config.js file. No HTML/CSS needed.", 80 | fontawesome_icon_name: "info-circle", 81 | }, 82 | ], 83 | header_background : "rgba(0, 0, 0, 0.1)", 84 | topbar_title_color : "#ffffff", 85 | cover_overlay_color_rgba : "rgba(54, 59, 61, 0.8)", 86 | device_color : "black", // Set to "black", "blue", "coral", "white", or "yellow" 87 | body_background_color : "ffffff", 88 | primary_text_color : "#000", 89 | content_width : "1170px", 90 | font : `"Helvetica Neue", sans-serif`, 91 | link_color : "#1d63ea", 92 | app_title_color : "#ffffff", 93 | app_price_color : "#ffffff", 94 | app_description_color : "#ffffff", 95 | feature_title_color : "#000000", 96 | feature_text_color : "#666666", 97 | feature_icons_foreground_color: "#1d63ea", 98 | feature_icons_background_color: "#e6e6e6", 99 | social_icons_foreground_color : "#666666", 100 | social_icons_background_color : "#e6e6e6", 101 | footer_text_color : "#666666", 102 | } 103 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Layout component that queries for data 3 | * with Gatsby's StaticQuery component 4 | * 5 | * See: https://www.gatsbyjs.org/docs/static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | 11 | import GlobalStyle from "./style.js" 12 | 13 | const Layout = ({ children }) => ( 14 | <> 15 | 16 | {children} 17 | 18 | ) 19 | 20 | Layout.propTypes = { 21 | children: PropTypes.node.isRequired, 22 | } 23 | 24 | export default Layout 25 | -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SEO component that queries for data with 3 | * Gatsby's useStaticQuery React hook 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import Helmet from "react-helmet" 11 | import { useStaticQuery, graphql } from "gatsby" 12 | 13 | function SEO({ description, lang, meta, keywords, title }) { 14 | const { site } = useStaticQuery( 15 | graphql` 16 | query { 17 | site { 18 | siteMetadata { 19 | title 20 | description 21 | author 22 | } 23 | } 24 | } 25 | ` 26 | ) 27 | 28 | const metaDescription = description || site.siteMetadata.description 29 | 30 | return ( 31 | 0 73 | ? { 74 | name: `keywords`, 75 | content: keywords.join(`, `), 76 | } 77 | : [] 78 | ) 79 | .concat(meta)} 80 | /> 81 | ) 82 | } 83 | 84 | SEO.defaultProps = { 85 | lang: `en`, 86 | meta: [], 87 | keywords: [], 88 | } 89 | 90 | SEO.propTypes = { 91 | description: PropTypes.string, 92 | lang: PropTypes.string, 93 | meta: PropTypes.array, 94 | keywords: PropTypes.arrayOf(PropTypes.string), 95 | title: PropTypes.string.isRequired, 96 | } 97 | 98 | export default SEO 99 | -------------------------------------------------------------------------------- /src/components/style.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from "styled-components" 2 | import configs from "../../site-config" 3 | 4 | export default createGlobalStyle` 5 | html { 6 | font-size: 62.5%; 7 | font-family: ${configs.font}; 8 | line-height: 1; 9 | } 10 | 11 | body { 12 | font-size: 2rem; 13 | background-color: ${configs.body_background_color}; 14 | } 15 | 16 | h1 { 17 | font-size: 3rem; 18 | } 19 | 20 | h2 { 21 | font-size: 2rem; 22 | } 23 | 24 | h3 { 25 | font-size: 2rem; 26 | } 27 | 28 | // Better font rendering 29 | body { 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | background-color: ${configs.body_background_color}; 33 | } 34 | 35 | a:link, 36 | a:hover, 37 | a:visited, 38 | a:active { 39 | color: ${configs.link_color}; 40 | text-decoration: none; 41 | } 42 | 43 | // Various resets 44 | *, 45 | *::before, 46 | *::after { 47 | -webkit-box-sizing: border-box; 48 | -moz-box-sizing: border-box; 49 | box-sizing: border-box; 50 | 51 | margin: 0; 52 | padding: 0; 53 | } 54 | 55 | .imageWrapper { 56 | // Sets the background image in the header area 57 | height: 714px; 58 | background-repeat: no-repeat; 59 | background-size: cover; 60 | background-position: top; 61 | border-radius: 0px 0px 40px 40px; 62 | } 63 | 64 | .headerImage { 65 | position: unset !important; 66 | height: 0 !important; 67 | display: block !important; 68 | 69 | } 70 | .headerImage > div{ 71 | padding-bottom: 0 !important; 72 | } 73 | .headerImage img { 74 | z-index: -1; 75 | border-radius: 0px 0px 40px 40px; 76 | } 77 | 78 | .headerBackground { 79 | height: 115px; 80 | background-color: ${configs.header_background}; 81 | } 82 | 83 | .container { 84 | // Set up the container for the site content 85 | display: grid; 86 | margin: auto; 87 | max-width: ${configs.content_width}; 88 | padding-left: 15px; 89 | padding-right: 15px; 90 | grid-template-columns: repeat(12, 1fr); 91 | grid-template-rows: 115px 876px auto auto; 92 | grid-column-gap: 30px; 93 | grid-template-areas: 94 | "h h h h h h h h h h h h" 95 | "p p p p p i i i i i i i" 96 | "c c c c c c c c c c c c" 97 | "f f f f f f f f f f f f"; 98 | } 99 | 100 | @media only screen and (max-width: 1070px) { 101 | .container { 102 | // Set up the container for the site content 103 | grid-template-rows: 115px 811px auto auto; 104 | } 105 | } 106 | 107 | @media only screen and (max-width: 992px) { 108 | .container { 109 | grid-column-gap: 0px; 110 | grid-template-columns: 1; 111 | grid-template-rows: 115px auto auto auto auto; 112 | grid-template-areas: 113 | "h h h h h h h h h h h h" 114 | "i i i i i i i i i i i i" 115 | "p p p p p p p p p p p p" 116 | "c c c c c c c c c c c c" 117 | "f f f f f f f f f f f f"; 118 | } 119 | } 120 | 121 | header { 122 | grid-area: h; 123 | display: flex; 124 | } 125 | 126 | .logo { 127 | display: flex; 128 | width: 100%; 129 | justify-content: flex-start; 130 | align-items: center; 131 | height: 115px; 132 | } 133 | 134 | .logo > p { 135 | color: ${configs.topbar_title_color}; 136 | display: flex; 137 | font-weight: bold; 138 | padding-bottom: 1px; 139 | } 140 | 141 | .headerIcon { 142 | width: 50px; 143 | height: 50px; 144 | -webkit-clip-path: url(#shape); 145 | clip-path: url(#shape); 146 | margin-right: 15px; 147 | } 148 | 149 | // Navigation Links 150 | nav { 151 | width: 100%; 152 | display: flex; 153 | justify-content: flex-end; 154 | align-items: center; 155 | height: 115px; 156 | } 157 | 158 | nav > ul { 159 | color: #fff; 160 | display: flex; 161 | list-style-type: none; 162 | } 163 | 164 | nav > ul li { 165 | padding-left: 50px; 166 | text-align: right; 167 | } 168 | 169 | nav > ul li:first-child { 170 | padding-left: 0px; 171 | } 172 | 173 | nav > ul li a:link, 174 | nav > ul li a:visited { 175 | text-decoration: none; 176 | color: rgba(${configs.topbar_title_color}, 0.6); 177 | } 178 | 179 | nav > ul li a:hover, 180 | nav > ul li a:active { 181 | text-decoration: none; 182 | color: rgba(${configs.topbar_title_color}, 1); 183 | } 184 | 185 | // App Title, Price, Description and Links 186 | 187 | .appInfo { 188 | grid-area: i; 189 | display: flex; 190 | flex-wrap: wrap; 191 | padding-top: 140px; 192 | align-content: flex-start; 193 | } 194 | 195 | @media only screen and (max-width: 992px) { 196 | .appInfo { 197 | padding-top: 50px; 198 | justify-content: center; 199 | } 200 | } 201 | 202 | .appIconShadow { 203 | display: flex; 204 | filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2)); 205 | } 206 | 207 | .appIconLarge { 208 | width: 120px; 209 | height: 120px; 210 | -webkit-clip-path: url(#shape120); 211 | clip-path: url(#shape120); 212 | } 213 | 214 | .appNamePriceContainer { 215 | display: flex; 216 | flex: 0 1 auto; 217 | flex-direction: column; 218 | align-items: start; 219 | justify-content: center; 220 | margin-left: 30px; 221 | } 222 | 223 | .appName { 224 | color: ${configs.app_title_color}; 225 | } 226 | 227 | .appPrice { 228 | color: ${configs.app_price_color}; 229 | font-weight: normal; 230 | margin-top: 13px; 231 | } 232 | 233 | @media only screen and (max-width: 768px) { 234 | .appNamePriceContainer { 235 | width: 100%; 236 | margin-left: 0px; 237 | align-items: center; 238 | justify-content: center; 239 | } 240 | 241 | .appName { 242 | margin-top: 30px; 243 | text-align: center; 244 | } 245 | 246 | .appPrice { 247 | margin-top: 13px; 248 | text-align: center; 249 | } 250 | } 251 | 252 | .appDescriptionContainer { 253 | font-size: 2.5rem; 254 | font-weight: normal; 255 | width: 100%; 256 | align-items: flex-start; 257 | margin-top: 45px; 258 | flex: 0 1 auto; 259 | line-height: 1.5; 260 | } 261 | 262 | .appDescription { 263 | color: ${configs.app_description_color}; 264 | } 265 | 266 | @media only screen and (max-width: 992px) { 267 | .appDescription { 268 | text-align: center; 269 | } 270 | } 271 | 272 | .downloadButtonsContainer { 273 | display: inline-block; 274 | margin-top: 42px; 275 | filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2)); 276 | } 277 | 278 | @media only screen and (max-width: 992px) { 279 | .downloadButtonsContainer { 280 | text-align: center; 281 | } 282 | } 283 | 284 | .playStore { 285 | height: 75px; 286 | margin-right: 24px; 287 | } 288 | 289 | @media only screen and (max-width: 992px) { 290 | .playStore { 291 | margin-right: 24px; 292 | margin-bottom: 0px; 293 | } 294 | } 295 | 296 | @media only screen and (max-width: 528px) { 297 | .playStore { 298 | margin-right: 0px; 299 | margin-bottom: 24px; 300 | } 301 | } 302 | 303 | .appStore { 304 | height: 75px; 305 | } 306 | 307 | // iPhone Device Preview 308 | 309 | .iphonePreview { 310 | grid-area: p; 311 | background-size: 400px auto; 312 | background-repeat: no-repeat; 313 | margin-top: 68px; 314 | } 315 | 316 | .iphoneScreen { 317 | width: 349px; 318 | -webkit-clip-path: url(#screenMask); 319 | clip-path: url(#screenMask); 320 | margin-left: 26px; 321 | margin-top: 23px; 322 | } 323 | 324 | .videoContainer { 325 | width: 349px; 326 | height: 755px; 327 | -webkit-clip-path: url(#screenMask); 328 | clip-path: url(#screenMask); 329 | margin-left: 26px; 330 | margin-top: 23px; 331 | } 332 | 333 | .videoContainer > video { 334 | width: 349px; 335 | height: 755px; 336 | } 337 | 338 | @media only screen and (max-width: 1070px) { 339 | .iphonePreview { 340 | background-size: 370px auto; 341 | } 342 | 343 | .iphoneScreen { 344 | width: 322px; 345 | margin-left: 24px; 346 | margin-top: 22px; 347 | } 348 | 349 | .videoContainer { 350 | width: 322px; 351 | height: 698px; 352 | margin-left: 24px; 353 | margin-top: 22px; 354 | } 355 | 356 | .videoContainer > video { 357 | width: 322px; 358 | height: 698px; 359 | } 360 | } 361 | 362 | @media only screen and (max-width: 992px) { 363 | .iphonePreview { 364 | display: flex; 365 | background-size: 260px auto; 366 | background-position: center 0; 367 | margin-top: 47px; 368 | justify-content: center; 369 | padding-bottom: 75px; 370 | } 371 | 372 | .iphoneScreen { 373 | width: 226px; 374 | height: 488px; 375 | -webkit-clip-path: url(#screenMask); 376 | clip-path: url(#screenMask); 377 | margin: 0px; 378 | margin-top: 17px; 379 | } 380 | 381 | .videoContainer { 382 | width: 226px; 383 | height: 488px; 384 | margin-left: 0px; 385 | margin-top: 17px; 386 | } 387 | 388 | .videoContainer > video { 389 | width: 226px; 390 | height: 488px; 391 | } 392 | } 393 | 394 | // Feature List 395 | 396 | .features { 397 | grid-area: c; 398 | display: flex; 399 | flex: 0 1 auto; 400 | align-content: flex-start; 401 | justify-content: flex-start; 402 | flex-grow: 1; 403 | flex-wrap: wrap; 404 | margin-top: 93px; 405 | } 406 | 407 | .feature { 408 | display: flex; 409 | padding-top: 63px; 410 | padding-left: 15px; 411 | padding-right: 15px; 412 | width: calc(100% / 3); 413 | } 414 | 415 | .feature:nth-child(-n + 3) { 416 | padding-top: 0px; 417 | } 418 | 419 | .feature:nth-child(3n) { 420 | padding-right: 0px; 421 | } 422 | 423 | .feature:nth-child(3n + 1) { 424 | padding-left: 0px; 425 | } 426 | 427 | .iconBack { 428 | color: ${configs.feature_icons_background_color}; 429 | } 430 | 431 | .iconTop { 432 | color: ${configs.feature_icons_foreground_color}; 433 | } 434 | 435 | .socialIconBack { 436 | color: ${configs.social_icons_background_color}; 437 | } 438 | 439 | .socialIconTop { 440 | color: ${configs.social_icons_foreground_color}; 441 | } 442 | 443 | .featureText { 444 | margin-left: 18px; 445 | } 446 | 447 | .featureText > h3 { 448 | color: ${configs.feature_title_color}; 449 | } 450 | 451 | .featureText > p { 452 | color: ${configs.feature_text_color}; 453 | margin-top: 8px; 454 | line-height: 1.5; 455 | } 456 | 457 | @media only screen and (max-width: 992px) { 458 | .features { 459 | flex-grow: 1; 460 | flex-direction: row; 461 | flex-wrap: wrap; 462 | margin-top: 11px; 463 | } 464 | 465 | .feature { 466 | display: flex; 467 | padding-top: 41px; 468 | padding-left: 15px; 469 | padding-right: 15px; 470 | width: 100%; 471 | } 472 | 473 | .feature:nth-child(-n + 3) { 474 | padding-top: 41px; 475 | } 476 | 477 | .feature:nth-child(1) { 478 | padding-top: 0px; 479 | } 480 | 481 | .feature:nth-child(3n) { 482 | padding-right: 15px; 483 | } 484 | 485 | .feature:nth-child(3n + 1) { 486 | padding-left: 15px; 487 | } 488 | } 489 | 490 | // Footer 491 | 492 | footer { 493 | grid-area: f; 494 | display: flex; 495 | flex-wrap: wrap; 496 | justify-content: center; 497 | align-content: center; 498 | } 499 | 500 | .footerText { 501 | color: ${configs.footer_text_color}; 502 | display: block; 503 | line-height: 1.5; 504 | width: 100%; 505 | text-align: center; 506 | padding-top: 70px; 507 | padding-bottom: 70px; 508 | } 509 | 510 | .footerIcons { 511 | padding-bottom: 70px; 512 | display: flex; 513 | } 514 | 515 | @media only screen and (max-width: 992px) { 516 | .footerText { 517 | color: ${configs.footer_text_color}; 518 | display: block; 519 | line-height: 1.5; 520 | width: 100%; 521 | text-align: center; 522 | padding-top: 54px; 523 | padding-bottom: 61px; 524 | } 525 | 526 | .footerIcons { 527 | padding-bottom: 70px; 528 | display: flex; 529 | } 530 | } 531 | 532 | .hidden { 533 | display: none; 534 | } 535 | ` 536 | -------------------------------------------------------------------------------- /src/images/appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/appstore.png -------------------------------------------------------------------------------- /src/images/black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/black.png -------------------------------------------------------------------------------- /src/images/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/blue.png -------------------------------------------------------------------------------- /src/images/coral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/coral.png -------------------------------------------------------------------------------- /src/images/headerimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/headerimage.png -------------------------------------------------------------------------------- /src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/icon.png -------------------------------------------------------------------------------- /src/images/playstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/playstore.png -------------------------------------------------------------------------------- /src/images/screenshot/yourscreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/screenshot/yourscreenshot.png -------------------------------------------------------------------------------- /src/images/squircle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/squircle120.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/videos/Place-video-files-here.txt: -------------------------------------------------------------------------------- 1 | Place video files in this folder. 2 | 3 | Formats for Chrome & Firefox: 4 | .webm 5 | .ogg 6 | 7 | Formats for Safari: 8 | .mp4 9 | .mov 10 | 11 | Optimal video resolutions: 12 | 828x1792 13 | 1125x2436 14 | 1242x2688 15 | -------------------------------------------------------------------------------- /src/images/videos/yourvideohere.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/videos/yourvideohere.mp4 -------------------------------------------------------------------------------- /src/images/white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/white.png -------------------------------------------------------------------------------- /src/images/yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imedadel/automatic-gatsbyjs-app-landing-page/1b2815f397de1a69b138dcfd63d840e92c54f079/src/images/yellow.png -------------------------------------------------------------------------------- /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 | 8 | 9 |

NOT FOUND

10 |

You just hit a route that doesn't exist... the sadness.

11 | 12 | ) 13 | 14 | export default NotFoundPage 15 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | import Layout from "../components/layout" 6 | import SEO from "../components/seo" 7 | 8 | import "@fortawesome/fontawesome-free/css/all.min.css" 9 | 10 | import configs from "../../site-config" 11 | 12 | const IndexPage = ({ data }) => ( 13 | 14 | 15 | 16 |
24 |
25 |
26 |
27 |
28 |
29 | 30 | 31 | 32 | 37 | 38 | 39 | 40 | 44 |
45 |

{configs.app_name}

46 |
47 | 56 |
57 |
73 | 78 | 83 | 87 | 88 | 89 | {configs.video_or_screenshot === "video" && ( 90 |
91 | 105 |
106 | )} 107 | 108 | {configs.video_or_screenshot === "screenshot" && ( 109 | 113 | )} 114 |
115 |
116 |
117 | 118 | 119 | 120 | 126 | 127 | 128 | 129 | 133 |
134 |
135 |

{configs.app_name}

136 |

{configs.app_price}

137 |
138 |
139 |

{configs.app_description}

140 |
141 |
142 | {configs.playstore_link && ( 143 | 144 | 148 | 149 | )} 150 | {configs.appstore_link && ( 151 | 152 | 156 | 157 | )} 158 |
159 |
160 |
161 | {configs.features.map(feature => { 162 | if (feature.title) { 163 | return ( 164 |
165 |
166 | 167 | 168 | 173 | 174 |
175 |
176 |

{feature.title}

177 |

{feature.description}

178 |
179 |
180 | ) 181 | } 182 | return null 183 | })} 184 |
185 | 254 | {/*TODO: Add App Store API */} 255 |
256 |
257 |
258 | 259 | ) 260 | 261 | export default IndexPage 262 | 263 | export const query = graphql` 264 | query { 265 | headerIcon: file(relativePath: { eq: "icon.png" }) { 266 | childImageSharp { 267 | fluid(maxWidth: 50) { 268 | ...GatsbyImageSharpFluid 269 | } 270 | } 271 | } 272 | appStore: file(relativePath: { eq: "appstore.png" }) { 273 | childImageSharp { 274 | fixed(width: 220) { 275 | ...GatsbyImageSharpFixed 276 | } 277 | } 278 | } 279 | playStore: file(relativePath: { eq: "playstore.png" }) { 280 | childImageSharp { 281 | fixed(height: 75) { 282 | ...GatsbyImageSharpFixed 283 | } 284 | } 285 | } 286 | iphoneScreen: file(relativePath: { glob: "screenshot/*.{png,jpg}" }) { 287 | childImageSharp { 288 | fluid(maxWidth: 350) { 289 | ...GatsbyImageSharpFluid 290 | } 291 | } 292 | } 293 | videoScreen: file( 294 | extension: { ne: "txt" } 295 | relativePath: { glob: "videos/*" } 296 | ) { 297 | publicURL 298 | extension 299 | } 300 | appIconLarge: file(relativePath: { eq: "icon.png" }) { 301 | childImageSharp { 302 | fluid(maxWidth: 120) { 303 | ...GatsbyImageSharpFluid 304 | } 305 | } 306 | } 307 | headerImage: file(relativePath: { eq: "headerimage.png" }) { 308 | childImageSharp { 309 | fluid(maxHeight: 714) { 310 | ...GatsbyImageSharpFluid 311 | } 312 | } 313 | } 314 | iphonePreviewBlack: file(relativePath: { eq: "black.png" }) { 315 | childImageSharp { 316 | fluid(maxWidth: 400) { 317 | ...GatsbyImageSharpFluid 318 | } 319 | } 320 | } 321 | iphonePreviewBlue: file(relativePath: { eq: "blue.png" }) { 322 | childImageSharp { 323 | fluid(maxWidth: 400) { 324 | ...GatsbyImageSharpFluid 325 | } 326 | } 327 | } 328 | iphonePreviewCoral: file(relativePath: { eq: "coral.png" }) { 329 | childImageSharp { 330 | fluid(maxWidth: 400) { 331 | ...GatsbyImageSharpFluid 332 | } 333 | } 334 | } 335 | iphonePreviewWhite: file(relativePath: { eq: "white.png" }) { 336 | childImageSharp { 337 | fluid(maxWidth: 400) { 338 | ...GatsbyImageSharpFluid 339 | } 340 | } 341 | } 342 | iphonePreviewYellow: file(relativePath: { eq: "yellow.png" }) { 343 | childImageSharp { 344 | fluid(maxWidth: 400) { 345 | ...GatsbyImageSharpFluid 346 | } 347 | } 348 | } 349 | } 350 | ` 351 | --------------------------------------------------------------------------------