HooBank - Bank Modern App

This is a landing page for a bank built with React, TailwindCSS and Framer Motion.

Table of contents

• Overview
  • Requirements
  • Screenshot
  • Links
  • Getting Started with Create React App
• My process
  • Built with
  • Useful resources
• Author
• Credits

Overview

Requirements

• Create a landing page with React using a Figma mockup
• Import data from a JS file
• Style app with Framer Motion animations
• Styled & polished

Screenshot

Links

• Live Site URL: @Netlify
• Solution URL: @GitHub

Getting Started with Create React App

This project was bootstrapped with Create React App.

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• React.JS
• Flexbox
• TailwindCSS
• Framer Motion
• EmailJS

Useful resources

• ReactJS - How to set up a local development environment on your computer
• Framer Motion - Create layout and shared layout animations with React and Framer Motion
• StackOverflow - Make selected block of text uppercase
• StackOverflow - staggerChildren with framer motion
• StackOverflow - Force text to stay on one line
• CodePen - Pure CSS PNG glow hover animation
• Graffino - How to fix filter blur performance issue in Safari
• React CountUp - Create animations that display numerical data in a more interesting way
• EmailJS - Send Email Directly From JavaScript using React
• ReactJS - useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue)
• StackOverflow - How to access env variables using react?
• StackOverflow - Odd error on EmailJS when trying to test form 550 Request failed
• Jim Raptis - 15 Tips For Better Forms

Author

• Website - Emanuele Del Monte

Credits

• Mockup - Figma