You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

57 lines
1.8 KiB

import {connect} from 'react-redux';
import _ from "lodash";
import testResultImage from "../../../../assets/images/test-result.png";
// import testPageInfoImage from "../../../../assets/images/test-page-info.svg";
import testPageImage from "../../../../assets/images/test-page.svg";
import testPageFormulaImage from "../../../../assets/images/test-page-formula.svg";
function Page3({ top, translateY }) {
return (
<div
className={_.join(
[
"fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex justify-center items-end z-30",
top > 50 ? "opacity-0" : "opacity-100",
],
" "
)}
style={{
top: top,
}}
>
<div
className="relative w-full h-full"
style={{
background: `url(${testPageFormulaImage})`,
backgroundSize: "contain",
backgroundPosition: "0px 0px",
backgroundRepeat: "no-repeat",
}}
>
<img
src={testPageImage}
alt=""
className="absolute left-1/2 bottom-0 z-10 w-3/4"
style={{ transform: "translateY(20%) translateX(-50%)" }}
/>
<div
className="w-full h-full relative z-20 bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm"
style={{ transform: `translateY(${-1 * translateY}%)` }}
>
<img
src={testResultImage}
alt=""
className="absolute left-1/2 bottom-0 translate-y-12 transform -translate-x-1/2 w-3/4 z-30"
/>
</div>
</div>
</div>
);
}
const mapStateToProps = (state) => ({
top : state.scrollAction.page3TopPosition,
translateY : state.scrollAction.page3TestTranslateY
})
export default connect(mapStateToProps, {})(Page3);