E-commerce product page

Hello Carolina! Great work!

There are some improvements you can make to this code.

 <div onMouseEnter={()=>setHoverContact(true)} onMouseLeave={()=>setHoverContact(false)} className='w-auto cursor-default'>
         <h1 className='relative text-ec-dark-grayishblue font-16 '>Contact</h1>
         <hr className={hoverContact ? 'relative  top-12 border-2 border-ec-orange':'relative border-2 top-12 border-transparent '} />
         </div>

• You don't need to use state and onMouse handler to have the children styled based on parent state. Tailwind have a group class that you can use. Tailwind's docs on group
• You mustn't have multiple h1 on a page. Why? because h1 means it's the title of the page. You can replace it with other tags such as h2

Here is the improved version.

 <div className=' group w-auto cursor-default'>
         <h2 className='relative text-ec-dark-grayishblue font-16 '>Contact</h2>
         <hr className= 'relative  top-12 border-2 border-transparent  group-hover:border-ec-orange ' />
         </div>

I hope it helps! Cheers!