Add src/app/starRatings.css

Merge version_1 into main

src/app/layout.tsx

@@ -1420,4 +1420,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -9,6 +9,7 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Award, Star, Heart, Sparkles, MapPin, Phone, Clock, Navigation, Instagram, MessageCircle, Calendar } from 'lucide-react';
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import './starRatings.css';
 
 export default function LandingPage() {
   return (
@@ -201,4 +202,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/starRatings.css

@@ -0,0 +1,116 @@
+/* Golden Yellow Star Ratings Styling */
+:root {
+  --star-color: #FFC107;
+  --star-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Apply to all star rating elements throughout the site */
+.star,
+.star-icon,
+[class*="star"],
+[class*="rating"],
+svg[class*="star"],
+svg[class*="rating"] {
+  fill: var(--star-color);
+  color: var(--star-color);
+  filter: drop-shadow(var(--star-shadow));
+  transition: transform 0.2s ease-in-out;
+}
+
+/* Hover animation for interactive star ratings */
+.star:hover,
+.star-icon:hover,
+[class*="star"]:hover,
+[class*="rating"]:hover,
+svg[class*="star"]:hover,
+svg[class*="rating"]:hover {
+  transform: scale(1.08);
+  filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.3));
+}
+
+/* Google Rating Stars */
+[aria-label*="rating"],
+[data-rating],
+.google-rating,
+.rating-badge,
+.rating-stars {
+  color: var(--star-color);
+}
+
+/* Star SVG Elements */
+svg.star-fill,
+svg[class*="star"] {
+  fill: var(--star-color);
+  stroke: none;
+}
+
+svg[class*="star"]:not([class*="empty"]):not([class*="outline"]) {
+  fill: var(--star-color);
+}
+
+/* Empty/outline stars (gray background) */
+svg[class*="star"][class*="empty"],
+svg[class*="star"][class*="outline"],
+[class*="star-empty"],
+[class*="star-outline"] {
+  fill: rgba(255, 193, 7, 0.2);
+  stroke: rgba(255, 193, 7, 0.4);
+}
+
+/* 4.9/5 Rating Display */
+.rating-display,
+.rating-value,
+.rating-count,
+[class*="satisfaction"],
+[class*="satisfaction-badge"] {
+  color: var(--star-color);
+  font-weight: 600;
+}
+
+/* Premium soft shadow effect */
+.testimonial-rating,
+.product-rating,
+.review-rating,
+.rating-container,
+[class*="rating-container"],
+[class*="testimonial-rating"],
+[class*="product-rating"] {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Mobile responsive - ensure stars remain visible */
+@media (max-width: 768px) {
+  .star,
+  .star-icon,
+  [class*="star"],
+  [class*="rating"],
+  svg[class*="star"],
+  svg[class*="rating"] {
+    min-width: 1rem;
+    min-height: 1rem;
+    width: auto;
+    height: auto;
+  }
+
+  .star:hover,
+  .star-icon:hover,
+  [class*="star"]:hover,
+  [class*="rating"]:hover,
+  svg[class*="star"]:hover,
+  svg[class*="rating"]:hover {
+    transform: scale(1.05);
+  }
+}
+
+/* Ensure proper proportions on all breakpoints */
+@media (max-width: 480px) {
+  .star,
+  .star-icon,
+  [class*="star"],
+  [class*="rating"],
+  svg[class*="star"],
+  svg[class*="rating"] {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}