Documentation

Welcome to Agencico React!

Agencico is a React js Template for Agency , SaaS & Startup

And powered with Next js in order to handle seo and server side rendering

Agencico Template has a fully responsive and cross browser capable design. Also it have a clean code and well optimized components.
As a Result of using Next js you can easily build a backend API use a database and make the site dynamic

NEW: This template now includes a comprehensive Dashboard System with modern UI components, analytics, user management, and premium features showcase.

Read out documentation before getting started

Dependencies

Next.js : Theme is completly convert in Next.js so it will easy to use server side rendering as well SEO
react-slick : Has been used for slider and carousel components
styled-components : Dependence for react-slick and CSS-in-JS styling
react-multi-date-picker : For picking mutiple date
use-count-up : For count up animation
react-is-visible : To check if dom is visible in viewport
uuid : For generating unique id

Dashboard System Features

React Hooks : Modern state management with useState and useEffect
CSS-in-JS : Styled-jsx for component-scoped styling and dynamic themes
Responsive Design : Mobile-first approach with CSS Grid and Flexbox
Animation System : CSS keyframes for smooth transitions and loading states
Premium UI Components : Advanced dashboard cards, progress bars, and interactive elements
Theme Integration : HRRD theme colors with glassmorphism effects

Authentication & User Management

Form Validation : Real-time validation with error handling and shake animations
Password Security : Toggle visibility and strength indicators
Social Login : Google and LinkedIn integration with SVG icons
Registration Flow : Multi-step form with terms agreement
Loading States : Spinner animations and button states

Folder Structure

components : This folder containes all the components of this theme
components/dashboard : Dashboard-specific components including layout, sidebar, and feature demonstrations
constant : Constant Folder has many Object defined by Editing those variable you can change site Information like Logo , Copyright Text, Images Services info , About Info Ect For Detail check Customizer Section
pages : This folder containes all the pages including dashboard, register, signin, and pricing pages
pages/dashboard.js : Main dashboard page with analytics, project overview, and user management
styles : This folder containes all the css codes including dashboard-specific styles
public : This folder containes all the static images fonts and a external css and js file
Doc/style.md : Complete style guide with theme variations, typography, and design guidelines

Dashboard System

Overview: The dashboard system provides a comprehensive admin interface with modern UI components, analytics, and premium feature demonstrations following the established HRRD theme guidelines.

Dashboard Features

/components/dashboard/DashboardLayout.js

Main Layout Component

Responsive Sidebar: Collapsible navigation with animated background and floating shapes
Navigation Items: Overview, Analytics, Projects, Users, Membership, Live Chat, Notifications, Settings, Help
Theme Integration: Uses HRRD theme colors (#FF7342, #183B56) with gradient backgrounds
Animations: CSS animations for grid movement and floating elements

/pages/dashboard.js

Dashboard Overview Page

Analytics Cards: Total Users (12,459), Revenue ($48,563), Projects (1,247), Conversion Rate (3.2%)
Recent Activity: Real-time notifications system with different types (success, warning, info)
Project Management: Progress tracking with status indicators and due dates
Interactive Components: Hover effects, progress bars, and responsive grid layouts

Advanced Dashboard Features

Dashboard Showcase Components

Premium Feature Demonstrations

Live Chat System: Interactive chat interface with contact sidebar and message threads
Membership Management: Tiered pricing display with usage bars and progress indicators
Analytics Dashboard: Data visualization with chart placeholders and metrics
User Management: User profiles, activity tracking, and permission management
Notification Center: Real-time alerts and system notifications

Technical Implementation

Code Quality & Performance

React Hooks: useState and useEffect for state management
CSS-in-JS: Styled-jsx for component-scoped styling
Responsive Design: Mobile-first approach with breakpoint optimization
Accessibility: ARIA labels and semantic HTML structure
Performance: Optimized animations and efficient re-rendering
Next.js Integration: SSR support and SEO optimization

Dashboard Styling System

CSS Framework Integration

Style Architecture

Theme Colors: HRRD theme integration (#FF7342, #183B56, #5A7184)
Typography: Poppins for headings, DM Sans for body text
Component Library: Reusable card components with hover effects
Grid System: CSS Grid and Flexbox for responsive layouts
Animations: CSS keyframes for smooth transitions
Glassmorphism: Backdrop blur effects and transparent overlays

Integration with Main Template

Seamless Template Integration

Navigation & User Flow

Header Links: Register/Sign In buttons in all header components link to authentication pages
Pricing Integration: Pricing page routes properly to registration or contact
Authentication Flow: Register → Dashboard access workflow
Responsive Behavior: Dashboard adapts to all screen sizes
Theme Consistency: Maintains visual coherence with main template

Dashboard Customization

Customization Options

Configurable Elements

Analytics Data: Modify analyticsData array in dashboard.js for different metrics
Sidebar Items: Update sidebarItems array in DashboardLayout.js for navigation
Color Scheme: Change theme colors in CSS variables and component styles
Notifications: Customize notifications array for different alert types
Project Data: Update recentProjects array for project management display
Layout Structure: Modify grid layouts and component arrangement