i-sviridov/ngmcompany

a highly animated & attractive landing page

NGM Company project

• A React/Next.js landing SPA that I designed and built from the ground up for a real local business.

• Website: https://www.ngmcompany.ru/

• Stack: React, Next.js, Material UI, HTML, CSS, Framer Motion, Node.js, Nodemailer, Typewriter, React-tsparticles

Description

The SPA is highly animated and includes different visual effects and features, such as a typewriter effect and an image carousel. It uses Material UI components to keep the design consistent throughout the whole application. Moreover, I used different libraries, like Typewriter, React-tsparticles for additional visual effects. The application embraces the getStaticProps() function from Next.js to generate static pages from data in a json file.

Components have a nice animation effect when they appear on screen. Besides, they have a nice hover effect, as shown below.

Each individual item is presented on its own page using dynamic routes. I also used the getStaticPaths() function from Next.js to pre-populate the page with information according to the url params entered.

Finally, the application also provides the opportunity to send an email to the company's address right from the page. For this, I made a form API route backend with a Nodemailer, which is responsible for sending mails. I used a small math test for a simple anti-spam check.

The application supports the following API route:

/api/form
{  method: 'POST',  headers: { 'Content-Type': 'application/json' },  body: JSON.stringify({data}) }

How to install

1. Download the zip file or clone the repo
2. Install and run

npm install
npm run dev