Untitled

<div className="HeroSection" style={{width: 1920, height: 960, position: 'relative'}}>
  <div className="Rectangle259376" style={{width: 1920, height: 963, left: 0, top: 0, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 68%)'}} />
  <div className="Frame427320957" style={{left: 416, top: 683, position: 'absolute', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', gap: 40, display: 'inline-flex'}}>
    <div className="RentOfficesTailoredToYourSuccess" style={{color: 'white', fontSize: 60, fontFamily: 'Plus Jakarta Sans', fontWeight: '800', lineHeight: 76, wordWrap: 'break-word'}}>Rent Spaces Tailored to Your Niche</div>
    <div className="Frame427320752" style={{width: 974, paddingTop: 8, paddingBottom: 8, paddingLeft: 12, paddingRight: 8, background: '#3B3B3B', boxShadow: '0px 11.154417037963867px 51.55149459838867px rgba(0, 0, 0, 0.04)', borderRadius: 12, justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
      <div className="Frame427320749" style={{justifyContent: 'flex-start', alignItems: 'center', gap: 8, display: 'flex'}}>
        <div className="Component1" style={{width: 24, height: 24, position: 'relative'}}>
          <div className="Vector" style={{width: 14, height: 18, left: 5, top: 3, position: 'absolute', background: '#D89B1C'}}></div>
          <div className="Vector" style={{width: 4, height: 4, left: 10, top: 7, position: 'absolute', background: '#3B3B3B'}}></div>
        </div>
        <div className="SearchHere" style={{color: 'white', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 26, wordWrap: 'break-word'}}>Search here</div>
      </div>
      <div className="Frame427320794" style={{justifyContent: 'flex-start', alignItems: 'center', gap: 32, display: 'flex'}}>
        <div className="Buttons" style={{height: 44, paddingTop: 12, paddingBottom: 12, borderRadius: 12, overflow: 'hidden', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 8, display: 'inline-flex'}}>
          <div className="Button" style={{textAlign: 'center', color: 'white', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'}}>Search Nearby</div>
        </div>
        <div className="Buttons" style={{height: 44, paddingLeft: 24, paddingRight: 24, paddingTop: 12, paddingBottom: 12, background: 'white', borderRadius: 12, overflow: 'hidden', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 8, display: 'inline-flex'}}>
          <div className="Button" style={{textAlign: 'center', color: '#3B3B3B', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'}}>Search</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div className="Header" style={{width: 1920, height: 84, paddingLeft: 277, paddingRight: 277, paddingTop: 16, paddingBottom: 16, justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
  <div className="Rental" style={{color: 'white', fontSize: 28.86, fontFamily: 'Poppins', fontWeight: '300', textTransform: 'uppercase', letterSpacing: 5.77, wordWrap: 'break-word'}}>SPACES</div>
  <div className="Frame2" style={{justifyContent: 'flex-start', alignItems: 'flex-start', gap: 8, display: 'flex'}}>
    <div className="Frame1" style={{paddingLeft: 16, paddingRight: 16, paddingTop: 13, paddingBottom: 13, borderRadius: 30, overflow: 'hidden', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 10, display: 'flex'}}>
      <div className="Home" style={{color: 'white', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 26, wordWrap: 'break-word'}}>Home</div>
    </div>
    <div className="Frame3" style={{paddingLeft: 16, paddingRight: 16, paddingTop: 13, paddingBottom: 13, borderRadius: 5, overflow: 'hidden', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 10, display: 'flex'}}>
      <div className="Offices" style={{color: 'white', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 26, wordWrap: 'break-word'}}>Offices</div>
    </div>
    <div className="Frame2" style={{paddingLeft: 16, paddingRight: 16, paddingTop: 13, paddingBottom: 13, borderRadius: 5, overflow: 'hidden', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 10, display: 'flex'}}>
      <div className="About" style={{color: 'white', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 26, wordWrap: 'break-word'}}>About</div>
    </div>
    <div className="Frame4" style={{paddingLeft: 16, paddingRight: 16, paddingTop: 13, paddingBottom: 13, borderRadius: 5, overflow: 'hidden', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 10, display: 'flex'}}>
      <div className="Contact" style={{color: 'white', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 26, wordWrap: 'break-word'}}>Contact</div>
    </div>
  </div>
  <div className="Buttons" style={{height: 44, paddingLeft: 24, paddingRight: 24, paddingTop: 12, paddingBottom: 12, background: 'white', borderRadius: 12, overflow: 'hidden', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 8, display: 'inline-flex'}}>
    <div className="Button" style={{textAlign: 'center', color: '#3B3B3B', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'}}>Login</div>
  </div>
</div>
<div className="Buttons" style={{width: 105, height: 44, paddingLeft: 24, paddingRight: 24, paddingTop: 12, paddingBottom: 12, background: 'white', borderRadius: 12, overflow: 'hidden', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 8, display: 'inline-flex'}}>
  <div className="Button" style={{textAlign: 'center', color: '#3B3B3B', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'}}>Signup</div>
</div>