🚀 CRED Garage Inspired Dashboard

A modern, responsive dashboard application inspired by CRED Garage, built with Next.js, TypeScript, and Redux. Features a beautiful dark/light theme toggle, smooth animations, and a premium user experience.

✨ Features Overview

🎨 Modern UI/UX

• Responsive Design - Works perfectly on desktop, tablet, and mobile
• Dark/Light Theme Toggle - Smooth theme switching with persistence
• Premium Animations - Framer Motion powered entrance animations
• Loading Skeletons - Beautiful shimmer effects during data loading
• Gradient Backgrounds - Eye-catching visual design

👤 User Profile Section

• Avatar Display - User profile picture with fallback initials
• Level System - XP progress tracking with visual progress bar
• Interactive Elements - Hover effects and tooltips
• Real-time Updates - Dynamic level progression

🎁 Reward Points System

• Points Tracking - Current points with milestone progress
• Visual Progress Bar - Animated progress indicator with percentage
• Milestone Indicators - Clear targets and achievements
• Interactive Tooltips - Detailed information on hover

🏆 Benefits Section

• 6 Premium Benefits - Exclusive discounts, priority support, VIP access
• Interactive Cards - Hover animations and click interactions
• Category Organization - Shopping, support, access, rewards
• Status Indicators - Active/inactive benefit states

🔧 Technical Features

• Redux State Management - Centralized data management
• TypeScript - Full type safety and better developer experience
• shadcn/ui Components - Modern, accessible UI components
• Framer Motion - Smooth animations and transitions
• Next.js 14 - Latest React framework with App Router

🛠️ Tech Stack

Frontend Framework

• Next.js 14 - React framework with App Router
• React 18 - Latest React with concurrent features
• TypeScript - Type-safe JavaScript

State Management

• Redux Toolkit - Modern Redux with less boilerplate
• React Redux - React bindings for Redux

Styling & UI

• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - High-quality React components
• Radix UI - Accessible component primitives
• Framer Motion - Animation library

Theme & Icons

• next-themes - Theme switching with persistence
• Lucide React - Beautiful SVG icons

Development Tools

• ESLint - Code linting
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixes

🚀 Setup Instructions

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

1. Clone the Repository

git clone <repository-url>
cd cred-garage-inspired-dashboard

2. Install Dependencies

npm install
# or
yarn install

3. Run Development Server

npm run dev
# or
yarn dev

4. Open in Browser

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

5. Build for Production

npm run build
npm start
# or
yarn build
yarn start

📁 Project Structure

cred-garage-inspired-dashboard/
├── app/                            # Next.js App Router
│   ├── globals.css                 # Global styles
│   ├── layout.tsx                  # Root layout with providers
│   └── page.tsx                    # Main Dashboard page
├── components/                     # React components
│   ├── ui/                         # shadcn/ui components
│   ├── BenefitsSection.tsx         # Benefits Section
│   ├── Header.tsx                  # Dashboard Header
│   ├── LoadingSkeletons.tsx        # For loading skeletons
│   ├── RewardPointsProgress.tsx    # Reward Points Progress
│   ├── ThemeToggle.tsx             # Theme Toggle switch for light/dark theme
│   └── UserProfileSummary.tsx      # User Profile Summary
├── hooks/
│   └── hooks.ts
├── lib/
│   └── utils.ts
├── providers/
│   ├── ReduxProvider.tsx
│   └── ThemeProvider.tsx
├── store/                          # Redux store
│   ├── store.ts                    # Store configuration
│   └── dashboardSlice.ts           # Main dashboard slice
├── types/                          # TypeScript types
│   └── dashboard.ts                # Dashboard type definitions
└── .gitignore                      # Exclude files like node_modules or .env from version control
└── components.json                 # ShadCN UI component settings
└── eslint.config.mjs               # ESLint configuration
└── next.config.ts                  # Next.js app configuration
└── package.json                    # Defines dependencies and scripts for building/running the app
└── postcss.config.mjs              # PostCSS plugins, used by Tailwind
└── tailwind.config.ts              # Tailwind custom configuration
└── README.md

🎯 Key Features Walkthrough

Theme Toggle

• Switch between light and dark modes
• Persistent theme selection using localStorage
• Smooth transitions without content flash

Loading States

• Beautiful skeleton loading animations
• Shimmer effects for better UX
• Coordinated loading across all sections

Interactive Elements

• Hover effects on cards and buttons
• Tooltip information on important elements
• Smooth animations using Framer Motion

Redux Integration

• Centralized state management
• Single dashboard slice for simplicity
• TypeScript integration for type safety

🔧 Customization

Adding New Benefits

Edit the benefits array in store/dashboardSlice.ts:

const benefitsData: Benefit[] = [
  {
    id: 7,
    icon: YourIcon,
    title: "New Benefit",
    description: "Description here",
    buttonText: "Action",
    color: "text-blue-500",
    category: "new",
    isActive: true,
  },
  // ... existing benefits
]

Modifying Theme Colors

Update CSS variables in app/globals.css:

:root {
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  /* ... other variables */
}

Changing Animation Timing

Modify Framer Motion props in components:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8, delay: 0.2 }} // Customize here
>

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙏 Acknowledgments

• CRED - Design inspiration
• shadcn/ui - Beautiful component library
• Vercel - Hosting and deployment platform
• Tailwind CSS - Utility-first CSS framework