AdMyBrand Insights

A modern, responsive analytics dashboard built with Next.js 14, featuring beautiful glassmorphism design, smooth animations, and comprehensive business intelligence visualizations.

✨ Features

🎨 Modern Design

• Glassmorphism UI: Beautiful glass-morphic design with backdrop blur effects
• Dark/Light Theme: Toggle between themes with smooth transitions
• Responsive Layout: Fully responsive design optimized for all devices
• Dynamic Island Navigation: iOS-inspired floating navigation bar

📊 Analytics & Visualizations

• Interactive Charts: Line, bar, and pie charts powered by Recharts
• Real-time Metrics: Revenue tracking, sales performance, and customer analytics
• Data Tables: Expandable and sortable data tables with advanced filtering
• Business Intelligence: Key performance indicators and conversion metrics

🎭 Animations & Interactions

• Smooth Scroll: Lenis-powered smooth scrolling experience
• Scroll Animations: Framer Motion scroll-triggered animations
• Hover Effects: Sophisticated hover states and micro-interactions
• Loading States: Skeleton loaders for better UX during data fetch

🧩 Components

• Reusable UI Components: Built with Radix UI primitives
• Custom Charts: Line, Bar, and Pie chart components
• Navigation: Smart hiding/showing navbar with hover detection
• Cards: Glassmorphic cards with statistical data

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI
• Charts: Recharts
• Animations: Framer Motion
• Smooth Scroll: Lenis
• Icons: Lucide React
• Theme: next-themes

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Git

Installation

1. Clone the repository

   git clone <repository-url>
   cd admybrand-insights

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser

   Navigate to http://localhost:3000 to see the dashboard.

📁 Project Structure

admybrand-insights/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # Root layout with theme provider
│   ├── page.tsx                 # Main dashboard page
│   ├── globals.css              # Global styles and CSS variables
│   └── Dashboard/               # Dashboard-specific pages
├── components/                   # Reusable components
│   ├── ui/                      # Base UI components (Radix UI)
│   ├── charts/                  # Chart components
│   │   ├── line-chart.tsx
│   │   ├── bar-chart.tsx
│   │   └── pie-chart.tsx
│   ├── glassmorphism-navbar.tsx # Navigation component
│   ├── scroll-reveal.tsx        # Scroll animation wrapper
│   ├── glassy-card.tsx         # Statistics cards
│   └── ...                     # Other components
├── hooks/                       # Custom React hooks
├── lib/                         # Utilities and configurations
└── public/                      # Static assets

🎯 Key Components

📊 Dashboard Sections

• Hero Section: Main title with gradient text and description
• Statistics Grid: Key metrics with animated counters
• Revenue Charts: Monthly revenue trends and performance metrics
• Activity Feed: Real-time business activity updates
• Data Tables: Expandable tables with order/customer data

🧭 Navigation

• Smart Hiding: Auto-hides on scroll down, shows on scroll up
• Hover Detection: Appears when mouse approaches top area
• Mobile Responsive: Collapsible mobile menu with smooth animations
• Active States: Visual indicators for current section

🎨 Design System

• Color Palette: Carefully crafted with CSS custom properties
• Typography: Inter font with responsive scaling
• Spacing: Consistent spacing system using Tailwind
• Shadows: Layered shadows for depth and hierarchy

📊 Data Visualization

The dashboard includes several chart types:

• Line Charts: Revenue trends over time
• Bar Charts: Sales performance comparison
• Pie Charts: Revenue distribution by category
• Custom Tooltips: Enhanced data display on hover

🎭 Animation System

• Scroll Animations: Elements animate into view as you scroll
• Framer Motion: Smooth, physics-based animations
• Staggered Animations: Sequential element reveals
• Hover Effects: Micro-interactions on interactive elements

🌙 Theme Support

• Dark Mode: Sophisticated dark theme with proper contrast
• Light Mode: Clean, accessible light theme
• System Preference: Respects user's system theme setting
• Smooth Transitions: Animated theme switching

📱 Responsive Design

• Mobile First: Optimized for mobile devices
• Tablet Support: Adapted layouts for tablet screens
• Desktop Enhanced: Rich interactions for desktop users
• Touch Friendly: Proper touch targets and gestures

🔧 Customization

Adding New Charts

import { LineChart } from '@/components/charts'

const data = [
  { month: 'Jan', value: 1000 },
  { month: 'Feb', value: 1200 },
]

<LineChart data={data} height={300} />

Creating Custom Cards

import { GlassyCard } from '@/components/glassy-card'

<GlassyCard
  title="Custom Metric"
  value="$12,345"
  change="+15% from last month"
  icon={TrendingUp}
  changeType="positive"
/>

🚀 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🌟 Features in Development

• Real-time data integration
• Advanced filtering and search
• Export functionality (PDF, CSV)
• User authentication
• More chart types (Scatter, Area, etc.)
• Dashboard customization
• Multi-language support

📄 License

This project is private and proprietary.

🤝 Contributing

This is a private project. For questions or suggestions, please contact the development team.

---

Built with ❤️ using Next.js and modern web technologies