├── .gitignore ├── README.md ├── components ├── container.js ├── fancyLink.js ├── footer.js ├── header.js ├── layout.js └── scrolltrigger.js ├── context └── state.js ├── helpers ├── globalscroll.js ├── seo.config.js └── transitions.js ├── jsconfig.json ├── next.config.js ├── package.json ├── pages ├── _app.js ├── _document.js ├── about.js └── index.js ├── postcss.config.js ├── public └── favicon.ico ├── styles ├── _fonts.css ├── _locomotive.css ├── _typography.css └── main.css ├── tailwind.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next Interactive Boilerplate 2 | 3 | Demo: [INCOMING] 4 | A simple [Next.js](https://nextjs.org/) boilerplate with [TailwindCSS](https://tailwindcss.com/) [Framer Motion](https://www.framer.com/motion/), [Locomotive Scroll](https://locomotivemtl.github.io/locomotive-scroll/) and [GSAP Scroll Trigger](https://github.com/greensock/GSAP). 5 | Developed based on [Samuel Goddard Next Boilerplate](https://github.com/samuelgoddard/next-tailwind-motion.git). 6 | 7 | ## ✨ Features 8 | - [Next](https://nextjs.org/) 11 9 | - [Tailwind](https://tailwindcss.com/) (With [JIT](https://tailwindcss.com/docs/just-in-time-mode) mode enabled) 10 | - Custom [PostCSS](https://postcss.org/) setup preconfigured to allow for `@import` and simple CSS nesting 11 | - [Framer Motion 4](https://www.framer.com/motion/) (With [LazyMotion](https://www.framer.com/api/motion/lazy-motion/) setup for smaller bundle sizes) 12 | - [Preact](https://preactjs.com/) preconfigured instead of React for smaller bundle size* 13 | - SEO preconfigured with [next-seo](https://github.com/garmeeh/next-seo) 14 | - [Module Aliasing](https://nextjs.org/docs/advanced-features/module-path-aliases) preconfigured with `jsconfig.json` 15 | - [Locomotive Scroll](https://locomotivemtl.github.io/locomotive-scroll/) preconfigured for smooth, lerp based page scrolling 16 | - [GSAP Scroll Trigger](https://github.com/greensock/GSAP) preconfigured for custom scroll animation. 17 | 18 | _*To remove Preact and switch back to React simply remove the code in `next.config.js`_ 19 | 20 | ### Roadmap / Coming Soon... 21 | - Feature branch with [Sanity](https://www.sanity.io/) preconfigured 22 | 23 | ## 🚀 Quick start 24 | 25 | 1. **Clone the repo** 26 | 27 | ```sh 28 | git clone https://github.com/tomostudio/next-interactive-boilerplate.git 29 | ``` 30 | 31 | 2. **Start developing** 32 | 33 | Navigate into your new site’s directory and install the local dependencies first, then run the dev command. 34 | 35 | ```sh 36 | cd next-interactive-boilerplate/ 37 | 38 | yarn 39 | yarn run dev 40 | ``` 41 | 42 | 3. **Open the source code and start editing!** 43 | 44 | Your site is will be running at `http://localhost:3000` 45 | 46 | ## 🗄 Directory Structure 47 | ``` 48 | |-- components 49 | |-- container.js *// A simple container component to wrap areas in a max width* 50 | |-- fancyLink.js *// A simple wrapper around `next/link` 51 | |-- footer.js *// Example footer component* 52 | |-- header.js *// Example header component* 53 | |-- layout.js *// Layout component that can be used to wrap your pages in a global layout* 54 | |-- scrolltrigger.js *// A container to enable scrolltrigger interaction* 55 | |-- helpers 56 | |-- seo.config.js *// default SEO configuration helper, imported in `pages/_app.js`* 57 | |-- transitions.js *// re-usable framer motion transition helper with a basic 'fade' transition to get started* 58 | |-- globalscroll.js *// push locomotive scroll event to context or global window event* 59 | |-- context 60 | |-- state.js *// default react context initiation, currently preset to store contextual locomotive scroll event* 61 | |-- pages 62 | |-- _app.js *// Includes default SEO component, Framer motion AnimatePresence & Locomotive Scroll init* 63 | |-- _document.js *// Default Next document component* 64 | |-- about.js 65 | |-- index.js 66 | |-- public *// Next public assets* 67 | |-- styles 68 | |-- _locomotive.css *// custom locomotive scroll styles* 69 | |-- _fonts.css *// custom webfont styles* 70 | |-- _typography.css *// custom typographical styles* 71 | |-- main.css *// Tailwind init and custom css imports* 72 | |-- .gitignore 73 | |-- jsconfig.json *// module aliasing* 74 | |-- postcss.config.js *// Tailwind, CSS import, CSS nesting init* 75 | |-- next.config.js *// Prefer Preact to React* 76 | |-- package.json 77 | |-- README.md 78 | |-- tailwind.config.js 79 | ``` 80 | -------------------------------------------------------------------------------- /components/container.js: -------------------------------------------------------------------------------- 1 | export default function Container({ children }) { 2 | return( 3 |
4 | {children} 5 |
6 | ) 7 | } -------------------------------------------------------------------------------- /components/fancyLink.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | export default function FancyLink( {destination, a11yText, label, extraClasses} ) { 4 | return ( 5 | 6 | 7 | {label} 8 | 9 | 10 | ) 11 | } -------------------------------------------------------------------------------- /components/footer.js: -------------------------------------------------------------------------------- 1 | import Container from '@/components/container' 2 | 3 | export default function Footer() { 4 | return ( 5 | 28 | ) 29 | } -------------------------------------------------------------------------------- /components/header.js: -------------------------------------------------------------------------------- 1 | import FancyLink from '@/components/fancyLink' 2 | import Container from '@/components/container' 3 | 4 | export default function Header() { 5 | return ( 6 |
7 | 8 |
9 | 10 | 11 | 16 |
17 | 18 |
19 | ) 20 | } -------------------------------------------------------------------------------- /components/layout.js: -------------------------------------------------------------------------------- 1 | export default function Layout({ children }) { 2 | return ( 3 | <> 4 | {children} 5 | 6 | ) 7 | } -------------------------------------------------------------------------------- /components/scrolltrigger.js: -------------------------------------------------------------------------------- 1 | import { useEffect, forwardRef } from 'react' 2 | 3 | import {useLocomotiveScroll } from 'react-locomotive-scroll' 4 | import gsap from 'gsap' 5 | import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' 6 | 7 | import React from 'react' 8 | 9 | const ScrollTriggerWrapper = forwardRef((props, ref) => { 10 | const { scroll } = useLocomotiveScroll(); 11 | const { children, animation } = props; 12 | let animationinit = false; 13 | 14 | useEffect(() => { 15 | const runAnimationTL = []; 16 | if (scroll) { 17 | 18 | // Initiate Scrolltrigger 19 | gsap.registerPlugin(ScrollTrigger) 20 | 21 | // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) 22 | scroll.on("scroll", ScrollTrigger.update); 23 | 24 | 25 | // INIT SCROLLTRIGGER 26 | ScrollTrigger.scrollerProxy("#scroll-container", { 27 | scrollTop(value) { 28 | return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y; 29 | }, // we don't have to define a scrollLeft because we're only scrolling vertically. 30 | getBoundingClientRect() { 31 | return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; 32 | }, 33 | // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). 34 | pinType: document.querySelector("#scroll-container").style.transform ? "transform" : "fixed" 35 | }); 36 | 37 | // Run Animation 38 | if (animation && !animationinit) { 39 | animationinit = true; 40 | //check animation array if single or array; 41 | if(animation instanceof Array){ 42 | animation.forEach(each_anim => { 43 | // push each animation into array. 44 | // pushing animation = running the animation. 45 | runAnimationTL.push(each_anim()); 46 | }); 47 | } 48 | else if(animation instanceof Object){ 49 | runAnimationTL.push(animation()); 50 | runAnimationTL.tl; 51 | } 52 | } 53 | 54 | } 55 | return () => { 56 | if (runAnimationTL) { 57 | animationinit = false; 58 | runAnimationTL.forEach(each_anim => { 59 | // delete timeline; 60 | each_anim.tl.kill(true); 61 | // second attempt of deleting through scroll trigger if instance is still available; 62 | if(ScrollTrigger.getById(each_anim.id)) ScrollTrigger.getById(each_anim.id).kill(true); 63 | }); 64 | } 65 | } 66 | }, [scroll]); 67 | 68 | return ( 69 | <> 70 | {children} 71 | 72 | ) 73 | }); 74 | 75 | export default ScrollTriggerWrapper; 76 | -------------------------------------------------------------------------------- /context/state.js: -------------------------------------------------------------------------------- 1 | import { createContext, useContext, useState } from 'react'; 2 | 3 | const AppContext = createContext(); 4 | 5 | export function AppWrapper({ children }) { 6 | const [scrollState, setScrollState] = useState(null); 7 | 8 | return ( 9 | 10 | {children} 11 | 12 | ); 13 | } 14 | 15 | export function useAppContext() { 16 | return useContext(AppContext); 17 | } 18 | -------------------------------------------------------------------------------- /helpers/globalscroll.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {useLocomotiveScroll } from 'react-locomotive-scroll' 3 | import { useAppContext } from '../context/state.js'; 4 | 5 | export default function PushScrollGlobal() { 6 | const { scroll } = useLocomotiveScroll(); 7 | 8 | // pass the scroll event to context 9 | // const appContext = useAppContext(); 10 | // appContext.setScrollState(scroll); 11 | 12 | //Create custom window event 13 | scroll.on("scroll", (e) => { 14 | const event = new CustomEvent('LocoScroll', { detail: e }); 15 | window.dispatchEvent(event); 16 | }); 17 | } 18 | -------------------------------------------------------------------------------- /helpers/seo.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | defaultTitle: 'Boilerplate | Next x Tailwind x Motion x Locomotive Scroll', 3 | description: 'A simple Next.js starter kit with Tailwind, Framer Motion and Locomotive.', 4 | titleTemplate: '%s | Next x Tailwind x Motion x Locomotive', 5 | openGraph: { 6 | type: 'website', 7 | locale: 'en_GB', 8 | url: 'https://sg-next-tailwind-motion.vercel.app/', 9 | site_name: 'Next x Tailwind x Motion x Locomotive', 10 | }, 11 | twitter: { 12 | handle: '@samuelgoddard', 13 | site: '@site', 14 | cardType: 'summary_large_image', 15 | }, 16 | }; -------------------------------------------------------------------------------- /helpers/transitions.js: -------------------------------------------------------------------------------- 1 | export const fade = { 2 | initial: { opacity: 0 }, 3 | enter: { 4 | opacity: 1, 5 | transition: { duration: 0.4, ease: [0.83, 0, 0.17, 1] } 6 | }, 7 | exit: { 8 | opacity: 0, 9 | transition: { duration: 0.4, ease: [0.83, 0, 0.17, 1] } 10 | } 11 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/components/*": ["components/*"], 6 | "@/helpers/*": ["helpers/*"], 7 | "@/styles/*": ["styles/*"], 8 | "@/public/*": ["public/*"], 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | webpack: (config, { dev, isServer }) => { 3 | // Replace React with Preact only in client production build 4 | if (!dev && !isServer) { 5 | Object.assign(config.resolve.alias, { 6 | react: 'preact/compat', 7 | 'react-dom/test-utils': 'preact/test-utils', 8 | 'react-dom': 'preact/compat', 9 | }); 10 | } 11 | 12 | return config; 13 | }, 14 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-interactive-boilerplate", 3 | "description": "A simple Next.js starter kit with TailwindCSS (JIT) and Framer Motion preconfigured", 4 | "author": "Sam Goddard (https://samgoddard.co.uk), Hendhy Hutomo ", 5 | "version": "1.0.0", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:tomostudio/next-interactive-boilerplate.git" 9 | }, 10 | "license": "ISC", 11 | "keywords": [ 12 | "nextjs", 13 | "next", 14 | "tailwind", 15 | "framer", 16 | "motion", 17 | "preact" 18 | ], 19 | "homepage": "INSERT WEBSITE", 20 | "scripts": { 21 | "dev": "next dev", 22 | "build": "next build", 23 | "start": "next start" 24 | }, 25 | "dependencies": { 26 | "framer-motion": "^4.1.17", 27 | "gsap": "^3.7.0", 28 | "locomotive-scroll": "^4.1.1", 29 | "next": "^11.0.1", 30 | "next-seo": "^4.26.0", 31 | "postcss-import": "^14.0.0", 32 | "postcss-nested": "^5.0.5", 33 | "postcss-preset-env": "^6.7.0", 34 | "preact": "^10.5.13", 35 | "react": "^17.0.2", 36 | "react-dom": "^17.0.2", 37 | "react-locomotive-scroll": "^0.1.8" 38 | }, 39 | "devDependencies": { 40 | "autoprefixer": "^10.2.6", 41 | "postcss": "^8.3.5", 42 | "tailwindcss": "^2.2.4" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '@/styles/main.css' 2 | import { AnimatePresence } from 'framer-motion' 3 | import { useRouter } from 'next/router' 4 | import { DefaultSeo } from 'next-seo' 5 | import SEO from '@/helpers/seo.config' 6 | import { AppWrapper } from '../context/state.js'; 7 | 8 | export default function App({ Component, pageProps }) { 9 | const router = useRouter() 10 | 11 | return ( 12 | <> 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | } -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default class MyDocument extends Document { 4 | render() { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | ) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /pages/about.js: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | import Layout from '@/components/layout' 3 | import Header from '@/components/header' 4 | import Footer from '@/components/footer' 5 | import Container from '@/components/container' 6 | import FancyLink from '@/components/fancyLink' 7 | import { fade } from '@/helpers/transitions' 8 | import { LocomotiveScrollProvider } from 'react-locomotive-scroll' 9 | import { LazyMotion, domAnimation, m } from 'framer-motion' 10 | import { NextSeo } from 'next-seo' 11 | 12 | export default function About() { 13 | const containerRef = useRef(null) 14 | return ( 15 | 16 | 17 | 18 | 23 |
24 |
25 |
26 | 27 | 28 | 33 | 34 | 35 |
36 |

Next x Tailwind x Motion x Locomotive

37 |
38 |

Some example content

39 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

40 | 41 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

42 | 43 |

Some example content

44 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

45 | 46 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

47 | 48 |

Some example content

49 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

50 | 51 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

52 | 53 |

Some example content

54 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

55 | 56 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

57 | 58 |

Some example content

59 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

60 | 61 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

62 | 63 |

Some example content

64 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

65 | 66 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

67 | 68 |

Some example content

69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

70 | 71 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

72 | 73 |

Some example content

74 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

75 | 76 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

77 |
78 | 79 | 80 |
81 | 82 | 83 | 84 | 85 |
86 | 87 | 88 | 89 |
90 |
91 | 92 | 93 | ) 94 | } 95 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | import Layout from '@/components/layout' 3 | import Header from '@/components/header' 4 | import Footer from '@/components/footer' 5 | import Container from '@/components/container' 6 | import FancyLink from '@/components/fancyLink' 7 | import { fade } from '@/helpers/transitions' 8 | import { LocomotiveScrollProvider } from 'react-locomotive-scroll' 9 | import { LazyMotion, domAnimation, m } from 'framer-motion' 10 | import { NextSeo } from 'next-seo' 11 | 12 | export default function Home() { 13 | const containerRef = useRef(null) 14 | 15 | return ( 16 | 17 | 18 | 19 | 24 |
25 |
26 |
27 | 28 | 29 | 34 | 35 | 36 |
37 |

Next x Tailwind x Motion x Locomotive

38 |
39 |

Some example content

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

41 | 42 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

43 | 44 |

Some example content

45 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

46 | 47 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

48 | 49 |

Some example content

50 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

51 | 52 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

53 | 54 |

Some example content

55 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

56 | 57 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

58 | 59 |

Some example content

60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

61 | 62 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

63 | 64 |

Some example content

65 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

66 | 67 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

68 | 69 |

Some example content

70 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

71 | 72 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

73 | 74 |

Some example content

75 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

76 | 77 |

Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

78 |
79 | 80 | 81 |
82 | 83 | 84 | 85 | 86 |
91 |
92 | 93 | 94 | ) 95 | } 96 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-import': {}, 4 | tailwindcss: {}, 5 | 'postcss-nested': { 6 | unwrap: ['screen'], 7 | }, 8 | autoprefixer: {}, 9 | }, 10 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tomostudio/next-boilerplate/df4d8f936193fe28adba38db48e30f1a3f1b6756/public/favicon.ico -------------------------------------------------------------------------------- /styles/_fonts.css: -------------------------------------------------------------------------------- 1 | /* @font-face { 2 | font-family: 'Example Sans'; 3 | src: url('../public/fonts/ExampleSans-Regular.woff2') format('woff2'), 4 | url('../public/fonts/ExampleSans-Regular.woff') format('woff'); 5 | font-weight: 400; 6 | font-style: normal; 7 | font-display: swap; 8 | } */ 9 | -------------------------------------------------------------------------------- /styles/_locomotive.css: -------------------------------------------------------------------------------- 1 | html.has-scroll-smooth { 2 | @apply overflow-hidden; 3 | } 4 | 5 | .has-scroll-smooth body { 6 | @apply overflow-hidden; 7 | } 8 | 9 | html.has-scroll-dragging { 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | -ms-user-select: none; 13 | user-select: none; 14 | } 15 | 16 | .has-scroll-smooth [data-scroll-container] { 17 | @apply min-h-screen; 18 | } 19 | 20 | [data-scroll-direction="horizontal"] [data-scroll-container] { 21 | @apply h-screen inline-block whitespace-nowrap; 22 | } 23 | 24 | [data-scroll-direction="horizontal"] [data-scroll-section] { 25 | @apply inline-block align-top whitespace-nowrap h-full; 26 | } -------------------------------------------------------------------------------- /styles/_typography.css: -------------------------------------------------------------------------------- 1 | /* Content Stylings */ 2 | .content { 3 | & > p { 4 | @apply mb-5 last-of-type:mb-0; 5 | } 6 | 7 | & > p > a { 8 | @apply underline hover:text-opacity-25 focus:text-opacity-25; 9 | } 10 | 11 | & > h1, & > .h1 { 12 | @apply text-3xl md:text-4xl; 13 | } 14 | 15 | & > h2, & > .h2 { 16 | @apply text-2xl md:text-3xl; 17 | } 18 | } 19 | 20 | /* Heading Defaults */ 21 | h1, .h1, h2, .h2, h3, .h3 { 22 | @apply p-0 mb-6 font-bold; 23 | } -------------------------------------------------------------------------------- /styles/main.css: -------------------------------------------------------------------------------- 1 | /* Webfonts */ 2 | @import '_fonts.css'; 3 | 4 | /* Tailwind base/components */ 5 | @import 'tailwindcss/base'; 6 | @import 'tailwindcss/components'; 7 | 8 | /* Custom Style Imports */ 9 | @import '_typography.css'; 10 | @import '_locomotive.css'; 11 | 12 | /* Tailwind Utilities */ 13 | @import 'tailwindcss/utilities'; 14 | 15 | 16 | /* Simple defaults */ 17 | body { 18 | @apply font-sans antialiased text-black bg-white; 19 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: 'jit', 3 | purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], 4 | darkMode: false, 5 | theme: { 6 | fontFamily: { 7 | 'sans': ['Arial', 'sans-serif'], 8 | 'mono': ['Lucida Console', 'Courier', 'monospace'], 9 | }, 10 | screens: { 11 | sm: "640px", 12 | md: "768px", 13 | lg: "1024px", 14 | xl: "1280px", 15 | "2xl": "1600px", 16 | "3xl": "1920px" 17 | }, 18 | extend: { 19 | colors: { 20 | 'black': '#000', 21 | 'white': '#FFF', 22 | 'example-color': { 23 | light: '#ffb288', 24 | DEFAULT: '#d18d67', 25 | dark: '#ce8860', 26 | }, 27 | } 28 | }, 29 | }, 30 | variants: { 31 | extend: {}, 32 | }, 33 | plugins: [] 34 | } --------------------------------------------------------------------------------