temp.txt

<div>
      <Search alltheItems={alltheItems}/>
        <div css={styles.bestPlatform} id='bestPlatForm'>
          <div style={{padding:'4vh 0vh 0vh 5vh',width:'34%'}}>
            <h1 css={styles.bestText}>The Best Platform for Escrow services</h1>
            <p css={styles.pText}>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, veritatis distinctio voluptas quas explicabo hic quibusdam reprehenderit aspernatur voluptatum tempora.</p>
          </div>
        </div>
        <div> {/*Most popular escrows!*/}
          <div css={styles.popularText}> 
              <p css={styles.popularP}>Most popuar escrows</p>
          </div>
              <Popular alltheItems={alltheItems}/> {/*Most popular escrows*/}
              <div> {/*Escrows by category*/}
              <div css={styles.popularText}> 
              <p css={styles.popularP}>{category}</p>
          </div>
          <div css={styles.allItems}>
            {category?(
              filterByCategory.map((item,index)=>{
                return(
                  <Item item={item} btnColor='#5A48FB' key={index}/>
                )
              })
            ):(<div style={{margin:'auto'}}>
              <h1 style={{margin:'0px'}}>Choose a category</h1>
            </div>)}
          </div>
              </div>
          <div> {/*All the escrows*/}
          <div css={styles.popularText2}> 
              <p css={styles.popularP2}>Top escrows</p>
          </div>
          <div css={styles.allItems}>
            
                    {alltheItems.map((item,index)=>{
                      return(
                        <Item item={item} btnColor='#5A48FB' key={index}/>
                      )
                    })}
          </div>
          </div>
              
        </div>
    </div>

// /** @jsxImportSource @emotion/react */
// import { Button } from '@mui/material'
// import React,{useState} from 'react'
// import * as styles from './styles'
// import login from '../../assets/login.svg'
// import signup from '../../assets/register.svg'
// import './stylll.css'

// const SignInDiv = ({setSignInShow,setSignUpShow}) => {
// const handleClick = ()=>{
//     setSignInShow(prev=>!prev)
//     setSignUpShow(prev=>!prev)
// }
//   return (
//     <div css={styles.signInDiv} className="signUp">
//         <div >
//             <h1>Sign IN form here</h1>
//         </div>
//         <div style={{color:'white'}}>
//         <h1>New here?</h1>
//             <p>Create an account and have full acces to our services.</p>
//             <Button variant='contained' onClick={handleClick}>Sign Up</Button>
//             <img src={login} css={styles.svgImage}/>
//         </div>
        
//     </div>
//   )
// }


// const SignUpDiv = ({setSignInShow,setSignUpShow}) => {
// const handleClick = ()=>{
//     setSignUpShow(prev=>!prev)
//     setSignInShow(prev=>!prev)
// }
//   return (
//     <div css={styles.signUpDiv} className="signUp">
//         <div style={{color:'white'}}>
//         <h1>One of us already?</h1>
//             <p>Connect to your account with email and password</p>
//             <Button variant='contained' onClick={handleClick}>Sign In</Button>
//             <img src={signup} css={styles.svgImage1}/>
//         </div>
//         <div>
//             <h1>Sign up form here</h1>
            
//         </div>
//     </div>
//   )
// }

// export const SignIn=()=>{
// const [showSignUp,setShowSignUp] = useState(true) 
// const [showSignIn,setShowSignIN] = useState(false) 

//     return(
//         <div >
//             <div css={showSignUp? styles.backgroundUp:styles.backgroundIn} className="backBall">

//             </div>
//             {showSignIn && <SignInDiv setSignInShow={setShowSignIN} setSignUpShow={setShowSignUp}/>}
//             {showSignUp && <SignUpDiv setSignUpShow={setShowSignUp} setSignInShow={setShowSignIN} />}
//         </div>
//     )
// }


import EscrowFilter from './EscrowFilter/EscrowFilter'
import personIcon from '../../assets/person.svg'
import peopleIcon from '../../assets/people.svg'
import bannerIcon from '../../assets/banner.svg'
import settingicon from '../../assets/settings.svg'
import chatIcon from '../../assets/chat.svg'