fix blogs section in homepage and navbar items

public/locales/ar/homepage.json

@@ -20,7 +20,8 @@
         "chatText": "تحتاج إلى التحدث مع شخص ما؟  يمكنك التحدث مع المعالج الخاص بك"
     },
     "blogs": {
-        "heading": "المدونات"
+        "heading": "المدوّنات",
+        "more": "اقرأ المزيد"
     },
     "tickets": {
         "heading1": "خيارات الشراء لدينا",

public/locales/en/homepage.json

@@ -20,7 +20,8 @@
         "chatText": "Need to talk? Let your therapist listen."
     },
     "blogs": {
-        "heading": "RECENT BLOGS"
+        "heading": "RECENT BLOGS",
+        "more": "Read more"
     },
     "tickets": {
         "heading1": "OUR PLAN OPTIONS",

src/components/Cards/BlogCard.jsx

@@ -1,13 +1,17 @@
-import Link from "next/link";
 import Image from "next/image";
-
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 const Card = ({ title, text, imgSrc, url }) => {
+    const { t } = useTranslation("homepage");
+    const router = useRouter();
+
     return (
-        <div className='mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1'>
-            <div className='h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end'>
+        <div className='group mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1'>
+            <div className='group-hover:cursor-pointer h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent/5 bg-gradient-to-t inset-x-0   text-white flex items-end'>
                 <div>
                     <div className='transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out'>
-                        <div className='font-semibold text-xl md:text-2xl'>
+                        <div className='font-semibold text-lg md:textxl'>
                             {title}
                         </div>
 
@@ -17,8 +21,7 @@ const Card = ({ title, text, imgSrc, url }) => {
                                 href={url}
                                 className='underline flex justify-end mr-5 mt-2 text-teal-100 hover:text-teal-400 group-hover:animate-bounce text-base'
                             >
-                                {" "}
-                                Read more
+                                {t("blogs.more")}
                             </Link>
                         </div>
                     </div>

src/components/Cards/__test__/__snapshots__/BlogCard.test.js.snap

@@ -2,17 +2,17 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
+  className="group mx-3 overflow-hidden  aspect-video cursor-auto rounded-md relative group my-1"
 >
   <div
-    className="h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent bg-gradient-to-t inset-x-0 -bottom-2  text-white flex items-end"
+    className="group-hover:cursor-pointer h-full z-50 opacity-90 group-hover:opacity-100 transition duration-300 ease-in-out cursor-auto absolute from-teal-950 to-transparent/5 bg-gradient-to-t inset-x-0   text-white flex items-end"
   >
     <div>
       <div
         className="transform-gpu p-4 space-y-0 text-lg group-hover:opacity-100 group-hover:translate-y-0 translate-y-3 pb-8  transition duration-300 ease-in-out"
       >
         <div
-          className="font-semibold text-xl md:text-2xl"
+          className="font-semibold text-lg md:textxl"
         />
         <div
           className=" text-sm  text-white "
@@ -27,8 +27,7 @@ exports[`renders correctly 1`] = `
             onMouseEnter={[Function]}
             onTouchStart={[Function]}
           >
-
-            Read more
+            blogs.more
           </a>
         </div>
       </div>

src/components/Home/HomePageWrapper.jsx

@@ -4,13 +4,13 @@ import HeroSection from "@/components/Home/HeroSection";
 import RecentBlogsSection from "@/components/Home/RecentBlogsSection";
 import TicketsSection from "@/components/Home/TicketsSection";
 
-const HomePageWrapper = () => {
+const HomePageWrapper = ({ posts }) => {
     return (
         <>
             <HeroSection />
             <AppointmentSection />
             <CommunicationSection />
-            <RecentBlogsSection />
+            <RecentBlogsSection posts={posts} />
             <TicketsSection />
         </>
     );

src/components/Home/RecentBlogsSection.jsx

@@ -1,47 +1,15 @@
+import { useTranslation } from "next-i18next";
 import Slider from "react-slick";
 
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
 import Card from "../Cards/BlogCard";
-
-import { useTranslation } from "next-i18next";
 import Reveal from "../utils/Reveal";
+import { urlForImage } from "../../../sanity/lib/image";
 
-const RecentBlogsSection = () => {
+const RecentBlogsSection = ({ posts }) => {
     const { t } = useTranslation("homepage");
-    const blogs = [
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-        {
-            title: "Mental Health and technology",
-            body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem",
-            url: "",
-            blogImg: "/Images/blog-img-placeholder.svg",
-        },
-    ];
 
     const settings = {
         dots: true,
@@ -65,7 +33,7 @@ const RecentBlogsSection = () => {
                 },
             },
             {
-                breakpoint: 600,
+                breakpoint: 820,
                 settings: {
                     slidesToShow: 2,
                     slidesToScroll: 2,
@@ -82,21 +50,24 @@ const RecentBlogsSection = () => {
         ],
     };
     return (
-        <div className='container max-w-[100%] bg-[#EAF8F9] p-16'>
+        <div className='max-w-[100%] bg-[#EAF8F9] p-5'>
             <Reveal>
-                <h2 className='lg:ml-24 md:ml-12 ml-5 font-bold font-atkinson block text-3xl md:text-4xl lg:text-5xl rtl:md:text-3xl  rtl:lg:text-4xl uppercase break-words text-black mb-5  md:mb-10'>
+                <h2 className='text-center font-bold font-atkinson block text-3xl md:text-4xl lg:text-5xl rtl:md:text-3xl  rtl:lg:text-4xl uppercase break-words text-black mb-5  md:my-10 '>
                     {t("blogs.heading")}
                 </h2>
             </Reveal>
-            <Reveal>
-                <Slider {...settings} className='p-1 m-1 md:p-5 md:m-6 lg:m-16'>
-                    {blogs.map((blog, index) => (
+            <Reveal className=''>
+                <Slider
+                    {...settings}
+                    className='z-50 p-1 m-1 md:p-5 md:m-5 lg:my-10'
+                >
+                    {posts?.map((post) => (
                         <Card
-                            key={index}
-                            title={blog.title}
-                            url={blog.url}
-                            text={blog.body}
-                            imgSrc={blog.blogImg}
+                            key={post._ref}
+                            title={post.title}
+                            url={`${post.language}/blogs/${post.slug.current}`}
+                            text={post.description}
+                            imgSrc={urlForImage(post.mainImage).url()}
                         />
                     ))}
                 </Slider>

src/components/Home/__test__/RecentBlogsSection.test.js

@@ -1,4 +1,5 @@
 import renderer from "react-test-renderer";
+
 import TicketsSection from "@/components/Home/TicketsSection";
 
 it("renders correctly", () => {