Carousel Test

Project Overview

This project is built using Next.js, Tailwind CSS, and Swiper.js . It implements a responsive UI with interactive components, including a carousel feature for displaying multiple cards.

Technologies Used

• Next.js: A React framework for server-side rendering and static site generation.
• Tailwind CSS: A utility-first CSS framework for efficient styling.
• Swiper.js: A library for implementing a smooth and customizable carousel slider.

Features

Core Features

• Responsive UI: Supports desktop ( >1024px), tablet (≤1024px), and mobile (≤768px) layouts.
• Component-Based Architecture: Ensures modular and maintainable code.
• CSS Best Practices: Uses Tailwind CSS.
• Card Carousel:
  • Supports click and transition effects.
  • Implemented with Swiper.js for smooth scrolling.
  • Ensures adaptability for different text lengths in multiple languages.
• Interactive Animations:
• Smooth animations and effects for improved user experience.
• Auto-rotating card carousel.

Project Setup

1. Clone the repository:

   git clone https://github.com/Angel98518/revolut-demo.git
   cd revolut-demo

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

4. Open the project in the browser:

   http://localhost:3000
   

Code Quality & Best Practices

• ESLint: Enforces consistent code formatting and linting.
• Component Structure: Components are modular and reusable.
• Flexbox/Grid Layouts: Ensures proper content alignment and spacing.
• Semantic Class Naming: Uses meaningful class names for readability.
• CSS Best Practices: Uses Tailwind CSS.
• Interactive Animations: Smooth animations and effects for improved user experience.
• Auto-Sliding card carousel.