From 198bc1df03706db761b28ea24dadb9ed472890d5 Mon Sep 17 00:00:00 2001 From: akash Date: Mon, 17 Nov 2025 18:47:23 +0530 Subject: [PATCH] live google fetch reviews updated --- components/sections/home1/client-review.js | 302 ++++---- public/assets/css/global.css | 794 ++++++++++++--------- 2 files changed, 583 insertions(+), 513 deletions(-) diff --git a/components/sections/home1/client-review.js b/components/sections/home1/client-review.js index 062650b..dc3b4af 100644 --- a/components/sections/home1/client-review.js +++ b/components/sections/home1/client-review.js @@ -1,35 +1,38 @@ 'use client' import { useEffect, useState } from "react"; import Link from "next/link"; -import { Autoplay, Navigation, Pagination } from "swiper/modules"; +import { Autoplay } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/autoplay"; + const swiperOptions = { - modules: [Autoplay, Pagination, Navigation], - slidesPerView: 1, - spaceBetween: 30, + modules: [Autoplay], + slidesPerView: 3, + spaceBetween: 20, loop: true, - autoplay: { - delay: 3000, + delay: 2000, disableOnInteraction: false, + pauseOnMouseEnter: false, }, - - navigation: { - nextEl: '.srn', - prevEl: '.srp', - }, - - pagination: { - el: '.swiper-pagination', - clickable: true, + breakpoints: { + 0: { slidesPerView: 1 }, + 768: { slidesPerView: 2 }, + 1024: { slidesPerView: 3 }, }, }; export default function Testimonial() { - const [reviews, setReviews] = useState([]); const [loading, setLoading] = useState(true); + const [expandedReview, setExpandedReview] = useState(null); + const [isClient, setIsClient] = useState(false); + + useEffect(() => { + setIsClient(true); + }, []); useEffect(() => { async function loadReviews() { @@ -37,29 +40,17 @@ export default function Testimonial() { const res = await fetch("/api/reviews"); const data = await res.json(); - // FILTER EMPTY REVIEWS (IMPORTANT) & must be positive review: rating 4 or 5 const cleaned = (data.reviews || []).filter(r => - (r.text || r.description || r.snippet || r.review_text || r.body || r.content) && - (r.text?.trim() !== "" || - r.description?.trim() !== "" || - r.snippet?.trim() !== "" || - r.review_text?.trim() !== "" || - r.body?.trim() !== "" || - r.content?.trim() !== "") && - - r.rating >= 4 ); - setReviews(cleaned); - // console.log(cleaned); } catch (error) { console.error("Failed to fetch reviews", error); } finally { @@ -69,176 +60,129 @@ export default function Testimonial() { loadReviews(); }, []); - // Function to render stars based on rating + const displayedReviews = reviews.length > 0 && reviews.length < 3 + ? [...reviews, ...reviews, ...reviews] + : reviews; + function renderStars(rating) { return [...Array(5)].map((_, i) => ( - + )); } + function getReviewText(r) { + return r.text || r.description || r.snippet || r.review_text || r.body || r.content || ""; + } + + function truncateText(text) { + return text.length > 150 ? text.substring(0, 150) + "..." : text; + } + + function getProfileImage(r) { + // Normalize profile photo URLs + const url = r.profile_photo_url || r.author_profile_photo_url || r.user?.thumbnail; + if (!url) return "/default-user.png"; + return url.startsWith("http") ? url : `https://lh3.googleusercontent.com/${url}`; + } + return ( - <> +
+
+
+
+
Google Reviews
+

Hear from our happy customers

+
+
- {/* Testimonial Section Two */} -
-
+
+ {loading &&

Loading reviews...

} -
- {/* Section Title */} -
-
Google Reviews
-

Hear from our happy customers

-
-
- -
+ {!loading && isClient && displayedReviews.length > 0 && ( - {/* Testimonial Block Two */} + {displayedReviews.map((r, index) => { + const fullText = getReviewText(r); + const isExpanded = expandedReview === index; - {loading && ( -

Loading reviews...

- )} - - {/* Dynamic Reviews from API */} - {!loading && reviews.length > 0 && - reviews.map((r, index) => ( + return ( -
-
-
- {renderStars(r.rating)} +
+
+
+ {r.author_name (e.target.src = "/default-user.png")} + />
-
- “ - {r.text || - r.description || - r.snippet || - r.review_text || - r.body || - r.content} - ” + +
+

+ {r.author_name || r.user?.name || "Customer"} +

+
{renderStars(r.rating)}
-
— {r.user?.name}
+ +

+ {isExpanded ? fullText : truncateText(fullText)} +

+ + {r.images && + r.images.length > 0 && + r.images.some(img => img && img !== "ky") && ( +
+ {r.images.map((img, i) => { + if (!img || img === "ky") return null; + const fixedImg = img.startsWith("http") + ? img + : `https://lh3.googleusercontent.com/${img}`; + return ( + Review image (e.target.style.display = "none")} + /> + ); + })} +
+ )} + + {fullText.length > 150 && ( + + )}
- )) - } - - {/* -
-
-
- - - - - -
-
- “Absolutely love this place! Every blend tastes fresh and natural. The flavors pop, and you can really tell they use quality ingredients. Sixty5 Street never disappoints.” -
-
— Emily R.
-
-
- - - - -
-
-
- - - - - -
-
- “The perfect spot when you need something refreshing. Their fruit mixes are vibrant, clean, and full of energy. I always leave feeling great.” -
-
— Jason M.
-
-
- - - -
-
-
- - - - - -
-
- “Sixty5 Street has mastered the art of fresh flavor. The bowls are colorful, the drinks are delicious, and everything feels thoughtfully prepared. A must-try!” -
-
— Sofia L.
-
-
- - - -
-
-
- - - - - -
-
- “Consistently amazing! The blends are smooth, balanced, and not overly sweet. You can taste the real fruit in every sip. Highly recommend for healthy cravings.” -
-
— David P.
-
-
- - - -
-
-
- - - - - -
-
- “Super fresh, super tasty. The street-style vibe makes the whole experience fun and lively. Sixty5 Street has quickly become one of my favorite places to grab a flavorful drink.” -
-
— Ava T.
-
-
- */} + ); + })} + )} - {/* Google Review Button */} -
- - Review us on Google - -
+
+ + Review us on Google +
-
- {/* End Testimonial Section Two */} - - - ) +
+
+ ); } diff --git a/public/assets/css/global.css b/public/assets/css/global.css index efe0a3d..063a42e 100644 --- a/public/assets/css/global.css +++ b/public/assets/css/global.css @@ -57,22 +57,22 @@ ==================================================================== ***/ - - * { - margin:0px; - padding:0px; - border:none; - outline:none; + +* { + margin: 0px; + padding: 0px; + border: none; + outline: none; } @font-face { font-family: 'LillyBelle'; - src: - url("../fonts/LillyBelle.woff") format("woff"), - url("../fonts/LillyBelle.ttf") format("truetype"); - font-weight: normal; - font-style: normal; - } + src: + url("../fonts/LillyBelle.woff") format("woff"), + url("../fonts/LillyBelle.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} /*** @@ -83,136 +83,147 @@ ***/ body { - font-size:14px; - color:#777777; - line-height:1.7em; - font-weight:400; - background:#ffffff; + font-size: 14px; + color: #777777; + line-height: 1.7em; + font-weight: 400; + background: #ffffff; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-family: var(--poppins); } -.bordered-layout .page-wrapper{ - padding:0px 50px 0px; +.bordered-layout .page-wrapper { + padding: 0px 50px 0px; } -a{ - text-decoration:none; - cursor:pointer; - color:#cf2d1f ; +a { + text-decoration: none; + cursor: pointer; + color: #cf2d1f; } button, -a:hover,a:focus,a:visited{ - text-decoration:none; - outline:none !important; +a:hover, +a:focus, +a:visited { + text-decoration: none; + outline: none !important; } -h1,h2,h3,h4,h5,h6 { - position:relative; - font-weight:normal; - margin:0px; - background:none; - line-height:1.6em; +h1, +h2, +h3, +h4, +h5, +h6 { + position: relative; + font-weight: normal; + margin: 0px; + background: none; + line-height: 1.6em; font-family: var(--poppins); } -input,button,select,textarea{ +input, +button, +select, +textarea { font-family: var(--poppins); } -textarea{ - overflow:hidden; +textarea { + overflow: hidden; } -.text{ - position:relative; - line-height:1.9em; +.text { + position: relative; + line-height: 1.9em; font-family: var(--poppins); } -p{ - position:relative; - line-height:1.8em; +p { + position: relative; + line-height: 1.8em; font-family: var(--poppins); } /* Typography */ -h1{ - font-size:112px; +h1 { + font-size: 112px; } -h2{ - position:relative; - font-size:48px; - line-height:1.3em; +h2 { + position: relative; + font-size: 48px; + line-height: 1.3em; } -h3{ - position:relative; - font-size:30px; - line-height:1.3em; +h3 { + position: relative; + font-size: 30px; + line-height: 1.3em; } -h4{ - position:relative; - font-size:24px; - line-height:1.3em; - font-weight:700; +h4 { + position: relative; + font-size: 24px; + line-height: 1.3em; + font-weight: 700; } -h5{ - font-size:20px; +h5 { + font-size: 20px; } -h6{ - font-size:18px; +h6 { + font-size: 18px; } -.auto-container{ - position:static; - max-width:1200px; - padding:0px 15px; - margin:0 auto; +.auto-container { + position: static; + max-width: 1200px; + padding: 0px 15px; + margin: 0 auto; } -.medium-container{ - max-width:850px; +.medium-container { + max-width: 850px; } -.page-wrapper{ - position:relative; - margin:0 auto; - width:100%; - min-width:300px; +.page-wrapper { + position: relative; + margin: 0 auto; + width: 100%; + min-width: 300px; } -ul,li{ - list-style:none; - padding:0px; - margin:0px; +ul, +li { + list-style: none; + padding: 0px; + margin: 0px; } -img{ - display:inline-block; - max-width:100%; +img { + display: inline-block; + max-width: 100%; } -.theme-btn{ - position:relative; - cursor:pointer; - display:inline-block; - transition:all 0.3s ease; - -moz-transition:all 0.3s ease; - -webkit-transition:all 0.3s ease; - -ms-transition:all 0.3s ease; - -o-transition:all 0.3s ease; +.theme-btn { + position: relative; + cursor: pointer; + display: inline-block; + transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + -o-transition: all 0.3s ease; } -.centered{ - text-align:center; +.centered { + text-align: center; } /*** @@ -223,278 +234,278 @@ img{ ***/ -.scroll-to-top{ - position:fixed; - bottom:15px; - right:15px; - width:40px; - height:40px; - color:#cf2d1f ; - font-size:13px; - text-transform:uppercase; - line-height:38px; - text-align:center; - z-index:100; - cursor:pointer; - background:#ffffff; - display:none; - border-radius:50px; - box-shadow:0px 0px 10px rgba(0,0,0,0.15); - -webkit-transition:all 300ms ease; - -ms-transition:all 300ms ease; - -o-transition:all 300ms ease; - -moz-transition:all 300ms ease; - transition:all 300ms ease; +.scroll-to-top { + position: fixed; + bottom: 15px; + right: 15px; + width: 40px; + height: 40px; + color: #cf2d1f; + font-size: 13px; + text-transform: uppercase; + line-height: 38px; + text-align: center; + z-index: 100; + cursor: pointer; + background: #ffffff; + display: none; + border-radius: 50px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + -moz-transition: all 300ms ease; + transition: all 300ms ease; } -.scroll-to-top:hover{ - color:#ffffff; - background:#cf2d1f ; +.scroll-to-top:hover { + color: #ffffff; + background: #cf2d1f; } /* List Style One */ -.list-style-one{ - position:relative; +.list-style-one { + position: relative; } -.list-style-one li{ - position:relative; - color:#ffffff; - font-size:16px; - padding-left:30px; - font-weight:400; - line-height:1.6em; - margin-bottom:20px; +.list-style-one li { + position: relative; + color: #ffffff; + font-size: 16px; + padding-left: 30px; + font-weight: 400; + line-height: 1.6em; + margin-bottom: 20px; } -.list-style-one li .icon{ - position:absolute; - left:0px; - top:5px; - color:#cf2d1f ; - font-size:18px; - line-height:1em; - font-weight:300; - -webkit-transition:all 300ms ease; - -moz-transition:all 300ms ease; - -ms-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; +.list-style-one li .icon { + position: absolute; + left: 0px; + top: 5px; + color: #cf2d1f; + font-size: 18px; + line-height: 1em; + font-weight: 300; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; } /* List Style Two */ -.list-style-two{ - position:relative; +.list-style-two { + position: relative; } -.list-style-two li{ - position:relative; - color:#505056; - font-size:16px; - padding-left:30px; - font-weight:600; - line-height:1.6em; - margin-bottom:15px; +.list-style-two li { + position: relative; + color: #505056; + font-size: 16px; + padding-left: 30px; + font-weight: 600; + line-height: 1.6em; + margin-bottom: 15px; } -.list-style-two li:before{ - position:absolute; +.list-style-two li:before { + position: absolute; content: "\f15d"; - left:0px; - top:5px; - color:#f7a392; - font-size:16px; - line-height:1em; + left: 0px; + top: 5px; + color: #f7a392; + font-size: 16px; + line-height: 1em; font-family: "Flaticon"; - -webkit-transition:all 300ms ease; - -moz-transition:all 300ms ease; - -ms-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; } /*Btn Style One*/ -.btn-style-one{ +.btn-style-one { display: inline-block; font-size: 16px; line-height: 50px; color: #ffffff; padding: 11px 30px; font-weight: 500; - overflow:hidden; + overflow: hidden; overflow: hidden; border-radius: 50px; - background-color:#cf2d1f ; - padding:7px 35px 6px 7px; + background-color: #cf2d1f; + padding: 7px 35px 6px 7px; text-transform: capitalize; font-family: var(--poppins); } -.btn-style-one .icon{ - position:relative; - width:48px; - height:48px; - line-height:48px; - border-radius:50%; - text-align:center; - float:left; - margin-right:22px; - -webkit-transition:all 300ms ease; - -moz-transition:all 300ms ease; - -ms-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; - background:#ffffff url(../images/icons/btn-icon.png) no-repeat; +.btn-style-one .icon { + position: relative; + width: 48px; + height: 48px; + line-height: 48px; + border-radius: 50%; + text-align: center; + float: left; + margin-right: 22px; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; + background: #ffffff url(../images/icons/btn-icon.png) no-repeat; } -.btn-style-one:hover{ +.btn-style-one:hover { color: #ffffff; - background-color:#ed7129; + background-color: #ed7129; } /* Btn Style Two */ -.btn-style-two{ +.btn-style-two { display: inline-block; font-size: 16px; line-height: 49px; color: #27272f; font-weight: 500; - overflow:hidden; + overflow: hidden; overflow: hidden; border-radius: 50px; - border:1px solid #cf2d1f ; - padding:7px 35px 5px 7px; + border: 1px solid #cf2d1f; + padding: 7px 35px 5px 7px; text-transform: capitalize; font-family: var(--poppins); } -.btn-style-two .icon{ - position:relative; - width:48px; - height:48px; - line-height:48px; - border-radius:50%; - text-align:center; - float:left; - margin-right:22px; - -webkit-transition:all 300ms ease; - -moz-transition:all 300ms ease; - -ms-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; - background:#cf2d1f url(../images/icons/btn-icon-1.png) no-repeat; +.btn-style-two .icon { + position: relative; + width: 48px; + height: 48px; + line-height: 48px; + border-radius: 50%; + text-align: center; + float: left; + margin-right: 22px; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; + background: #cf2d1f url(../images/icons/btn-icon-1.png) no-repeat; } -.btn-style-two:hover .icon{ - background-color:#1d1d1b ; +.btn-style-two:hover .icon { + background-color: #1d1d1b; } -.btn-style-two:hover{ +.btn-style-two:hover { color: #ffffff; - background-color:#cf2d1f ; + background-color: #cf2d1f; } /* Btn Style Three */ -.btn-style-three{ +.btn-style-three { display: inline-block; font-size: 16px; line-height: 50px; - color: #cf2d1f ; + color: #cf2d1f; padding: 11px 30px; font-weight: 500; - overflow:hidden; + overflow: hidden; overflow: hidden; border-radius: 50px; - background-color:#ffffff; - padding:7px 35px 6px 7px; + background-color: #ffffff; + padding: 7px 35px 6px 7px; text-transform: capitalize; font-family: var(--poppins); } -.btn-style-three .icon{ - position:relative; - width:48px; - height:48px; - line-height:48px; - border-radius:50%; - text-align:center; - float:left; - margin-right:22px; - -webkit-transition:all 300ms ease; - -moz-transition:all 300ms ease; - -ms-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; - background:#cf2d1f url(../images/icons/btn-icon-1.png) no-repeat; +.btn-style-three .icon { + position: relative; + width: 48px; + height: 48px; + line-height: 48px; + border-radius: 50%; + text-align: center; + float: left; + margin-right: 22px; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; + background: #cf2d1f url(../images/icons/btn-icon-1.png) no-repeat; } -.btn-style-three:hover .icon{ - background-color:#1d1d1b ; +.btn-style-three:hover .icon { + background-color: #1d1d1b; } -.btn-style-three:hover{ +.btn-style-three:hover { color: #ffffff; - background-color:#cf2d1f ; + background-color: #cf2d1f; } /* Btn Style Four */ -.btn-style-four{ +.btn-style-four { display: inline-block; font-size: 16px; line-height: 50px; color: #ffffff; padding: 11px 30px; font-weight: 500; - overflow:hidden; + overflow: hidden; overflow: hidden; border-radius: 50px; - background-color:#cf2d1f; - padding:7px 35px 6px 7px; + background-color: #cf2d1f; + padding: 7px 35px 6px 7px; text-transform: capitalize; font-family: var(--poppins); } -.btn-style-four .icon{ - position:relative; - width:48px; - height:48px; - line-height:48px; - border-radius:50%; - text-align:center; - float:left; - color:#f7a392; - margin-right:22px; - -webkit-transition:all 300ms ease; - -moz-transition:all 300ms ease; - -ms-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; - background-color:#f5f5f5; +.btn-style-four .icon { + position: relative; + width: 48px; + height: 48px; + line-height: 48px; + border-radius: 50%; + text-align: center; + float: left; + color: #f7a392; + margin-right: 22px; + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; + background-color: #f5f5f5; } -.btn-style-four:hover .icon{ - background-color:#1d1d1b ; +.btn-style-four:hover .icon { + background-color: #1d1d1b; } -.btn-style-four:hover{ +.btn-style-four:hover { color: #ffffff; - background-color:#ed7129 ; + background-color: #ed7129; } /* Social Icon One */ -.social-icon-one{ +.social-icon-one { position: relative; display: block; } -.social-icon-one .title{ +.social-icon-one .title { position: relative; font-size: 20px; line-height: 26px; @@ -503,7 +514,7 @@ img{ margin-right: 15px; } -.social-icon-one li{ +.social-icon-one li { position: relative; display: inline-block; font-size: 16px; @@ -512,11 +523,11 @@ img{ margin-right: 22px; } -.social-icon-one li:last-child{ +.social-icon-one li:last-child { margin-right: 0; } -.social-icon-one li a{ +.social-icon-one li a { position: relative; display: block; font-size: 16px; @@ -529,20 +540,32 @@ img{ transition: all 300ms ease; } -.social-icon-one li a:hover{ - color: #cf2d1f ; +.social-icon-one li a:hover { + color: #cf2d1f; } -.theme_color{ - color:#cf2d1f ; +.theme_color { + color: #cf2d1f; } -.preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background-color:#ffffff; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icons/preloader.svg); background-size:100px; } +.preloader { + position: fixed; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + z-index: 999999; + background-color: #ffffff; + background-position: center center; + background-repeat: no-repeat; + background-image: url(../images/icons/preloader.svg); + background-size: 100px; +} -img{ - display:inline-block; - max-width:100%; - height:auto; +img { + display: inline-block; + max-width: 100%; + height: auto; } /*** @@ -553,71 +576,71 @@ img{ ***/ -.sec-title{ - position:relative; - margin-bottom:45px; +.sec-title { + position: relative; + margin-bottom: 45px; } -.sec-title .title{ - position:relative; +.sec-title .title { + position: relative; /* color:#beb996; */ color: #ed7129; - font-size:24px; - font-weight:400; - letter-spacing:2px; - text-transform:capitalize; + font-size: 24px; + font-weight: 400; + letter-spacing: 2px; + text-transform: capitalize; font-family: var(--niconne); } -.sec-title h2{ - color:#27272f; - font-weight: 600; - line-height: 1.3em; - margin-top:8px; +.sec-title h2 { + color: #27272f; + font-weight: 600; + line-height: 1.3em; + margin-top: 8px; } -.sec-title .separate{ - position:relative; - width:70px; - height:22px; - margin-top:10px !important; +.sec-title .separate { + position: relative; + width: 70px; + height: 22px; + margin-top: 10px !important; /* background:url(../images/icons/separate.png) no-repeat; */ - background:url(../images/separate.webp) no-repeat; + background: url(../images/separate.webp) no-repeat; } -.blog-card h3{ +.blog-card h3 { position: relative; - font-size: 24px; - line-height: 1.3em; - font-weight: 700; + font-size: 24px; + line-height: 1.3em; + font-weight: 700; } -.faq-wrapper h3{ +.faq-wrapper h3 { font-size: 20px !important; } -.sec-title.centered .separate{ - margin:0 auto; +.sec-title.centered .separate { + margin: 0 auto; } -.sec-title .text{ - color:#5e5e5e; - font-weight: 400; - margin-top:22px; - font-size:16px; +.sec-title .text { + color: #5e5e5e; + font-weight: 400; + margin-top: 22px; + font-size: 16px; } .sec-title.light .text, .sec-title.light .title, -.sec-title.light h2{ - color:#ffffff; +.sec-title.light h2 { + color: #ffffff; } -.sec-title.centered{ +.sec-title.centered { text-align: center !important; } @@ -629,55 +652,158 @@ img{ ***/ -.sec-title-two{ - position:relative; - margin-bottom:60px; +.sec-title-two { + position: relative; + margin-bottom: 60px; } -.sec-title-two .title{ - position:relative; - color:#cf2d1f ; - font-size:18px; - font-weight:400; - letter-spacing:2px; - text-transform:capitalize; +.sec-title-two .title { + position: relative; + color: #cf2d1f; + font-size: 18px; + font-weight: 400; + letter-spacing: 2px; + text-transform: capitalize; font-family: 'Niconne', cursive; } -.sec-title-two h4{ - color:#27272f; - font-weight: 600; - line-height: 1.3em; - margin-top:10px; - text-transform:uppercase; +.sec-title-two h4 { + color: #27272f; + font-weight: 600; + line-height: 1.3em; + margin-top: 10px; + text-transform: uppercase; } -.sec-title-two .separator{ - position:relative; - width:370px; - height:10px; - margin-top:15px !important; - border-top:1px dashed #acacac; - border-bottom:1px dashed #acacac; +.sec-title-two .separator { + position: relative; + width: 370px; + height: 10px; + margin-top: 15px !important; + border-top: 1px dashed #acacac; + border-bottom: 1px dashed #acacac; } -.sec-title-two.centered .separator{ - margin:0 auto; +.sec-title-two.centered .separator { + margin: 0 auto; } -.sec-title-two .text{ - color:#5e5e5e; - font-weight: 400; - margin-top:22px; - font-size:14px; +.sec-title-two .text { + color: #5e5e5e; + font-weight: 400; + margin-top: 22px; + font-size: 14px; } .sec-title-two.light .text, .sec-title-two.light .title, -.sec-title-two.light h2{ - color:#ffffff; +.sec-title-two.light h2 { + color: #ffffff; } -.sec-title-two.centered{ +.sec-title-two.centered { text-align: center !important; +} + +.google-review-card { + background: #fff; + border-radius: 14px; + padding: 20px; + box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); + border: 1px solid #eee; + height: 100%; +} + +.google-review-header { + display: flex; + align-items: flex-start; + gap: 15px; + margin-bottom: 10px; +} + +.google-avatar { + position: relative; + width: 52px; + height: 52px; + border-radius: 50%; + background: #e0e0e0; + color: #333; + font-weight: 600; + font-size: 22px; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.google-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.google-g-icon { + width: 18px; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); +} + +.google-name { + font-size: 16px; + font-weight: 600; + margin: 0; + margin-bottom: 2px; +} + +.google-stars span { + font-size: 15px; + margin-right: 2px; +} + +.google-text { + font-size: 14px; + color: #444; + margin-top: 8px; + line-height: 1.5; +} + +.google-readmore { + font-size: 14px; + color: #1a73e8; + cursor: pointer; + margin-top: 6px; + display: inline-block; +} + +.google-review-images { + display: flex; + gap: 10px; + margin-top: 10px; + flex-wrap: wrap; +} + +.google-review-photo { + width: 80px; + height: 80px; + border-radius: 8px; + object-fit: cover; + border: 1px solid #eee; +} + +.equal-height { + min-height: 350px; + display: flex; + flex-direction: column; +} + +.read-more-btn { + background: none; + border: none; + color: #cf2d1f; + font-weight: 600; + cursor: pointer; + margin-top: 5px; + padding: 0; } \ No newline at end of file