├── .babelrc ├── .gitignore ├── README.md ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── about.js ├── contact.js ├── customsoftware.js ├── estimate.js ├── index.js ├── mobileapps.js ├── revolution.js ├── services.js └── websites.js ├── public ├── assets │ ├── analytics.svg │ ├── android.svg │ ├── backArrow.svg │ ├── backArrowDisabled.svg │ ├── background.jpg │ ├── bell.svg │ ├── biometrics.svg │ ├── buildIcon.svg │ ├── bulb.svg │ ├── camera.svg │ ├── cash.svg │ ├── check.svg │ ├── consultationIcon.svg │ ├── customSoftware.svg │ ├── customized.svg │ ├── data.svg │ ├── designIcon.svg │ ├── ecommerce.svg │ ├── email.svg │ ├── extendAccess.svg │ ├── facebook.svg │ ├── footerAdornment.svg │ ├── forwardArrow.svg │ ├── forwardArrowDisabled.svg │ ├── founder.jpg │ ├── globe.svg │ ├── gps.svg │ ├── history.svg │ ├── increaseEngagement.svg │ ├── info.svg │ ├── infoBackground.svg │ ├── instagram.svg │ ├── iphone.svg │ ├── iterateIcon.svg │ ├── launchIcon.svg │ ├── logo.svg │ ├── maintainIcon.svg │ ├── mobile.svg │ ├── mobileBackground.jpg │ ├── mobileIcon.svg │ ├── mockupIcon.svg │ ├── outreach.svg │ ├── people.svg │ ├── person.svg │ ├── persons.svg │ ├── phone.svg │ ├── puppy.svg │ ├── repeatingBackground.svg │ ├── reviewIcon.svg │ ├── root.svg │ ├── send.svg │ ├── seo.svg │ ├── software.svg │ ├── stopwatch.svg │ ├── swissKnife.svg │ ├── twitter.svg │ ├── upload.svg │ ├── users.svg │ ├── vision.svg │ ├── website.svg │ ├── websiteIcon.svg │ └── yearbook.svg ├── favicon.png ├── robots.txt └── sitemap_local.xml ├── scripts ├── formatDate.js ├── getPathsObject.js └── sitemap.js └── src ├── Link.js ├── ProTip.js ├── animations ├── automationAnimation │ └── data.json ├── documentsAnimation │ ├── data.js │ ├── img_0.png │ └── img_1.png ├── estimateAnimation │ └── data.json ├── integrationAnimation │ └── data.json ├── landinganimation │ ├── data.js │ ├── data.json │ ├── img_0.png │ ├── img_1.png │ ├── img_2.png │ ├── img_3.png │ └── img_4.png ├── scaleAnimation │ └── data.json ├── technologyAnimation │ └── data.json └── uxAnimation │ ├── data.js │ ├── img_0.png │ ├── img_1.png │ ├── img_10.png │ ├── img_11.png │ ├── img_12.png │ ├── img_13.png │ ├── img_14.png │ ├── img_15.png │ ├── img_16.png │ ├── img_17.png │ ├── img_18.png │ ├── img_2.png │ ├── img_3.png │ ├── img_4.png │ ├── img_5.png │ ├── img_6.png │ ├── img_7.png │ ├── img_8.png │ └── img_9.png └── ui ├── ButtonArrow.js ├── CallToAction.js ├── Fonts.js ├── Footer.js ├── Header.js └── Theme.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # misc 7 | .DS_Store 8 | .env.local 9 | .env.development.local 10 | .env.test.local 11 | .env.production.local 12 | 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Next.js 18 | /.next 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.js example 2 | 3 | ## How to use 4 | 5 | Download the example [or clone the repo](https://github.com/mui-org/material-ui): 6 | 7 | ```sh 8 | curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs 9 | cd nextjs 10 | ``` 11 | 12 | Install it and run: 13 | 14 | ```sh 15 | npm install 16 | npm run dev 17 | ``` 18 | 19 | ## The idea behind the example 20 | 21 | [Next.js](https://github.com/zeit/next.js) is a framework for server-rendered React apps. 22 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withPlugins = require("next-compose-plugins"); 2 | const optimizedImages = require("next-optimized-images"); 3 | 4 | module.exports = withPlugins([ 5 | [ 6 | optimizedImages, 7 | { 8 | /* config for next-optimized-images */ 9 | } 10 | ] 11 | 12 | // your other plugins here 13 | ]); 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs", 3 | "version": "4.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.8.0", 7 | "@material-ui/icons": "^4.5.1", 8 | "@material-ui/styles": "^4.7.1", 9 | "axios": "^0.19.0", 10 | "clsx": "latest", 11 | "fileloader": "^2.0.0", 12 | "fontfaceobserver": "^2.1.0", 13 | "fs-extra": "^8.1.0", 14 | "imagemin-mozjpeg": "^8.0.0", 15 | "imagemin-optipng": "^7.1.0", 16 | "next": "latest", 17 | "next-compose-plugins": "^2.2.0", 18 | "next-optimized-images": "^2.5.4", 19 | "prop-types": "latest", 20 | "react": "latest", 21 | "react-dom": "latest", 22 | "react-ga": "^2.7.0", 23 | "react-lazy-load-image-component": "^1.4.3", 24 | "react-lottie": "^1.2.3" 25 | }, 26 | "scripts": { 27 | "dev": "next", 28 | "build": "next build", 29 | "start": "next start", 30 | "postbuild": "node scripts/sitemap.js" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactGA from "react-ga"; 3 | import App from "next/app"; 4 | import Head from "next/head"; 5 | import { ThemeProvider } from "@material-ui/core/styles"; 6 | import Theme from "../src/ui/Theme"; 7 | import Header from "../src/ui/Header"; 8 | import Footer from "../src/ui/Footer"; 9 | import Fonts from "../src/ui/Fonts"; 10 | 11 | import { LazyLoadComponent } from "react-lazy-load-image-component"; 12 | 13 | ReactGA.initialize("UA-154916062-1"); 14 | 15 | export default class MyApp extends App { 16 | constructor(props) { 17 | super(props); 18 | 19 | this.state = { value: 0, selectedIndex: 0 }; 20 | } 21 | 22 | setValue = index => { 23 | this.setState({ value: index }); 24 | }; 25 | 26 | setSelectedIndex = index => { 27 | this.setState({ selectedIndex: index }); 28 | }; 29 | 30 | componentDidMount() { 31 | Fonts(); 32 | // Remove the server-side injected CSS. 33 | const jssStyles = document.querySelector("#jss-server-side"); 34 | if (jssStyles) { 35 | jssStyles.parentElement.removeChild(jssStyles); 36 | } 37 | } 38 | 39 | render() { 40 | const { Component, pageProps } = this.props; 41 | 42 | return ( 43 | 44 | 45 | My page 46 | 47 | 48 |
54 | 59 | 60 |