add a '5 Star Reviews' section with a scrolling selection of reviews.

add an 'Awards and Recognition' section
add a 'Certification / Insured Section'

index.html

@@ -10,11 +10,22 @@
     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
-    <style>
+        <style>
         .gradient-bg {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
-        .service-card {
+        .animate-scroll {
+            animation: scroll 30s linear infinite;
+        }
+        @keyframes scroll {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        .review-card {
+            min-width: 400px;
+            flex-shrink: 0;
+        }
+.service-card {
             transition: all 0.3s ease;
         }
         .service-card:hover {
@@ -298,8 +309,117 @@
 </div>
 </div>
     </section>
-    <!-- Service Areas Section -->
+
+    <!-- 5 Star Reviews Section -->
+    <section class="py-20 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">5 Star Reviews</h2>
+                <p class="text-xl text-gray-600 max-w-2xl mx-auto">What our customers say about our electrical services</p>
+            </div>
+            
+            <div class="relative overflow-hidden">
+                <div class="flex space-x-6 animate-scroll" id="reviewsContainer">
+                    <!-- Reviews will be populated by JavaScript -->
+                </div>
+                
+                <div class="flex justify-center mt-8 space-x-4">
+                    <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors" id="prevReview">
+                    <i data-feather="chevron-left" class="w-5 h-5"></i>
+                    </button>
+                    <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors" id="nextReview">
+                    <i data-feather="chevron-right" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Awards and Recognition Section -->
     <section class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">Awards & Recognition</h2>
+                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Recognized for excellence in electrical services across Toronto</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="text-center p-6">
+                    <div class="bg-yellow-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="award" class="w-10 h-10 text-yellow-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Best Electrical Contractor 2024</h2>
+                    <p class="text-gray-600">Toronto Home Services Awards</p>
+                </div>
+                
+                <div class="text-center p-6">
+                    <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="star" class="w-10 h-10 text-blue-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Excellence in Safety Standards</h3>
+                    <p class="text-gray-600">Electrical Safety Authority</p>
+                </div>
+                
+                <div class="text-center p-6">
+                    <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="thumbs-up" class="w-10 h-10 text-green-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Top Rated Professional</h3>
+                    <p class="text-gray-600">HomeStars Gold Award</p>
+                </div>
+                
+                <div class="text-center p-6">
+                    <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="shield" class="w-10 h-10 text-purple-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-3">Customer Service Excellence</h3>
+                    <p class="text-gray-600">Better Business Bureau</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Certification / Insured Section -->
+    <section class="py-20 bg-gray-100">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">Certifications & Insurance</h2>
+                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Fully licensed, certified, and insured for your peace of mind</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white rounded-xl p-8 text-center shadow-lg">
+                    <div class="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="file-text" class="w-8 h-8 text-blue-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">ESA Licensed</h3>
+                    <p class="text-gray-600 mb-4">Fully licensed by the Electrical Safety Authority</p>
+                    <div class="text-blue-600 font-semibold">License #7008307</div>
+                </div>
+                
+                <div class="bg-white rounded-xl p-8 text-center shadow-lg">
+                    <div class="bg-green-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="shield" class="w-8 h-8 text-green-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">Fully Insured</h3>
+                    <p class="text-gray-600 mb-4">$5 million in liability insurance coverage</p>
+                    <div class="text-green-600 font-semibold">Comprehensive Coverage</div>
+                </div>
+                
+                <div class="bg-white rounded-xl p-8 text-center shadow-lg">
+                    <div class="bg-purple-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="check-circle" class="w-8 h-8 text-purple-600"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-4">ECRA Certified</h3>
+                    <p class="text-gray-600 mb-4">Certified Electrical Contractor by ECRA</p>
+                    <div class="text-purple-600 font-semibold">Master Electrician</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Service Areas Section -->
+<section class="py-20 bg-white">
         <div class="container mx-auto px-4">
             <div class="text-center mb-16">
                 <h2 class="text-4xl font-bold text-gray-800 mb-4">Service Areas</h2>
@@ -579,6 +699,119 @@
             // Add mobile menu implementation here
             alert('Mobile menu would open here');
         });
+        // Reviews data
+        const reviews = [
+            {
+                name: "Sarah Johnson",
+                rating: 5,
+                date: "2024-12-15",
+                text: "MP Electric did an outstanding job upgrading our electrical panel. Professional, punctual, and the quality of work was exceptional. Highly recommend their services!",
+                service: "Service Upgrade"
+            },
+            {
+                name: "Michael Chen",
+                rating: 5,
+                date: "2024-12-10",
+                text: "Excellent service from start to finish. They replaced all our knob and tube wiring and were very clean and efficient.",
+                service: "Knob & Tube Rewire"
+            },
+            {
+                name: "The Wilson Family",
+                rating: 5,
+                date: "2024-12-05",
+                text: "The team at MP Electric installed our EV charging station perfectly. Very knowledgeable and professional.",
+                service: "EV Charging Station"
+            },
+            {
+                name: "Jennifer Martinez",
+                rating: 5,
+                date: "2024-11-28",
+                text: "Quick response for emergency electrical repair. Fixed our issue same day and the pricing was very fair.",
+                service: "Emergency Repair"
+            },
+            {
+                name: "Robert Williams",
+                rating: 5,
+                date: "2024-11-20",
+                text: "Outstanding work on our basement renovation. The lighting design and installation exceeded our expectations.",
+                service: "Basement Renovation"
+            },
+            {
+                name: "Amanda Thompson",
+                rating: 5,
+                date: "2024-11-15",
+                text: "Professional, reliable, and high-quality work. They installed new LED lighting throughout our office space.",
+                service: "LED Retrofitting"
+            },
+            {
+                name: "David Park",
+                rating: 5,
+                date: "2024-11-08",
+                text: "Great experience from the initial consultation to the final installation. Will definitely use MP Electric again.",
+                service: "General Electrical"
+            }
+        ];
+
+        // Populate reviews
+        const reviewsContainer = document.getElementById('reviewsContainer');
+        reviews.forEach(review => {
+            const stars = '★'.repeat(review.rating);
+            const reviewCard = document.createElement('div');
+            reviewCard.className = 'review-card bg-white rounded-xl p-6 shadow-lg border border-gray-200";
+            reviewCard.innerHTML = `
+                <div class="flex items-center mb-4">
+                    <div class="flex text-yellow-400 text-lg">${stars}</div>
+                <div class="ml-auto text-sm text-gray-500">${review.date}</div>
+            </div>
+                <p class="text-gray-700 mb-4">"${review.text}"</p>
+                <div class="flex justify-between items-center">
+                    <div>
+                        <div class="font-semibold text-gray-800">${review.name}</div>
+                    <div class="text-blue-600 font-medium">${review.service}</div>
+                </div>
+            `;
+            reviewsContainer.appendChild(reviewCard);
+        });
+
+        // Duplicate reviews for infinite scroll
+        reviews.forEach(review => {
+            const stars = '★'.repeat(review.rating);
+            const reviewCard = document.createElement('div');
+            reviewCard.className = 'review-card bg-white rounded-xl p-6 shadow-lg border border-gray-200";
+            reviewCard.innerHTML = `
+                <div class="flex items-center mb-4">
+                    <div class="flex text-yellow-400 text-lg">${stars}</div>
+                <div class="ml-auto text-sm text-gray-500">${review.date}</div>
+            </div>
+                <p class="text-gray-700 mb-4">"${review.text}"</p>
+                <div class="flex justify-between items-center">
+                    <div>
+                        <div class="font-semibold text-gray-800">${review.name}</div>
+                    <div class="text-blue-600 font-medium">${review.service}</div>
+                </div>
+            `;
+            reviewsContainer.appendChild(reviewCard);
+        });
+
+        // Review navigation
+        let currentReview = 0;
+        const reviewCards = document.querySelectorAll('.review-card');
+        
+        document.getElementById('prevReview').addEventListener('click', () => {
+            currentReview = (currentReview - 1 + reviews.length) % reviews.length;
+            updateReviewDisplay();
+        });
+        
+        document.getElementById('nextReview').addEventListener('click', () => {
+            currentReview = (currentReview + 1) % reviews.length;
+            updateReviewDisplay();
+        });
+        
+        function updateReviewDisplay() {
+            reviewCards.forEach((card, index) => {
+                card.style.display = Math.floor(index / reviews.length) === Math.floor(currentReview / reviews.length) ? 'block' : 'none';
+            });
+        }
 
         // Vanta.js background animation
         VANTA.NET({
@@ -596,6 +829,6 @@
             maxDistance: 22.00,
             spacing: 18.00
         });
-    </script>
+</script>
 </body>
 </html>