import React, { useState, useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import LandingHeader from "../../components/LandingPageComp/LandingHeader/LandingHeader.jsx";
import * as S from "./LandingPage.style.js";
const LandingPage = () => {
const mainRef = useRef();
const headerRef = useRef();
const greySec = useRef();
const ANIMATION_TIME = 1.5;
const ANIMATION_TYPE = "ease-in-out";
const PAGE_DELAY = 0;
const SETIMEOUT_DELAY = 3000;
useEffect(() => {
mainRef.current.focus();
mainRef.current.style.height = `${window.innerHeight}px`;
gsap.registerPlugin(ScrollTrigger)
ScrollTrigger.defaults({
toggleActions: "play none restart reset",
start: "top center",
end: "bottom center",
});
setTimeout(() => {
gsap.to(headerRef.current, {
scrollTrigger: {
trigger: greySec.current,
markers: true,
start: "top center"
},
background: '#fff',
color: '#000',
duration: 0,
});
}, SETIMEOUT_DELAY);
}, []);
return (
<React.Fragment>
<div ref={mainRef} tabIndex={1}>
<LandingHeader headerRef={headerRef} />
<S.LandingGreySec ref={greySec}>
</S.LandingGreySec>
</div>
</React.Fragment>
);
};
export default LandingPage;
