Google Review Branding updated

src/app/about-antalya-restaurant/AboutContent.tsx

@@ -14,6 +14,7 @@ import { Autoplay, Navigation } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { FaStar, FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import GoogleReviewsBranding from "@/components/GoogleReviewsBranding";
 
 interface Review {
     text?: string;
@@ -298,6 +299,7 @@ export default function AboutContent() {
                     <Image src="/images/eat.png" alt="Testimonials Section Cutlery Icon" width={24} height={24} />
                 </div>
                 <h2 className={styles.sectionTitleCenter}>What Our Guests Say</h2>
+                <GoogleReviewsBranding centered={true} />
 
                 <div className={styles.testimonialSlider}>
                     <button className={`${styles.sliderBtn} prev-btn`}>
@@ -306,7 +308,7 @@ export default function AboutContent() {
 
                     <div style={{ flex: 1, width: '100%' }}>
                         {loading ? (
-                            <div className="text-center" style={{ color: '#F5E6D3', padding: '40px' , textAlign: 'center'}}>
+                            <div className="text-center" style={{ color: '#F5E6D3', padding: '40px', textAlign: 'center' }}>
                                 <p>Loading reviews...</p>
                             </div>
                         ) : (

src/app/about-antalya-restaurant/about.module.css

@@ -97,7 +97,7 @@
   font-family: var(--font-playfair);
   font-size: 2.5rem;
   color: var(--color-paragraph);
-  margin-bottom: 3rem;
+  margin-bottom: 10px;
   text-align: center;
   /* text-transform: uppercase; */
   letter-spacing: 2px;
@@ -214,7 +214,7 @@
   max-width: 900px;
   margin: 0 auto;
   position: relative;
-  padding: 0 70px;
+  padding: 20px 70px 0px 70px;
 }
 
 .sliderBtn {
@@ -663,7 +663,7 @@
     max-width: 900px;
     margin: 0 auto;
     position: relative;
-    padding: 0 10px !important;
+    padding: 20px 10px 0px 10px !important;
     /* Reduced side padding (enough for arrows) */
   }
 

src/components/GoogleReviewsBranding.tsx

@@ -0,0 +1,56 @@
+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' }}>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: '#FFFFFF' }}>Reviews</span>
+                <div style={{
+                    display: 'flex',
+                    gap: '1px',
+                    fontSize: '13px',
+                    lineHeight: '1'
+                }}>
+                    <span style={{ color: '#FBBC04' }}>★</span>
+                    <span style={{ color: '#FBBC04' }}>★</span>
+                    <span style={{ color: '#FBBC04' }}>★</span>
+                    <span style={{ color: '#FBBC04' }}>★</span>
+                    <span style={{ color: '#FBBC04' }}>★</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GoogleReviewsBranding;

src/components/Testimonials/Testimonials.module.css

@@ -30,7 +30,7 @@
     font-size: 2.5rem;
     color: var(--color-paragraph);
     text-align: center;
-    margin-bottom: 60px;
+    margin-bottom: 10px;
     letter-spacing: 2px;
     /* text-transform: uppercase; */
     font-weight: 400;
@@ -44,7 +44,7 @@
     max-width: 1400px;
     width: 100%;
     position: relative;
-    padding: 0 60px;
+    padding: 20px 60px 0px 60px;
     /* Space for arrows */
 }
 
@@ -221,13 +221,13 @@
 /* Responsive adjustments for different viewport sizes */
 @media (max-width: 1400px) {
     .sliderContainer {
-        padding: 0 50px;
+        padding: 20px 50px 0px 50px;
     }
 }
 
 @media (max-width: 1200px) {
     .sliderContainer {
-        padding: 0 40px;
+        padding: 20px 40px 0px 40px;
     }
 }
 
@@ -249,12 +249,12 @@
 
 @media (max-width: 1024px) {
     .sliderContainer {
-        padding: 0 45px;
+        padding: 20px 45px 0px 45px;
     }
 
     .title {
         font-size: 2.5rem;
-        margin-bottom: 40px;
+        margin-bottom: 10px;
     }
 
     .navBtn {
@@ -275,7 +275,7 @@
 
 @media (max-width: 768px) {
     .sliderContainer {
-        padding: 0 35px;
+        padding: 20px 35px 0px 35px;
     }
 
     .card {
@@ -308,7 +308,7 @@
 
 @media (max-width: 480px) {
     .sliderContainer {
-        padding: 0 30px;
+        padding: 20px 30px 0px 30px;
     }
 
     .title {

src/components/Testimonials/Testimonials.tsx

@@ -8,6 +8,7 @@ import { Autoplay, Navigation } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import { FaStar, FaChevronLeft, FaChevronRight } from 'react-icons/fa'
+import GoogleReviewsBranding from '../GoogleReviewsBranding'
 
 
 
@@ -162,10 +163,11 @@ export default function Testimonials() {
                 <Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
             </div>
             <h2 className={styles.title}>Testimonials</h2>
+            <GoogleReviewsBranding centered={true} />
 
             <div className={styles.sliderContainer}>
                 {loading ? (
-                    <div className="text-center" style={{ color: 'var(--color-paragraph)', padding: '40px' , textAlign: 'center'}}>
+                    <div className="text-center" style={{ color: 'var(--color-paragraph)', padding: '40px', textAlign: 'center' }}>
                         <p>Loading reviews...</p>
                     </div>
                 ) : (