4
 5const Navbar = () => {
 6  return (
 7    <> 8      <nav id="navbar"> 9        <img id='logo' src={Logo} alt="logo" />10        <ul>11          <li><NavLink className={({isActive})=>isActive?'active': 'none'} to='/'>Home</NavLink></li>12          <li><NavLink className={({isActive})=>isActive?'active': 'none'} to='/about'>About</NavLink></li>13          <li>14            <div className='loginSignUpBtn'><NavLink className={({isActive})=>isActive?'active': 'none'} to='/login'>Login</NavLink></div>15            <div className='loginSignUpBtn'><NavLink className={({isActive})=>isActive?'active': 'none'} to='/signup'>Sign Up</NavLink></div>16          </li>17        </ul>18      </nav>19    </>20  )
21}
22

 68  };
 69
 70  return (
 71    <> 72      <main> 73        <ScrollToTop color="white" style={{ backgroundColor: "#5CB6F9" }} /> 74        <nav className="navbar"> 75          <div className="logo"> 76            <img src={Logo} alt="Logo" /> 77          </div> 78          <div className={`menu ${menuOpen ? "show" : ""}`}> 79            <ul> 80              <li> 81                <a href="#">Top Universities</a> 82              </li> 83              <li> 84                <a href="#">Jobs</a> 85              </li> 86              <li> 87                <a href="#">Courses</a> 88              </li> 89              <li> 90                <a href="#">Career Support</a> 91              </li> 92              <li className="dot"> 93                <a href="#">•</a> 94              </li> 95              <li> 96                <a href="#" onClick={handleSignOut}> 97                  Log Out 98                </a> 99              </li>100              <li>101                <Link to="/profile">102                  <button className="profile_btn">Profile</button>103                </Link>104              </li>105            </ul>106          </div>107          <div className="hamburger" onClick={toggleMenu}>108            <div className={`bar ${menuOpen ? 'open' : ''}`}/>109            <div className={`bar ${menuOpen ? 'open' : ''}`}/>110            <div className={`bar ${menuOpen ? 'open' : ''}`}/>111          </div>112        </nav>113        <div className="maintxt">114          <h1>115            <span className="blue">Find your </span>Dream116            <br />117            College <span className="blue">here!</span>118          </h1>119          <p>For the Students, By the Students</p>120        </div>121        <div className="search">122          <div className="s_bar_c">123            <a href="">124              <img src="src/assets/icons8-search-50.png" alt="Search" />125            </a>126            <div className="vl"/>127            <input type="text" placeholder='Type college name or university name'128              value={searchTerm}129              onChange={handleSearchChange}130            />131          </div>132          <button>Search</button>133        </div>134        <div className="navigator">135          <span className="nearby">Nearby</span>136          <span className="seeall">See All</span>137        </div>138        <div className="colleges">139          {filteredColleges.map((college, index) => (140            <div141              className={`college ${activeIndex === index ? 'active' : ''}`}142              key={college.id}143              onClick={() => handleCollegeClick(college)}144              onTouchStart={() => handleTouchStart(index)}145              onTouchEnd={handleTouchEnd}146            >147              <div className="college-content">148                <div className="up">149                  <img className="college-image" src={college.imageURL} alt="College Logo" />150                  <div className="context">151                    <p className="college_name">{college.name}</p>152                    <span className="college-location">{college.location}</span>153                  </div>154                </div>155                <div className="down">156                  <div className="ctc">{college.ctc}</div>157                  <div className="time">{college.time}</div>158                </div>159              </div>160              <button className="click-info-button">Click for more info</button>161            </div>162          ))}163        </div>164        <Footer />165      </main>166    </>167  );
168};
169