Updated readme

.gitignore

@@ -1 +1,2 @@
 *.md
+.DS_Store

README.md

@@ -1,62 +1,211 @@
-# Concept Bootstrap 4 Admin Dashboard Template
-**Concept** is a responsive Bootstrap 4 admin template. It provides you with a collection of ready to use code snippets and utilities, custom pages, loads of charts, 4 different dashboard variations, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/concept/index.html
+# Concept - Modern Bootstrap 5 Admin Dashboard Template
 
-# Preview
+**Concept** is a cutting-edge, responsive Bootstrap 5 admin dashboard template that combines elegant design with powerful functionality. Built with the latest web technologies including Bootstrap 5.3.7, Vite, and modern JavaScript, this template provides everything you need to create stunning admin interfaces, analytics dashboards, and web applications.
+
+## 🚀 Built with Latest Technologies
 
 ### Screenshot
 
-![Concept admin dashboard template preview](https://colorlib.com/wp/wp-content/uploads/sites/2/concept-free-admin-dashboard-panel.jpg)
-
-### Demo Site: [[Here]](https://colorlib.com/polygon/concept/index.html)
-
-### TOC
-- [Built With](#built-with)
-- [Changelog](#changelog)
-- [Authors](#authors)
-- [License](#license)
-
-### Built With
-
-- Peity Charts
-- Sparklines
-- Scrollbar
-- TouchSpin
-- Data Table
-- JsTree
-- Skycons
-- Password Meter
-- PDF Viewer
-- Mapael
-- jvectormap
-- RangeSlider
-- Cropper
-- Data Map
-- CodeMirror
-- Chosen
-- C3 And D3
-- datetimepicker
-- x-editable
-- dropzonejs
-- form Validation
-- masked input
-- mockjax
-- lobibox
-- summernote
-- editable
-
-### Changelog
-#### V 1.0.0
-Initial Release
-### Authors
-[Colorlib](https://colorlib.com)
-
-### More info
-- [Bootstrap dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)
-- [Free Admin Templates](https://colorlib.com/wp/free-admin-templates/)
-- [Free HTML templates](https://colorlib.com/wp/free-html-website-templates/)
-- [Bootstrap Templates](https://colorlib.com/wp/templates/)
-- [Free WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)
-
-### License
-
-Concept is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.
+![Concept Bootstrap 5 Admin Dashboard](concept-bootstrap-5-admin-dashboard.png)
+
+### Demo Site: [[Live Preview]](https://colorlib.com/polygon/concept/index.html)
+
+## ✨ Key Features
+
+- **Bootstrap 5.3.7**: Latest stable version with all new components and utilities
+- **Vite Build System**: Lightning-fast HMR (Hot Module Replacement) for instant development feedback
+- **Pure JavaScript**: No jQuery dependency - modern vanilla JS for optimal performance
+- **SCSS Architecture**: Organized, maintainable styles with variables and mixins
+- **Handlebars Templating**: Reusable components and layouts for rapid development
+- **Mobile-First Design**: Fully responsive across all devices and screen sizes
+- **Modern UI Components**: Contemporary design with smooth animations and transitions
+- **Dark Mode Ready**: Structured for easy dark theme implementation
+
+## 📦 What's Included
+
+### Multiple Dashboard Variants
+- **E-commerce Dashboard** - Track sales, orders, and customer metrics
+- **Finance Dashboard** - Monitor financial KPIs and transactions
+- **Sales Dashboard** - Analyze sales performance and trends
+- **Influencer Dashboard** - Social media analytics and engagement metrics
+
+### Rich UI Components
+- Modern Cards with hover effects
+- Bootstrap 5 Buttons with custom styles
+- Interactive Progress Bars & Spinners
+- Tooltips, Popovers & Modals
+- Advanced Forms with validation
+- Responsive Tables with sorting
+- Custom Badges & Alerts
+
+### Built-in Applications
+- **Real-time Chat Interface** - WhatsApp-style messaging UI
+- **Calendar Application** - Event management system
+- **Email/Inbox** - Complete mail interface
+- **User Management** - User lists and profiles
+- **Activity Timeline** - Track system events
+- **Settings Panel** - Configuration interface
+
+### Data Visualization
+- Chart.js for modern charts
+- C3 & D3 for advanced visualizations
+- Morris Charts for simple graphs
+- Sparkline for inline charts
+- Real-time data updates
+
+## 🛠️ Technology Stack
+
+### Core
+- **Bootstrap 5.3.7** - Latest CSS framework
+- **Vite 7.0** - Next-gen frontend tooling
+- **Handlebars** - Powerful templating
+- **SCSS** - Advanced stylesheets
+- **ES6+ JavaScript** - Modern JS features
+
+### Included Libraries
+- FontAwesome 7 Icons
+- Chart.js 4.5
+- DataTables 2.3
+- FullCalendar 6
+- Tom Select
+- SortableJS
+- And 20+ more...
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Node.js 16+ and npm
+
+### Installation
+
+1. Clone the repository
+```bash
+git clone https://github.com/yourusername/concept-dashboard.git
+cd concept-dashboard
+```
+
+2. Navigate to the project
+```bash
+cd concept-modern
+```
+
+3. Install dependencies
+```bash
+npm install
+```
+
+4. Start development server
+```bash
+npm run dev
+```
+
+5. Build for production
+```bash
+npm run build
+```
+
+## 📁 Project Structure
+
+```
+concept-modern/
+├── src/
+│   ├── assets/          # Images and static files
+│   ├── js/              # JavaScript modules
+│   │   ├── app.js       # Main application file
+│   │   ├── components/  # Reusable JS components
+│   │   └── pages/       # Page-specific scripts
+│   ├── scss/            # SCSS stylesheets
+│   │   ├── main.scss    # Main stylesheet
+│   │   ├── components/  # Component styles
+│   │   └── pages/       # Page-specific styles
+│   ├── pages/           # HTML pages
+│   ├── partials/        # Reusable Handlebars partials
+│   └── index.html       # Main entry point
+├── dist/                # Production build output
+├── vite.config.js       # Vite configuration
+└── package.json         # Project dependencies
+```
+
+## 🎨 Discover Premium Admin Templates
+
+### [Colorlib](https://colorlib.com) - Premium Quality Templates & Resources
+
+Colorlib is one of the largest and most trusted template resources, offering an extensive collection of free and premium templates. They have amazing curated collections specifically for admin dashboards:
+
+- 📊 **[Free Bootstrap Admin Dashboard Templates](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)** - 40+ carefully selected free admin templates
+- 💼 **[Bootstrap 5 Admin Templates](https://colorlib.com/wp/bootstrap-5-admin-dashboard/)** - Modern templates built with latest Bootstrap
+- 🎯 **[React Admin Templates](https://colorlib.com/wp/react-admin-dashboard-templates/)** - For React-based applications
+- 📱 **[Responsive Admin Templates](https://colorlib.com/wp/responsive-admin-dashboard-templates/)** - Mobile-first admin panels
+- ⚡ **[Free HTML5 Admin Templates](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)** - Clean, modern designs
+
+**Why Choose Colorlib:**
+- ✅ Trusted by millions of developers worldwide
+- ✅ High-quality, production-ready templates
+- ✅ Regular updates and new releases
+- ✅ Excellent documentation and support
+- ✅ SEO-optimized and performance-focused
+
+Visit [Colorlib.com](https://colorlib.com) to explore their amazing collection!
+
+### [DashboardPack](https://dashboardpack.com) - Premium Dashboard Templates
+
+DashboardPack specializes in high-quality, production-ready admin dashboard templates with a focus on modern design and exceptional developer experience:
+
+- 🎨 **Stunning Designs** - Carefully crafted UI/UX for the best user experience
+- 🔧 **Developer Friendly** - Clean code structure with detailed documentation
+- 📊 **Rich Components** - Advanced charts, tables, and data visualization tools
+- 🌓 **Dark Mode Included** - Built-in light/dark theme switching
+- 📱 **Fully Responsive** - Pixel-perfect on all devices
+- 🚀 **Regular Updates** - Stay current with latest design trends
+- 💎 **Premium Quality** - Professional-grade templates for serious projects
+
+Explore premium dashboards at [DashboardPack.com](https://dashboardpack.com)!
+
+## 🎯 Perfect For
+
+- SaaS Applications
+- E-commerce Platforms
+- Analytics Dashboards
+- CRM Systems
+- Project Management Tools
+- Financial Applications
+- Social Media Dashboards
+- IoT Monitoring Systems
+- Healthcare Management
+- Educational Platforms
+
+## 💻 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Opera (latest)
+
+## 📚 Documentation & Support
+
+- Comprehensive documentation included
+- Code examples and snippets
+- Component library reference
+- Integration guides
+- Regular updates and bug fixes
+
+## 👥 Authors
+
+- [Colorlib](https://colorlib.com) - Original design and development
+- Open Source Community - Continuous improvements and updates
+
+## 📄 License
+
+Concept is licensed under The MIT License (MIT). You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.
+
+---
+
+<p align="center">
+  Made with ❤️ by <a href="https://colorlib.com">Colorlib</a>
+  <br>
+  <strong>Discover more amazing templates:</strong>
+  <br>
+  <a href="https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/">Free Admin Templates</a> • 
+  <a href="https://dashboardpack.com">Premium Dashboards</a>
+</p>

concept-modern/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "concept-modern",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "concept-modern",
-      "version": "2.0.0",
+      "version": "2.0.1",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^7.0.0",
         "@fullcalendar/bootstrap5": "^6.1.18",

concept-modern/src/js/pages/checkout.js

@@ -0,0 +1,231 @@
+// Checkout Page functionality
+export function initializeCheckout() {
+    // Form validation
+    initializeFormValidation();
+    
+    // Payment method handling
+    handlePaymentMethodChange();
+    
+    // Promo code
+    handlePromoCode();
+    
+    // Card number formatting
+    initializeCardFormatting();
+    
+    // Checkout steps
+    initializeCheckoutSteps();
+}
+
+// Initialize form validation
+function initializeFormValidation() {
+    const forms = document.querySelectorAll('form');
+    
+    forms.forEach(form => {
+        form.addEventListener('submit', function(event) {
+            event.preventDefault();
+            event.stopPropagation();
+            
+            if (form.checkValidity()) {
+                // Process form
+                console.log('Form is valid');
+            }
+            
+            form.classList.add('was-validated');
+        });
+    });
+}
+
+// Handle payment method changes
+function handlePaymentMethodChange() {
+    const paymentRadios = document.querySelectorAll('input[name="paymentMethod"]');
+    
+    paymentRadios.forEach(radio => {
+        radio.addEventListener('change', function() {
+            // Hide all payment forms
+            document.getElementById('creditCardForm').style.display = 'none';
+            document.getElementById('paypalForm').style.display = 'none';
+            document.getElementById('applePayForm').style.display = 'none';
+            
+            // Show selected payment form
+            switch(this.id) {
+                case 'creditCard':
+                    document.getElementById('creditCardForm').style.display = 'block';
+                    break;
+                case 'paypal':
+                    document.getElementById('paypalForm').style.display = 'block';
+                    break;
+                case 'applePay':
+                    document.getElementById('applePayForm').style.display = 'block';
+                    break;
+            }
+        });
+    });
+}
+
+// Handle promo code
+function handlePromoCode() {
+    const promoButton = document.querySelector('#promoCode + button');
+    if (promoButton) {
+        promoButton.addEventListener('click', function() {
+            const promoCode = document.getElementById('promoCode').value;
+            
+            if (promoCode) {
+                // Simulate promo code validation
+                if (promoCode.toUpperCase() === 'SAVE10') {
+                    applyDiscount(10);
+                    showNotification('Promo code applied! 10% discount', 'success');
+                } else {
+                    showNotification('Invalid promo code', 'error');
+                }
+            }
+        });
+    }
+}
+
+// Apply discount
+function applyDiscount(percentage) {
+    const subtotal = 1648.00;
+    const discount = subtotal * (percentage / 100);
+    const newTotal = subtotal - discount + 15.00 + 149.67; // Including shipping and tax
+    
+    // Update UI (in real app, would recalculate properly)
+    console.log(`Applied ${percentage}% discount: -$${discount.toFixed(2)}`);
+}
+
+// Initialize card number formatting
+function initializeCardFormatting() {
+    const cardNumberInput = document.getElementById('cardNumber');
+    const expiryInput = document.getElementById('expiry');
+    const cvvInput = document.getElementById('cvv');
+    
+    if (cardNumberInput) {
+        cardNumberInput.addEventListener('input', function(e) {
+            let value = e.target.value.replace(/\s/g, '');
+            let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
+            e.target.value = formattedValue;
+            
+            // Detect card type
+            detectCardType(value);
+        });
+    }
+    
+    if (expiryInput) {
+        expiryInput.addEventListener('input', function(e) {
+            let value = e.target.value.replace(/\D/g, '');
+            if (value.length >= 2) {
+                value = value.substring(0, 2) + '/' + value.substring(2, 4);
+            }
+            e.target.value = value;
+        });
+    }
+    
+    if (cvvInput) {
+        cvvInput.addEventListener('input', function(e) {
+            e.target.value = e.target.value.replace(/\D/g, '').substring(0, 4);
+        });
+    }
+}
+
+// Detect card type
+function detectCardType(number) {
+    const cardIcons = document.querySelectorAll('.input-group-text i');
+    
+    // Reset all icons
+    cardIcons.forEach(icon => {
+        icon.style.opacity = '0.3';
+    });
+    
+    // Detect and highlight card type
+    if (number.startsWith('4')) {
+        // Visa
+        document.querySelector('.fa-cc-visa').style.opacity = '1';
+    } else if (number.startsWith('5') || number.startsWith('2')) {
+        // Mastercard
+        document.querySelector('.fa-cc-mastercard').style.opacity = '1';
+    } else if (number.startsWith('3')) {
+        // Amex
+        document.querySelector('.fa-cc-amex').style.opacity = '1';
+    }
+}
+
+// Initialize checkout steps
+function initializeCheckoutSteps() {
+    const steps = document.querySelectorAll('.step');
+    let currentStep = 1; // Starting at shipping
+    
+    // Add click handlers for completed steps
+    steps.forEach((step, index) => {
+        if (step.classList.contains('active') && index < currentStep) {
+            step.style.cursor = 'pointer';
+            step.addEventListener('click', function() {
+                goToStep(index);
+            });
+        }
+    });
+}
+
+// Go to specific step
+function goToStep(stepIndex) {
+    console.log('Going to step:', stepIndex);
+    // In real app, would handle step navigation
+}
+
+// Complete order
+window.completeOrder = function() {
+    // Validate all forms
+    const shippingForm = document.getElementById('shippingForm');
+    const isValid = shippingForm.checkValidity();
+    
+    if (!isValid) {
+        shippingForm.classList.add('was-validated');
+        showNotification('Please fill in all required fields', 'error');
+        return;
+    }
+    
+    // Show loading state
+    const button = event.target;
+    const originalText = button.innerHTML;
+    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
+    button.disabled = true;
+    
+    // Simulate order processing
+    setTimeout(() => {
+        button.innerHTML = originalText;
+        button.disabled = false;
+        
+        // Show success
+        showNotification('Order completed successfully!', 'success');
+        
+        // Redirect to order confirmation
+        setTimeout(() => {
+            window.location.href = '/';
+        }, 2000);
+    }, 2000);
+};
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const alertClass = type === 'error' ? 'danger' : type;
+    const alertHtml = `
+        <div class="alert alert-${alertClass} alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" style="z-index: 1050;">
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    `;
+    
+    document.body.insertAdjacentHTML('beforeend', alertHtml);
+    
+    setTimeout(() => {
+        const alert = document.querySelector('.alert');
+        if (alert) {
+            alert.remove();
+        }
+    }, 5000);
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeCheckout);
+} else {
+    initializeCheckout();
+}

concept-modern/src/js/pages/influencer-finder.js

@@ -0,0 +1,292 @@
+// Influencer Finder Page functionality
+export function initializeInfluencerFinder() {
+    // Initialize search functionality
+    initializeSearch();
+    
+    // Initialize filters
+    initializeFilters();
+    
+    // Initialize favorite toggle
+    initializeFavorites();
+    
+    // Initialize tooltips
+    initializeTooltips();
+    
+    // Initialize social stats animation
+    initializeSocialStats();
+}
+
+// Initialize search functionality
+function initializeSearch() {
+    const searchForm = document.querySelector('.influencer-search-form');
+    if (searchForm) {
+        searchForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const searchInput = this.querySelector('input[type="search"]');
+            const searchTerm = searchInput.value.trim();
+            
+            if (searchTerm) {
+                performSearch(searchTerm);
+            }
+        });
+    }
+}
+
+// Perform search
+function performSearch(searchTerm) {
+    console.log('Searching for:', searchTerm);
+    
+    // Show loading state
+    const influencerCards = document.querySelectorAll('.influencer-card');
+    influencerCards.forEach(card => {
+        card.style.opacity = '0.5';
+        card.style.pointerEvents = 'none';
+    });
+    
+    // Simulate search
+    setTimeout(() => {
+        influencerCards.forEach(card => {
+            card.style.opacity = '1';
+            card.style.pointerEvents = 'auto';
+        });
+        
+        showNotification(`Found ${influencerCards.length} influencers matching "${searchTerm}"`, 'success');
+    }, 1000);
+}
+
+// Initialize filters
+function initializeFilters() {
+    // Sort by change
+    const sortBy = document.getElementById('sortBy');
+    if (sortBy) {
+        sortBy.addEventListener('change', function() {
+            applySort(this.value);
+        });
+    }
+    
+    // Rating filter
+    const ratingInputs = document.querySelectorAll('input[name="rating"]');
+    ratingInputs.forEach(input => {
+        input.addEventListener('change', function() {
+            console.log('Rating filter:', this.value);
+        });
+    });
+    
+    // Platform filters
+    const platformCheckboxes = document.querySelectorAll('.platform-filter input[type="checkbox"]');
+    platformCheckboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', function() {
+            updateFilterCount();
+        });
+    });
+    
+    // Category filters
+    const categoryCheckboxes = document.querySelectorAll('.category-filter input[type="checkbox"]');
+    categoryCheckboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', function() {
+            updateFilterCount();
+        });
+    });
+}
+
+// Apply sorting
+function applySort(sortType) {
+    console.log('Sorting by:', sortType);
+    
+    const container = document.querySelector('.col-xl-9');
+    const cards = Array.from(document.querySelectorAll('.influencer-card'));
+    
+    // Sort cards based on type
+    cards.sort((a, b) => {
+        switch(sortType) {
+            case 'followers':
+                return getFollowerCount(b) - getFollowerCount(a);
+            case 'engagement':
+                return Math.random() - 0.5; // Random for demo
+            case 'rating':
+                return getRating(b) - getRating(a);
+            case 'recent':
+                return Math.random() - 0.5; // Random for demo
+            default:
+                return 0;
+        }
+    });
+    
+    // Reorder cards in DOM
+    cards.forEach(card => {
+        container.appendChild(card);
+    });
+}
+
+// Get follower count from card (simplified)
+function getFollowerCount(card) {
+    const stats = card.querySelectorAll('.social-stat span.fw-bold');
+    let total = 0;
+    stats.forEach(stat => {
+        const value = stat.textContent;
+        const num = parseFloat(value);
+        const multiplier = value.includes('M') ? 1000000 : value.includes('K') ? 1000 : 1;
+        total += num * multiplier;
+    });
+    return total;
+}
+
+// Get rating from card
+function getRating(card) {
+    const stars = card.querySelectorAll('.rating-star .fas.fa-star');
+    return stars.length;
+}
+
+// Update filter count
+function updateFilterCount() {
+    const activeFilters = document.querySelectorAll('.filter-sidebar input[type="checkbox"]:checked').length;
+    console.log('Active filters:', activeFilters);
+}
+
+// Initialize favorites
+function initializeFavorites() {
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('.btn-outline-secondary') && e.target.closest('.influencer-actions')) {
+            const btn = e.target.closest('.btn-outline-secondary');
+            toggleFavorite(btn);
+        }
+        
+        if (e.target.closest('.btn-warning') && e.target.closest('.influencer-actions')) {
+            const btn = e.target.closest('.btn-warning');
+            toggleFavorite(btn);
+        }
+    });
+}
+
+// Toggle favorite status
+function toggleFavorite(button) {
+    const icon = button.querySelector('i');
+    const isFavorite = button.classList.contains('btn-warning');
+    
+    if (isFavorite) {
+        button.classList.remove('btn-warning');
+        button.classList.add('btn-outline-secondary');
+        icon.classList.remove('fas');
+        icon.classList.add('far');
+        button.setAttribute('data-bs-original-title', 'Add to favorites');
+        showNotification('Removed from favorites', 'info');
+    } else {
+        button.classList.remove('btn-outline-secondary');
+        button.classList.add('btn-warning');
+        icon.classList.remove('far');
+        icon.classList.add('fas');
+        button.setAttribute('data-bs-original-title', 'Remove from favorites');
+        showNotification('Added to favorites', 'success');
+    }
+}
+
+// Initialize tooltips
+function initializeTooltips() {
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
+// Initialize social stats animation
+function initializeSocialStats() {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                animateSocialStats(entry.target);
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    document.querySelectorAll('.user-social-box').forEach(box => {
+        observer.observe(box);
+    });
+}
+
+// Animate social stats
+function animateSocialStats(box) {
+    const stats = box.querySelectorAll('.social-stat span.fw-bold');
+    
+    stats.forEach((stat, index) => {
+        setTimeout(() => {
+            stat.style.transform = 'scale(1.2)';
+            setTimeout(() => {
+                stat.style.transform = 'scale(1)';
+            }, 200);
+        }, index * 100);
+    });
+}
+
+// Apply filters (global function)
+window.applyFilters = function() {
+    // Collect all filter values
+    const filters = {
+        sortBy: document.getElementById('sortBy').value,
+        rating: document.querySelector('input[name="rating"]:checked').value,
+        platforms: Array.from(document.querySelectorAll('.platform-filter input:checked')).map(cb => cb.id),
+        categories: Array.from(document.querySelectorAll('.category-filter input:checked')).map(cb => cb.id),
+        ageRange: document.getElementById('ageRange').value,
+        followerRange: document.getElementById('followerRange').value
+    };
+    
+    console.log('Applying filters:', filters);
+    
+    // Show loading
+    const cards = document.querySelectorAll('.influencer-card');
+    cards.forEach(card => card.style.opacity = '0.5');
+    
+    // Simulate filter application
+    setTimeout(() => {
+        cards.forEach(card => card.style.opacity = '1');
+        showNotification('Filters applied successfully', 'success');
+    }, 500);
+};
+
+// Reset filters (global function)
+window.resetFilters = function() {
+    // Reset sort
+    document.getElementById('sortBy').value = 'followers';
+    
+    // Reset rating
+    document.getElementById('ratingAll').checked = true;
+    
+    // Reset age and follower range
+    document.getElementById('ageRange').value = '';
+    document.getElementById('followerRange').value = '';
+    
+    // Reset checkboxes to defaults
+    const defaultChecked = ['facebook', 'instagram', 'twitter', 'youtube', 'lifestyle', 'fitness'];
+    document.querySelectorAll('.filter-sidebar input[type="checkbox"]').forEach(cb => {
+        cb.checked = defaultChecked.includes(cb.id);
+    });
+    
+    showNotification('Filters reset', 'info');
+};
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const alertClass = type === 'error' ? 'danger' : type;
+    const alertHtml = `
+        <div class="alert alert-${alertClass} alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" style="z-index: 1050;">
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    `;
+    
+    document.body.insertAdjacentHTML('beforeend', alertHtml);
+    
+    setTimeout(() => {
+        const alert = document.querySelector('.alert');
+        if (alert) {
+            alert.remove();
+        }
+    }, 3000);
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeInfluencerFinder);
+} else {
+    initializeInfluencerFinder();
+}

concept-modern/src/js/pages/influencer-profile.js

@@ -0,0 +1,247 @@
+// Influencer Profile Page functionality
+export function initializeInfluencerProfile() {
+    // Initialize tabs
+    initializeTabs();
+    
+    // Initialize campaign metrics
+    initializeCampaignMetrics();
+    
+    // Initialize message form
+    initializeMessageForm();
+    
+    // Initialize tooltips
+    initializeTooltips();
+    
+    // Initialize rating animations
+    initializeRatingAnimations();
+}
+
+// Initialize tabs
+function initializeTabs() {
+    const tabButtons = document.querySelectorAll('[data-bs-toggle="pill"]');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('shown.bs.tab', function (e) {
+            // Tab changed event
+            const targetTab = e.target.getAttribute('data-bs-target');
+            console.log('Switched to tab:', targetTab);
+            
+            // Animate content on tab change
+            const tabContent = document.querySelector(targetTab);
+            if (tabContent) {
+                animateTabContent(tabContent);
+            }
+        });
+    });
+}
+
+// Animate tab content
+function animateTabContent(content) {
+    content.style.opacity = '0';
+    content.style.transform = 'translateY(10px)';
+    
+    setTimeout(() => {
+        content.style.transition = 'all 0.3s ease';
+        content.style.opacity = '1';
+        content.style.transform = 'translateY(0)';
+    }, 50);
+}
+
+// Initialize campaign metrics animations
+function initializeCampaignMetrics() {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                animateMetrics(entry.target);
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    // Observe all metric cards
+    document.querySelectorAll('.campaign-metric').forEach(metric => {
+        observer.observe(metric);
+    });
+    
+    // Observe stat cards
+    document.querySelectorAll('.card-body h1').forEach(stat => {
+        observer.observe(stat);
+    });
+}
+
+// Animate metrics
+function animateMetrics(element) {
+    const value = element.querySelector('h5, h1');
+    if (!value) return;
+    
+    const finalValue = value.textContent;
+    const isNumeric = /^\d+k?$/i.test(finalValue);
+    
+    if (isNumeric) {
+        const numericValue = parseFloat(finalValue);
+        const suffix = finalValue.includes('k') ? 'k' : '';
+        let currentValue = 0;
+        const increment = numericValue / 30;
+        const timer = setInterval(() => {
+            currentValue += increment;
+            if (currentValue >= numericValue) {
+                currentValue = numericValue;
+                clearInterval(timer);
+            }
+            value.textContent = Math.round(currentValue) + suffix;
+        }, 30);
+    }
+    
+    // Scale animation
+    element.style.transform = 'scale(1.1)';
+    setTimeout(() => {
+        element.style.transform = 'scale(1)';
+    }, 300);
+}
+
+// Initialize message form
+function initializeMessageForm() {
+    const form = document.getElementById('messageForm');
+    if (!form) return;
+    
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        // Get form data
+        const formData = {
+            name: document.getElementById('yourName').value,
+            email: document.getElementById('yourEmail').value,
+            subject: document.getElementById('subject').value,
+            message: document.getElementById('message').value
+        };
+        
+        // Show loading state
+        const submitBtn = form.querySelector('button[type="submit"]');
+        const originalHtml = submitBtn.innerHTML;
+        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending...';
+        submitBtn.disabled = true;
+        
+        // Simulate sending message
+        setTimeout(() => {
+            // Reset button
+            submitBtn.innerHTML = originalHtml;
+            submitBtn.disabled = false;
+            
+            // Show success message
+            showNotification('Message sent successfully! Michael will get back to you soon.', 'success');
+            
+            // Reset form
+            form.reset();
+            
+            // Switch to reviews tab
+            const reviewsTab = document.getElementById('reviews-tab');
+            if (reviewsTab) {
+                reviewsTab.click();
+            }
+        }, 2000);
+    });
+}
+
+// Initialize tooltips
+function initializeTooltips() {
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
+// Initialize rating animations
+function initializeRatingAnimations() {
+    const ratingBlocks = document.querySelectorAll('.rating-star');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                animateRatingStars(entry.target);
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    ratingBlocks.forEach(block => {
+        observer.observe(block);
+    });
+}
+
+// Animate rating stars
+function animateRatingStars(ratingBlock) {
+    const stars = ratingBlock.querySelectorAll('i');
+    stars.forEach((star, index) => {
+        setTimeout(() => {
+            star.style.transform = 'scale(0)';
+            star.style.transition = 'transform 0.3s ease';
+            
+            setTimeout(() => {
+                star.style.transform = 'scale(1.2)';
+                setTimeout(() => {
+                    star.style.transform = 'scale(1)';
+                }, 150);
+            }, 50);
+        }, index * 100);
+    });
+}
+
+// Handle package selection
+document.addEventListener('click', function(e) {
+    if (e.target.matches('.pricing-card .btn')) {
+        e.preventDefault();
+        const card = e.target.closest('.pricing-card');
+        const packageName = card.querySelector('.card-header h4').textContent;
+        const price = card.querySelector('.card-body h1').textContent;
+        
+        showNotification(`Selected ${packageName} package (${price}/month). Redirecting to checkout...`, 'info');
+    }
+});
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const alertClass = type === 'error' ? 'danger' : type;
+    const alertHtml = `
+        <div class="alert alert-${alertClass} alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" style="z-index: 1050;">
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    `;
+    
+    document.body.insertAdjacentHTML('beforeend', alertHtml);
+    
+    setTimeout(() => {
+        const alert = document.querySelector('.alert');
+        if (alert) {
+            alert.remove();
+        }
+    }, 5000);
+}
+
+// Social channel hover effects
+document.addEventListener('DOMContentLoaded', function() {
+    const socialLinks = document.querySelectorAll('.social-channels a');
+    
+    socialLinks.forEach(link => {
+        link.addEventListener('mouseenter', function() {
+            const icon = this.querySelector('i');
+            if (icon) {
+                icon.style.transform = 'scale(1.2) rotate(5deg)';
+            }
+        });
+        
+        link.addEventListener('mouseleave', function() {
+            const icon = this.querySelector('i');
+            if (icon) {
+                icon.style.transform = 'scale(1) rotate(0)';
+            }
+        });
+    });
+});
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeInfluencerProfile);
+} else {
+    initializeInfluencerProfile();
+}

concept-modern/src/js/pages/product-single.js

@@ -0,0 +1,238 @@
+// Product Single Page functionality
+export function initializeProductSingle() {
+    // Initialize star rating for review
+    initializeStarRating();
+    
+    // Handle add to cart
+    const addToCartBtn = document.querySelector('.btn-primary.btn-lg');
+    if (addToCartBtn && addToCartBtn.textContent.includes('Add to Cart')) {
+        addToCartBtn.addEventListener('click', handleAddToCart);
+    }
+    
+    // Handle buy now
+    const buyNowBtn = document.querySelector('.btn-success.btn-lg');
+    if (buyNowBtn) {
+        buyNowBtn.addEventListener('click', handleBuyNow);
+    }
+    
+    // Handle wishlist
+    const wishlistBtn = document.querySelector('.btn-outline-secondary.btn-lg');
+    if (wishlistBtn) {
+        wishlistBtn.addEventListener('click', toggleWishlist);
+    }
+    
+    // Handle review form submission
+    const reviewForm = document.getElementById('reviewForm');
+    if (reviewForm) {
+        reviewForm.addEventListener('submit', handleReviewSubmit);
+    }
+    
+    // Storage option price updates
+    const storageOptions = document.querySelectorAll('input[name="storage"]');
+    storageOptions.forEach(option => {
+        option.addEventListener('change', updatePrice);
+    });
+    
+    // Initialize product image zoom (optional enhancement)
+    initializeImageZoom();
+}
+
+// Initialize star rating
+function initializeStarRating() {
+    const stars = document.querySelectorAll('.star-rating i');
+    let selectedRating = 0;
+    
+    stars.forEach(star => {
+        star.addEventListener('click', function() {
+            selectedRating = parseInt(this.getAttribute('data-rating'));
+            updateStarDisplay(selectedRating);
+        });
+        
+        star.addEventListener('mouseenter', function() {
+            const rating = parseInt(this.getAttribute('data-rating'));
+            updateStarDisplay(rating);
+        });
+    });
+    
+    document.querySelector('.star-rating').addEventListener('mouseleave', function() {
+        updateStarDisplay(selectedRating);
+    });
+    
+    function updateStarDisplay(rating) {
+        stars.forEach((star, index) => {
+            if (index < rating) {
+                star.classList.remove('far');
+                star.classList.add('fas', 'text-warning');
+            } else {
+                star.classList.remove('fas', 'text-warning');
+                star.classList.add('far');
+            }
+        });
+    }
+}
+
+// Handle add to cart
+function handleAddToCart() {
+    const productName = document.querySelector('.product-info h1').textContent;
+    const quantity = document.getElementById('quantity').value;
+    const color = document.querySelector('input[name="color"]:checked').nextElementSibling.textContent;
+    const storage = document.querySelector('input[name="storage"]:checked').nextElementSibling.textContent;
+    
+    const cartItem = {
+        name: productName,
+        quantity: quantity,
+        color: color,
+        storage: storage,
+        price: getCurrentPrice()
+    };
+    
+    // In real app, would add to cart state/backend
+    console.log('Adding to cart:', cartItem);
+    
+    showNotification(`${productName} added to cart!`, 'success');
+    updateCartCounter();
+}
+
+// Handle buy now
+function handleBuyNow() {
+    const productName = document.querySelector('.product-info h1').textContent;
+    
+    // In real app, would redirect to checkout with product
+    console.log('Buy now:', productName);
+    
+    // For demo, just show notification
+    showNotification('Redirecting to checkout...', 'info');
+    
+    // Simulate redirect
+    setTimeout(() => {
+        window.location.href = '/pages/ecommerce/checkout.html';
+    }, 1500);
+}
+
+// Toggle wishlist
+function toggleWishlist(e) {
+    const btn = e.currentTarget;
+    const icon = btn.querySelector('i');
+    const productName = document.querySelector('.product-info h1').textContent;
+    
+    if (icon.classList.contains('far')) {
+        icon.classList.remove('far');
+        icon.classList.add('fas', 'text-danger');
+        showNotification(`${productName} added to wishlist!`, 'success');
+    } else {
+        icon.classList.remove('fas', 'text-danger');
+        icon.classList.add('far');
+        showNotification(`${productName} removed from wishlist!`, 'info');
+    }
+}
+
+// Handle review submission
+function handleReviewSubmit(e) {
+    e.preventDefault();
+    
+    const rating = document.querySelectorAll('.star-rating .fas').length;
+    const title = document.getElementById('reviewTitle').value;
+    const text = document.getElementById('reviewText').value;
+    const name = document.getElementById('reviewName').value;
+    const email = document.getElementById('reviewEmail').value;
+    
+    if (rating === 0) {
+        showNotification('Please select a rating', 'warning');
+        return;
+    }
+    
+    const review = {
+        rating: rating,
+        title: title,
+        text: text,
+        name: name,
+        email: email,
+        date: new Date().toISOString()
+    };
+    
+    // In real app, would submit to backend
+    console.log('Submitting review:', review);
+    
+    // Close modal
+    const modal = bootstrap.Modal.getInstance(document.getElementById('reviewModal'));
+    modal.hide();
+    
+    // Reset form
+    e.target.reset();
+    document.querySelectorAll('.star-rating i').forEach(star => {
+        star.classList.remove('fas', 'text-warning');
+        star.classList.add('far');
+    });
+    
+    showNotification('Thank you for your review!', 'success');
+}
+
+// Update price based on storage selection
+function updatePrice() {
+    const basePrice = 1199;
+    const storagePrices = {
+        '256GB': 0,
+        '512GB': 200,
+        '1TB': 600
+    };
+    
+    const selectedStorage = document.querySelector('input[name="storage"]:checked').nextElementSibling.textContent;
+    const newPrice = basePrice + (storagePrices[selectedStorage] || 0);
+    
+    document.querySelector('.price h3').textContent = `$${newPrice.toFixed(2)}`;
+}
+
+// Get current price
+function getCurrentPrice() {
+    return document.querySelector('.price h3').textContent;
+}
+
+// Initialize image zoom (basic implementation)
+function initializeImageZoom() {
+    const mainImage = document.getElementById('mainImage');
+    if (!mainImage) return;
+    
+    mainImage.addEventListener('mouseenter', function() {
+        this.style.cursor = 'zoom-in';
+    });
+    
+    mainImage.addEventListener('click', function() {
+        // In real app, would open lightbox or zoom modal
+        console.log('Image zoom clicked');
+    });
+}
+
+// Update cart counter
+function updateCartCounter() {
+    const cartCounter = document.querySelector('.cart-counter');
+    if (cartCounter) {
+        const currentCount = parseInt(cartCounter.textContent) || 0;
+        cartCounter.textContent = currentCount + 1;
+    }
+}
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const alertHtml = `
+        <div class="alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" style="z-index: 1050;">
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    `;
+    
+    document.body.insertAdjacentHTML('beforeend', alertHtml);
+    
+    setTimeout(() => {
+        const alert = document.querySelector('.alert');
+        if (alert) {
+            alert.remove();
+        }
+    }, 3000);
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeProductSingle);
+} else {
+    initializeProductSingle();
+}

concept-modern/src/js/pages/products.js

@@ -0,0 +1,277 @@
+// E-commerce Products Page functionality
+export function initializeProducts() {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Product search functionality
+    const searchInput = document.getElementById('productSearch');
+    if (searchInput) {
+        searchInput.addEventListener('keyup', debounce(function(e) {
+            const searchTerm = e.target.value.toLowerCase();
+            filterProducts(searchTerm);
+        }, 300));
+    }
+
+    // Category filter
+    const categoryFilter = document.getElementById('categoryFilter');
+    if (categoryFilter) {
+        categoryFilter.addEventListener('change', function() {
+            applyFilters();
+        });
+    }
+
+    // Sort functionality
+    const sortBy = document.getElementById('sortBy');
+    if (sortBy) {
+        sortBy.addEventListener('change', function() {
+            sortProducts(this.value);
+        });
+    }
+
+    // Add to cart buttons
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('.btn-primary') && e.target.textContent.includes('Add to Cart')) {
+            e.preventDefault();
+            const productCard = e.target.closest('.product-card');
+            const productName = productCard.querySelector('.card-title a').textContent;
+            addToCart(productName);
+        }
+    });
+
+    // Wishlist buttons
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('.product-actions .btn')) {
+            const btn = e.target.closest('.btn');
+            if (btn.querySelector('.fa-heart')) {
+                e.preventDefault();
+                toggleWishlist(btn);
+            }
+        }
+    });
+
+    // Add product form
+    const addProductForm = document.getElementById('addProductForm');
+    if (addProductForm) {
+        addProductForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            handleAddProduct();
+        });
+    }
+
+    // Quick view functionality
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('.product-actions .btn')) {
+            const btn = e.target.closest('.btn');
+            if (btn.querySelector('.fa-eye')) {
+                e.preventDefault();
+                const productCard = btn.closest('.product-card');
+                showQuickView(productCard);
+            }
+        }
+    });
+}
+
+// Debounce helper
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// Filter products by search term
+function filterProducts(searchTerm) {
+    const productCards = document.querySelectorAll('.product-card');
+    productCards.forEach(card => {
+        const productName = card.querySelector('.card-title').textContent.toLowerCase();
+        const productDescription = card.querySelector('.text-muted.small').textContent.toLowerCase();
+        
+        if (productName.includes(searchTerm) || productDescription.includes(searchTerm)) {
+            card.parentElement.style.display = '';
+        } else {
+            card.parentElement.style.display = 'none';
+        }
+    });
+}
+
+// Apply all filters
+function applyFilters() {
+    const category = document.getElementById('categoryFilter').value;
+    const searchTerm = document.getElementById('productSearch').value.toLowerCase();
+    
+    const productCards = document.querySelectorAll('.product-card');
+    productCards.forEach(card => {
+        let show = true;
+        
+        // Apply search filter
+        if (searchTerm) {
+            const productName = card.querySelector('.card-title').textContent.toLowerCase();
+            const productDescription = card.querySelector('.text-muted.small').textContent.toLowerCase();
+            show = productName.includes(searchTerm) || productDescription.includes(searchTerm);
+        }
+        
+        // Apply category filter (would need data attributes on cards in real implementation)
+        if (category && show) {
+            // In a real app, you'd check the product's category
+            // For demo purposes, we'll just show all for now
+        }
+        
+        card.parentElement.style.display = show ? '' : 'none';
+    });
+}
+
+// Sort products
+function sortProducts(sortType) {
+    const container = document.querySelector('.row').parentElement;
+    const productCols = Array.from(container.querySelectorAll('.col-xl-3.col-lg-4'));
+    
+    productCols.sort((a, b) => {
+        const priceA = parseFloat(a.querySelector('.h5.text-primary').textContent.replace('$', ''));
+        const priceB = parseFloat(b.querySelector('.h5.text-primary').textContent.replace('$', ''));
+        const nameA = a.querySelector('.card-title a').textContent;
+        const nameB = b.querySelector('.card-title a').textContent;
+        
+        switch(sortType) {
+            case 'price-low':
+                return priceA - priceB;
+            case 'price-high':
+                return priceB - priceA;
+            case 'newest':
+                // In real app, would sort by date
+                return 0;
+            case 'rating':
+                // In real app, would sort by rating
+                return 0;
+            default:
+                return nameA.localeCompare(nameB);
+        }
+    });
+    
+    // Re-append sorted elements
+    productCols.forEach(col => container.appendChild(col));
+}
+
+// Add to cart
+function addToCart(productName) {
+    // Show success notification
+    const alertHtml = `
+        <div class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" style="z-index: 1050;">
+            <i class="fas fa-check-circle me-2"></i>
+            <strong>${productName}</strong> added to cart!
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    `;
+    
+    document.body.insertAdjacentHTML('beforeend', alertHtml);
+    
+    // Auto-dismiss after 3 seconds
+    setTimeout(() => {
+        const alert = document.querySelector('.alert');
+        if (alert) {
+            const bsAlert = new bootstrap.Alert(alert);
+            bsAlert.close();
+        }
+    }, 3000);
+    
+    // Update cart counter (if exists)
+    updateCartCounter();
+}
+
+// Toggle wishlist
+function toggleWishlist(btn) {
+    const icon = btn.querySelector('i');
+    const productCard = btn.closest('.product-card');
+    const productName = productCard.querySelector('.card-title a').textContent;
+    
+    if (icon.classList.contains('far')) {
+        // Add to wishlist
+        icon.classList.remove('far');
+        icon.classList.add('fas', 'text-danger');
+        showNotification(`${productName} added to wishlist!`, 'success');
+    } else {
+        // Remove from wishlist
+        icon.classList.remove('fas', 'text-danger');
+        icon.classList.add('far');
+        showNotification(`${productName} removed from wishlist!`, 'info');
+    }
+}
+
+// Handle add product
+function handleAddProduct() {
+    const formData = {
+        name: document.getElementById('productName').value,
+        category: document.getElementById('productCategory').value,
+        price: document.getElementById('productPrice').value,
+        stock: document.getElementById('productStock').value,
+        sku: document.getElementById('productSKU').value,
+        description: document.getElementById('productDescription').value
+    };
+    
+    // In real app, would send to server
+    console.log('Adding product:', formData);
+    
+    // Close modal
+    const modal = bootstrap.Modal.getInstance(document.getElementById('addProductModal'));
+    modal.hide();
+    
+    // Reset form
+    document.getElementById('addProductForm').reset();
+    
+    // Show success message
+    showNotification('Product added successfully!', 'success');
+}
+
+// Show quick view
+function showQuickView(productCard) {
+    const productName = productCard.querySelector('.card-title a').textContent;
+    const price = productCard.querySelector('.h5.text-primary').textContent;
+    const description = productCard.querySelector('.text-muted.small').textContent;
+    
+    // In a real app, this would open a modal with full product details
+    console.log('Quick view for:', productName);
+    showNotification(`Quick view: ${productName}`, 'info');
+}
+
+// Update cart counter
+function updateCartCounter() {
+    // In real app, would update actual cart count
+    const cartCounter = document.querySelector('.cart-counter');
+    if (cartCounter) {
+        const currentCount = parseInt(cartCounter.textContent) || 0;
+        cartCounter.textContent = currentCount + 1;
+    }
+}
+
+// Show notification
+function showNotification(message, type = 'info') {
+    const alertHtml = `
+        <div class="alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3" role="alert" style="z-index: 1050;">
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    `;
+    
+    document.body.insertAdjacentHTML('beforeend', alertHtml);
+    
+    setTimeout(() => {
+        const alert = document.querySelector('.alert');
+        if (alert) {
+            alert.remove();
+        }
+    }, 3000);
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeProducts);
+} else {
+    initializeProducts();
+}

concept-modern/src/pages/apps/influencer-finder.html

@@ -0,0 +1,643 @@
+{{> layouts/main title="Influencer Finder" activeMenu="influencer" activePage="influencer-finder"}}
+
+{{#*inline "content"}}
+<div class="dashboard-main-wrapper">
+    <!-- Header -->
+    {{> layouts/header}}
+    
+    <!-- Sidebar -->
+    {{> layouts/sidebar activeMenu="influencer" activePage="influencer-finder"}}
+    
+    <!-- Main Content -->
+    <div class="dashboard-wrapper">
+        <div class="influence-finder">
+            <div class="container-fluid dashboard-content">
+                <!-- Page Header -->
+                <div class="row">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="page-header">
+                            <h2 class="pageheader-title">Influencer Finder</h2>
+                            <p class="pageheader-text">Discover and connect with influencers that match your brand's needs across various social media platforms.</p>
+                            <div class="page-breadcrumb">
+                                <nav aria-label="breadcrumb">
+                                    <ol class="breadcrumb">
+                                        <li class="breadcrumb-item"><a href="/" class="breadcrumb-link">Dashboard</a></li>
+                                        <li class="breadcrumb-item"><a href="/pages/dashboards/influencer.html" class="breadcrumb-link">Influencer</a></li>
+                                        <li class="breadcrumb-item active" aria-current="page">Influencer Finder</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Search Bar -->
+                <div class="row mb-4">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-body">
+                                <form class="influencer-search-form">
+                                    <div class="input-group">
+                                        <input class="form-control form-control-lg" type="search" placeholder="Search influencers by name, category, or location..." aria-label="Search">
+                                        <button class="btn btn-primary" type="submit">
+                                            <i class="fas fa-search"></i> Search
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="row">
+                    <!-- Influencer List -->
+                    <div class="col-xl-9 col-lg-8 col-md-8 col-sm-12 col-12">
+                        <!-- Influencer Card 1 -->
+                        <div class="card influencer-card mb-3">
+                            <div class="card-body">
+                                <div class="row align-items-center">
+                                    <div class="col-xl-9 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-profile d-flex align-items-start">
+                                            <div class="user-avatar me-3">
+                                                <img src="/assets/images/avatar-1.jpg" alt="Henry Barbara" class="rounded-circle user-avatar-xl">
+                                            </div>
+                                            <div class="influencer-info flex-grow-1">
+                                                <div class="mb-2">
+                                                    <h3 class="mb-1 d-inline-block">Henry Barbara</h3>
+                                                    <div class="rating-star d-inline-block ms-3">
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <span class="text-muted ms-1">14 Reviews</span>
+                                                    </div>
+                                                </div>
+                                                <div class="influencer-details">
+                                                    <p class="mb-2">
+                                                        <i class="fas fa-map-marker-alt me-2 text-primary"></i>Salt Lake City, UT
+                                                        <span class="ms-3"><i class="fas fa-male me-1"></i>Male</span>
+                                                        <span class="ms-3"><i class="fas fa-birthday-cake me-1"></i>29 Years Old</span>
+                                                    </p>
+                                                    <div class="mt-2">
+                                                        <span class="badge bg-light text-dark me-1">Fitness</span>
+                                                        <span class="badge bg-light text-dark me-1">Life Style</span>
+                                                        <span class="badge bg-light text-dark me-1">Gym</span>
+                                                        <span class="badge bg-light text-dark">Crossfit</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-actions text-xl-end mt-3 mt-xl-0">
+                                            <button class="btn btn-outline-secondary btn-sm me-2" data-bs-toggle="tooltip" title="Add to favorites">
+                                                <i class="far fa-star"></i>
+                                            </button>
+                                            <a href="/pages/apps/influencer-profile.html" class="btn btn-primary btn-sm">View Profile</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="border-top user-social-box mt-3 pt-3">
+                                    <div class="row g-2 text-center">
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-twitter text-info"></i>
+                                                <span class="d-block fw-bold">13.2K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-pinterest text-danger"></i>
+                                                <span class="d-block fw-bold">84K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-instagram text-danger"></i>
+                                                <span class="d-block fw-bold">12.3K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-facebook text-primary"></i>
+                                                <span class="d-block fw-bold">92.9K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-medium text-dark"></i>
+                                                <span class="d-block fw-bold">291</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-youtube text-danger"></i>
+                                                <span class="d-block fw-bold">1.3K</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Influencer Card 2 -->
+                        <div class="card influencer-card mb-3">
+                            <div class="card-body">
+                                <div class="row align-items-center">
+                                    <div class="col-xl-9 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-profile d-flex align-items-start">
+                                            <div class="user-avatar me-3">
+                                                <img src="/assets/images/avatar-2.jpg" alt="Louis Mstara" class="rounded-circle user-avatar-xl">
+                                            </div>
+                                            <div class="influencer-info flex-grow-1">
+                                                <div class="mb-2">
+                                                    <h3 class="mb-1 d-inline-block">Louis Mstara</h3>
+                                                    <div class="rating-star d-inline-block ms-3">
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <span class="text-muted ms-1">22 Reviews</span>
+                                                    </div>
+                                                </div>
+                                                <div class="influencer-details">
+                                                    <p class="mb-2">
+                                                        <i class="fas fa-map-marker-alt me-2 text-primary"></i>Avenal, CA, USA
+                                                        <span class="ms-3"><i class="fas fa-female me-1"></i>Female</span>
+                                                        <span class="ms-3"><i class="fas fa-birthday-cake me-1"></i>24 Years Old</span>
+                                                    </p>
+                                                    <div class="mt-2">
+                                                        <span class="badge bg-light text-dark me-1">Fashion</span>
+                                                        <span class="badge bg-light text-dark me-1">Beauty</span>
+                                                        <span class="badge bg-light text-dark me-1">Travel</span>
+                                                        <span class="badge bg-light text-dark">Lifestyle</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-actions text-xl-end mt-3 mt-xl-0">
+                                            <button class="btn btn-outline-secondary btn-sm me-2" data-bs-toggle="tooltip" title="Add to favorites">
+                                                <i class="far fa-star"></i>
+                                            </button>
+                                            <a href="/pages/apps/influencer-profile.html" class="btn btn-primary btn-sm">View Profile</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="border-top user-social-box mt-3 pt-3">
+                                    <div class="row g-2 text-center">
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-twitter text-info"></i>
+                                                <span class="d-block fw-bold">45.6K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-pinterest text-danger"></i>
+                                                <span class="d-block fw-bold">120K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-instagram text-danger"></i>
+                                                <span class="d-block fw-bold">234K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-facebook text-primary"></i>
+                                                <span class="d-block fw-bold">156K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-medium text-dark"></i>
+                                                <span class="d-block fw-bold">3.2K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-youtube text-danger"></i>
+                                                <span class="d-block fw-bold">89K</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Influencer Card 3 -->
+                        <div class="card influencer-card mb-3">
+                            <div class="card-body">
+                                <div class="row align-items-center">
+                                    <div class="col-xl-9 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-profile d-flex align-items-start">
+                                            <div class="user-avatar me-3">
+                                                <img src="/assets/images/avatar-3.jpg" alt="Nichole Oliver" class="rounded-circle user-avatar-xl">
+                                            </div>
+                                            <div class="influencer-info flex-grow-1">
+                                                <div class="mb-2">
+                                                    <h3 class="mb-1 d-inline-block">Nichole Oliver</h3>
+                                                    <div class="rating-star d-inline-block ms-3">
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="far fa-star text-warning"></i>
+                                                        <span class="text-muted ms-1">18 Reviews</span>
+                                                    </div>
+                                                </div>
+                                                <div class="influencer-details">
+                                                    <p class="mb-2">
+                                                        <i class="fas fa-map-marker-alt me-2 text-primary"></i>98 Richland Avenue, USA
+                                                        <span class="ms-3"><i class="fas fa-male me-1"></i>Male</span>
+                                                        <span class="ms-3"><i class="fas fa-birthday-cake me-1"></i>34 Years Old</span>
+                                                    </p>
+                                                    <div class="mt-2">
+                                                        <span class="badge bg-light text-dark me-1">Business</span>
+                                                        <span class="badge bg-light text-dark me-1">Tech</span>
+                                                        <span class="badge bg-light text-dark me-1">Startup</span>
+                                                        <span class="badge bg-light text-dark">Finance</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-actions text-xl-end mt-3 mt-xl-0">
+                                            <button class="btn btn-warning btn-sm me-2" data-bs-toggle="tooltip" title="Remove from favorites">
+                                                <i class="fas fa-star"></i>
+                                            </button>
+                                            <a href="/pages/apps/influencer-profile.html" class="btn btn-primary btn-sm">View Profile</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="border-top user-social-box mt-3 pt-3">
+                                    <div class="row g-2 text-center">
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-twitter text-info"></i>
+                                                <span class="d-block fw-bold">78.9K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-linkedin text-primary"></i>
+                                                <span class="d-block fw-bold">45K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-instagram text-danger"></i>
+                                                <span class="d-block fw-bold">22.1K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-facebook text-primary"></i>
+                                                <span class="d-block fw-bold">34.5K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-medium text-dark"></i>
+                                                <span class="d-block fw-bold">12.8K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-youtube text-danger"></i>
+                                                <span class="d-block fw-bold">156K</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Influencer Card 4 -->
+                        <div class="card influencer-card mb-3">
+                            <div class="card-body">
+                                <div class="row align-items-center">
+                                    <div class="col-xl-9 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-profile d-flex align-items-start">
+                                            <div class="user-avatar me-3">
+                                                <img src="/assets/images/avatar-4.jpg" alt="Pallavi Johnson" class="rounded-circle user-avatar-xl">
+                                            </div>
+                                            <div class="influencer-info flex-grow-1">
+                                                <div class="mb-2">
+                                                    <h3 class="mb-1 d-inline-block">Pallavi Johnson</h3>
+                                                    <div class="rating-star d-inline-block ms-3">
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <span class="text-muted ms-1">32 Reviews</span>
+                                                    </div>
+                                                </div>
+                                                <div class="influencer-details">
+                                                    <p class="mb-2">
+                                                        <i class="fas fa-map-marker-alt me-2 text-primary"></i>4427 Wines Lane, USA
+                                                        <span class="ms-3"><i class="fas fa-female me-1"></i>Female</span>
+                                                        <span class="ms-3"><i class="fas fa-birthday-cake me-1"></i>29 Years Old</span>
+                                                    </p>
+                                                    <div class="mt-2">
+                                                        <span class="badge bg-light text-dark me-1">Food</span>
+                                                        <span class="badge bg-light text-dark me-1">Cooking</span>
+                                                        <span class="badge bg-light text-dark me-1">Recipes</span>
+                                                        <span class="badge bg-light text-dark">Healthy Living</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12">
+                                        <div class="influencer-actions text-xl-end mt-3 mt-xl-0">
+                                            <button class="btn btn-outline-secondary btn-sm me-2" data-bs-toggle="tooltip" title="Add to favorites">
+                                                <i class="far fa-star"></i>
+                                            </button>
+                                            <a href="/pages/apps/influencer-profile.html" class="btn btn-primary btn-sm">View Profile</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="border-top user-social-box mt-3 pt-3">
+                                    <div class="row g-2 text-center">
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-twitter text-info"></i>
+                                                <span class="d-block fw-bold">112K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-pinterest text-danger"></i>
+                                                <span class="d-block fw-bold">445K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-instagram text-danger"></i>
+                                                <span class="d-block fw-bold">789K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-facebook text-primary"></i>
+                                                <span class="d-block fw-bold">234K</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-tiktok text-dark"></i>
+                                                <span class="d-block fw-bold">1.2M</span>
+                                            </div>
+                                        </div>
+                                        <div class="col-4 col-md-2">
+                                            <div class="social-stat">
+                                                <i class="fab fa-youtube text-danger"></i>
+                                                <span class="d-block fw-bold">567K</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Pagination -->
+                        <nav aria-label="Page navigation" class="mt-4">
+                            <ul class="pagination justify-content-center">
+                                <li class="page-item disabled">
+                                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+                                </li>
+                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                <li class="page-item"><a class="page-link" href="#">4</a></li>
+                                <li class="page-item"><a class="page-link" href="#">5</a></li>
+                                <li class="page-item">
+                                    <a class="page-link" href="#">Next</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                    
+                    <!-- Filter Sidebar -->
+                    <div class="col-xl-3 col-lg-4 col-md-4 col-sm-12 col-12">
+                        <div class="card filter-sidebar">
+                            <div class="card-body">
+                                <h5 class="card-title">Filter Results</h5>
+                                
+                                <!-- Sorting -->
+                                <div class="mb-4">
+                                    <label class="form-label fw-bold">Sort By</label>
+                                    <select class="form-select" id="sortBy">
+                                        <option value="followers">Most Followers</option>
+                                        <option value="engagement">Highest Engagement</option>
+                                        <option value="rating">Best Rated</option>
+                                        <option value="recent">Recently Active</option>
+                                    </select>
+                                </div>
+                                
+                                <!-- Rating Filter -->
+                                <div class="mb-4">
+                                    <label class="form-label fw-bold">Minimum Rating</label>
+                                    <div class="rating-filter">
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="radio" name="rating" id="rating5" value="5">
+                                            <label class="form-check-label" for="rating5">
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="radio" name="rating" id="rating4" value="4">
+                                            <label class="form-check-label" for="rating4">
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="far fa-star text-warning"></i>
+                                                <span class="text-muted small">& up</span>
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="radio" name="rating" id="rating3" value="3">
+                                            <label class="form-check-label" for="rating3">
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="fas fa-star text-warning"></i>
+                                                <i class="far fa-star text-warning"></i>
+                                                <i class="far fa-star text-warning"></i>
+                                                <span class="text-muted small">& up</span>
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="radio" name="rating" id="ratingAll" value="all" checked>
+                                            <label class="form-check-label" for="ratingAll">
+                                                All Ratings
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Social Media Platforms -->
+                                <div class="mb-4">
+                                    <label class="form-label fw-bold">Social Media Platforms</label>
+                                    <div class="platform-filter">
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="facebook" checked>
+                                            <label class="form-check-label" for="facebook">
+                                                <i class="fab fa-facebook text-primary me-1"></i> Facebook
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="instagram" checked>
+                                            <label class="form-check-label" for="instagram">
+                                                <i class="fab fa-instagram text-danger me-1"></i> Instagram
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="twitter" checked>
+                                            <label class="form-check-label" for="twitter">
+                                                <i class="fab fa-twitter text-info me-1"></i> Twitter
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="youtube" checked>
+                                            <label class="form-check-label" for="youtube">
+                                                <i class="fab fa-youtube text-danger me-1"></i> YouTube
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="tiktok">
+                                            <label class="form-check-label" for="tiktok">
+                                                <i class="fab fa-tiktok text-dark me-1"></i> TikTok
+                                            </label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="pinterest">
+                                            <label class="form-check-label" for="pinterest">
+                                                <i class="fab fa-pinterest text-danger me-1"></i> Pinterest
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Categories -->
+                                <div class="mb-4">
+                                    <label class="form-label fw-bold">Categories</label>
+                                    <div class="category-filter">
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="business">
+                                            <label class="form-check-label" for="business">Business</label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="lifestyle" checked>
+                                            <label class="form-check-label" for="lifestyle">Lifestyle</label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="fitness" checked>
+                                            <label class="form-check-label" for="fitness">Fitness</label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="fashion">
+                                            <label class="form-check-label" for="fashion">Fashion</label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="food">
+                                            <label class="form-check-label" for="food">Food</label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="tech">
+                                            <label class="form-check-label" for="tech">Technology</label>
+                                        </div>
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="checkbox" id="beauty">
+                                            <label class="form-check-label" for="beauty">Beauty & Makeup</label>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Age Range -->
+                                <div class="mb-4">
+                                    <label class="form-label fw-bold">Age Range</label>
+                                    <select class="form-select" id="ageRange">
+                                        <option value="">All Ages</option>
+                                        <option value="18-25">18-25</option>
+                                        <option value="26-35">26-35</option>
+                                        <option value="36-45">36-45</option>
+                                        <option value="46+">46+</option>
+                                    </select>
+                                </div>
+                                
+                                <!-- Follower Range -->
+                                <div class="mb-4">
+                                    <label class="form-label fw-bold">Follower Count</label>
+                                    <select class="form-select" id="followerRange">
+                                        <option value="">Any</option>
+                                        <option value="1k-10k">1K - 10K (Nano)</option>
+                                        <option value="10k-100k">10K - 100K (Micro)</option>
+                                        <option value="100k-1m">100K - 1M (Macro)</option>
+                                        <option value="1m+">1M+ (Mega)</option>
+                                    </select>
+                                </div>
+                                
+                                <!-- Apply/Reset Buttons -->
+                                <div class="d-grid gap-2">
+                                    <button class="btn btn-primary" onclick="applyFilters()">Apply Filters</button>
+                                    <button class="btn btn-outline-secondary" onclick="resetFilters()">Reset</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        {{> layouts/footer}}
+    </div>
+</div>
+
+<!-- Page Specific Scripts -->
+<script type="module" src="/js/pages/influencer-finder.js"></script>
+
+<script>
+// Quick inline scripts for demonstration
+function applyFilters() {
+    // Apply filters logic
+    console.log('Applying filters...');
+}
+
+function resetFilters() {
+    // Reset all filters
+    document.getElementById('sortBy').value = 'followers';
+    document.getElementById('ratingAll').checked = true;
+    document.getElementById('ageRange').value = '';
+    document.getElementById('followerRange').value = '';
+    
+    // Reset checkboxes
+    document.querySelectorAll('.form-check-input[type="checkbox"]').forEach(cb => {
+        cb.checked = ['facebook', 'instagram', 'twitter', 'youtube', 'lifestyle', 'fitness'].includes(cb.id);
+    });
+}
+
+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', function() {
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+});
+</script>
+{{/inline}}
+
+{{> layouts/base}}

concept-modern/src/pages/apps/influencer-profile.html

@@ -0,0 +1,633 @@
+{{> layouts/main title="Influencer Profile" activeMenu="influencer" activePage="influencer-profile"}}
+
+{{#*inline "content"}}
+<div class="dashboard-main-wrapper">
+    <!-- Header -->
+    {{> layouts/header}}
+    
+    <!-- Sidebar -->
+    {{> layouts/sidebar activeMenu="influencer" activePage="influencer-profile"}}
+    
+    <!-- Main Content -->
+    <div class="dashboard-wrapper">
+        <div class="influence-profile">
+            <div class="container-fluid dashboard-content">
+                <!-- Page Header -->
+                <div class="row">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="page-header">
+                            <h2 class="pageheader-title">Influencer Profile</h2>
+                            <p class="pageheader-text">View detailed information about influencer campaigns, packages, reviews, and engagement metrics.</p>
+                            <div class="page-breadcrumb">
+                                <nav aria-label="breadcrumb">
+                                    <ol class="breadcrumb">
+                                        <li class="breadcrumb-item"><a href="/" class="breadcrumb-link">Dashboard</a></li>
+                                        <li class="breadcrumb-item"><a href="/pages/apps/influencer-finder.html" class="breadcrumb-link">Influencer</a></li>
+                                        <li class="breadcrumb-item active" aria-current="page">Influencer Profile</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="row">
+                    <!-- Profile Sidebar -->
+                    <div class="col-xl-3 col-lg-3 col-md-5 col-sm-12 col-12">
+                        <!-- Profile Card -->
+                        <div class="card profile-card">
+                            <div class="card-body">
+                                <div class="user-avatar text-center d-block">
+                                    <img src="/assets/images/avatar-1.jpg" alt="Michael J. Christy" class="rounded-circle user-avatar-xxl">
+                                </div>
+                                <div class="text-center">
+                                    <h3 class="font-24 mb-0">Michael J. Christy</h3>
+                                    <p class="text-muted">Project Manager @Influence</p>
+                                </div>
+                            </div>
+                            
+                            <div class="card-body border-top">
+                                <h5 class="mb-3">Contact Information</h5>
+                                <ul class="list-unstyled mb-0">
+                                    <li class="mb-2">
+                                        <i class="fas fa-fw fa-envelope me-2 text-primary"></i>
+                                        <a href="mailto:michaelchristy@gmail.com">michaelchristy@gmail.com</a>
+                                    </li>
+                                    <li class="mb-0">
+                                        <i class="fas fa-fw fa-phone me-2 text-primary"></i>
+                                        <a href="tel:+19001234567">(900) 123 4567</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="card-body border-top">
+                                <h5 class="mb-3">Rating</h5>
+                                <h2 class="mb-0">4.8</h2>
+                                <div class="rating-star">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                </div>
+                                <p class="text-muted mb-0">14 Reviews</p>
+                            </div>
+                            
+                            <div class="card-body border-top">
+                                <h5 class="mb-3">Social Channels</h5>
+                                <ul class="list-unstyled mb-0 social-channels">
+                                    <li class="mb-2">
+                                        <a href="#" class="text-decoration-none">
+                                            <i class="fab fa-fw fa-facebook-square me-2 text-primary"></i>
+                                            fb.me/michaelchristy
+                                        </a>
+                                    </li>
+                                    <li class="mb-2">
+                                        <a href="#" class="text-decoration-none">
+                                            <i class="fab fa-fw fa-twitter-square me-2 text-info"></i>
+                                            twitter.com/michaelchristy
+                                        </a>
+                                    </li>
+                                    <li class="mb-2">
+                                        <a href="#" class="text-decoration-none">
+                                            <i class="fab fa-fw fa-instagram me-2 text-danger"></i>
+                                            instagram.com/michaelchristy
+                                        </a>
+                                    </li>
+                                    <li class="mb-2">
+                                        <a href="#" class="text-decoration-none">
+                                            <i class="fas fa-fw fa-rss-square me-2 text-warning"></i>
+                                            michaelchristy.com/blog
+                                        </a>
+                                    </li>
+                                    <li class="mb-2">
+                                        <a href="#" class="text-decoration-none">
+                                            <i class="fab fa-fw fa-pinterest-square me-2 text-danger"></i>
+                                            pinterest.com/michaelchristy
+                                        </a>
+                                    </li>
+                                    <li class="mb-0">
+                                        <a href="#" class="text-decoration-none">
+                                            <i class="fab fa-fw fa-youtube me-2 text-danger"></i>
+                                            youtube/michaelchristy
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="card-body border-top">
+                                <h5 class="mb-3">Categories</h5>
+                                <div>
+                                    <span class="badge bg-light text-dark me-1">Fitness</span>
+                                    <span class="badge bg-light text-dark me-1">Life Style</span>
+                                    <span class="badge bg-light text-dark">Gym</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Campaign Data -->
+                    <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12 col-12">
+                        <div class="influence-profile-content">
+                            <!-- Tabs Navigation -->
+                            <ul class="nav nav-pills nav-fill mb-4" id="profileTab" role="tablist">
+                                <li class="nav-item" role="presentation">
+                                    <button class="nav-link active" id="campaign-tab" data-bs-toggle="pill" data-bs-target="#campaign" type="button" role="tab" aria-controls="campaign" aria-selected="true">
+                                        <i class="fas fa-bullhorn me-2"></i>Campaign
+                                    </button>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <button class="nav-link" id="packages-tab" data-bs-toggle="pill" data-bs-target="#packages" type="button" role="tab" aria-controls="packages" aria-selected="false">
+                                        <i class="fas fa-box me-2"></i>Packages
+                                    </button>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <button class="nav-link" id="reviews-tab" data-bs-toggle="pill" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">
+                                        <i class="fas fa-star me-2"></i>Reviews
+                                    </button>
+                                </li>
+                                <li class="nav-item" role="presentation">
+                                    <button class="nav-link" id="messages-tab" data-bs-toggle="pill" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">
+                                        <i class="fas fa-envelope me-2"></i>Send Message
+                                    </button>
+                                </li>
+                            </ul>
+                            
+                            <!-- Tab Content -->
+                            <div class="tab-content" id="profileTabContent">
+                                <!-- Campaign Tab -->
+                                <div class="tab-pane fade show active" id="campaign" role="tabpanel" aria-labelledby="campaign-tab">
+                                    <!-- Campaign Stats -->
+                                    <div class="section-block">
+                                        <h3 class="section-title">My Campaign Stats</h3>
+                                    </div>
+                                    <div class="row mb-4">
+                                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb-3">
+                                            <div class="card h-100">
+                                                <div class="card-body text-center">
+                                                    <h1 class="mb-1 text-primary">9</h1>
+                                                    <p class="mb-0">Campaign Invitations</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb-3">
+                                            <div class="card h-100">
+                                                <div class="card-body text-center">
+                                                    <h1 class="mb-1 text-success">35</h1>
+                                                    <p class="mb-0">Finished Campaigns</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb-3">
+                                            <div class="card h-100">
+                                                <div class="card-body text-center">
+                                                    <h1 class="mb-1 text-info">8</h1>
+                                                    <p class="mb-0">Accepted Campaigns</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb-3">
+                                            <div class="card h-100">
+                                                <div class="card-body text-center">
+                                                    <h1 class="mb-1 text-danger">1</h1>
+                                                    <p class="mb-0">Declined Campaigns</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Campaign List -->
+                                    <div class="section-block">
+                                        <h3 class="section-title">Campaign List</h3>
+                                    </div>
+                                    
+                                    <!-- Campaign Item 1 -->
+                                    <div class="card campaign-card mb-3">
+                                        <div class="card-body">
+                                            <div class="d-flex align-items-center">
+                                                <img src="/assets/images/slack.png" alt="Slack" class="campaign-logo me-4">
+                                                <div class="flex-grow-1">
+                                                    <h4 class="mb-2">Slack Marketing Campaign 2025</h4>
+                                                    <div class="campaign-dates">
+                                                        <span class="me-3">
+                                                            <i class="far fa-calendar me-1"></i>
+                                                            Draft Due: <span class="text-primary">24 Jan 2025</span>
+                                                        </span>
+                                                        <span class="me-3">
+                                                            <i class="far fa-calendar-check me-1"></i>
+                                                            Publish: <span class="text-secondary">30 Feb 2025</span>
+                                                        </span>
+                                                        <span>
+                                                            <i class="far fa-calendar-times me-1"></i>
+                                                            Ends: <span class="text-info">30 May 2025</span>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="card-footer bg-light">
+                                            <div class="row text-center g-0">
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">45k</h5>
+                                                        <small class="text-muted">Total Reach</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">29k</h5>
+                                                        <small class="text-muted">Total Views</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">5k</h5>
+                                                        <small class="text-muted">Total Clicks</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">4k</h5>
+                                                        <small class="text-muted">Engagement</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">2k</h5>
+                                                        <small class="text-muted">Conversion</small>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Campaign Item 2 -->
+                                    <div class="card campaign-card mb-3">
+                                        <div class="card-body">
+                                            <div class="d-flex align-items-center">
+                                                <img src="/assets/images/dribbble.png" alt="Dribbble" class="campaign-logo me-4">
+                                                <div class="flex-grow-1">
+                                                    <h4 class="mb-2">Dribbble Design Contest 2025</h4>
+                                                    <div class="campaign-dates">
+                                                        <span class="me-3">
+                                                            <i class="far fa-calendar me-1"></i>
+                                                            Draft Due: <span class="text-primary">28 Jan 2025</span>
+                                                        </span>
+                                                        <span class="me-3">
+                                                            <i class="far fa-calendar-check me-1"></i>
+                                                            Publish: <span class="text-secondary">20 March 2025</span>
+                                                        </span>
+                                                        <span>
+                                                            <i class="far fa-calendar-times me-1"></i>
+                                                            Ends: <span class="text-info">10 July 2025</span>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="card-footer bg-light">
+                                            <div class="row text-center g-0">
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">35k</h5>
+                                                        <small class="text-muted">Total Reach</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">45k</h5>
+                                                        <small class="text-muted">Total Views</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">8k</h5>
+                                                        <small class="text-muted">Total Clicks</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">10k</h5>
+                                                        <small class="text-muted">Engagement</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">3k</h5>
+                                                        <small class="text-muted">Conversion</small>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Campaign Item 3 -->
+                                    <div class="card campaign-card mb-3">
+                                        <div class="card-body">
+                                            <div class="d-flex align-items-center">
+                                                <img src="/assets/images/dropbox.png" alt="Dropbox" class="campaign-logo me-4">
+                                                <div class="flex-grow-1">
+                                                    <h4 class="mb-2">Dropbox Business Solutions</h4>
+                                                    <div class="campaign-dates">
+                                                        <span class="me-3">
+                                                            <i class="far fa-calendar me-1"></i>
+                                                            Draft Due: <span class="text-primary">05 Feb 2025</span>
+                                                        </span>
+                                                        <span class="me-3">
+                                                            <i class="far fa-calendar-check me-1"></i>
+                                                            Publish: <span class="text-secondary">14 May 2025</span>
+                                                        </span>
+                                                        <span>
+                                                            <i class="far fa-calendar-times me-1"></i>
+                                                            Ends: <span class="text-info">16 Aug 2025</span>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="card-footer bg-light">
+                                            <div class="row text-center g-0">
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">40k</h5>
+                                                        <small class="text-muted">Total Reach</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">35k</h5>
+                                                        <small class="text-muted">Total Views</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">5k</h5>
+                                                        <small class="text-muted">Total Clicks</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">15k</h5>
+                                                        <small class="text-muted">Engagement</small>
+                                                    </div>
+                                                </div>
+                                                <div class="col">
+                                                    <div class="campaign-metric">
+                                                        <h5 class="mb-0">14k</h5>
+                                                        <small class="text-muted">Conversion</small>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Packages Tab -->
+                                <div class="tab-pane fade" id="packages" role="tabpanel" aria-labelledby="packages-tab">
+                                    <div class="section-block">
+                                        <h3 class="section-title">My Packages</h3>
+                                    </div>
+                                    <div class="row">
+                                        <!-- Basic Package -->
+                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                                            <div class="card pricing-card h-100">
+                                                <div class="card-header bg-primary text-white text-center p-4">
+                                                    <h4 class="mb-0">Basic</h4>
+                                                </div>
+                                                <div class="card-body text-center">
+                                                    <h1 class="mb-1">$150</h1>
+                                                    <p class="text-muted">Per Month Platform</p>
+                                                </div>
+                                                <div class="card-body border-top">
+                                                    <ul class="list-unstyled package-features">
+                                                        <li><i class="fas fa-check text-success me-2"></i>Facebook, Instagram, Pinterest, Snapchat</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Guaranteed follower growth for increased brand awareness</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Daily updates on chosen platforms</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Stronger customer service through daily interaction</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Monthly progress report</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>1 Million Followers</li>
+                                                    </ul>
+                                                    <div class="d-grid">
+                                                        <a href="#" class="btn btn-outline-primary btn-lg">Get Started</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
+                                        <!-- Standard Package -->
+                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                                            <div class="card pricing-card h-100 featured">
+                                                <div class="position-absolute top-0 end-0 p-2">
+                                                    <span class="badge bg-warning text-dark">Popular</span>
+                                                </div>
+                                                <div class="card-header bg-info text-white text-center p-4">
+                                                    <h4 class="mb-0">Standard</h4>
+                                                </div>
+                                                <div class="card-body text-center">
+                                                    <h1 class="mb-1">$350</h1>
+                                                    <p class="text-muted">Per Month Platform</p>
+                                                </div>
+                                                <div class="card-body border-top">
+                                                    <ul class="list-unstyled package-features">
+                                                        <li><i class="fas fa-check text-success me-2"></i>Everything in Basic plan</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>2 Blog Posts & 3 Social Posts</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>5 Million Followers</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Growth Result Analytics</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Priority Support</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Content Calendar</li>
+                                                    </ul>
+                                                    <div class="d-grid">
+                                                        <a href="#" class="btn btn-info btn-lg">Get Started</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
+                                        <!-- Premium Package -->
+                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                                            <div class="card pricing-card h-100">
+                                                <div class="card-header bg-dark text-white text-center p-4">
+                                                    <h4 class="mb-0">Premium</h4>
+                                                </div>
+                                                <div class="card-body text-center">
+                                                    <h1 class="mb-1">$550</h1>
+                                                    <p class="text-muted">Per Month Platform</p>
+                                                </div>
+                                                <div class="card-body border-top">
+                                                    <ul class="list-unstyled package-features">
+                                                        <li><i class="fas fa-check text-success me-2"></i>Everything in Standard plan</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>4 Blog Posts & 6 Social Posts</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Unlimited Followers</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Advanced Analytics Dashboard</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Dedicated Account Manager</li>
+                                                        <li><i class="fas fa-check text-success me-2"></i>Custom Strategy Development</li>
+                                                    </ul>
+                                                    <div class="d-grid">
+                                                        <a href="#" class="btn btn-dark btn-lg">Contact Us</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Reviews Tab -->
+                                <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
+                                    <div class="card">
+                                        <h5 class="card-header">Campaign Reviews</h5>
+                                        <div class="card-body">
+                                            <!-- Review 1 -->
+                                            <div class="review-block mb-4">
+                                                <div class="rating-star mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </div>
+                                                <p class="review-text mb-3">"Quisque lobortis vestibulum elit, vel fermentum elit pretium et. Nullam id ultrices odio. Cras id nulla mollis, molestie diam eu, facilisis tortor. Mauris ultrices lectus laoreet commodo hendrerit. Nullam varius arcu sed aliquam imperdiet. Etiam ut luctus augue."</p>
+                                                <div class="reviewer-info">
+                                                    <strong>Tabitha C. Campbell</strong>
+                                                    <span class="text-muted">- Tech Innovations Inc.</span>
+                                                </div>
+                                            </div>
+                                            
+                                            <!-- Review 2 -->
+                                            <div class="review-block mb-4">
+                                                <div class="rating-star mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </div>
+                                                <p class="review-text mb-3">"Maecenas rutrum viverra augue. Nulla in eros vitae ante ullamcorper congue. Praesent tristique massa ac arcu dapibus tincidunt. Mauris arcu mi, lacinia et ipsum vel, sollicitudin laoreet risus."</p>
+                                                <div class="reviewer-info">
+                                                    <strong>Luise M. Michet</strong>
+                                                    <span class="text-muted">- Digital Marketing Pro</span>
+                                                </div>
+                                            </div>
+                                            
+                                            <!-- Review 3 -->
+                                            <div class="review-block mb-4">
+                                                <div class="rating-star mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </div>
+                                                <p class="review-text mb-3">"Cras non rutrum neque. Sed lacinia ex elit, vel viverra nisl faucibus eu. Aenean faucibus neque vestibulum condimentum maximus. In id porttitor nisi. Quisque sit amet commodo arcu, cursus pharetra elit. Nam tincidunt lobortis augueat euismod ante sodales non."</p>
+                                                <div class="reviewer-info">
+                                                    <strong>Gloria S. Castillo</strong>
+                                                    <span class="text-muted">- Creative Agency LLC</span>
+                                                </div>
+                                            </div>
+                                            
+                                            <!-- Review 4 -->
+                                            <div class="review-block mb-4">
+                                                <div class="rating-star mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="far fa-star text-warning"></i>
+                                                </div>
+                                                <p class="review-text mb-3">"Vestibulum cursus felis vel arcu convallis, viverra commodo felis bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non auctor est, sed lacinia velit. Orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus."</p>
+                                                <div class="reviewer-info">
+                                                    <strong>Virgina G. Lightfoot</strong>
+                                                    <span class="text-muted">- Fashion Brand Co.</span>
+                                                </div>
+                                            </div>
+                                            
+                                            <!-- Review 5 -->
+                                            <div class="review-block">
+                                                <div class="rating-star mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </div>
+                                                <p class="review-text mb-3">"Integer pretium laoreet mi ultrices tincidunt. Suspendisse eget risus nec sapien malesuada ullamcorper eu ac sapien. Maecenas nulla orci, varius ac tincidunt non, ornare a sem. Aliquam sed massa volutpat, aliquet nibh sit amet, tincidunt ex. Donec interdum pharetra dignissim."</p>
+                                                <div class="reviewer-info">
+                                                    <strong>Ruby B. Matheny</strong>
+                                                    <span class="text-muted">- StartUp Ventures</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Pagination -->
+                                    <nav aria-label="Reviews pagination" class="mt-4">
+                                        <ul class="pagination justify-content-center">
+                                            <li class="page-item">
+                                                <a class="page-link" href="#" aria-label="Previous">
+                                                    <span aria-hidden="true">&laquo;</span>
+                                                </a>
+                                            </li>
+                                            <li class="page-item"><a class="page-link" href="#">1</a></li>
+                                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
+                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                            <li class="page-item">
+                                                <a class="page-link" href="#" aria-label="Next">
+                                                    <span aria-hidden="true">&raquo;</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                                
+                                <!-- Send Message Tab -->
+                                <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
+                                    <div class="card">
+                                        <h5 class="card-header">Send Message to Michael</h5>
+                                        <div class="card-body">
+                                            <form id="messageForm">
+                                                <div class="row justify-content-center">
+                                                    <div class="col-xl-8 col-lg-10 col-md-12">
+                                                        <div class="mb-3">
+                                                            <label for="yourName" class="form-label">Your Name</label>
+                                                            <input type="text" class="form-control form-control-lg" id="yourName" required>
+                                                        </div>
+                                                        <div class="mb-3">
+                                                            <label for="yourEmail" class="form-label">Your Email</label>
+                                                            <input type="email" class="form-control form-control-lg" id="yourEmail" required>
+                                                        </div>
+                                                        <div class="mb-3">
+                                                            <label for="subject" class="form-label">Subject</label>
+                                                            <input type="text" class="form-control form-control-lg" id="subject" required>
+                                                        </div>
+                                                        <div class="mb-4">
+                                                            <label for="message" class="form-label">Message</label>
+                                                            <textarea class="form-control" id="message" rows="5" required></textarea>
+                                                        </div>
+                                                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                                                            <button type="reset" class="btn btn-outline-secondary">Clear</button>
+                                                            <button type="submit" class="btn btn-primary">
+                                                                <i class="fas fa-paper-plane me-2"></i>Send Message
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        {{> layouts/footer}}
+    </div>
+</div>
+
+<!-- Page Specific Scripts -->
+<script type="module" src="/js/pages/influencer-profile.js"></script>
+{{/inline}}
+
+{{> layouts/base}}

concept-modern/src/pages/ecommerce/checkout.html

@@ -0,0 +1,378 @@
+{{> layouts/main title="Checkout" activeMenu="ecommerce" activePage="checkout"}}
+
+{{#*inline "content"}}
+<div class="dashboard-main-wrapper">
+    <!-- Header -->
+    {{> layouts/header}}
+    
+    <!-- Sidebar -->
+    {{> layouts/sidebar activeMenu="ecommerce" activePage="checkout"}}
+    
+    <!-- Main Content -->
+    <div class="dashboard-wrapper">
+        <div class="dashboard-ecommerce">
+            <div class="container-fluid dashboard-content">
+                <!-- Page Header -->
+                <div class="row">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="page-header">
+                            <h2 class="pageheader-title">Checkout</h2>
+                            <p class="pageheader-text">Complete your purchase by providing shipping and payment information.</p>
+                            <div class="page-breadcrumb">
+                                <nav aria-label="breadcrumb">
+                                    <ol class="breadcrumb">
+                                        <li class="breadcrumb-item"><a href="/" class="breadcrumb-link">Dashboard</a></li>
+                                        <li class="breadcrumb-item"><a href="/pages/ecommerce/products.html" class="breadcrumb-link">E-Commerce</a></li>
+                                        <li class="breadcrumb-item active" aria-current="page">Checkout</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Checkout Steps -->
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <div class="checkout-steps">
+                            <div class="step active">
+                                <div class="step-icon">
+                                    <i class="fas fa-shopping-cart"></i>
+                                </div>
+                                <div class="step-title">Cart</div>
+                            </div>
+                            <div class="step active">
+                                <div class="step-icon">
+                                    <i class="fas fa-truck"></i>
+                                </div>
+                                <div class="step-title">Shipping</div>
+                            </div>
+                            <div class="step">
+                                <div class="step-icon">
+                                    <i class="fas fa-credit-card"></i>
+                                </div>
+                                <div class="step-title">Payment</div>
+                            </div>
+                            <div class="step">
+                                <div class="step-icon">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                                <div class="step-title">Confirm</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="row">
+                    <!-- Checkout Form -->
+                    <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
+                        <!-- Shipping Information -->
+                        <div class="card mb-4">
+                            <div class="card-header">
+                                <h5 class="mb-0">Shipping Information</h5>
+                            </div>
+                            <div class="card-body">
+                                <form id="shippingForm">
+                                    <div class="row">
+                                        <div class="col-md-6 mb-3">
+                                            <label for="firstName" class="form-label">First Name</label>
+                                            <input type="text" class="form-control" id="firstName" required>
+                                        </div>
+                                        <div class="col-md-6 mb-3">
+                                            <label for="lastName" class="form-label">Last Name</label>
+                                            <input type="text" class="form-control" id="lastName" required>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mb-3">
+                                        <label for="email" class="form-label">Email Address</label>
+                                        <input type="email" class="form-control" id="email" placeholder="you@example.com" required>
+                                    </div>
+                                    
+                                    <div class="mb-3">
+                                        <label for="phone" class="form-label">Phone Number</label>
+                                        <input type="tel" class="form-control" id="phone" placeholder="+1 (555) 123-4567" required>
+                                    </div>
+                                    
+                                    <div class="mb-3">
+                                        <label for="address" class="form-label">Address</label>
+                                        <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
+                                    </div>
+                                    
+                                    <div class="mb-3">
+                                        <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
+                                        <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
+                                    </div>
+                                    
+                                    <div class="row">
+                                        <div class="col-md-5 mb-3">
+                                            <label for="country" class="form-label">Country</label>
+                                            <select class="form-select" id="country" required>
+                                                <option value="">Choose...</option>
+                                                <option value="US" selected>United States</option>
+                                                <option value="CA">Canada</option>
+                                                <option value="UK">United Kingdom</option>
+                                                <option value="AU">Australia</option>
+                                            </select>
+                                        </div>
+                                        <div class="col-md-4 mb-3">
+                                            <label for="state" class="form-label">State</label>
+                                            <select class="form-select" id="state" required>
+                                                <option value="">Choose...</option>
+                                                <option value="CA">California</option>
+                                                <option value="NY">New York</option>
+                                                <option value="TX">Texas</option>
+                                                <option value="FL">Florida</option>
+                                            </select>
+                                        </div>
+                                        <div class="col-md-3 mb-3">
+                                            <label for="zip" class="form-label">Zip</label>
+                                            <input type="text" class="form-control" id="zip" required>
+                                        </div>
+                                    </div>
+                                    
+                                    <hr class="mb-4">
+                                    
+                                    <div class="form-check mb-3">
+                                        <input type="checkbox" class="form-check-input" id="sameAddress">
+                                        <label class="form-check-label" for="sameAddress">
+                                            Billing address is the same as shipping address
+                                        </label>
+                                    </div>
+                                    
+                                    <div class="form-check mb-3">
+                                        <input type="checkbox" class="form-check-input" id="saveInfo">
+                                        <label class="form-check-label" for="saveInfo">
+                                            Save this information for next time
+                                        </label>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                        
+                        <!-- Payment Information -->
+                        <div class="card mb-4">
+                            <div class="card-header">
+                                <h5 class="mb-0">Payment Information</h5>
+                            </div>
+                            <div class="card-body">
+                                <div class="payment-methods mb-4">
+                                    <div class="form-check mb-2">
+                                        <input class="form-check-input" type="radio" name="paymentMethod" id="creditCard" checked>
+                                        <label class="form-check-label" for="creditCard">
+                                            <i class="fas fa-credit-card me-2"></i>Credit/Debit Card
+                                        </label>
+                                    </div>
+                                    <div class="form-check mb-2">
+                                        <input class="form-check-input" type="radio" name="paymentMethod" id="paypal">
+                                        <label class="form-check-label" for="paypal">
+                                            <i class="fab fa-paypal me-2"></i>PayPal
+                                        </label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="radio" name="paymentMethod" id="applePay">
+                                        <label class="form-check-label" for="applePay">
+                                            <i class="fab fa-apple me-2"></i>Apple Pay
+                                        </label>
+                                    </div>
+                                </div>
+                                
+                                <div id="creditCardForm">
+                                    <div class="mb-3">
+                                        <label for="cardName" class="form-label">Name on Card</label>
+                                        <input type="text" class="form-control" id="cardName" required>
+                                        <small class="text-muted">Full name as displayed on card</small>
+                                    </div>
+                                    
+                                    <div class="mb-3">
+                                        <label for="cardNumber" class="form-label">Card Number</label>
+                                        <div class="input-group">
+                                            <input type="text" class="form-control" id="cardNumber" placeholder="1234 5678 9012 3456" required>
+                                            <span class="input-group-text">
+                                                <i class="fab fa-cc-visa me-1"></i>
+                                                <i class="fab fa-cc-mastercard me-1"></i>
+                                                <i class="fab fa-cc-amex"></i>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="row">
+                                        <div class="col-md-6 mb-3">
+                                            <label for="expiry" class="form-label">Expiry Date</label>
+                                            <input type="text" class="form-control" id="expiry" placeholder="MM/YY" required>
+                                        </div>
+                                        <div class="col-md-6 mb-3">
+                                            <label for="cvv" class="form-label">CVV</label>
+                                            <input type="text" class="form-control" id="cvv" placeholder="123" required>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div id="paypalForm" style="display: none;">
+                                    <div class="text-center py-4">
+                                        <p class="mb-3">You will be redirected to PayPal to complete your purchase.</p>
+                                        <button class="btn btn-warning btn-lg">
+                                            <i class="fab fa-paypal me-2"></i>Continue with PayPal
+                                        </button>
+                                    </div>
+                                </div>
+                                
+                                <div id="applePayForm" style="display: none;">
+                                    <div class="text-center py-4">
+                                        <p class="mb-3">Use Touch ID or Face ID to complete your purchase.</p>
+                                        <button class="btn btn-dark btn-lg">
+                                            <i class="fab fa-apple me-2"></i>Pay with Apple Pay
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Order Summary -->
+                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="mb-0">Order Summary</h5>
+                            </div>
+                            <div class="card-body">
+                                <!-- Cart Items -->
+                                <div class="order-items mb-3">
+                                    <div class="order-item d-flex justify-content-between align-items-start mb-3">
+                                        <div class="d-flex">
+                                            <img src="/assets/images/eco-product-img-1.png" alt="Product" width="60" class="me-3">
+                                            <div>
+                                                <h6 class="mb-1">iPhone 15 Pro Max</h6>
+                                                <small class="text-muted">512GB, Natural Titanium</small>
+                                                <div class="text-muted small">Qty: 1</div>
+                                            </div>
+                                        </div>
+                                        <span class="fw-bold">$1,399</span>
+                                    </div>
+                                    
+                                    <div class="order-item d-flex justify-content-between align-items-start mb-3">
+                                        <div class="d-flex">
+                                            <img src="/assets/images/eco-product-img-3.png" alt="Product" width="60" class="me-3">
+                                            <div>
+                                                <h6 class="mb-1">AirPods Pro</h6>
+                                                <small class="text-muted">2nd Generation</small>
+                                                <div class="text-muted small">Qty: 1</div>
+                                            </div>
+                                        </div>
+                                        <span class="fw-bold">$249</span>
+                                    </div>
+                                </div>
+                                
+                                <hr>
+                                
+                                <!-- Promo Code -->
+                                <div class="mb-3">
+                                    <label for="promoCode" class="form-label small text-muted">Promo Code</label>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control" id="promoCode" placeholder="Enter code">
+                                        <button class="btn btn-outline-secondary" type="button">Apply</button>
+                                    </div>
+                                </div>
+                                
+                                <hr>
+                                
+                                <!-- Order Totals -->
+                                <div class="order-totals">
+                                    <div class="d-flex justify-content-between mb-2">
+                                        <span>Subtotal</span>
+                                        <span>$1,648.00</span>
+                                    </div>
+                                    <div class="d-flex justify-content-between mb-2">
+                                        <span>Shipping</span>
+                                        <span>$15.00</span>
+                                    </div>
+                                    <div class="d-flex justify-content-between mb-2">
+                                        <span>Tax</span>
+                                        <span>$149.67</span>
+                                    </div>
+                                    <hr>
+                                    <div class="d-flex justify-content-between mb-3">
+                                        <strong>Total</strong>
+                                        <strong class="text-primary h5 mb-0">$1,812.67</strong>
+                                    </div>
+                                </div>
+                                
+                                <button class="btn btn-primary btn-lg w-100" onclick="completeOrder()">
+                                    <i class="fas fa-lock me-2"></i>Complete Order
+                                </button>
+                                
+                                <div class="text-center mt-3">
+                                    <small class="text-muted">
+                                        <i class="fas fa-shield-alt me-1"></i>
+                                        Secure checkout powered by SSL encryption
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Trust Badges -->
+                        <div class="card mt-3">
+                            <div class="card-body text-center">
+                                <h6 class="mb-3">We Accept</h6>
+                                <div class="payment-icons">
+                                    <i class="fab fa-cc-visa fa-2x me-2 text-muted"></i>
+                                    <i class="fab fa-cc-mastercard fa-2x me-2 text-muted"></i>
+                                    <i class="fab fa-cc-amex fa-2x me-2 text-muted"></i>
+                                    <i class="fab fa-cc-paypal fa-2x text-muted"></i>
+                                </div>
+                                <hr>
+                                <div class="d-flex justify-content-around small text-muted">
+                                    <div>
+                                        <i class="fas fa-shipping-fast mb-2 d-block"></i>
+                                        Free Shipping
+                                    </div>
+                                    <div>
+                                        <i class="fas fa-undo mb-2 d-block"></i>
+                                        30-Day Returns
+                                    </div>
+                                    <div>
+                                        <i class="fas fa-lock mb-2 d-block"></i>
+                                        Secure Checkout
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        {{> layouts/footer}}
+    </div>
+</div>
+
+<!-- Page Specific Scripts -->
+<script type="module" src="/js/pages/checkout.js"></script>
+
+<script>
+// Payment method toggle
+document.querySelectorAll('input[name="paymentMethod"]').forEach(radio => {
+    radio.addEventListener('change', function() {
+        document.getElementById('creditCardForm').style.display = 'none';
+        document.getElementById('paypalForm').style.display = 'none';
+        document.getElementById('applePayForm').style.display = 'none';
+        
+        if (this.id === 'creditCard') {
+            document.getElementById('creditCardForm').style.display = 'block';
+        } else if (this.id === 'paypal') {
+            document.getElementById('paypalForm').style.display = 'block';
+        } else if (this.id === 'applePay') {
+            document.getElementById('applePayForm').style.display = 'block';
+        }
+    });
+});
+
+function completeOrder() {
+    // In real app, would validate and submit order
+    alert('Order completed successfully!');
+}
+</script>
+{{/inline}}
+
+{{> layouts/base}}

concept-modern/src/pages/ecommerce/product-single.html

@@ -0,0 +1,574 @@
+{{> layouts/main title="Product Details" activeMenu="ecommerce" activePage="product-single"}}
+
+{{#*inline "content"}}
+<div class="dashboard-main-wrapper">
+    <!-- Header -->
+    {{> layouts/header}}
+    
+    <!-- Sidebar -->
+    {{> layouts/sidebar activeMenu="ecommerce" activePage="product-single"}}
+    
+    <!-- Main Content -->
+    <div class="dashboard-wrapper">
+        <div class="dashboard-ecommerce">
+            <div class="container-fluid dashboard-content">
+                <!-- Page Header -->
+                <div class="row">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="page-header">
+                            <h2 class="pageheader-title">Product Details</h2>
+                            <p class="pageheader-text">View detailed product information, specifications, and customer reviews.</p>
+                            <div class="page-breadcrumb">
+                                <nav aria-label="breadcrumb">
+                                    <ol class="breadcrumb">
+                                        <li class="breadcrumb-item"><a href="/" class="breadcrumb-link">Dashboard</a></li>
+                                        <li class="breadcrumb-item"><a href="/pages/ecommerce/products.html" class="breadcrumb-link">E-Commerce</a></li>
+                                        <li class="breadcrumb-item active" aria-current="page">Product Details</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Product Details -->
+                <div class="row">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="row">
+                                    <!-- Product Images -->
+                                    <div class="col-xl-6 col-lg-6 col-md-12">
+                                        <div class="product-images">
+                                            <div class="main-image mb-3">
+                                                <img src="/assets/images/eco-product-img-1.png" alt="Product" class="img-fluid" id="mainImage">
+                                            </div>
+                                            <div class="image-thumbnails d-flex gap-2">
+                                                <img src="/assets/images/eco-product-img-1.png" alt="Thumb 1" class="img-thumbnail active" width="80" onclick="changeImage(this)">
+                                                <img src="/assets/images/eco-product-img-2.png" alt="Thumb 2" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="/assets/images/eco-product-img-3.png" alt="Thumb 3" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="/assets/images/eco-product-img-4.png" alt="Thumb 4" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Product Info -->
+                                    <div class="col-xl-6 col-lg-6 col-md-12">
+                                        <div class="product-info">
+                                            <h1 class="h3 mb-2">Apple iPhone 15 Pro Max</h1>
+                                            <div class="d-flex align-items-center mb-3">
+                                                <div class="rating me-3">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star-half-alt text-warning"></i>
+                                                    <span class="ms-2">(4.5)</span>
+                                                </div>
+                                                <span class="text-muted">|</span>
+                                                <a href="#reviews" class="ms-3 text-decoration-none">125 Reviews</a>
+                                                <span class="text-muted ms-3">|</span>
+                                                <span class="ms-3 text-success">In Stock</span>
+                                            </div>
+                                            
+                                            <div class="price mb-4">
+                                                <h3 class="text-primary mb-0">$1,199.00</h3>
+                                                <del class="text-muted">$1,399.00</del>
+                                                <span class="badge bg-danger ms-2">-14% OFF</span>
+                                            </div>
+                                            
+                                            <p class="mb-4">The iPhone 15 Pro Max features a strong and light titanium design with a 6.7-inch Super Retina XDR display. It's powered by the A17 Pro chip with pro-level GPU performance.</p>
+                                            
+                                            <!-- Product Options -->
+                                            <div class="product-options mb-4">
+                                                <div class="mb-3">
+                                                    <label class="form-label fw-bold">Color:</label>
+                                                    <div class="color-options d-flex gap-2">
+                                                        <input type="radio" class="btn-check" name="color" id="color1" checked>
+                                                        <label class="btn btn-outline-secondary" for="color1">Natural Titanium</label>
+                                                        
+                                                        <input type="radio" class="btn-check" name="color" id="color2">
+                                                        <label class="btn btn-outline-secondary" for="color2">Blue Titanium</label>
+                                                        
+                                                        <input type="radio" class="btn-check" name="color" id="color3">
+                                                        <label class="btn btn-outline-secondary" for="color3">White Titanium</label>
+                                                        
+                                                        <input type="radio" class="btn-check" name="color" id="color4">
+                                                        <label class="btn btn-outline-secondary" for="color4">Black Titanium</label>
+                                                    </div>
+                                                </div>
+                                                
+                                                <div class="mb-3">
+                                                    <label class="form-label fw-bold">Storage:</label>
+                                                    <div class="storage-options d-flex gap-2">
+                                                        <input type="radio" class="btn-check" name="storage" id="storage1">
+                                                        <label class="btn btn-outline-secondary" for="storage1">256GB</label>
+                                                        
+                                                        <input type="radio" class="btn-check" name="storage" id="storage2" checked>
+                                                        <label class="btn btn-outline-secondary" for="storage2">512GB</label>
+                                                        
+                                                        <input type="radio" class="btn-check" name="storage" id="storage3">
+                                                        <label class="btn btn-outline-secondary" for="storage3">1TB</label>
+                                                    </div>
+                                                </div>
+                                                
+                                                <div class="mb-4">
+                                                    <label class="form-label fw-bold">Quantity:</label>
+                                                    <div class="input-group" style="width: 150px;">
+                                                        <button class="btn btn-outline-secondary" type="button" onclick="decreaseQuantity()">-</button>
+                                                        <input type="number" class="form-control text-center" value="1" min="1" id="quantity">
+                                                        <button class="btn btn-outline-secondary" type="button" onclick="increaseQuantity()">+</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            
+                                            <!-- Action Buttons -->
+                                            <div class="d-flex gap-2 mb-4">
+                                                <button class="btn btn-primary btn-lg flex-fill">
+                                                    <i class="fas fa-shopping-cart me-2"></i>Add to Cart
+                                                </button>
+                                                <button class="btn btn-success btn-lg flex-fill">
+                                                    <i class="fas fa-bolt me-2"></i>Buy Now
+                                                </button>
+                                                <button class="btn btn-outline-secondary btn-lg">
+                                                    <i class="far fa-heart"></i>
+                                                </button>
+                                            </div>
+                                            
+                                            <!-- Product Meta -->
+                                            <div class="product-meta">
+                                                <p class="mb-2"><strong>SKU:</strong> <span class="text-muted">APL-IP15PM-512</span></p>
+                                                <p class="mb-2"><strong>Category:</strong> <a href="#" class="text-decoration-none">Electronics</a>, <a href="#" class="text-decoration-none">Smartphones</a></p>
+                                                <p class="mb-2"><strong>Tags:</strong> 
+                                                    <a href="#" class="badge bg-light text-dark text-decoration-none">iPhone</a>
+                                                    <a href="#" class="badge bg-light text-dark text-decoration-none">Apple</a>
+                                                    <a href="#" class="badge bg-light text-dark text-decoration-none">5G</a>
+                                                    <a href="#" class="badge bg-light text-dark text-decoration-none">Pro Camera</a>
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Product Tabs -->
+                <div class="row mt-4">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <ul class="nav nav-tabs card-header-tabs" id="productTabs" role="tablist">
+                                    <li class="nav-item" role="presentation">
+                                        <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab">Description</button>
+                                    </li>
+                                    <li class="nav-item" role="presentation">
+                                        <button class="nav-link" id="specifications-tab" data-bs-toggle="tab" data-bs-target="#specifications" type="button" role="tab">Specifications</button>
+                                    </li>
+                                    <li class="nav-item" role="presentation">
+                                        <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab">Reviews (125)</button>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="card-body">
+                                <div class="tab-content" id="productTabsContent">
+                                    <!-- Description Tab -->
+                                    <div class="tab-pane fade show active" id="description" role="tabpanel">
+                                        <h5>Product Description</h5>
+                                        <p>The iPhone 15 Pro Max is forged in titanium and features the groundbreaking A17 Pro chip, a customizable Action button, and the most powerful iPhone camera system ever.</p>
+                                        
+                                        <h6 class="mt-4">Key Features:</h6>
+                                        <ul>
+                                            <li>6.7-inch Super Retina XDR display with ProMotion</li>
+                                            <li>A17 Pro chip with 6-core GPU</li>
+                                            <li>Pro camera system (48MP Main, 12MP Ultra Wide, 12MP 5x Telephoto)</li>
+                                            <li>Up to 29 hours of video playback</li>
+                                            <li>USB-C connector with USB 3 support</li>
+                                            <li>Emergency SOS via satellite</li>
+                                            <li>Crash Detection</li>
+                                        </ul>
+                                        
+                                        <h6 class="mt-4">What's in the Box:</h6>
+                                        <ul>
+                                            <li>iPhone 15 Pro Max</li>
+                                            <li>USB-C Charge Cable (1m)</li>
+                                            <li>Documentation</li>
+                                        </ul>
+                                    </div>
+                                    
+                                    <!-- Specifications Tab -->
+                                    <div class="tab-pane fade" id="specifications" role="tabpanel">
+                                        <h5>Technical Specifications</h5>
+                                        <div class="table-responsive">
+                                            <table class="table table-striped">
+                                                <tbody>
+                                                    <tr>
+                                                        <td width="30%"><strong>Display</strong></td>
+                                                        <td>6.7-inch (diagonal) all-screen OLED display, 2796×1290-pixel resolution at 460 ppi</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td><strong>Chip</strong></td>
+                                                        <td>A17 Pro chip, 6-core CPU with 2 performance and 4 efficiency cores, 6-core GPU, 16-core Neural Engine</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td><strong>Camera</strong></td>
+                                                        <td>Pro camera system: 48MP Main, 12MP Ultra Wide, 12MP 5x Telephoto</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td><strong>Video Recording</strong></td>
+                                                        <td>4K video recording at 24/25/30/60 fps, ProRes video recording</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td><strong>Battery Life</strong></td>
+                                                        <td>Video playback: Up to 29 hours, Audio playback: Up to 95 hours</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td><strong>Dimensions</strong></td>
+                                                        <td>159.9 × 76.7 × 8.25 mm</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td><strong>Weight</strong></td>
+                                                        <td>221 grams</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td><strong>Water Resistance</strong></td>
+                                                        <td>IP68 (maximum depth of 6 meters up to 30 minutes)</td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Reviews Tab -->
+                                    <div class="tab-pane fade" id="reviews" role="tabpanel">
+                                        <div class="row">
+                                            <div class="col-md-4">
+                                                <h5>Customer Reviews</h5>
+                                                <div class="text-center mb-4">
+                                                    <h2 class="mb-0">4.5</h2>
+                                                    <div class="rating">
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star text-warning"></i>
+                                                        <i class="fas fa-star-half-alt text-warning"></i>
+                                                    </div>
+                                                    <p class="text-muted">Based on 125 reviews</p>
+                                                </div>
+                                                
+                                                <!-- Rating Breakdown -->
+                                                <div class="rating-breakdown">
+                                                    <div class="d-flex align-items-center mb-2">
+                                                        <span class="me-2">5</span>
+                                                        <i class="fas fa-star text-warning small me-2"></i>
+                                                        <div class="progress flex-grow-1 me-2" style="height: 10px;">
+                                                            <div class="progress-bar bg-warning" style="width: 65%"></div>
+                                                        </div>
+                                                        <span class="small">65%</span>
+                                                    </div>
+                                                    <div class="d-flex align-items-center mb-2">
+                                                        <span class="me-2">4</span>
+                                                        <i class="fas fa-star text-warning small me-2"></i>
+                                                        <div class="progress flex-grow-1 me-2" style="height: 10px;">
+                                                            <div class="progress-bar bg-warning" style="width: 20%"></div>
+                                                        </div>
+                                                        <span class="small">20%</span>
+                                                    </div>
+                                                    <div class="d-flex align-items-center mb-2">
+                                                        <span class="me-2">3</span>
+                                                        <i class="fas fa-star text-warning small me-2"></i>
+                                                        <div class="progress flex-grow-1 me-2" style="height: 10px;">
+                                                            <div class="progress-bar bg-warning" style="width: 10%"></div>
+                                                        </div>
+                                                        <span class="small">10%</span>
+                                                    </div>
+                                                    <div class="d-flex align-items-center mb-2">
+                                                        <span class="me-2">2</span>
+                                                        <i class="fas fa-star text-warning small me-2"></i>
+                                                        <div class="progress flex-grow-1 me-2" style="height: 10px;">
+                                                            <div class="progress-bar bg-warning" style="width: 3%"></div>
+                                                        </div>
+                                                        <span class="small">3%</span>
+                                                    </div>
+                                                    <div class="d-flex align-items-center mb-2">
+                                                        <span class="me-2">1</span>
+                                                        <i class="fas fa-star text-warning small me-2"></i>
+                                                        <div class="progress flex-grow-1 me-2" style="height: 10px;">
+                                                            <div class="progress-bar bg-warning" style="width: 2%"></div>
+                                                        </div>
+                                                        <span class="small">2%</span>
+                                                    </div>
+                                                </div>
+                                                
+                                                <button class="btn btn-primary w-100 mt-3" data-bs-toggle="modal" data-bs-target="#reviewModal">Write a Review</button>
+                                            </div>
+                                            
+                                            <div class="col-md-8">
+                                                <!-- Individual Reviews -->
+                                                <div class="reviews-list">
+                                                    <div class="review-item border-bottom pb-3 mb-3">
+                                                        <div class="d-flex justify-content-between mb-2">
+                                                            <div>
+                                                                <strong>John Doe</strong>
+                                                                <div class="rating small">
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                </div>
+                                                            </div>
+                                                            <small class="text-muted">2 days ago</small>
+                                                        </div>
+                                                        <p class="mb-0">Amazing phone! The camera quality is outstanding and the titanium build feels premium. Battery life is excellent too.</p>
+                                                    </div>
+                                                    
+                                                    <div class="review-item border-bottom pb-3 mb-3">
+                                                        <div class="d-flex justify-content-between mb-2">
+                                                            <div>
+                                                                <strong>Jane Smith</strong>
+                                                                <div class="rating small">
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="far fa-star text-warning"></i>
+                                                                </div>
+                                                            </div>
+                                                            <small class="text-muted">1 week ago</small>
+                                                        </div>
+                                                        <p class="mb-0">Great upgrade from my iPhone 13. The Action button is very useful. Only complaint is the price, but you get what you pay for.</p>
+                                                    </div>
+                                                    
+                                                    <div class="review-item">
+                                                        <div class="d-flex justify-content-between mb-2">
+                                                            <div>
+                                                                <strong>Mike Johnson</strong>
+                                                                <div class="rating small">
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                    <i class="fas fa-star text-warning"></i>
+                                                                </div>
+                                                            </div>
+                                                            <small class="text-muted">2 weeks ago</small>
+                                                        </div>
+                                                        <p class="mb-0">The A17 Pro chip is incredibly fast. Gaming performance is console-level. The 5x zoom camera is a game changer for photography.</p>
+                                                    </div>
+                                                </div>
+                                                
+                                                <nav class="mt-4">
+                                                    <ul class="pagination justify-content-center">
+                                                        <li class="page-item disabled">
+                                                            <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                                        </li>
+                                                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
+                                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                                        <li class="page-item">
+                                                            <a class="page-link" href="#">Next</a>
+                                                        </li>
+                                                    </ul>
+                                                </nav>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Related Products -->
+                <div class="row mt-4">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="mb-0">Related Products</h5>
+                            </div>
+                            <div class="card-body">
+                                <div class="row">
+                                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                                        <div class="card product-card h-100">
+                                            <div class="card-header p-0">
+                                                <img src="/assets/images/eco-product-img-2.png" alt="Product" class="img-fluid">
+                                            </div>
+                                            <div class="card-body">
+                                                <h6 class="card-title mb-1">
+                                                    <a href="#" class="text-decoration-none text-dark">iPhone 15 Pro</a>
+                                                </h6>
+                                                <div class="rating small mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star-half-alt text-warning"></i>
+                                                </div>
+                                                <div class="d-flex justify-content-between align-items-center">
+                                                    <span class="h5 mb-0 text-primary">$999</span>
+                                                    <button class="btn btn-sm btn-primary">Add to Cart</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                                        <div class="card product-card h-100">
+                                            <div class="card-header p-0">
+                                                <img src="/assets/images/eco-product-img-3.png" alt="Product" class="img-fluid">
+                                            </div>
+                                            <div class="card-body">
+                                                <h6 class="card-title mb-1">
+                                                    <a href="#" class="text-decoration-none text-dark">AirPods Pro</a>
+                                                </h6>
+                                                <div class="rating small mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="far fa-star text-warning"></i>
+                                                </div>
+                                                <div class="d-flex justify-content-between align-items-center">
+                                                    <span class="h5 mb-0 text-primary">$249</span>
+                                                    <button class="btn btn-sm btn-primary">Add to Cart</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                                        <div class="card product-card h-100">
+                                            <div class="card-header p-0">
+                                                <img src="/assets/images/eco-product-img-4.png" alt="Product" class="img-fluid">
+                                            </div>
+                                            <div class="card-body">
+                                                <h6 class="card-title mb-1">
+                                                    <a href="#" class="text-decoration-none text-dark">MagSafe Charger</a>
+                                                </h6>
+                                                <div class="rating small mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </div>
+                                                <div class="d-flex justify-content-between align-items-center">
+                                                    <span class="h5 mb-0 text-primary">$39</span>
+                                                    <button class="btn btn-sm btn-primary">Add to Cart</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                                        <div class="card product-card h-100">
+                                            <div class="card-header p-0">
+                                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
+                                                    <i class="fas fa-mobile-alt fa-3x text-muted"></i>
+                                                </div>
+                                            </div>
+                                            <div class="card-body">
+                                                <h6 class="card-title mb-1">
+                                                    <a href="#" class="text-decoration-none text-dark">iPhone Case</a>
+                                                </h6>
+                                                <div class="rating small mb-2">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="fas fa-star text-warning"></i>
+                                                    <i class="far fa-star text-warning"></i>
+                                                </div>
+                                                <div class="d-flex justify-content-between align-items-center">
+                                                    <span class="h5 mb-0 text-primary">$59</span>
+                                                    <button class="btn btn-sm btn-primary">Add to Cart</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        {{> layouts/footer}}
+    </div>
+</div>
+
+<!-- Review Modal -->
+<div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="reviewModalLabel">Write a Review</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="reviewForm">
+                    <div class="mb-3">
+                        <label class="form-label">Rating</label>
+                        <div class="star-rating">
+                            <i class="far fa-star" data-rating="1"></i>
+                            <i class="far fa-star" data-rating="2"></i>
+                            <i class="far fa-star" data-rating="3"></i>
+                            <i class="far fa-star" data-rating="4"></i>
+                            <i class="far fa-star" data-rating="5"></i>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="reviewTitle" class="form-label">Review Title</label>
+                        <input type="text" class="form-control" id="reviewTitle" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="reviewText" class="form-label">Your Review</label>
+                        <textarea class="form-control" id="reviewText" rows="4" required></textarea>
+                    </div>
+                    <div class="mb-3">
+                        <label for="reviewName" class="form-label">Your Name</label>
+                        <input type="text" class="form-control" id="reviewName" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="reviewEmail" class="form-label">Email Address</label>
+                        <input type="email" class="form-control" id="reviewEmail" required>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="submit" form="reviewForm" class="btn btn-primary">Submit Review</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Page Specific Scripts -->
+<script type="module" src="/js/pages/product-single.js"></script>
+
+<script>
+// Quick inline scripts for image switching
+function changeImage(thumb) {
+    document.getElementById('mainImage').src = thumb.src;
+    document.querySelectorAll('.image-thumbnails img').forEach(img => img.classList.remove('active'));
+    thumb.classList.add('active');
+}
+
+function increaseQuantity() {
+    const input = document.getElementById('quantity');
+    input.value = parseInt(input.value) + 1;
+}
+
+function decreaseQuantity() {
+    const input = document.getElementById('quantity');
+    if (parseInt(input.value) > 1) {
+        input.value = parseInt(input.value) - 1;
+    }
+}
+</script>
+{{/inline}}
+
+{{> layouts/base}}

concept-modern/src/pages/ecommerce/products.html

@@ -0,0 +1,578 @@
+{{> layouts/main title="Products" activeMenu="ecommerce" activePage="products"}}
+
+{{#*inline "content"}}
+<div class="dashboard-main-wrapper">
+    <!-- Header -->
+    {{> layouts/header}}
+    
+    <!-- Sidebar -->
+    {{> layouts/sidebar activeMenu="ecommerce" activePage="products"}}
+    
+    <!-- Main Content -->
+    <div class="dashboard-wrapper">
+        <div class="dashboard-ecommerce">
+            <div class="container-fluid dashboard-content">
+                <!-- Page Header -->
+                <div class="row">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="page-header">
+                            <h2 class="pageheader-title">Products</h2>
+                            <p class="pageheader-text">Browse and manage your product catalog with advanced filtering and search capabilities.</p>
+                            <div class="page-breadcrumb">
+                                <nav aria-label="breadcrumb">
+                                    <ol class="breadcrumb">
+                                        <li class="breadcrumb-item"><a href="/" class="breadcrumb-link">Dashboard</a></li>
+                                        <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">E-Commerce</a></li>
+                                        <li class="breadcrumb-item active" aria-current="page">Products</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Filters and Search -->
+                <div class="row mb-4">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="row align-items-center">
+                                    <div class="col-xl-6 col-lg-6 col-md-12">
+                                        <div class="input-group">
+                                            <input type="text" class="form-control" placeholder="Search products..." id="productSearch">
+                                            <button class="btn btn-primary" type="button">
+                                                <i class="fas fa-search"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="col-xl-6 col-lg-6 col-md-12">
+                                        <div class="d-flex gap-2 justify-content-lg-end mt-3 mt-lg-0">
+                                            <select class="form-select" id="categoryFilter">
+                                                <option value="">All Categories</option>
+                                                <option value="electronics">Electronics</option>
+                                                <option value="fashion">Fashion</option>
+                                                <option value="home">Home & Garden</option>
+                                                <option value="sports">Sports & Outdoors</option>
+                                                <option value="books">Books</option>
+                                            </select>
+                                            <select class="form-select" id="sortBy">
+                                                <option value="featured">Featured</option>
+                                                <option value="price-low">Price: Low to High</option>
+                                                <option value="price-high">Price: High to Low</option>
+                                                <option value="newest">Newest First</option>
+                                                <option value="rating">Best Rated</option>
+                                            </select>
+                                            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProductModal">
+                                                <i class="fas fa-plus me-1"></i>Add Product
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Product Stats -->
+                <div class="row">
+                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="d-inline-block">
+                                    <h5 class="text-muted">Total Products</h5>
+                                    <h2 class="mb-0">2,386</h2>
+                                </div>
+                                <div class="float-end">
+                                    <i class="fas fa-box fa-2x text-primary"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="d-inline-block">
+                                    <h5 class="text-muted">Active Products</h5>
+                                    <h2 class="mb-0">1,953</h2>
+                                </div>
+                                <div class="float-end">
+                                    <i class="fas fa-check-circle fa-2x text-success"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="d-inline-block">
+                                    <h5 class="text-muted">Out of Stock</h5>
+                                    <h2 class="mb-0">147</h2>
+                                </div>
+                                <div class="float-end">
+                                    <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="d-inline-block">
+                                    <h5 class="text-muted">Categories</h5>
+                                    <h2 class="mb-0">24</h2>
+                                </div>
+                                <div class="float-end">
+                                    <i class="fas fa-tags fa-2x text-info"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Product Grid -->
+                <div class="row">
+                    <!-- Product Card 1 -->
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <img src="/assets/images/eco-product-img-1.png" alt="Product" class="img-fluid">
+                                <span class="badge bg-danger position-absolute top-0 end-0 m-2">-20%</span>
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Apple iPhone 15 Pro</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star-half-alt text-warning"></i>
+                                    <small class="text-muted">(125)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Latest flagship smartphone with advanced features</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$999</span>
+                                        <span class="text-muted text-decoration-line-through small">$1,199</span>
+                                    </div>
+                                    <span class="badge bg-success">In Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-primary btn-sm w-100">
+                                    <i class="fas fa-shopping-cart me-1"></i>Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Product Card 2 -->
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <img src="/assets/images/eco-product-img-2.png" alt="Product" class="img-fluid">
+                                <span class="badge bg-success position-absolute top-0 end-0 m-2">New</span>
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">MacBook Pro 16"</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <small class="text-muted">(89)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Professional laptop with M3 Pro chip</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$2,499</span>
+                                    </div>
+                                    <span class="badge bg-success">In Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-primary btn-sm w-100">
+                                    <i class="fas fa-shopping-cart me-1"></i>Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Product Card 3 -->
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <img src="/assets/images/eco-product-img-3.png" alt="Product" class="img-fluid">
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Sony WH-1000XM5</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <small class="text-muted">(156)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Premium noise-canceling headphones</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$399</span>
+                                    </div>
+                                    <span class="badge bg-warning text-dark">Low Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-primary btn-sm w-100">
+                                    <i class="fas fa-shopping-cart me-1"></i>Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Product Card 4 -->
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <img src="/assets/images/eco-product-img-4.png" alt="Product" class="img-fluid">
+                                <span class="badge bg-danger position-absolute top-0 end-0 m-2">Hot</span>
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Samsung Galaxy S24</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="far fa-star text-warning"></i>
+                                    <small class="text-muted">(98)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Android flagship with AI features</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$899</span>
+                                    </div>
+                                    <span class="badge bg-danger">Out of Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-secondary btn-sm w-100" disabled>
+                                    <i class="fas fa-bell me-1"></i>Notify Me
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- More Product Cards... -->
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
+                                    <i class="fas fa-laptop fa-3x text-muted"></i>
+                                </div>
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Dell XPS 13</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star-half-alt text-warning"></i>
+                                    <small class="text-muted">(67)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Ultra-portable laptop with stunning display</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$1,299</span>
+                                    </div>
+                                    <span class="badge bg-success">In Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-primary btn-sm w-100">
+                                    <i class="fas fa-shopping-cart me-1"></i>Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
+                                    <i class="fas fa-tablet-alt fa-3x text-muted"></i>
+                                </div>
+                                <span class="badge bg-info position-absolute top-0 end-0 m-2">Popular</span>
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">iPad Pro 12.9"</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <small class="text-muted">(203)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Professional tablet with M2 chip</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$1,099</span>
+                                    </div>
+                                    <span class="badge bg-success">In Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-primary btn-sm w-100">
+                                    <i class="fas fa-shopping-cart me-1"></i>Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
+                                    <i class="fas fa-camera fa-3x text-muted"></i>
+                                </div>
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">Canon EOS R6</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="far fa-star text-warning"></i>
+                                    <small class="text-muted">(45)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Full-frame mirrorless camera</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$2,499</span>
+                                    </div>
+                                    <span class="badge bg-success">In Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-primary btn-sm w-100">
+                                    <i class="fas fa-shopping-cart me-1"></i>Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
+                        <div class="card product-card h-100">
+                            <div class="card-header p-0 position-relative">
+                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
+                                    <i class="fas fa-gamepad fa-3x text-muted"></i>
+                                </div>
+                                <span class="badge bg-danger position-absolute top-0 end-0 m-2">-15%</span>
+                                <div class="product-actions">
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Add to Wishlist">
+                                        <i class="fas fa-heart"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <h5 class="card-title mb-1">
+                                    <a href="/pages/ecommerce/product-single.html" class="text-decoration-none text-dark">PlayStation 5</a>
+                                </h5>
+                                <div class="mb-2">
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <i class="fas fa-star text-warning"></i>
+                                    <small class="text-muted">(512)</small>
+                                </div>
+                                <p class="text-muted small mb-2">Next-gen gaming console</p>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <span class="h5 mb-0 text-primary">$425</span>
+                                        <span class="text-muted text-decoration-line-through small">$499</span>
+                                    </div>
+                                    <span class="badge bg-warning text-dark">Low Stock</span>
+                                </div>
+                            </div>
+                            <div class="card-footer bg-light">
+                                <button class="btn btn-primary btn-sm w-100">
+                                    <i class="fas fa-shopping-cart me-1"></i>Add to Cart
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Pagination -->
+                <div class="row">
+                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
+                        <nav aria-label="Page navigation">
+                            <ul class="pagination justify-content-center">
+                                <li class="page-item disabled">
+                                    <a class="page-link" href="#" tabindex="-1">
+                                        <i class="fas fa-chevron-left"></i>
+                                    </a>
+                                </li>
+                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                <li class="page-item"><a class="page-link" href="#">4</a></li>
+                                <li class="page-item"><a class="page-link" href="#">5</a></li>
+                                <li class="page-item">
+                                    <a class="page-link" href="#">
+                                        <i class="fas fa-chevron-right"></i>
+                                    </a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        {{> layouts/footer}}
+    </div>
+</div>
+
+<!-- Add Product Modal -->
+<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="addProductModalLabel">Add New Product</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="addProductForm">
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="productName" class="form-label">Product Name</label>
+                            <input type="text" class="form-control" id="productName" required>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="productCategory" class="form-label">Category</label>
+                            <select class="form-select" id="productCategory" required>
+                                <option value="">Select Category</option>
+                                <option value="electronics">Electronics</option>
+                                <option value="fashion">Fashion</option>
+                                <option value="home">Home & Garden</option>
+                                <option value="sports">Sports & Outdoors</option>
+                                <option value="books">Books</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-4 mb-3">
+                            <label for="productPrice" class="form-label">Price</label>
+                            <input type="number" class="form-control" id="productPrice" step="0.01" required>
+                        </div>
+                        <div class="col-md-4 mb-3">
+                            <label for="productStock" class="form-label">Stock Quantity</label>
+                            <input type="number" class="form-control" id="productStock" required>
+                        </div>
+                        <div class="col-md-4 mb-3">
+                            <label for="productSKU" class="form-label">SKU</label>
+                            <input type="text" class="form-control" id="productSKU" required>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="productDescription" class="form-label">Description</label>
+                        <textarea class="form-control" id="productDescription" rows="3" required></textarea>
+                    </div>
+                    <div class="mb-3">
+                        <label for="productImage" class="form-label">Product Image</label>
+                        <input type="file" class="form-control" id="productImage" accept="image/*">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="submit" form="addProductForm" class="btn btn-primary">Add Product</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Page Specific Scripts -->
+<script type="module" src="/js/pages/products.js"></script>
+{{/inline}}
+
+{{> layouts/base}}

concept-modern/src/partials/layouts/sidebar.hbs

@@ -107,6 +107,30 @@
                     </div>
                 </li>
                 
+                <!-- E-Commerce -->
+                <li class="nav-item">
+                    <a class="nav-link {{#if (eq activeMenu 'ecommerce')}}active{{/if}}" href="#" 
+                       data-bs-toggle="collapse" data-bs-target="#submenu-ecommerce" 
+                       aria-expanded="{{#if (eq activeMenu 'ecommerce')}}true{{else}}false{{/if}}" 
+                       aria-controls="submenu-ecommerce">
+                        <i class="fas fa-fw fa-shopping-cart"></i>E-Commerce
+                        <span class="badge bg-warning ms-auto">New</span>
+                    </a>
+                    <div id="submenu-ecommerce" class="collapse {{#if (eq activeMenu 'ecommerce')}}show{{/if}}">
+                        <ul class="nav flex-column">
+                            <li class="nav-item">
+                                <a class="nav-link {{#if (eq activePage 'products')}}active{{/if}}" href="/pages/ecommerce/products.html">Products</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link {{#if (eq activePage 'product-single')}}active{{/if}}" href="/pages/ecommerce/product-single.html">Product Details</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link {{#if (eq activePage 'checkout')}}active{{/if}}" href="/pages/ecommerce/checkout.html">Checkout</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                
                 <li class="nav-divider">
                     Features
                 </li>
@@ -161,6 +185,26 @@
                     </div>
                 </li>
                 
+                <!-- Influencer -->
+                <li class="nav-item">
+                    <a class="nav-link {{#if (eq activeMenu 'influencer')}}active{{/if}}" href="#" 
+                       data-bs-toggle="collapse" data-bs-target="#submenu-influencer" 
+                       aria-expanded="{{#if (eq activeMenu 'influencer')}}true{{else}}false{{/if}}" 
+                       aria-controls="submenu-influencer">
+                        <i class="fas fa-fw fa-star"></i>Influencer
+                    </a>
+                    <div id="submenu-influencer" class="collapse {{#if (eq activeMenu 'influencer')}}show{{/if}}">
+                        <ul class="nav flex-column">
+                            <li class="nav-item">
+                                <a class="nav-link {{#if (eq activePage 'influencer-finder')}}active{{/if}}" href="/pages/apps/influencer-finder.html">Influencer Finder</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link {{#if (eq activePage 'influencer-profile')}}active{{/if}}" href="/pages/apps/influencer-profile.html">Influencer Profile</a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                
                 <li class="nav-divider">
                     System
                 </li>

concept-modern/src/scss/main.scss

@@ -27,11 +27,15 @@
 // Pages
 @import "pages/dashboard";
 @import "pages/influencer";
+@import "pages/influencer-finder";
 @import "pages/calendar";
 @import "pages/chat";
 @import "pages/settings";
 @import "pages/users";
 @import "pages/timeline";
+@import "pages/products";
+@import "pages/product-single";
+@import "pages/checkout";
 
 // Utilities
 @import "utilities/scrollbar";

concept-modern/src/scss/pages/_checkout.scss

@@ -0,0 +1,181 @@
+// Checkout Page Styles
+
+// Checkout steps
+.checkout-steps {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    position: relative;
+    
+    &::before {
+        content: '';
+        position: absolute;
+        top: 25px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: #e9ecef;
+        z-index: 0;
+    }
+    
+    .step {
+        flex: 1;
+        text-align: center;
+        position: relative;
+        z-index: 1;
+        
+        .step-icon {
+            width: 50px;
+            height: 50px;
+            margin: 0 auto;
+            background: #e9ecef;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+            color: #6c757d;
+            transition: all 0.3s ease;
+        }
+        
+        .step-title {
+            margin-top: 0.5rem;
+            font-size: 0.875rem;
+            color: #6c757d;
+            transition: color 0.3s ease;
+        }
+        
+        &.active {
+            .step-icon {
+                background: $primary;
+                color: white;
+                box-shadow: 0 2px 10px rgba($primary, 0.3);
+            }
+            
+            .step-title {
+                color: $primary;
+                font-weight: 500;
+            }
+        }
+        
+        &.completed {
+            .step-icon {
+                background: $success;
+                color: white;
+                
+                i {
+                    display: none;
+                }
+                
+                &::after {
+                    content: '\f00c';
+                    font-family: 'Font Awesome 5 Free';
+                    font-weight: 900;
+                }
+            }
+            
+            .step-title {
+                color: $success;
+            }
+        }
+    }
+}
+
+// Order items
+.order-item {
+    img {
+        border-radius: 0.25rem;
+        object-fit: cover;
+    }
+}
+
+// Payment methods
+.payment-methods {
+    .form-check {
+        padding: 0.75rem 1rem;
+        border: 1px solid #e9ecef;
+        border-radius: 0.25rem;
+        transition: all 0.2s ease;
+        
+        &:hover {
+            background-color: #f8f9fa;
+        }
+        
+        .form-check-input:checked ~ .form-check-label {
+            color: $primary;
+            font-weight: 500;
+        }
+    }
+}
+
+// Payment icons
+.payment-icons {
+    i {
+        transition: opacity 0.2s ease;
+        opacity: 0.6;
+        
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+// Card form
+#creditCardForm {
+    .input-group-text {
+        background: white;
+        
+        i {
+            transition: opacity 0.2s ease;
+            opacity: 0.3;
+        }
+    }
+}
+
+// Trust badges
+.trust-badges {
+    .fas {
+        font-size: 1.5rem;
+        color: $primary;
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 991.98px) {
+    .checkout-steps {
+        .step-title {
+            font-size: 0.75rem;
+        }
+        
+        .step-icon {
+            width: 40px;
+            height: 40px;
+            font-size: 1rem;
+        }
+    }
+}
+
+@media (max-width: 575.98px) {
+    .checkout-steps {
+        &::before {
+            display: none;
+        }
+        
+        .step {
+            .step-title {
+                display: none;
+            }
+        }
+    }
+    
+    .order-item {
+        .d-flex {
+            flex-direction: column;
+            text-align: center;
+            
+            img {
+                margin: 0 auto 0.5rem !important;
+            }
+        }
+    }
+}

concept-modern/src/scss/pages/_influencer-finder.scss

@@ -0,0 +1,286 @@
+// Influencer Finder Page Styles
+
+// Search form
+.influencer-search-form {
+    .input-group {
+        .form-control {
+            border-right: 0;
+            
+            &:focus {
+                box-shadow: none;
+                border-color: #ced4da;
+            }
+        }
+        
+        .btn {
+            border-left: 0;
+            padding: 0.5rem 1.5rem;
+        }
+    }
+}
+
+// Influencer cards
+.influencer-card {
+    transition: all 0.3s ease;
+    border: 1px solid #e9ecef;
+    
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+    }
+    
+    .card-body {
+        padding: 1.5rem;
+    }
+}
+
+// Influencer profile section
+.influencer-profile {
+    .user-avatar {
+        flex-shrink: 0;
+    }
+    
+    .user-avatar-xl {
+        width: 80px;
+        height: 80px;
+        object-fit: cover;
+    }
+    
+    .influencer-info {
+        h3 {
+            font-size: 1.375rem;
+            font-weight: 600;
+            margin-bottom: 0;
+        }
+        
+        .rating-star {
+            font-size: 0.875rem;
+        }
+    }
+    
+    .influencer-details {
+        p {
+            font-size: 0.875rem;
+            color: #6c757d;
+            
+            i {
+                font-size: 0.75rem;
+            }
+        }
+        
+        .badge {
+            font-weight: normal;
+            padding: 0.35em 0.75em;
+            font-size: 0.75rem;
+            
+            &:hover {
+                background-color: $primary !important;
+                color: white !important;
+            }
+        }
+    }
+}
+
+// Influencer actions
+.influencer-actions {
+    .btn {
+        font-size: 0.875rem;
+        padding: 0.375rem 1rem;
+        
+        &.btn-outline-secondary {
+            border-color: #dee2e6;
+            
+            &:hover {
+                background-color: #ffc107;
+                border-color: #ffc107;
+                color: white;
+                
+                i {
+                    color: white;
+                }
+            }
+        }
+    }
+}
+
+// Social stats box
+.user-social-box {
+    background-color: #f8f9fa;
+    margin: 0 -1.5rem;
+    padding: 1rem 1.5rem;
+    
+    .social-stat {
+        i {
+            font-size: 1.25rem;
+            margin-bottom: 0.25rem;
+            display: block;
+        }
+        
+        span {
+            font-size: 0.875rem;
+            color: #495057;
+            transition: transform 0.2s ease;
+            display: inline-block;
+        }
+        
+        &:hover span {
+            transform: scale(1.1);
+        }
+    }
+}
+
+// Filter sidebar
+.filter-sidebar {
+    position: sticky;
+    top: 1rem;
+    
+    .card-title {
+        font-size: 1.125rem;
+        margin-bottom: 1rem;
+    }
+    
+    .form-label {
+        font-size: 0.875rem;
+        margin-bottom: 0.75rem;
+        color: #495057;
+    }
+    
+    .form-select,
+    .form-control {
+        font-size: 0.875rem;
+    }
+    
+    .form-check {
+        margin-bottom: 0.5rem;
+        
+        .form-check-label {
+            font-size: 0.875rem;
+            cursor: pointer;
+            
+            i {
+                width: 16px;
+                text-align: center;
+            }
+        }
+    }
+    
+    .rating-filter {
+        .form-check-label {
+            display: flex;
+            align-items: center;
+            
+            i {
+                font-size: 0.75rem;
+                margin-right: 1px;
+            }
+            
+            .text-muted {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+}
+
+// Pagination
+.pagination {
+    .page-link {
+        color: #495057;
+        border-radius: 0.25rem;
+        margin: 0 2px;
+        
+        &:hover {
+            background-color: #e9ecef;
+            border-color: #dee2e6;
+        }
+        
+        &:focus {
+            box-shadow: none;
+        }
+    }
+    
+    .page-item.active .page-link {
+        background-color: $primary;
+        border-color: $primary;
+    }
+}
+
+// Mobile responsive adjustments
+@media (max-width: 991.98px) {
+    .influencer-profile {
+        .influencer-info h3 {
+            font-size: 1.125rem;
+        }
+    }
+    
+    .influencer-actions {
+        .btn {
+            font-size: 0.75rem;
+            padding: 0.25rem 0.75rem;
+        }
+    }
+    
+    .filter-sidebar {
+        position: static;
+        margin-bottom: 2rem;
+    }
+}
+
+@media (max-width: 767.98px) {
+    .influencer-profile {
+        flex-direction: column;
+        text-align: center;
+        
+        .user-avatar {
+            margin-bottom: 1rem;
+        }
+        
+        .influencer-info {
+            text-align: center;
+            
+            h3 {
+                font-size: 1rem;
+            }
+        }
+    }
+    
+    .user-social-box {
+        .row {
+            font-size: 0.75rem;
+        }
+        
+        .social-stat {
+            i {
+                font-size: 1rem;
+            }
+            
+            span {
+                font-size: 0.75rem;
+            }
+        }
+    }
+}
+
+// Animation for social stats
+@keyframes statPulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.social-stat {
+    animation: statPulse 2s ease-in-out infinite;
+    animation-delay: calc(var(--stat-index) * 0.2s);
+    
+    &:nth-child(1) { --stat-index: 0; }
+    &:nth-child(2) { --stat-index: 1; }
+    &:nth-child(3) { --stat-index: 2; }
+    &:nth-child(4) { --stat-index: 3; }
+    &:nth-child(5) { --stat-index: 4; }
+    &:nth-child(6) { --stat-index: 5; }
+}

concept-modern/src/scss/pages/_product-single.scss

@@ -0,0 +1,222 @@
+// Product Single Page Styles
+
+.product-images {
+    .main-image {
+        text-align: center;
+        background: #f8f9fa;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        
+        img {
+            max-height: 500px;
+            width: auto;
+            cursor: zoom-in;
+            transition: transform 0.3s ease;
+            
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+    }
+    
+    .image-thumbnails {
+        overflow-x: auto;
+        white-space: nowrap;
+        padding: 0.5rem 0;
+        
+        img {
+            cursor: pointer;
+            transition: all 0.2s ease;
+            opacity: 0.6;
+            border: 2px solid transparent;
+            
+            &:hover {
+                opacity: 1;
+                border-color: $primary;
+            }
+            
+            &.active {
+                opacity: 1;
+                border-color: $primary;
+            }
+        }
+    }
+}
+
+.product-info {
+    .rating {
+        font-size: 1.125rem;
+    }
+    
+    .price {
+        h3 {
+            font-size: 2rem;
+            font-weight: 600;
+        }
+        
+        del {
+            font-size: 1.25rem;
+        }
+    }
+    
+    .product-options {
+        .btn-check:checked + .btn {
+            background-color: $primary;
+            color: white;
+            border-color: $primary;
+        }
+        
+        .input-group {
+            .form-control {
+                border-left: 0;
+                border-right: 0;
+                
+                &:focus {
+                    box-shadow: none;
+                    border-color: #ced4da;
+                }
+            }
+        }
+    }
+    
+    .product-meta {
+        border-top: 1px solid #e9ecef;
+        padding-top: 1rem;
+        margin-top: 2rem;
+        
+        .badge {
+            font-weight: normal;
+            padding: 0.35em 0.65em;
+            
+            &:hover {
+                background-color: $primary !important;
+                color: white !important;
+            }
+        }
+    }
+}
+
+// Product tabs
+.nav-tabs {
+    .nav-link {
+        color: #495057;
+        border: 0;
+        border-bottom: 2px solid transparent;
+        padding: 0.75rem 1.5rem;
+        
+        &:hover {
+            border-color: transparent;
+            color: $primary;
+        }
+        
+        &.active {
+            color: $primary;
+            background-color: transparent;
+            border-color: transparent;
+            border-bottom-color: $primary;
+        }
+    }
+}
+
+// Reviews section
+.rating-breakdown {
+    .progress {
+        background-color: #e9ecef;
+    }
+}
+
+.review-item {
+    .rating {
+        font-size: 0.875rem;
+    }
+}
+
+// Star rating widget
+.star-rating {
+    font-size: 1.5rem;
+    
+    i {
+        cursor: pointer;
+        color: #ddd;
+        transition: color 0.2s ease;
+        
+        &:hover,
+        &.fas {
+            color: #ffc107;
+        }
+    }
+}
+
+// Related products
+.product-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    }
+    
+    .card-header {
+        border: 0;
+        background: #f8f9fa;
+        
+        img {
+            transition: transform 0.3s ease;
+        }
+        
+        &:hover img {
+            transform: scale(1.05);
+        }
+    }
+    
+    .placeholder-image {
+        transition: background-color 0.2s ease;
+        
+        &:hover {
+            background-color: darken(#f8f9fa, 5%) !important;
+        }
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 991.98px) {
+    .product-info {
+        margin-top: 2rem;
+    }
+    
+    .product-options {
+        .color-options,
+        .storage-options {
+            flex-wrap: wrap;
+            
+            .btn {
+                margin-bottom: 0.5rem;
+            }
+        }
+    }
+}
+
+@media (max-width: 575.98px) {
+    .product-images {
+        .main-image {
+            padding: 1rem;
+            
+            img {
+                max-height: 300px;
+            }
+        }
+    }
+    
+    .price h3 {
+        font-size: 1.5rem;
+    }
+    
+    .d-flex.gap-2 {
+        flex-direction: column;
+        
+        > * {
+            width: 100%;
+            margin-bottom: 0.5rem;
+        }
+    }
+}

concept-modern/src/scss/pages/_products.scss

@@ -0,0 +1,205 @@
+// E-commerce Products Page Styles
+
+.dashboard-ecommerce {
+    // Product card styles
+    .product-card {
+        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        overflow: hidden;
+        
+        &:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            
+            .product-actions {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+        
+        .card-header {
+            position: relative;
+            overflow: hidden;
+            border-bottom: 0;
+            
+            img {
+                transition: transform 0.3s ease-in-out;
+            }
+            
+            &:hover img {
+                transform: scale(1.05);
+            }
+        }
+        
+        .placeholder-image {
+            transition: background-color 0.2s ease-in-out;
+            
+            &:hover {
+                background-color: darken(#f8f9fa, 5%) !important;
+            }
+        }
+        
+        .product-actions {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            gap: 0.5rem;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+            
+            .btn {
+                background: rgba(255, 255, 255, 0.9);
+                backdrop-filter: blur(5px);
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                
+                &:hover {
+                    background: white;
+                    transform: translateY(-2px);
+                }
+            }
+        }
+        
+        .card-title {
+            font-size: 1rem;
+            
+            a {
+                transition: color 0.2s ease-in-out;
+                
+                &:hover {
+                    color: $primary !important;
+                }
+            }
+        }
+        
+        .badge {
+            font-size: 0.75rem;
+            padding: 0.35em 0.65em;
+        }
+        
+        .card-footer {
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+            
+            .btn {
+                transition: all 0.2s ease-in-out;
+                
+                &:hover {
+                    transform: translateY(-1px);
+                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+                }
+                
+                &:disabled {
+                    cursor: not-allowed;
+                }
+            }
+        }
+    }
+    
+    // Filter section
+    .form-select {
+        min-width: 150px;
+        
+        @media (max-width: 575.98px) {
+            min-width: 100%;
+            margin-bottom: 0.5rem;
+        }
+    }
+    
+    // Search input
+    .input-group {
+        .form-control {
+            border-right: 0;
+            
+            &:focus {
+                border-color: #ced4da;
+                box-shadow: none;
+                
+                + .btn {
+                    border-color: $primary;
+                }
+            }
+        }
+        
+        .btn {
+            border-left: 0;
+            transition: all 0.2s ease-in-out;
+        }
+    }
+    
+    // Stats cards
+    .card-body {
+        .fa-2x {
+            opacity: 0.3;
+            transition: opacity 0.2s ease-in-out;
+        }
+        
+        &:hover .fa-2x {
+            opacity: 0.5;
+        }
+    }
+    
+    // Rating stars
+    .fa-star,
+    .fa-star-half-alt {
+        font-size: 0.875rem;
+    }
+    
+    // Pagination
+    .pagination {
+        .page-link {
+            color: #495057;
+            border-radius: 0.25rem;
+            margin: 0 2px;
+            
+            &:hover {
+                background-color: #f8f9fa;
+                border-color: #dee2e6;
+            }
+            
+            &:focus {
+                box-shadow: none;
+            }
+        }
+        
+        .page-item {
+            &.active .page-link {
+                background-color: $primary;
+                border-color: $primary;
+            }
+            
+            &.disabled .page-link {
+                background-color: transparent;
+            }
+        }
+    }
+    
+    // Modal styles
+    .modal-content {
+        border: 0;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+    }
+    
+    // Responsive adjustments
+    @media (max-width: 991.98px) {
+        .product-card {
+            .card-title {
+                font-size: 0.9rem;
+            }
+            
+            .text-muted.small {
+                font-size: 0.8rem;
+            }
+        }
+    }
+    
+    @media (max-width: 575.98px) {
+        .d-flex.gap-2 {
+            flex-direction: column;
+            
+            > * {
+                width: 100%;
+            }
+        }
+    }
+}

concept-modern/vite.config.js

@@ -58,10 +58,15 @@ export default defineConfig({
         // Tables
         'general-tables': resolve(__dirname, 'src/pages/tables/general-tables.html'),
         'data-tables': resolve(__dirname, 'src/pages/tables/data-tables.html'),
+        // E-Commerce
+        'products': resolve(__dirname, 'src/pages/ecommerce/products.html'),
+        'product-single': resolve(__dirname, 'src/pages/ecommerce/product-single.html'),
+        'checkout': resolve(__dirname, 'src/pages/ecommerce/checkout.html'),
         // Apps
         'calendar': resolve(__dirname, 'src/pages/calendar.html'),
         'chat': resolve(__dirname, 'src/pages/chat.html'),
         'inbox': resolve(__dirname, 'src/pages/inbox.html'),
+        'influencer-finder': resolve(__dirname, 'src/pages/apps/influencer-finder.html'),
         // Settings
         'settings': resolve(__dirname, 'src/pages/settings.html'),
         // User Management