Implement this figma design as follows.

• Only the content on the card is required, the background of the page can be plain gray and the blurred elements in the background can be omitted.
• Use React to implement the design.
• Use vanilla-extract for styling
• If the button is pressed, the board counter (x out of 10 boards in use) and its progress bar should be increased by one. (Start it from zero.) If the counter has reached 10 then make the button disabled.
• Use semantic html.
• The progress bar should moves smoothly.
• The button should have a hover (bgcolor: #B55147), an active (bgcolor: #883D35) and a disabled (opacity: 0.4) state with 200ms transition duration.
• Use TypeScript.
• Please send a Github link of your solution.
• Please don’t use an app generator (Create React App or similar)

• Install the app somewhere (and share its URL with us).
• Your solution looks exactly the same on both Chrome and Firefox.

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.\

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

• Clone project repository from GitHub

git clone https://github.com/omohemma/riddey-boards.git

• Navigate to project root directory

cd riddey-boards

• Install project dependencies

npm install

• Run Application

npm run start

Project Link: https://riddey-boards.netlify.app/