review section google lable updated

app/globals.css

@@ -137,11 +137,11 @@
 .google-info-right .ratting i {
   font-size: 18px;
   margin-right: 3px;
-  text-shadow:
+  /* text-shadow:
     -1px -1px 0 #fff,
     1px -1px 0 #fff,
     -1px 1px 0 #fff,
-    1px 1px 0 #fff;
+    1px 1px 0 #fff; */
   /* Alternative for smoother outline */
   -webkit-text-stroke: 1px #fff;
 }
@@ -161,3 +161,123 @@
 .theme-btn-dark:hover {
   background: #000000 !important;
 }
+
+
+.google-review-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f0f0f0;
+  height: 100%;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.google-review-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.google-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: #546e7a;
+  color: #fff;
+  font-weight: 600;
+  font-size: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.google-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.google-user-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.google-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: #333;
+  margin: 0 !important;
+  line-height: 1.2;
+}
+
+.google-stars {
+  margin-top: 4px;
+}
+
+.google-stars span,
+.google-stars i {
+  font-size: 16px;
+  color: #ffc107;
+  margin-right: 2px;
+}
+
+.google-text {
+  font-size: 15px;
+  color: #eee;
+  line-height: 1.6;
+  margin: 0;
+  flex-grow: 1;
+}
+
+.google-review-card-home {
+  padding: 0;
+}
+
+.google-review-card-home .google-name {
+  color: #fff !important;
+}
+
+.google-review-card-home .google-user-info h4 {
+  color: #fff !important;
+}
+
+.google-review-card-home .testimonial-text {
+  color: #fff !important;
+}
+
+/* Ensure stars are visible on white background for About page */
+.testimonial-five-item .google-stars i {
+  color: #ffc107 !important;
+}
+
+.google-review-header .google-name {
+  color: inherit;
+}
+
+.read-more-btn {
+  background: transparent;
+  border: none;
+  color: #ffb936;
+  padding: 15px 0 0 0;
+  font-size: 16px;
+  cursor: pointer;
+  font-weight: 700;
+  text-align: center;
+  width: 100%;
+  display: block;
+  margin-top: auto;
+}
+
+.read-more-btn:hover {
+  text-decoration: underline;
+}
+
+.equal-height {
+  min-height: 380px;
+}

components/About/AboutTestimonial.js

@@ -3,6 +3,7 @@ import { sliderProps } from "@/utility/sliderProps";
 import Slider from "react-slick";
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import GoogleReviewsBranding from "../GoogleReviewsBranding";
 
 const Testimonial = () => {
   const [reviews, setReviews] = useState([]);
@@ -79,6 +80,7 @@ const Testimonial = () => {
             >
               <span className="sub-title mb-5">customer feedback</span>
               <h2>what have lot’s off happy customer explore feedback</h2>
+              <GoogleReviewsBranding centered={true}/>
             </div>
             <span className="marquee-wrap style-two">
               <span className="marquee-inner left">review </span>

components/GoogleReviewsBranding.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+const GoogleReviewsBranding = ({ centered = false }) => {
+    return (
+        <div className="google-reviews-branding" style={{
+            marginTop: '15px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: centered ? 'center' : 'flex-start',
+            gap: '0px'
+        }}>
+            <div style={{
+    fontSize: '28px',
+    fontWeight: '700',
+    lineHeight: '1.2',
+    letterSpacing: '3px',
+    fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
+    display: 'flex',
+    alignItems: 'center'
+}}>
+    <span style={{ color: '#4285F4' }}>G</span>
+    <span style={{ color: '#EA4335' }}>o</span>
+    <span 
+        style={{ 
+            color: '#FBBC04',
+            WebkitTextStroke: '1px white'
+        }}
+    >
+        o
+    </span>
+    <span style={{ color: '#4285F4' }}>g</span>
+    <span style={{ color: '#34A853' }}>l</span>
+    <span style={{ color: '#EA4335' }}>e</span>
+</div>
+            <div style={{
+                fontSize: '13px',
+                fontWeight: '700',
+                lineHeight: '1.2',
+                fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '5px',
+                marginTop: '-2px'
+            }}>
+                <span style={{ color: '#5F6368' }}>Reviews</span>
+               <div style={{
+    display: 'flex',
+    gap: '2px',
+    fontSize: '8px',
+    lineHeight: '1'
+}}>
+    <span style={{ color: '#FBBC04', WebkitTextStroke: '1px white' }}><i className='fa fa-star text-warning'></i></span>
+    <span style={{ color: '#FBBC04', WebkitTextStroke: '1px white' }}><i className='fa fa-star text-warning'></i></span>
+    <span style={{ color: '#FBBC04', WebkitTextStroke: '1px white' }}><i className='fa fa-star text-warning'></i></span>
+    <span style={{ color: '#FBBC04', WebkitTextStroke: '1px white' }}><i className='fa fa-star text-warning'></i></span>
+    <span style={{ color: '#FBBC04', WebkitTextStroke: '1px white' }}><i className='fa fa-star text-warning'></i></span>
+</div>
+            </div>
+        </div>
+    );
+};
+
+export default GoogleReviewsBranding;

components/Testimonial.js

@@ -3,6 +3,7 @@ import { sliderProps } from "@/utility/sliderProps";
 import Slider from "react-slick";
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import GoogleReviewsBranding from "./GoogleReviewsBranding";
 
 const Testimonial = () => {
   const [reviews, setReviews] = useState([]);
@@ -79,6 +80,7 @@ const Testimonial = () => {
             >
               <span className="sub-title mb-5">customer feedback</span>
               <h2>what have lot’s off happy customer explore feedback</h2>
+              <GoogleReviewsBranding centered={true}/>
             </div>
             <span className="marquee-wrap style-two">
               <span className="marquee-inner left">review </span>
@@ -86,6 +88,7 @@ const Testimonial = () => {
               <span className="marquee-inner left">review </span>
             </span>
             
+
             {loading ? (
               <div className="text-center">
                 <p>Loading reviews...</p>