Skip to content

Company landing page based on Gatsby.js with animated sections using Framer Motion.

Notifications You must be signed in to change notification settings

ann-dev/fem-insure-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Insure landing page

Design preview for the Insure landing page coding challenge

last commit badge Netlify Status


Description

Responsive page design challenge: landing page with changing design between mobile and desktop devices. My solution for one of challenges for frontendmentor.io

Main features:

  • Based on GatsbyJs and styled components
  • Image optimisation using GraphQL (webp format and SVG filtering)
  • Dynamically rendered links in footer and navigation components
  • Responsive layouts based on Flexbox and CSS Grid
  • Dropdown menu on mobile view
  • CI/CD integration with Netlify
  • Custom 404 page

Usage

Installation

Please navigate first to the "site" folder! Then run:

npm install

Development

To run the app on a local server use:

npm run develop
gatsby develop // with gatsby-cli installed

In case of any performance issues, run this command:

gatsby clean

Production

To compile for production build:

npm run build
gatsby build // with gatsby-cli installed

Testing production build locally:

npx serve public

Credits