tamil culture issue solved

components/home/ArtsAndCultureSection.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useState } from 'react'
 import { Autoplay, Navigation } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/css'
@@ -20,17 +20,23 @@ const cultureSlides = [
 export default function ArtAndCultureSection() {
   const prevRef = useRef<HTMLButtonElement | null>(null)
   const nextRef = useRef<HTMLButtonElement | null>(null)
+  const [navReady, setNavReady] = useState(false)
   const swiperRef = useRef<any>(null)
 
   useEffect(() => {
-        if (swiperRef.current && swiperRef.current.params) {
+    setNavReady(true)
+  }, [])
+
+  useEffect(() => {
+
+    if (navReady && swiperRef.current && swiperRef.current.params) {
       swiperRef.current.params.navigation.prevEl = prevRef.current
       swiperRef.current.params.navigation.nextEl = nextRef.current
       swiperRef.current.navigation.destroy()
       swiperRef.current.navigation.init()
       swiperRef.current.navigation.update()
     }
-    }, [])
+  }, [navReady])
 
   return (
     <div className="memory1-section-area sp4">
@@ -52,10 +58,8 @@ export default function ArtAndCultureSection() {
                 spaceBetween={30}
                 autoplay={{ delay: 2500, disableOnInteraction: false }}
                 loop={true}
+                onSwiper={(swiper) => (swiperRef.current = swiper)}
                 navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
-                                onSwiper={(swiper) => {
-                                    swiperRef.current = swiper
-                                }}
                 breakpoints={{
                   320: { slidesPerView: 1, spaceBetween: 30 },
                   575: { slidesPerView: 2, spaceBetween: 30 },
@@ -74,22 +78,26 @@ export default function ArtAndCultureSection() {
                     <div className="content-area">
                       <img src={slide.icon} alt={`${slide.title} Icon`} className="logo1 keyframe5" />
                       <div className="arrow">
-                                                <Link href={slide.slug}><i className="fa-solid fa-arrow-right" /></Link>
+                        <Link href={`/tamil-culture-post?slug=${slide.slug}`}>
+                          <i className="fa-solid fa-arrow-right" />
+                        </Link>
                       </div>
                       <div className="space18" />
                       <p>{slide.title}</p>
                       <div className="space12" />
-                                            <Link href={`/tamil-culture-post?slug=${slide.slug}`}>{slide.description}</Link>
+                      <Link href={`/tamil-culture-post?slug=${slide.slug}`} className="description-link">
+                        {slide.description}
+                      </Link>
                     </div>
                   </SwiperSlide>
                 ))}
               </Swiper>
 
               <div className="owl-nav" style={{ position: "absolute", top: "-80px", right: "40px" }}>
-                                <button ref={prevRef} type="button" role="presentation" className="owl-prev h1p" aria-label="Previous Slide">
+                <button ref={prevRef} type="button" className="owl-prev h1p" aria-label="Previous Slide">
                   <i className="fa-solid fa-angle-left" />
                 </button>
-                                <button ref={nextRef} type="button" role="presentation" className="owl-next h1n" aria-label="Next Slide">
+                <button ref={nextRef} type="button" className="owl-next h1n" aria-label="Next Slide">
                   <i className="fa-solid fa-angle-right" />
                 </button>
               </div>

public/assets/css/main.css

@@ -28342,3 +28342,22 @@ h2.custom-text.aos-init.aos-animate{
     padding: 10px !important;
   }
 }
+.description-link {
+  display: inline-block;
+  color: inherit;
+  text-decoration: none;
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.description-link:hover {
+  color: #d9534f;
+}
+
+.owl-nav button {
+  z-index: 10;
+  position: relative;
+  background: none;
+  border: none;
+}