Estoy creando un clon de la aplicación web de Netflix. Actualmente estoy desarrollando la página de destino. He incluido mi código a continuación. Esta es una de las pocas maneras diferentes en que he intentado estructurar esta página.

El diseño actualmente aparece como quiero que se vea, sin embargo, el "botón de idioma de la porción principal" y el "botón de inicio de sesión de la porción principal" en la parte superior de la página no funcionan, lo que significa que no sucede nada cuando hago clic en el menú desplegable de selección, y el botón Iniciar sesión no aparece como seleccionable. ¿Alguien puede explicar por qué no funciona de esta manera y alguna sugerencia para mejores alternativas?

captura de pantalla de la página de destino

 import backgroundImage from '../../images/mooshflix-background.jpeg'; import netflixLogo from '../../images/netflix-logo.png'; import './MainSlice.css'; const MainSlice = () => { return ( <div className='main-slice-container'> <img className='background-image' src={backgroundImage} alt='mooshflix background' /> <div className='header'> <img className='main-slice__logo' src={netflixLogo} alt='' /> <div className='main-slice__header-buttons'> <select className='main-slice__language-button'> <option>English</option> <option>Spanish</option> </select> <button className='main-slice__signin-button'>Sign In</button> </div> </div> <div className='main-slice__text-container'> <h1 className='main-slice__title'>Unlimited movies, TV shows, and more.</h1> <h2 className='main-slice__subtitle'>Watch anywhere. Cancel anytime.</h2> <div className='main-slice__email-form-container'> <h3 className='email-form-title'>Ready to watch? Enter your email to create or restart your membership.</h3> <form> <input placeholder='Email Address' ></input> <button className='main-slice__email-form-button'>Get Started ></button> </form> </div> </div> </div> ) } export default MainSlice;```