App.jsx

import React from 'react'
import AssesmentCard from './components/AssesmentCard';
import ActiveAssesmentCard from './components/ActiveAssesmentCard';
const App = () => {
  return (
    <div className='min-h-screen w-full bg-[#f5f5f5]'>
      <header className='h-20 bg-white text-white shadow-sm'>
        <nav></nav>
      </header>
      <section className='container mx-auto'>
        <div className='grid grid-cols-1 gap-y-2  py-5 rounded-sm '>
          <div className='bg-white p-4 flex flex-col gap-4' >
            <h2 className='text-xl font-normal'>Your recruitment at a glance</h2>
            <div className='grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4'>
              {/* {Assesment component} */}
              <AssesmentCard />
              <AssesmentCard />

            </div>
          </div>
          {/* {Active Assesments} */}
          <div >
            <div className='bg-slate-800 p-2 rounded-sm'>
              <h2 className='text-white p-2 text-base font-semibold'>Your Active Assesments</h2>
            </div>
            <div className='bg-white flex flex-col gap-4 p-4'>
              <ActiveAssesmentCard />
              <ActiveAssesmentCard />
              <ActiveAssesmentCard />
              <ActiveAssesmentCard />

            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

export default App