O banco pra chamar de seu. / The bank to call your own.
PayBank is a modern digital banking platform designed to provide users with a seamless financial experience. This project showcases a responsive, interactive front-end implementation of a digital banking interface with a focus on beautiful UI/UX and smooth animations.
- Digital Account Management: Virtual account dashboard with transaction history
- Interactive Card Visualization: 3D card animations and interactive display
- Investment Calculator: Real-time CDI investment calculator
- Multi-language Support: Seamlessly switch between Portuguese and English
- Responsive Design: Fully responsive layout that works on all devices
- Modern UI Components: Accordions, interactive icons, and animated elements
The project is built using the following technologies:
- HTML5 - Semantic structure and content
- CSS3 - Advanced styling with flexbox, grid, and animations
- JavaScript - DOM manipulation and interactive elements
- GSAP - Advanced animations and transitions
- ScrollTrigger - Scroll-based animations
- SVG-Inject - SVG handling and manipulation
- Google Fonts - "M PLUS 1" and "Red Hat Display" fonts
- Custom SVG Icons - Extensive use of SVG assets for crisp, scalable graphics
- CSS Animations - Keyframe animations and transitions
pay-bank/
├── css/
│ └── style.css
├── fonts/
│ └── [font assets]
├── js/
│ ├── gsap.min.js
│ ├── ScrollTrigger.min.js
│ ├── script.js
│ ├── svg-inject.min.js
│ └── translations.js
├── svg/
│ └── [svg assets]
└── index.html
The platform includes a real-time CDI (Certificado de Depósito Interbancário) calculator that allows users to:
- Adjust investment amount with increment/decrement controls
- Modify investment time period
- See real-time calculation of returns
Users can toggle between Portuguese and English languages throughout the interface.
The digital cards feature:
- 3D animations
- Front and back visualization
- Security features showcase
- Smooth scrolling
- Header transformation on scroll
- Interactive accordion elements
- Clone the repository:
git clone https://github.com/patriqueporto/pay-bank.git-
Open the project in your code editor
-
Launch the index.html file in a modern web browser
The application is optimized for modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The project uses vanilla JavaScript with GSAP for animations. Key development features include:
- Modular JavaScript organization
- CSS variables for consistent theming
- Responsive design with carefully crafted breakpoints
- SVG integration for crisp graphics
- Performance optimizations for smooth animations
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
This project is MIT licensed.
Developed with ❤️ by Patrique P Porto