diff --git a/app/globals.css b/app/globals.css index 542f1af..8026526 100644 --- a/app/globals.css +++ b/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; } @@ -160,4 +160,124 @@ .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; } \ No newline at end of file diff --git a/components/About/AboutTestimonial.js b/components/About/AboutTestimonial.js index 8a02cff..6d79366 100644 --- a/components/About/AboutTestimonial.js +++ b/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 = () => { > customer feedback