100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
|
import axios from 'axios'
|
||
|
|
import React, { useEffect, useState } from 'react'
|
||
|
|
import { Fade, Slide } from 'react-awesome-reveal'
|
||
|
|
|
||
|
|
const HeroHomepage = () => {
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchData = async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get(
|
||
|
|
'/api/homepageSection/heroHomeSectionData'
|
||
|
|
)
|
||
|
|
setData(response.data)
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching data:', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchData()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Fade duration={3000} triggerOnce>
|
||
|
|
{/* mobile */}
|
||
|
|
<div className="relative block min-h-screen bg-white sm:relative sm:hidden sm:min-h-screen">
|
||
|
|
<div className="bg-hero-section bg-white bg-cover bg-center bg-no-repeat">
|
||
|
|
{data.slice(0, 1).map((data) => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key="${data._id}"
|
||
|
|
dangerouslySetInnerHTML={{
|
||
|
|
__html: `
|
||
|
|
<video key="${data._id}"
|
||
|
|
loop
|
||
|
|
muted
|
||
|
|
autoplay
|
||
|
|
playsinline
|
||
|
|
src="${data.videomobile}"
|
||
|
|
preload="auto"
|
||
|
|
class=""
|
||
|
|
/>,
|
||
|
|
`,
|
||
|
|
}}
|
||
|
|
className="sm:min-h inset-0 max-h-screen min-h-screen w-full object-cover sm:max-h-screen sm:min-h-screen"
|
||
|
|
></div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* desktop */}
|
||
|
|
<div className="min-h-screen_ hidden bg-white sm:relative sm:block sm:min-h-min">
|
||
|
|
<div className="bg-hero-section bg-cover_ bg-white bg-center bg-no-repeat">
|
||
|
|
<video
|
||
|
|
autoPlay
|
||
|
|
loop
|
||
|
|
muted
|
||
|
|
preload="auto"
|
||
|
|
className="sm:min-h max-h-screen_ min-h-screen_ sm:max-h-screen_ sm:min-h-screen_ inset-0 aspect-video w-full object-cover"
|
||
|
|
>
|
||
|
|
{data.map((data) => {
|
||
|
|
return (
|
||
|
|
<source
|
||
|
|
key={data._id}
|
||
|
|
src={data.video}
|
||
|
|
type="video/mp4"
|
||
|
|
className="min-h-screen"
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</video>
|
||
|
|
|
||
|
|
{/* <div className="absolute inset-0 max-h-screen min-h-screen bg-black bg-opacity-20">
|
||
|
|
<div className="flex max-h-full min-h-full w-full items-center justify-center align-middle">
|
||
|
|
<div className="mx-0 my-60 text-center font-thin text-white sm:my-56 sm:text-5xl">
|
||
|
|
<h1 className="hidden sm:block sm:font-serif text-4xl sm:text-8xl text-neutral-50 mt-0 mr-2 mb-4 ml-2 sm:mr-36 sm:ml-36 leading-tight">
|
||
|
|
Welcome to The Largest Statue in South East Asia
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
<div className="pt-0">
|
||
|
|
{/* <span className="block sm:hidden font-serif text-5xl font-ultralight text-neutral-50 mt-0 mr-5 mb-4 ml-5 leading-relaxed">
|
||
|
|
Welcome to <br></br>The <span className="font-semibold">Largest Statue</span> in South East Asia
|
||
|
|
</span>
|
||
|
|
{/* <Link href="https://ticket.gwkbali.com/">
|
||
|
|
<button className="spacong animate-fade-up rounded-md bg-yellow-600 px-10 py-5 font-sans text-xl font-bold leading-7 tracking-wide text-stone-50 shadow-sm duration-300 ease-in animate-delay-[1200ms] animate-duration-[3200ms] animate-once hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500">
|
||
|
|
BUY TICKET
|
||
|
|
</button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> */}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Fade>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default HeroHomepage
|