A modern, responsive, and interactive dashboard for ZarinPal, built entirely with Next.js, React, and TypeScript. Designed for managing products, support, FAQs, and user interactions with clean visuals and smooth animations. Supports dark mode out of the box π and full PWA capabilities for offline access and installability π².
π¬ Live Demo
- Next.js 15 (App Router)
- React 19 & TypeScript
- Tailwind CSS 4 with dark mode support
- Shadcn/UI components (built with Radix UI primitives)
- Framer Motion for smooth animations
- Recharts for charts π
- tw-animate-css for extra animations
- next-themes for dark/light theme switching
- Progressive Web App (PWA) with custom Service Worker & Web App Manifest β‘
- Fully responsive and mobile-friendly layout π±
- Dark mode support with smooth transitions π
- Installable PWA with offline support and home screen access π²
- Interactive product grid with hover effects, badges, and icons
- Accordion-based FAQ section with dynamic loading and loading state
- Contact form with validation, icons, and category selection βοΈ
- Integration section with terminal-style UI for SDK instructions π»
- Support categories displayed with cards and icons
- Styled office info cards with emergency contact highlights
- Smooth hover transitions and interactive elements
- Modular and reusable components for easy scalability
- Works offline with cached assets
- "Add to Home Screen" support on mobile devices
- Custom service worker for better performance
- Web App Manifest with app name, theme color, and icons
ZarinPal emphasizes clarity, usability, and a professional look. Every component is designed to be visually engaging while keeping the UI functional and accessible β .
