|  |  | @ -1,5 +1,7 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | import React, { useEffect, useState } from "react"; |  |  |  | import React, { useEffect, useState } from "react"; | 
			
		
	
		
		
			
				
					
					|  |  |  | import _ from 'lodash'; |  |  |  | import _ from "lodash"; | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | import codVideo from "../../../../assets/videos/COD.mp4"; | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | import scroll from '../../../../utils/scroll'; | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  | export default function Mobile({ mobilePosition }) { |  |  |  | export default function Mobile({ mobilePosition }) { | 
			
		
	
		
		
			
				
					
					|  |  |  |   const [checked, setChecked] = useState(mobilePosition > 0 ? true : false); |  |  |  |   const [checked, setChecked] = useState(mobilePosition > 0 ? true : false); | 
			
		
	
	
		
		
			
				
					|  |  | @ -13,7 +15,14 @@ export default function Mobile({ mobilePosition }) { | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |   return ( |  |  |  |   return ( | 
			
		
	
		
		
			
				
					
					|  |  |  |     <div |  |  |  |     <div | 
			
		
	
		
		
			
				
					
					|  |  |  |       className="fixed rounded-2xl flex flex-col overflow-hidden" |  |  |  |       className={_.join( | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         [ | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           "fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           window.scrollY > 2500 ? "items-center justify-center" : "", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           window.scrollY > 2500 ? "bg-black" : "", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         ], | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         " " | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       )} | 
			
		
	
		
		
			
				
					
					|  |  |  |       style={{ |  |  |  |       style={{ | 
			
		
	
		
		
			
				
					
					|  |  |  |         top: "5%", |  |  |  |         top: "5%", | 
			
		
	
		
		
			
				
					
					|  |  |  |         height: (window.innerHeight * 9) / 10, |  |  |  |         height: (window.innerHeight * 9) / 10, | 
			
		
	
	
		
		
			
				
					|  |  | @ -22,8 +31,15 @@ export default function Mobile({ mobilePosition }) { | 
			
		
	
		
		
			
				
					
					|  |  |  |         // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
 |  |  |  |         // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
 | 
			
		
	
		
		
			
				
					
					|  |  |  |       }} |  |  |  |       }} | 
			
		
	
		
		
			
				
					
					|  |  |  |     > |  |  |  |     > | 
			
		
	
		
		
			
				
					
					|  |  |  |       { |  |  |  |       <div | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |         <div className="relative w-full h-full min-h-full"> |  |  |  |         className={_.join( | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           [ | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             "relative w-full h-full min-h-full", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             window.scrollY > 2500 ? "hidden" : "", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           ], | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           " " | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         )} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       > | 
			
		
	
		
		
			
				
					
					|  |  |  |         <div |  |  |  |         <div | 
			
		
	
		
		
			
				
					
					|  |  |  |           className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" |  |  |  |           className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" | 
			
		
	
		
		
			
				
					
					|  |  |  |           style={{ height: "10%" }} |  |  |  |           style={{ height: "10%" }} | 
			
		
	
	
		
		
			
				
					|  |  | @ -53,11 +69,33 @@ export default function Mobile({ mobilePosition }) { | 
			
		
	
		
		
			
				
					
					|  |  |  |           style={{ height: 5, width: "50%", left: "25%", top: "10%" }} |  |  |  |           style={{ height: 5, width: "50%", left: "25%", top: "10%" }} | 
			
		
	
		
		
			
				
					
					|  |  |  |         ></div> |  |  |  |         ></div> | 
			
		
	
		
		
			
				
					
					|  |  |  |       </div> |  |  |  |       </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |       } |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |       { |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |          <div className={_.join(["relative w-full h-full min-h-full bg-green-200 transition-all transform", checked ? '-translate-y-full' : ''], " ")}></div> |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  |       } |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       <div | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         className={_.join( | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           [ | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             "relative w-full h-full min-h-full bg-green-200 transition-all transform", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             checked ? "-translate-y-full" : "", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             window.scrollY > 2500 ? "hidden" : "", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           ], | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           " " | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         )} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       ></div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       {window.scrollY > 2500 ? ( | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         <video | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           id="video" | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           className={_.join(["video border-0 outline-none animation-puls"], " ")} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           style={{ | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             height: (window.innerHeight * 9) / 25, | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             width: "100%", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             // transform : scroll.doubleLinearFormula(window.scrollY)
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           }} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           controls | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           autoPlay | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         > | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |           <source src={codVideo} type={"video/mp4"} /> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |         </video> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       ) : null} | 
			
		
	
		
		
			
				
					
					|  |  |  |     </div> |  |  |  |     </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |   ); |  |  |  |   ); | 
			
		
	
		
		
			
				
					
					|  |  |  | } |  |  |  | } | 
			
		
	
	
		
		
			
				
					|  |  | 
 |