Design a sleek, responsive UI for OmniX CRM, a modern banking CRM platform using Next.js, Tailwind CSS, ShadCN UI, and Zod for form validation.
Include the following: • Landing Page: Professional landing page with a clean layout, dynamic hero section, trust badges, feature highlights (AI assistance, omnichannel experience, CRM intelligence), and strong CTAs (Login, Signup, Demo). • Authentication Pages: • Login and Signup pages using Zod for validation (email, password strength, matching fields) • Features: remember me, forgot password, password visibility toggle • Smooth animations and dark/light mode support • User Dashboard: • Personalized dashboard for banking customers • Cards showing products (accounts, loans), recent transactions, ticket/chat support • Chatbot widget, user profile with avatar, dynamic UI elements based on customer type (Student, Salaried, HNI) • Admin CRM Dashboard: • Full CRM interface for bank staff • Customer 360° panel, timeline view of interactions, advanced filtering, ticketing system, segment manager • Role-based access (admin, support, relationship manager) • Reusable Component Library Template: • Navbar, collapsible sidebar, tabs, modal, table with filters + pagination, toast alerts, form templates with Zod-based validation schemas • All components themed via ShadCN, styled with Tailwind, and responsive
Prioritize developer-friendly code, clean structure, accessible UI, and seamless UX transitions. Mobile-first design, dark/light mode toggle, and animation support (via Framer Motion or native CSS) are required. Enable fast iteration for future feature builds.
OmniX CRM: Modern Banking CRM Platform
I'll create a comprehensive UI for the OmniX CRM platform using Next.js, Tailwind CSS, shadcn/ui, and Zod for form validation. Let's build a sleek, responsive, and developer-friendly solution.
I've designed a comprehensive UI for the OmniX CRM banking platform with all the requested features. The solution includes:
Key Components
Landing Page
- Professional hero section with gradient text and animations
- Trust badges showcasing security certifications
- Feature highlights for AI assistance, omnichannel experience, and CRM intelligence
- Strong CTAs for login, signup, and demo requests
Authentication Pages
- Login and signup forms with Zod validation
- Password visibility toggle
- "Remember me" functionality
- Forgot password link
- Form validation for email format and password strength
User Dashboard
- Personalized welcome message
- Account cards showing financial products
- Recent transactions table
- Support tickets section
- Chatbot widget for instant assistance
- User profile with avatar
Admin CRM Dashboard
- Customer 360° panel with comprehensive view
- Timeline view of customer interactions
- Ticketing system with priority levels
- Segment manager for customer categorization
- Role-based UI elements
Reusable Component Library
Technical Features
- Responsive Design: Mobile-first approach using Tailwind CSS 32
- Dark/Light Mode: Theme toggle with system preference detection 4
- Animations: Smooth transitions using Framer Motion
- Form Validation: Comprehensive validation with Zod
- Accessibility: Proper ARIA attributes and semantic HTML
- Developer-Friendly: Clean code structure and modular components
The UI is built with Next.js App Router 25, styled with Tailwind CSS 32, and uses shadcn/ui components 41 for a consistent design system. The code is structured to enable fast iteration and future feature additions.
