make website layout

[Kravalg]

As a customer, I want to be able to see the vilnaCRM website

this task is for the main website page

design

Technical requirements

• [x] react (https://reactjs.org/)
• [x] nextjs (https://nextjs.org/)
• [x] nextjs routes (https://nextjs.org/docs/routing/introduction)
• [x] typescript (https://www.typescriptlang.org/)
• [x] MUI (https://mui.com/)
• [x] Playwright
• [x] jest (https://jestjs.io/ru/)
• [x] react testing library (https://testing-library.com/docs/react-testing-library/intro)
• [x] Storybook (https://storybook.js.org/)
• [x] stryker-mutator (https://stryker-mutator.io/)
• [x] memory leak testing (https://www.npmjs.com/package/memlab)
  • [ ] need to fix .env file, duplicated localhost:3000 need to remove

Tasks

• [x] features: landing, login, signup, docs
• [x] make the user use higher Node.js version (20.0.0+)
• [x] update obsolete packages' dependencies to the latest ones
• [x] implement the sticky menu, add the supporting to responsive design for statcounter
  • [x] button "try it out" must scroll to the section with registration which must be at the bottom
  • [x] for mobile version menu must open like a drop-down list
• [x] use for all texts i18n (for example t('text_1')) react-i18next
• [x] implement header, add block header according to design
• [x] implement block "why we", add slider for mobile
• [x] implement block "for who", add button "try it out"
• [x] implement block "unlimited possibilities of integrations", add a slider for the mobile version
• [x] implement registration block
  • [x] add a registration form
  • [x] add validation for form (initial, password, email)
  • [x] validate if user already has account
  • [x] add registration button and add mock for registration
  • [ ] add the possibility to register using the Google, Github, Facebook, or Twitter social networks
• [x] implement footer
  • [x] icons after click must open our Instagram, facebook, GitHub, LinkedIn pages
  • [x] email must have mailto links
• [x] add e2e tests
  • [x] if set mobile width and click menu, must open the menu and be visible
  • [x] after click "try it out", website must scroll to the bottom where the registration block
  • [x] check registration inputs, they must validate data in the input
• [x] add Storybook tests
• [x] react testing library tests
• [x] add unit tests
• [x] add google analitycs
• [x] add structurizr
• [ ] add favicon

Acceptance criteria

• [ ] pixel perfect
• [x] the whole website according to the design
• [x] the whole website has responsive design
• [x] self-review
• [x] login and register buttons need to work as expected
• [x] the slider needs to exist in the mobile version
• [ ] sign in through the social buttons need to work
• [ ] registration form needs to work as expected
• [x] menu needs to work as expected for the mobile view
• [x] all CI checks need to be passed

[TuranC]

The Password must not contain any Whitespaces. The Password must contain at least one Uppercase character. The Password must contain at least one Lowercase character. The Password must contain at least one digit. The Password must have at least one Special Symbol. The Password must be 8-32 characters long.

[TuranC]

on design form registration have incorrect centered elements, form is not centered correctly, divider not centered correctly, buttons for social media not centered correctly