Well I would really like analytics that are easy to look at. so a chart that allows customer to choose the age range they're looking to hangout with. Also a chart that allows the customer to choose which music genre they prefer.

index.html

@@ -197,9 +197,47 @@
                 </div>
             </div>
         </section>
+        <!-- Analytics Section -->
+        <section class="py-24 bg-gray-900">
+            <div class="container mx-auto px-4">
+                <h3 class="text-3xl font-bold text-center mb-12">Nightlife Analytics</h3>
+                
+                <!-- Age Range Chart -->
+                <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 mb-12">
+                    <div class="flex justify-between items-center mb-6">
+                        <h4 class="text-2xl font-bold">Age Range Distribution</h4>
+                        <div class="flex space-x-2">
+                            <button class="bg-gray-700 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600 transition" id="age-all">All</button>
+                            <button class="bg-pink-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-pink-800 transition" id="age-18-25">18-25</button>
+                            <button class="bg-purple-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-purple-800 transition" id="age-25-35">25-35</button>
+                            <button class="bg-blue-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-800 transition" id="age-35-45">35-45</button>
+                        </div>
+                    </div>
+                    <div class="h-64 w-full" id="ageChart">
+                        <!-- Chart will be rendered here -->
+                    </div>
+                </div>
+                
+                <!-- Music Genre Chart -->
+                <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h4 class="text-2xl font-bold">Music Genre Popularity</h4>
+                        <div class="flex space-x-2">
+                            <button class="bg-gray-700 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600 transition" id="genre-all">All</button>
+                            <button class="bg-red-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-red-800 transition" id="genre-edm">EDM</button>
+                            <button class="bg-yellow-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-yellow-800 transition" id="genre-rock">Rock</button>
+                            <button class="bg-indigo-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-800 transition" id="genre-hiphop">Hip Hop</button>
+                        </div>
+                    </div>
+                    <div class="h-64 w-full" id="genreChart">
+                        <!-- Chart will be rendered here -->
+                    </div>
+                </div>
+            </div>
+        </section>
 
         <!-- Features Section -->
-        <section class="bg-gradient-to-b from-gray-900 to-black py-24">
+<section class="bg-gradient-to-b from-gray-900 to-black py-24">
             <div class="container mx-auto px-4">
                 <h3 class="text-3xl font-bold text-center mb-16">Why Choose NightPulse Explorer?</h3>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
@@ -313,10 +351,121 @@
             </div>
         </footer>
     </div>
-
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
         // Initialize Vanta.js background
-        VANTA.NET({
+        // Initialize Charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Age Range Chart
+            const ageCtx = document.getElementById('ageChart').getContext('2d');
+            const ageChart = new Chart(ageCtx, {
+                type: 'bar',
+                data: {
+                    labels: ['18-25', '25-35', '35-45', '45+'],
+                    datasets: [{
+                        label: 'Venues by Age Range',
+                        data: [42, 38, 15, 5],
+                        backgroundColor: [
+                            'rgba(219, 39, 119, 0.7)',
+                            'rgba(168, 85, 247, 0.7)',
+                            'rgba(59, 130, 246, 0.7)',
+                            'rgba(156, 163, 175, 0.7)'
+                        ],
+                        borderColor: [
+                            'rgba(219, 39, 119, 1)',
+                            'rgba(168, 85, 247, 1)',
+                            'rgba(59, 130, 246, 1)',
+                            'rgba(156, 163, 175, 1)'
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Number of Venues'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Age Range'
+                            }
+                        }
+                    }
+                }
+            });
+
+            // Genre Chart
+            const genreCtx = document.getElementById('genreChart').getContext('2d');
+            const genreChart = new Chart(genreCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['EDM', 'Hip Hop', 'Rock', 'R&B', 'Jazz', 'Alternative', 'Pop', 'Other'],
+                    datasets: [{
+                        label: 'Music Genre Distribution',
+                        data: [25, 20, 18, 15, 10, 7, 4, 1],
+                        backgroundColor: [
+                            'rgba(219, 39, 119, 0.7)',
+                            'rgba(16, 185, 129, 0.7)',
+                            'rgba(234, 179, 8, 0.7)',
+                            'rgba(239, 68, 68, 0.7)',
+                            'rgba(59, 130, 246, 0.7)',
+                            'rgba(139, 92, 246, 0.7)',
+                            'rgba(20, 184, 166, 0.7)',
+                            'rgba(156, 163, 175, 0.7)'
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'right',
+                        },
+                        title: {
+                            display: true,
+                            text: 'Music Genre Popularity'
+                        }
+                    }
+                }
+            });
+
+            // Filter buttons functionality
+            document.querySelectorAll('#age-all, #age-18-25, #age-25-35, #age-35-45').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const filter = this.id.split('-').pop();
+                    if (filter === 'all') {
+                        ageChart.data.datasets[0].data = [42, 38, 15, 5];
+                    } else {
+                        ageChart.data.datasets[0].data = [0, 0, 0, 0];
+                        const index = ['18-25', '25-35', '35-45', '45+'].indexOf(filter.replace(/(\d+)-(\d+)/, '$1-$2'));
+                        if (index !== -1) ageChart.data.datasets[0].data[index] = [42, 38, 15, 5][index];
+                    }
+                    ageChart.update();
+                });
+            });
+
+            document.querySelectorAll('#genre-all, #genre-edm, #genre-rock, #genre-hiphop').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const filter = this.id.split('-').pop();
+                    if (filter === 'all') {
+                        genreChart.data.datasets[0].data = [25, 20, 18, 15, 10, 7, 4, 1];
+                    } else {
+                        genreChart.data.datasets[0].data = [0, 0, 0, 0, 0, 0, 0, 0];
+                        const index = ['edm', 'hiphop', 'rock', 'r&b', 'jazz', 'alternative', 'pop', 'other'].indexOf(filter);
+                        if (index !== -1) genreChart.data.datasets[0].data[index] = [25, 20, 18, 15, 10, 7, 4, 1][index];
+                    }
+                    genreChart.update();
+                });
+            });
+        });
+VANTA.NET({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,
@@ -334,9 +483,8 @@
 
         // Initialize feather icons
         feather.replace();
-        
-        // Add animation to cards on scroll
-        document.addEventListener('DOMContentLoaded', function() {
+        // Add animation to cards on scroll and initialize charts
+document.addEventListener('DOMContentLoaded', function() {
             const venueCards = document.querySelectorAll('.venue-card');
             
             const observer = new IntersectionObserver((entries) => {