207 lines
11 KiB
TypeScript
207 lines
11 KiB
TypeScript
'use client'
|
|
import Link from 'next/link'
|
|
import { Autoplay, Navigation, Pagination } from "swiper/modules"
|
|
import { Swiper, SwiperSlide } from "swiper/react"
|
|
const swiperOptions = {
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
},
|
|
loop: true,
|
|
|
|
// Navigation
|
|
navigation: {
|
|
nextEl: '.owl-next',
|
|
prevEl: '.owl-prev',
|
|
},
|
|
|
|
// Pagination
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
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,
|
|
},
|
|
}
|
|
}
|
|
|
|
export default function ArtAndCultureSection() {
|
|
return (
|
|
<>
|
|
|
|
<div className="memory1-section-area sp1">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12 m-auto">
|
|
<div className="memory-header heading2 space-margin60">
|
|
{/* <h5 data-aos="fade-left" data-aos-duration={800}>last year memory</h5>
|
|
<div className="space16" /> */}
|
|
<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 {...swiperOptions} className=" owl-carousel">
|
|
<SwiperSlide className="memory-boxarea">
|
|
<div className="img1 image-anime">
|
|
<img src="/assets/img/home/tamil-culture/tamil-culture-1.webp" alt="" />
|
|
</div>
|
|
<div className="content-area">
|
|
<img src="/assets/img/icons/logo1.svg" alt="" className="logo1 keyframe5" />
|
|
<div className="arrow">
|
|
<Link href="/memories"><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
<div className="space18" />
|
|
<p>Instrumental Music</p>
|
|
<div className="space12" />
|
|
<Link href="/memories">In South Indian or Carnatic music, the vina, a long- necked and…</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="memory-boxarea">
|
|
<div className="img1 image-anime">
|
|
<img src="/assets/img/home/tamil-culture/tamil-culture-2.webp" alt="" />
|
|
</div>
|
|
<div className="content-area">
|
|
<img src="/assets/img/icons/logo1.svg" alt="" className="logo1 keyframe5" />
|
|
<div className="arrow">
|
|
<Link href="/memories"><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
<div className="space18" />
|
|
<p>Bharatha Natyam Dance</p>
|
|
<div className="space12" />
|
|
<Link href="/memories">An ancient traditional art form with its origins steeped…</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="memory-boxarea">
|
|
<div className="img1 image-anime">
|
|
<img src="/assets/img/home/tamil-culture/tamil-culture-3.webp" alt="" />
|
|
</div>
|
|
<div className="content-area">
|
|
<img src="/assets/img/icons/logo1.svg" alt="" className="logo1 keyframe5" />
|
|
<div className="arrow">
|
|
<Link href="/memories"><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
<div className="space18" />
|
|
<p>Vocal</p>
|
|
<div className="space12" />
|
|
<Link href="/memories">Carnatic music is considered one of the oldest systems of music…</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="memory-boxarea">
|
|
<div className="img1 image-anime">
|
|
<img src="/assets/img/home/tamil-culture/tamil-culture-4.webp" alt="" />
|
|
</div>
|
|
<div className="content-area">
|
|
<img src="/assets/img/icons/logo1.svg" alt="" className="logo1 keyframe5" />
|
|
<div className="arrow">
|
|
<Link href="/memories"><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
<div className="space18" />
|
|
<p>Jallikattu</p>
|
|
<div className="space12" />
|
|
<Link href="/memories">Jallikattu (Tamil: சல்லிகட்டு, challikattu)…</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="memory-boxarea">
|
|
<div className="img1 image-anime">
|
|
<img src="/assets/img/home/tamil-culture/tamil-culture-5.webp" alt="" />
|
|
</div>
|
|
<div className="content-area">
|
|
<img src="/assets/img/icons/logo1.svg" alt="" className="logo1 keyframe5" />
|
|
<div className="arrow">
|
|
<Link href="/memories"><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
<div className="space18" />
|
|
<p>Entertainment-1</p>
|
|
<div className="space12" />
|
|
<Link href="/memories">Entertainment-1...</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="memory-boxarea">
|
|
<div className="img1 image-anime">
|
|
<img src="/assets/img/home/tamil-culture/tamil-culture-6.webp" alt="" />
|
|
</div>
|
|
<div className="content-area">
|
|
<img src="/assets/img/icons/logo1.svg" alt="" className="logo1 keyframe5" />
|
|
<div className="arrow">
|
|
<Link href="/memories"><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
<div className="space18" />
|
|
<p>Indoor game</p>
|
|
<div className="space12" />
|
|
<Link href="/memories">Indoor game...</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide className="memory-boxarea">
|
|
<div className="img1 image-anime">
|
|
<img src="/assets/img/home/tamil-culture/tamil-culture-7.webp" alt="" />
|
|
</div>
|
|
<div className="content-area">
|
|
<img src="/assets/img/icons/logo1.svg" alt="" className="logo1 keyframe5" />
|
|
<div className="arrow">
|
|
<Link href="/memories"><i className="fa-solid fa-arrow-right" /></Link>
|
|
</div>
|
|
<div className="space18" />
|
|
<p>Silambattam</p>
|
|
<div className="space12" />
|
|
<Link href="/memories">Silambam or Silambattam Tamil: சிலம்பம் அல்லது…</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
|
|
<div className="owl-nav" style={{ position: "absolute", top: "-80px", right: "90px" }}>
|
|
<button type="button" role="presentation" className="owl-prev h1p">
|
|
<i className="fa-solid fa-angle-left" />
|
|
</button>
|
|
<button type="button" role="presentation" className="owl-next h1n">
|
|
<i className="fa-solid fa-angle-right" />
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div className='col-lg-2'>
|
|
<div className="memory-boxarea pl-3">
|
|
|
|
<div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
|
|
<img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" style={{ height: "500px", width: "100%" }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</>
|
|
)
|
|
}
|