113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
|
import Tippy from '@tippyjs/react'
|
||
|
|
import axios from 'axios'
|
||
|
|
import Image from 'next/image'
|
||
|
|
import Container from 'components/BlogContainer'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import React, { useEffect, useState } from 'react'
|
||
|
|
import { Fade, Slide } from 'react-awesome-reveal'
|
||
|
|
|
||
|
|
const TheStory = () => {
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchData = async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get('/api/homepageSection/theStoryData')
|
||
|
|
setData(response.data)
|
||
|
|
//console.log(data)
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching data:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchData()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<Fade duration={2400} fraction={0} delay={0} triggerOnce cascade>
|
||
|
|
<Image
|
||
|
|
src="/images/6b57ca82593b4defdc6904f863b8ba693d250dc3-1920x1080.jpg"
|
||
|
|
alt="Garuda Wisnu Kencana"
|
||
|
|
width={1440}
|
||
|
|
height={300}
|
||
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||
|
|
quality={75}
|
||
|
|
placeholder="empty"
|
||
|
|
priority
|
||
|
|
className="hidden h-full min-h-screen w-full object-cover opacity-90"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="bg-slate-0 p-0 align-top sm:mt-0 sm:h-full"
|
||
|
|
style={{
|
||
|
|
backgroundImage:
|
||
|
|
// `url(${item.imgbackground})`,
|
||
|
|
'url(/images/6b57ca82593b4defdc6904f863b8ba693d250dc3-1920x1080.jpg)',
|
||
|
|
backgroundSize: 'cover',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="mx-auto pb-8 pl-2 pr-5 pt-8 align-middle backdrop-brightness-50 sm:w-5/6 sm:pb-20 sm:pt-20">
|
||
|
|
<div className="m-0">
|
||
|
|
{data.map((item) => (
|
||
|
|
<h2
|
||
|
|
key={item._id}
|
||
|
|
className="mb-5 text-center font-sans text-xl font-light text-stone-100 sm:text-2xl"
|
||
|
|
>
|
||
|
|
{item.heading}
|
||
|
|
</h2>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{data.map((item) => (
|
||
|
|
<h3
|
||
|
|
key={item._id}
|
||
|
|
className="mb-5 text-center font-serif text-3xl font-bold leading-normal text-stone-100 sm:mb-10 sm:text-6xl sm:font-bold"
|
||
|
|
>
|
||
|
|
{item.subheading}
|
||
|
|
</h3>
|
||
|
|
))}
|
||
|
|
{/* </Fade> */}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mx-auto w-full gap-0 pb-0 sm:px-0">
|
||
|
|
<div className="w-full">
|
||
|
|
{/* <Fade duration={1200} fraction={0} delay={2400} triggerOnce cascade> */}
|
||
|
|
{data.map((item) => (
|
||
|
|
<div
|
||
|
|
key={item._id}
|
||
|
|
className="mx-5 text-center font-sans text-sm leading-relaxed text-stone-100 sm:mx-32 sm:text-base sm:font-light"
|
||
|
|
dangerouslySetInnerHTML={{
|
||
|
|
__html: item.paragraph[0].children[0].text,
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
<div className="hidden p-10 text-center sm:block">
|
||
|
|
<span className="mb-5 inline-block sm:mx-2">
|
||
|
|
{/* <Tippy content="Get your ticket here!" className='text-xs font-sans' interactive={true} interactiveBorder={20} delay={100}> */}
|
||
|
|
|
||
|
|
{data.map((item) => (
|
||
|
|
<div key={item._id}>
|
||
|
|
<Link href="https://ticket.gwkbali.com/">
|
||
|
|
<button className="rounded-md bg-yellow-600 px-4 py-2 font-sans text-base font-medium text-white duration-150 ease-in hover:bg-yellow-500">
|
||
|
|
{item.CTA.linkText}
|
||
|
|
</button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* </Tippy> */}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
{/* </Fade> */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Fade>
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default TheStory
|