From 88abdc2313f46e9ba70c32c7d2dc0350c15d6b42 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Sat, 26 Jul 2025 14:07:24 +0530
Subject: [PATCH] tamil culture issue solved

---
 components/home/ArtsAndCultureSection.tsx | 190 +++++++++++-----------
 public/assets/css/main.css                |  19 +++
 2 files changed, 118 insertions(+), 91 deletions(-)

diff --git a/components/home/ArtsAndCultureSection.tsx b/components/home/ArtsAndCultureSection.tsx
index f3259fe..b691161 100644
--- a/components/home/ArtsAndCultureSection.tsx
+++ b/components/home/ArtsAndCultureSection.tsx
@@ -1,110 +1,118 @@
 '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'
 import 'swiper/css/navigation'
 
 const cultureSlides = [
-    { image: "/assets/img/home/tamil-culture/tamil-culture-1.webp", icon: "/assets/img/home/icons/music.webp", title: "Instrumental Music", description: "In South Indian or Carnatic…", slug: "instrumental-music"},
-    { image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Bharatha Natyam Dance", description: "An ancient traditional art…",slug: "bharathnatyam-dance"},
-    { image: "/assets/img/home/tamil-culture/tamil-culture-3.webp", icon: "/assets/img/home/icons/vocal.webp", title: "Vocal", description: "Carnatic music is considered…", slug: "vocal"},
-    { image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Jallikattu", description: "Jallikattu (Tamil: சல்லிகட்டு)…", slug: "jallikattu"},
-    { image: "/assets/img/home/tamil-culture/tamil-culture-5.webp", icon: "/assets/img/home/icons/entertainment.webp", title: "Entertainment-1", description: "Entertainment-1...", slug: "entertainment"},
-    { image: "/assets/img/home/tamil-culture/tamil-culture-6.webp", icon: "/assets/img/home/icons/indoor.webp", title: "Indoor game", description: "Indoor game...", slug: "indoor-game"},
-    { image: "/assets/img/home/tamil-culture/tamil-culture-7.webp", icon: "/assets/img/home/icons/silambam.webp", title: "Silambattam", description: "Silambam or Silambattam...", slug: "silambattam"},
+  { image: "/assets/img/home/tamil-culture/tamil-culture-1.webp", icon: "/assets/img/home/icons/music.webp", title: "Instrumental Music", description: "In South Indian or Carnatic…", slug: "instrumental-music" },
+  { image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Bharatha Natyam Dance", description: "An ancient traditional art…", slug: "bharathnatyam-dance" },
+  { image: "/assets/img/home/tamil-culture/tamil-culture-3.webp", icon: "/assets/img/home/icons/vocal.webp", title: "Vocal", description: "Carnatic music is considered…", slug: "vocal" },
+  { image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Jallikattu", description: "Jallikattu (Tamil: சல்லிகட்டு)…", slug: "jallikattu" },
+  { image: "/assets/img/home/tamil-culture/tamil-culture-5.webp", icon: "/assets/img/home/icons/entertainment.webp", title: "Entertainment-1", description: "Entertainment-1...", slug: "entertainment" },
+  { image: "/assets/img/home/tamil-culture/tamil-culture-6.webp", icon: "/assets/img/home/icons/indoor.webp", title: "Indoor game", description: "Indoor game...", slug: "indoor-game" },
+  { image: "/assets/img/home/tamil-culture/tamil-culture-7.webp", icon: "/assets/img/home/icons/silambam.webp", title: "Silambattam", description: "Silambam or Silambattam...", slug: "silambattam" },
 ]
 
 export default function ArtAndCultureSection() {
-    const prevRef = useRef<HTMLButtonElement | null>(null)
-    const nextRef = useRef<HTMLButtonElement | null>(null)
-    const swiperRef = useRef<any>(null)
+  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) {
-            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()
-        }
-    }, [])
+  useEffect(() => {
+    setNavReady(true)
+  }, [])
 
-    return (
-        <div className="memory1-section-area sp4">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-12 m-auto">
-                        <div className="memory-header heading2 space-margin60">
-                            <h2 className="text-anime-style-3">Tamil Culture</h2>
-                        </div>
-                    </div>
-                </div>
+  useEffect(() => {
 
-                <div className="row gx-5">
-                    <div className='col-lg-10'>
-                        <div className="col-lg-12 memory-slider-area">
-                            <Swiper
-                                modules={[Autoplay, Navigation]}
-                                slidesPerView={3}
-                                spaceBetween={30}
-                                autoplay={{ delay: 2500, disableOnInteraction: false }}
-                                loop={true}
-                                navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
-                                onSwiper={(swiper) => {
-                                    swiperRef.current = swiper
-                                }}
-                                breakpoints={{
-                                    320: { slidesPerView: 1, spaceBetween: 30 },
-                                    575: { slidesPerView: 2, spaceBetween: 30 },
-                                    767: { slidesPerView: 2, spaceBetween: 30 },
-                                    991: { slidesPerView: 2, spaceBetween: 30 },
-                                    1199: { slidesPerView: 3, spaceBetween: 30 },
-                                    1350: { slidesPerView: 3, spaceBetween: 30 },
-                                }}
-                                className="owl-carousel"
-                            >
-                                {cultureSlides.map((slide, idx) => (
-                                    <SwiperSlide className="memory-boxarea" key={idx}>
-                                        <div className="img1 image-anime">
-                                            <img src={slide.image} alt={slide.title} />
-                                        </div>
-                                        <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>
-                                            </div>
-                                            <div className="space18" />
-                                            <p>{slide.title}</p>
-                                            <div className="space12" />
-                                            <Link href={`/tamil-culture-post?slug=${slide.slug}`}>{slide.description}</Link>
-                                        </div>
-                                    </SwiperSlide>
-                                ))}
-                            </Swiper>
+    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])
 
-                            <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">
-                                    <i className="fa-solid fa-angle-left" />
-                                </button>
-                                <button ref={nextRef} type="button" role="presentation" className="owl-next h1n" aria-label="Next Slide">
-                                    <i className="fa-solid fa-angle-right" />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className='col-lg-2 ad-banner'>
-                        <div className="memory-boxarea pl-3">
-                            <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
-                                <img className='culture-img' src="/assets/img/home/ad-banner/ad.webp" alt="Festival Poster" style={{ height: "500px", width: "100%" }} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  return (
+    <div className="memory1-section-area sp4">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-12 m-auto">
+            <div className="memory-header heading2 space-margin60">
+              <h2 className="text-anime-style-3">Tamil Culture</h2>
             </div>
+          </div>
         </div>
-    )
+
+        <div className="row gx-5">
+          <div className='col-lg-10'>
+            <div className="col-lg-12 memory-slider-area">
+              <Swiper
+                modules={[Autoplay, Navigation]}
+                slidesPerView={3}
+                spaceBetween={30}
+                autoplay={{ delay: 2500, disableOnInteraction: false }}
+                loop={true}
+                onSwiper={(swiper) => (swiperRef.current = swiper)}
+                navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
+                breakpoints={{
+                  320: { slidesPerView: 1, spaceBetween: 30 },
+                  575: { slidesPerView: 2, spaceBetween: 30 },
+                  767: { slidesPerView: 2, spaceBetween: 30 },
+                  991: { slidesPerView: 2, spaceBetween: 30 },
+                  1199: { slidesPerView: 3, spaceBetween: 30 },
+                  1350: { slidesPerView: 3, spaceBetween: 30 },
+                }}
+                className="owl-carousel"
+              >
+                {cultureSlides.map((slide, idx) => (
+                  <SwiperSlide className="memory-boxarea" key={idx}>
+                    <div className="img1 image-anime">
+                      <img src={slide.image} alt={slide.title} />
+                    </div>
+                    <div className="content-area">
+                      <img src={slide.icon} alt={`${slide.title} Icon`} className="logo1 keyframe5" />
+                      <div className="arrow">
+                        <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}`} 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" className="owl-prev h1p" aria-label="Previous Slide">
+                  <i className="fa-solid fa-angle-left" />
+                </button>
+                <button ref={nextRef} type="button" className="owl-next h1n" aria-label="Next Slide">
+                  <i className="fa-solid fa-angle-right" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className='col-lg-2 ad-banner'>
+            <div className="memory-boxarea pl-3">
+              <div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
+                <img className='culture-img' src="/assets/img/home/ad-banner/ad.webp" alt="Festival Poster" style={{ height: "500px", width: "100%" }} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 112fe79..6cc7feb 100644
--- a/public/assets/css/main.css
+++ b/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;
+}