MetatroncubeSoftwareSolutions/TamilCulturalAssociation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tamil culture issue solved

Browse Source
This commit is contained in:
Selvi 2025-07-26 14:07:24 +05:30
parent 43c166e07a
commit 88abdc2313
2 changed files with 118 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/home/ArtsAndCultureSection.tsx
View File

@ -1,36 +1,42 @@
'use client' 'use client'
import Link from 'next/link' import Link from 'next/link'
import { useRef, useEffect } from 'react' import { useRef, useEffect, useState } from 'react'
import { Autoplay, Navigation } from 'swiper/modules' import { Autoplay, Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react' import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css' import 'swiper/css'
import 'swiper/css/navigation' import 'swiper/css/navigation'
const cultureSlides = [ 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-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-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-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-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-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-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-7.webp", icon: "/assets/img/home/icons/silambam.webp", title: "Silambattam", description: "Silambam or Silambattam...", slug: "silambattam" },
] ]
export default function ArtAndCultureSection() { export default function ArtAndCultureSection() {
const prevRef = useRef<HTMLButtonElement | null>(null) const prevRef = useRef<HTMLButtonElement | null>(null)
const nextRef = useRef<HTMLButtonElement | null>(null) const nextRef = useRef<HTMLButtonElement | null>(null)
const [navReady, setNavReady] = useState(false)
const swiperRef = useRef<any>(null) const swiperRef = useRef<any>(null)
useEffect(() => { 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.prevEl = prevRef.current
swiperRef.current.params.navigation.nextEl = nextRef.current swiperRef.current.params.navigation.nextEl = nextRef.current
swiperRef.current.navigation.destroy() swiperRef.current.navigation.destroy()
swiperRef.current.navigation.init() swiperRef.current.navigation.init()
swiperRef.current.navigation.update() swiperRef.current.navigation.update()
} }
}, []) }, [navReady])
return ( return (
<div className="memory1-section-area sp4"> <div className="memory1-section-area sp4">
@ -52,10 +58,8 @@ export default function ArtAndCultureSection() {
spaceBetween={30} spaceBetween={30}
autoplay={{ delay: 2500, disableOnInteraction: false }} autoplay={{ delay: 2500, disableOnInteraction: false }}
loop={true} loop={true}
onSwiper={(swiper) => (swiperRef.current = swiper)}
navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }} navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
onSwiper={(swiper) => {
swiperRef.current = swiper
}}
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 30 }, 320: { slidesPerView: 1, spaceBetween: 30 },
575: { slidesPerView: 2, spaceBetween: 30 }, 575: { slidesPerView: 2, spaceBetween: 30 },
@ -74,22 +78,26 @@ export default function ArtAndCultureSection() {
<div className="content-area"> <div className="content-area">
<img src={slide.icon} alt={`${slide.title} Icon`} className="logo1 keyframe5" /> <img src={slide.icon} alt={`${slide.title} Icon`} className="logo1 keyframe5" />
<div className="arrow"> <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>
<div className="space18" /> <div className="space18" />
<p>{slide.title}</p> <p>{slide.title}</p>
<div className="space12" /> <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> </div>
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
<div className="owl-nav" style={{ position: "absolute", top: "-80px", right: "40px" }}> <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" /> <i className="fa-solid fa-angle-left" />
</button> </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" /> <i className="fa-solid fa-angle-right" />
</button> </button>
</div> </div>

19
public/assets/css/main.css
View File

@ -28342,3 +28342,22 @@ h2.custom-text.aos-init.aos-animate{
padding: 10px !important; 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;
}