Reactjs – Why my component doesn't show on my React page?

** This is the Navbar.jsx component which is displayed but the Hero.jsx component isnt working in the App.jsx main page for me , i have imported the Hero.jsx the same way that I have done to the navbar **

 `import React from 'react'

const Navbar = () => {
  return (
    <div className='w-full h-[80px] bg-white border-b fixed'>
      <div className='max-w-[1480px] w-full h-full m-auto flex justify-between items-center'>
    <h1 className='font-semibold  m-auto text-3xl text-[#20B486]'>Practice</h1>
    <div >
    <ul className='flex gap-9 ' >
          <li className='text-[#6D737A] hover:text-[#20B486]' ><a href='#'>Home</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>About</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>Support</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>Platform</a></li>
          <li className='text-[#6D737A] hover:text-[#20B486]'><a href='#'>Pricing</a></li>
    </ul>
    </div>

<div className='m-auto '> 

  <button className='text-[#6D737A]   w-[168px] h-[48px] rounded-xl  hover:text-[#20B486]'> 
  Log in </button> 
  
  <button className='bg-[#20B486]   w-[128px] h-[38px] rounded-xl  text-white text-sm   hover:bg-[#6D737A]'> Sign Up for Free </button>
    </div>
    
    
    
    </div>
    <div className='w-full bg-white   py-24'>
      <div className='max-w-[1480px] h-[99px]  m-auto grid grid-cols-2 pr-20 pl-20 align-items: center'> 
      <div>
      <h1 className='  text-[#20B486] font-medium  text-lg tracking-wide text-center pr-20'> START TO SUCCESS </h1> <br></br>
      <h1 className=' font-normal text-black text-4xl text-left pl-48 font-[520] ' > Access To<h1 className='text-[#20B486] inline-flex pl-2 pr-2 '>   5000+  </h1>Courses <br></br> from <h1 className='text-[#20B486] inline-flex pl-2 pr-2'>  300 </h1>Instructors  <br></br>& Institutions </h1> <br></br>
      <p className='text-[#52565C]  text-xs text-center  pl-40 pr-8'> Various versions have evolved over the years,sometimes by accident,</p>
      <br></br>





      <div class="mb-3">
  <div class="relative mb-4 flex w-full pl-48 flex-wrap items-stretch">
    <input
      type="search"
      class="relative  m-0 block w-[1px]  h-14 min-w-0 flex-auto  shadow-md border-solid border-neutral-300 bg-transparent bg-clip-padding px-5 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none  dark:text-neutral-200 [#000000]:placeholder:text-neutral-200 "
      placeholder="What do you want to learn?"
      aria-label="Search"
      aria-describedby="button-addon2" 
       />
       <span
      class="input-group-text flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-neutral-700 [#000000]:text-neutral-200 shadow-md "
      id="basic-addon2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5">
        <path
          fill-rule="evenodd"
          d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
          clip-rule="evenodd" />
      </svg>
    </span>
  </div>
</div>
    





      </div>
  <div> 
 <div className=' inline-flex rounded-lg -rotate-6 pl-2' > 

   <img src="../src/assets/hero.jpg" /> 
    </div>
    <div className=' inline-flex rounded-lg pr-2 rotate-12'> 
   <img  src="../src/assets/hero2.jpg" /> 
</div> 
  </div>



</div>

      </div>
      

      <div> 

       






      </div>


       </div>  

       

    
           
  
  )
}

export default Navbar

`**
Why my hero component cant show up in the App.jsx file. I have imported already the components but it doesnt seem to work . **

import React from 'react'

const Hero = () => {
  return (
   <div> 
    <img src="../assets/images/hero.jpg" alt="hero" />
   </div>
  )
}

export default Hero 

And here is my main page App.jsx

    import React from 'react';
import { Hero, Navbar } from './components';

const App = () => {
  return (
    <div>
      <Navbar />
    <Hero />
      
    </div>

     
  )
}

export default App

The index.js

   import Navbar from "./Navbar"; 
import Hero from "./Hero";





export{ Hero, Navbar }