NextJS & React: Landing Page / Blog

NextJS Landing Page is a fork of the NextJS Material Kit with a few new features:

• Added an entirely new blog functionality, which takes markdown files located in /pages/blog/* and converts them to HTML using Next.JS's dynamic routing. The blog posts are displayed using a custom BlogList.js component within components/BlogList/BlogList.js. BlogList makes it easy to style your blog posts into various components:
  • 
• Included the ability to use feature: 1 frontmatter to determine which posts populate the header of the main blog page (in pages/blog/[slug])
• Wrote custom renderers in [slug].js to format the markdown that's passed through (react-markdown)[https://github.com/remarkjs/react-markdown]
  • 
• Added new CalendlyButton button that allows visitors to schedule time with you through Calendly without leaving your site
  • 
• Added a new sitemap generator using nextjs-sitemap-generator to improve SEO
• Added a new SEO.js component to add <meta> tags to every page to improve SEO scores

Other minor changes relative to NextJS Material Kit include:

• Made styling updates throughout, with a focus on user accessibility
• Moved static files to public per the latest Next.JS updates, including a new robot.txt template
• Refactored most scripts within jss to sit within their respective components for convenience when editing CSS-in-JS
• Standardized some important CSS classes within nextjs-material-kit.js
• Add new accessibility features, such as adding alt options for parallax images
• Loaded Font Awesome icons from Cloudflare's cache for improved load speed

This website was developed using NextJS, Material-UI, and Material Kit React by Creative Tim. We had a lot of fun building with these templates, and we hope you will too. Special thanks to Creative Tim, the Vercel team, and the amazing React community that created our new dependencies:

• react-markdown
• react-calendly
• react-scroll
• nextjs-sitemap-generator
• SEO component created by JoseRFelix

About NextJS Material Kit (from the author)

NextJS Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.

This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project. NextJS Material Kit is a great tool if you are looking to create a web presence for your web application and need to be consistent, leaving the impression of visually similar elements. It is also a great resource in its own right, looking gorgeous and helping you build your web pages.

NextJS Material Kit was built with the help of nextjs and it uses a framework built by our friends from Material-UI, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to this team for the effort and forward thinking they put into it.

Quick start

• Clone the repo: git clone https://github.com/quantilegroup/nextjs-landing-page.git.
• Switch directories: cd nextjs-landing-page.git
• Install dependencies: npm install
• To develop: run npm run dev and navigate to http://localhost:3000/
• To create static html files for your server: npm run export