heritage, food updated
This commit is contained in:
parent
e7b7a9ae04
commit
c4954b9aad
85
app/food/page.tsx
Normal file
85
app/food/page.tsx
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
'use client'
|
||||||
|
import Layout from "@/components/layout/Layout"
|
||||||
|
import { recipesList } from "@/utility/constant.utils";
|
||||||
|
import PageLoader from "@/components/common-component/PageLoader";
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Suspense } from "react";
|
||||||
|
|
||||||
|
const Page = () => {
|
||||||
|
// const { slug } = params;
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const slug = searchParams.get('slug');
|
||||||
|
console.log("slug", slug)
|
||||||
|
const post = recipesList.find((post) => post.slug === slug);
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!post) {
|
||||||
|
return <p>post not found!</p>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="inner-page-header" style={{ backgroundImage: 'url(../../assets/img/bg/header-bg13.png)' }}>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-6 m-auto">
|
||||||
|
<div className="heading1 text-center">
|
||||||
|
<h1>{post?.title}</h1>
|
||||||
|
<div className="space20" />
|
||||||
|
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>{post?.title}</span></Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/*===== BLOG AREA STARTS =======*/}
|
||||||
|
<div className="blog-details-section sp1">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-12">
|
||||||
|
<div className="blog-deatils-content heading2">
|
||||||
|
<div className="img1">
|
||||||
|
<img src={post?.image} alt="Food" />
|
||||||
|
</div>
|
||||||
|
<div className="space32" />
|
||||||
|
|
||||||
|
{mounted && <div dangerouslySetInnerHTML={{ __html: post?.description || "" }} />}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/*===== BLOG AREA ENDS =======*/}
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Food = (() => {
|
||||||
|
return (
|
||||||
|
<Layout headerStyle={1} footerStyle={1}>
|
||||||
|
|
||||||
|
<Suspense fallback={<PageLoader />}>
|
||||||
|
<Page />
|
||||||
|
</Suspense>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default Food;
|
||||||
85
app/heritage-language/page.tsx
Normal file
85
app/heritage-language/page.tsx
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
'use client'
|
||||||
|
import Layout from "@/components/layout/Layout"
|
||||||
|
import { heritageLanguage } from "@/utility/constant.utils";
|
||||||
|
import PageLoader from "@/components/common-component/PageLoader";
|
||||||
|
import Link from "next/link"
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Suspense } from "react";
|
||||||
|
|
||||||
|
const Page = () => {
|
||||||
|
// const { slug } = params;
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const slug = searchParams.get('slug');
|
||||||
|
console.log("slug", slug)
|
||||||
|
const post = heritageLanguage.find((post) => post.slug === slug);
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!post) {
|
||||||
|
return <p>post not found!</p>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="inner-page-header" style={{ backgroundImage: 'url(../../assets/img/bg/header-bg13.png)' }}>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-6 m-auto">
|
||||||
|
<div className="heading1 text-center">
|
||||||
|
<h1>{post?.title}</h1>
|
||||||
|
<div className="space20" />
|
||||||
|
<Link href="/">Home <i className="fa-solid fa-angle-right" /> <span>{post?.title}</span></Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/*===== BLOG AREA STARTS =======*/}
|
||||||
|
<div className="blog-details-section sp1">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-12">
|
||||||
|
<div className="blog-deatils-content heading2">
|
||||||
|
<div className="img1">
|
||||||
|
<img src={post?.image} alt="Heritage and Language" />
|
||||||
|
</div>
|
||||||
|
<div className="space32" />
|
||||||
|
|
||||||
|
{mounted && <div dangerouslySetInnerHTML={{ __html: post?.description || "" }} />}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/*===== BLOG AREA ENDS =======*/}
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeritageLanguage = (() => {
|
||||||
|
return (
|
||||||
|
<Layout headerStyle={1} footerStyle={1}>
|
||||||
|
|
||||||
|
<Suspense fallback={<PageLoader />}>
|
||||||
|
<Page />
|
||||||
|
</Suspense>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default HeritageLanguage;
|
||||||
@ -26,6 +26,8 @@ import HomeUpcomingEvent from "@/components/home/HomeUpcomingEvent"
|
|||||||
import HomeWhyChooseUs from "@/components/home/HomeWhyChooseus"
|
import HomeWhyChooseUs from "@/components/home/HomeWhyChooseus"
|
||||||
import HomePhotoGallerySection from "@/components/home/HomePhotoGallerySection"
|
import HomePhotoGallerySection from "@/components/home/HomePhotoGallerySection"
|
||||||
import AdSectionFive from "@/components/home/AdSectionFive"
|
import AdSectionFive from "@/components/home/AdSectionFive"
|
||||||
|
import HeritageLanguage from "@/components/heritage-language/heritage-language"
|
||||||
|
import Food from "@/components/community/food/food"
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
|
||||||
@ -36,6 +38,8 @@ export default function Home() {
|
|||||||
<AboutSection />
|
<AboutSection />
|
||||||
<AdSectionOne />
|
<AdSectionOne />
|
||||||
<ArtAndCultureSection />
|
<ArtAndCultureSection />
|
||||||
|
{/* <HeritageLanguage /> */}
|
||||||
|
{/* <Food /> */}
|
||||||
<HomeSlogan />
|
<HomeSlogan />
|
||||||
|
|
||||||
<HomeCommunitySection />
|
<HomeCommunitySection />
|
||||||
|
|||||||
108
components/community/food/food.tsx
Normal file
108
components/community/food/food.tsx
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useRef, useEffect } 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: "South Indian Food", description: "The Tamils are an ancient people. Their history had its beginnings...", slug: "south-indian-food"},
|
||||||
|
{ image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Sri Lankan", description: "The Tamil script, like the other Brahmic scripts, is thought to…",slug: "sri-lankan"},
|
||||||
|
{ image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Traditional Tamil", description: "The Tamils are an ancient people. Their history had its beginnings…", slug: "traditional-tamil"},
|
||||||
|
{ image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Sri Lankan Curry", description: "The Tamil script, like the other Brahmic scripts, is thought to…",slug: "sri-lankan-curry"},
|
||||||
|
{ image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Canadian", description: "The Tamils are an ancient people. Their history had its beginnings…", slug: "canadian"},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Food() {
|
||||||
|
const prevRef = useRef<HTMLButtonElement | null>(null)
|
||||||
|
const nextRef = useRef<HTMLButtonElement | null>(null)
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
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">
|
||||||
|
<h2 className="text-anime-style-3">Food</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}
|
||||||
|
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={`/food?slug=${slide.slug}`}>{slide.description}</Link>
|
||||||
|
</div>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
<div className="owl-nav" style={{ position: "absolute", top: "-80px", right: "90px" }}>
|
||||||
|
<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'>
|
||||||
|
<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="Festival Poster" style={{ height: "500px", width: "100%" }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
106
components/heritage-language/heritage-language.tsx
Normal file
106
components/heritage-language/heritage-language.tsx
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useRef, useEffect } 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: "History of Tamil", description: "The Tamils are an ancient people. Their history had its beginnings...", slug: "history-of-tamil"},
|
||||||
|
{ image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Tamil Writing", description: "The Tamil script, like the other Brahmic scripts, is thought to…",slug: "tamil-writing"},
|
||||||
|
{ image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Ancient Tamil", description: "The Tamils are an ancient people. Their history had its beginnings…", slug: "ancient-tamil"},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function HeritageLanguage() {
|
||||||
|
const prevRef = useRef<HTMLButtonElement | null>(null)
|
||||||
|
const nextRef = useRef<HTMLButtonElement | null>(null)
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
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">
|
||||||
|
<h2 className="text-anime-style-3">Heritage and Language</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}
|
||||||
|
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={`/heritage-language?slug=${slide.slug}`}>{slide.description}</Link>
|
||||||
|
</div>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
<div className="owl-nav" style={{ position: "absolute", top: "-80px", right: "90px" }}>
|
||||||
|
<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'>
|
||||||
|
<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="Festival Poster" style={{ height: "500px", width: "100%" }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user