fix: google review text styling

Reviewed-on: #12

public/assets/css/style.css

@@ -173,7 +173,7 @@ Primary use: Multipurpose Template
   --full-wrapper-margin-x: 30px;
   --container-width: 1350px;
   --section-padding-y: 50px;
-  --menu-bar-height: 85px;
+  --menu-bar-height: 130px;
   --menu-bar-height-scrolled: 65px;
   --color-dark-1: #010101;
   --color-dark-2: #171717;

src/components/Blocks/GoogleReviews/GoogleReviews.tsx

@@ -32,9 +32,9 @@ export function GoogleReviews({ data }: GoogleReviewProps) {
         <div className="flex justify-center items-center space-x-2">
           <h2 className="text-xl text-center font-bol mt-[15px]">{data.ratingValue}</h2>
           <div className="mt-1">
-            <StarRating size={20} value={data.ratingValue} />
+            <StarRating size={30} value={data.ratingValue} />
           </div>
-          <div className="text-xs font-medium">Over {data.totalRating} Reviews</div>
+          <div className="font-medium">Over {data.totalRating} Reviews</div>
         </div>
 
         <div className="mt-20 relative">

src/components/Header.tsx

@@ -5,14 +5,14 @@ import { navMenuData } from "@/data/menu";
 import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import Image from "next/image";
 import Link from "next/link";
-import { FaFacebook, FaLinkedin, FaPhone } from "react-icons/fa";
+import { FaFacebook, FaLinkedin } from "react-icons/fa";
 
 const shareIcons: Record<string, any> = {
   phone: {
     link: "tel:+15208036644",
     dom: (
-      <span className="social-nav flex gap-3 text-2xl lg:text-[#00898b]">
+      <span className="social-nav flex gap-1 text-2xl lg:text-[#00898b]">
-        <FaPhone />
+        <Image src="/assets/icons/phone.png" alt="Image Description" width={25} height={25} />
         <b className="text-sm">(520) 803-6644</b>
       </span>
     ),
@@ -74,16 +74,26 @@ export default function Header({ links }: { links: typeof navMenuData }) {
             <HeaderNav links={links} />
             {/* End Item With Sub */}
           </ul>
-          <ul className="items-end clearlist">
+          <ul className="items-end clearlist flex flex-col justify-center h-full">
-            {Object.keys(shareIcons).map((k, idx) => {
+            <div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
-              return (
+              <a
-                <li key={idx} className="!p-0 !m-0">
+                href="/contact"
-                  <a className="cursor-pointer" href={shareIcons[k].link} target="_blank">
+                className="bg-[#00898b] px-3 py-2 rounded-full text-white font-bold hover:cursor-pointer hover:bg-[#00abad] scale-[1.02] mt-3 lg:mt-0"
-                    {shareIcons[k].dom}
+              >
-                  </a>
+                REQUEST CONSULTATION
-                </li>
+              </a>
-              );
+              <div className="flex justify-between w-full flex-col lg:flex-row">
-            })}
+                {Object.keys(shareIcons).map((k, idx) => {
+                  return (
+                    <li key={idx} className="!p-0 !m-0">
+                      <a className="cursor-pointer" href={shareIcons[k].link} target="_blank">
+                        {shareIcons[k].dom}
+                      </a>
+                    </li>
+                  );
+                })}
+              </div>
+            </div>
           </ul>
         </div>
 

src/components/Ratings/CardStarRating.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import StarRating from "./StarRating";
+import { limitString } from "@/utils/general";
 
 export interface CardStarRatingProps {
   data: {
@@ -12,10 +13,10 @@ export function CardStarRating({ data }: CardStarRatingProps) {
   return (
     <div className="bg-white p-2 rounded-lg shadow-md">
       <div className="flex justify-between">
-        <StarRating size={20} value={data.star} />
+        <StarRating size={30} value={data.star} />
-        <Image src="/assets/images/google-provider.svg" width={20} height={20} alt="" />
+        <Image src="/assets/images/google-provider.svg" width={30} height={30} alt="" />
       </div>
-      <p className="text-xs pl-1 mt-4">{data.description}</p>
+      <p className="p-1 mt-4 text-[22px]">{limitString(data.description)}</p>
     </div>
   );
 }

src/utils/general.ts

@@ -0,0 +1,3 @@
+export function limitString(text: string) {
+  return `${text.length > 100 ? `${text.slice(0, 100)}...` : text}`;
+}