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
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); |