213 lines
8.6 KiB
TypeScript
213 lines
8.6 KiB
TypeScript
|
import axios from 'axios'
|
||
|
|
import Image from 'next/image'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import React, { useEffect, useState } from 'react'
|
||
|
|
import { Fade, Slide } from 'react-awesome-reveal'
|
||
|
|
|
||
|
|
import Container from 'components/BlogContainer'
|
||
|
|
|
||
|
|
const CulturalSection = () => {
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchCulturalSection = async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get(
|
||
|
|
'/api/homepageSection/culturalSectionData'
|
||
|
|
)
|
||
|
|
|
||
|
|
setData(response.data)
|
||
|
|
//console.log(data)
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching data:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchCulturalSection()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<Fade duration={2000} fraction={0} damping={0.5} triggerOnce>
|
||
|
|
<Container>
|
||
|
|
<div className="mb-2 grid grid-cols-3 gap-0 pt-5">
|
||
|
|
<div className="col-span-2">
|
||
|
|
<Fade
|
||
|
|
direction={'up'}
|
||
|
|
duration={600}
|
||
|
|
fraction={1}
|
||
|
|
delay={300}
|
||
|
|
triggerOnce
|
||
|
|
>
|
||
|
|
{data.map((item) => (
|
||
|
|
<h2
|
||
|
|
key={item._id}
|
||
|
|
className="mb-0 pb-0 text-left font-serif text-lg font-semibold leading-tight text-yellow-500 sm:text-3xl sm:leading-normal "
|
||
|
|
>
|
||
|
|
{item.heading}
|
||
|
|
</h2>
|
||
|
|
))}
|
||
|
|
</Fade>
|
||
|
|
<Fade duration={3000} fraction={0} delay={600} triggerOnce>
|
||
|
|
{data.map((item) => (
|
||
|
|
<h3
|
||
|
|
key={item._id}
|
||
|
|
className="text-stone-700 pb-3 text-left text-2xl font-bold leading-tight tracking-normal sm:text-6xl sm:leading-normal"
|
||
|
|
>
|
||
|
|
{item.subheading}
|
||
|
|
</h3>
|
||
|
|
))}
|
||
|
|
</Fade>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Container>
|
||
|
|
|
||
|
|
<div className="mx-auto w-full">
|
||
|
|
<div className="">
|
||
|
|
<Fade duration={600} fraction={0} delay={600} triggerOnce cascade>
|
||
|
|
<div className="bg-slate-100 relative w-full">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Link key={item._id} href={item.url}>
|
||
|
|
<Image
|
||
|
|
key={item._id}
|
||
|
|
src="/images/a3e4030a899a671867168b7064dac947e7aabc1d-1920x1080.jpeg"
|
||
|
|
// src={item.mainImage}
|
||
|
|
alt={item.mainimage.alt}
|
||
|
|
width={1440}
|
||
|
|
height={600}
|
||
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
|
||
|
|
quality={75}
|
||
|
|
placeholder="empty"
|
||
|
|
className="duration-700 ease-linear hover:contrast-125 hover:transition"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Fade>
|
||
|
|
<div className="w-full bg-stone-900 p-5 sm:p-5">
|
||
|
|
<Container>
|
||
|
|
<Fade duration={600} delay={0} triggerOnce>
|
||
|
|
<div className="text-stone-300 inline-block text-center align-middle text-xl font-extralight sm:text-left sm:text-4xl">
|
||
|
|
<span className="text-yellow-600">
|
||
|
|
The Spectacular Kecak
|
||
|
|
</span>
|
||
|
|
<span className="ml-1 font-medium text-white sm:ml-3 sm:font-medium">
|
||
|
|
Garuda Wisnu
|
||
|
|
</span>
|
||
|
|
<span className="m-auto inline w-full text-center sm:ml-2 sm:inline">
|
||
|
|
{/* play button */}
|
||
|
|
{/* <Link key={item._id} href={item.url}> */}
|
||
|
|
{/* <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={0.75} stroke="currentColor" className="w-10 h-10 pl-1 sm:pl-0 sm:w-12 sm:h-12 inline stroke-yellow-500 hover:stroke-yellow-300 ease-in duration-150">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
|
||
|
|
</svg> */}
|
||
|
|
{/* </Link> */}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</Fade>
|
||
|
|
</Container>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 gap-0 sm:grid-cols-3">
|
||
|
|
<Fade duration={600} fraction={0} delay={600} triggerOnce cascade>
|
||
|
|
{/* BANNER 1 */}
|
||
|
|
<div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Link key={item._id} href={item.bannerSatu.urlbanner}>
|
||
|
|
<Image
|
||
|
|
key={item._id}
|
||
|
|
src={item.bannerSatuImgURL}
|
||
|
|
alt={item.bannerSatu.image.alt}
|
||
|
|
width={500}
|
||
|
|
height={500}
|
||
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
|
||
|
|
quality={75}
|
||
|
|
placeholder="empty"
|
||
|
|
className="aspect-square duration-700 ease-in-out hover:contrast-125 hover:transition"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
<div className="bg-yellow-600 px-5 py-4">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Link key={item._id} href={item.bannerSatu.urlbanner}>
|
||
|
|
<h3
|
||
|
|
key={item._id}
|
||
|
|
className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
|
||
|
|
>
|
||
|
|
{item.bannerSatu.heading}
|
||
|
|
</h3>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/* BANNER 2 */}
|
||
|
|
<div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Link key={item._id} href={item.bannerDua.urlbanner}>
|
||
|
|
<Image
|
||
|
|
key={item._id}
|
||
|
|
src={item.bannerDuaImgURL}
|
||
|
|
alt={item.bannerDua.image.alt}
|
||
|
|
width={500}
|
||
|
|
height={500}
|
||
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
|
||
|
|
quality={75}
|
||
|
|
placeholder="empty"
|
||
|
|
className="aspect-square duration-500 ease-in-out hover:contrast-125 hover:transition"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
<div className="bg-yellow-600 px-5 py-4">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Link key={item._id} href={item.bannerDua.urlbanner}>
|
||
|
|
<h3
|
||
|
|
key={item._id}
|
||
|
|
className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
|
||
|
|
>
|
||
|
|
{item.bannerDua.heading}
|
||
|
|
</h3>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* BANNER 3 */}
|
||
|
|
<div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Link key={item._id} href={item.bannerTiga.urlbanner}>
|
||
|
|
<Image
|
||
|
|
key={item._id}
|
||
|
|
src={item.bannerTigaImgURL}
|
||
|
|
alt={item.bannerTiga.image.alt}
|
||
|
|
width={500}
|
||
|
|
height={500}
|
||
|
|
sizes="(max-width: 768px) 100vw, (max-width: 600px) 50vw, 33vw"
|
||
|
|
quality={75}
|
||
|
|
className="aspect-square duration-500 ease-in-out hover:contrast-125 hover:transition"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
<div className="bg-yellow-600 px-5 py-4">
|
||
|
|
{data.map((item) => (
|
||
|
|
<Link key={item._id} href={item.bannerTiga.urlbanner}>
|
||
|
|
<h3
|
||
|
|
key={item._id}
|
||
|
|
className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
|
||
|
|
>
|
||
|
|
{item.bannerTiga.heading}
|
||
|
|
</h3>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Fade>
|
||
|
|
</div>
|
||
|
|
</Fade>
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CulturalSection
|