Simple Animated Landing Page

A simple animated landing page builded using Next and Motion (a.k.a Framer Motion)

Realtime • Proposal • Setup • Tools • Author

Proposal

• The application must include an animated mockup with animated icons, scroll-reactive animations, and shooting stars.
• It must have unit tests using Jest and Testing Library.
• Performance should remain smooth, even with running animations, with no FPS drops.
• It must use either Styled Components or Tailwind.
• SEO should be optimized with SSG, and the app should be hosted on Vercel.
• I followed the Atomic Design methodology to structure the project.
• Mobile-first methodology for responsivity.

Setup

• Simply follow the process of a common Next.js project.
• Node version 18 or above.
• Run (npm install, yarn install) to install the packages.
• Use (npm run dev, yarn dev) to start in development mode.
• If you want, you can run (npm run build with npm run start) to start in production mode.

Tools

This application uses the following open-source packages:

Core ones.

• Next (Framework)
• TypeScript (Strongly typed programming language that builds on JavaScript)
• Motion or Framer Motion (Animation library)

Stylization.

• Styled Components (CSS in JS / TS styling)

Testing

• Jest (Javascript testing framework)
• React Testing Library (The name speaks for itself)

Code formatter, and other environment development tools.

• ESLint (Javascript linter)
• Prettier (Opinionated code formatter)
• Figma Scheme (Application prototype)
• Husky (Commit automation, runs unit tests before commiting)

Author

made by niloodev | Ezequiel Nilo

ANY TIPS OR FEEDBACK IS HIGHLY APPRECIATED! 🐸