import { NextPage } from 'next'
import withLayout from '@/hoc/withLayout'
import Carousel from './home/components/Carousel'
import HotOffer from './home/components/HotOffer'
import Categories from './home/components/Categories'
import Banners3 from './home/components/Banners3'
import Blogs from './home/components/Blogs'
import NewestProducts from './home/components/LatestProducts'
import Banners4 from './home/components/Banners4'
import PopularProducts from './home/components/PopularProducts'

const Home: NextPage = () => {
  return (
    <div>
      <Carousel />
      <div className='mt-24 px-20'>
        <HotOffer />
        <div className='mt-24'>
          <Categories />
        </div>
        <div className='mt-24'>
          <Banners3
          />
        </div>
      </div>

      <div className='mt-24 bg-[#FAF8F6] p-20'>
        <NewestProducts />
        <div className='mt-24'>
          <Banners4 />
        </div>
        <div className='mt-20'>
          <PopularProducts />
        </div>
      </div>

      <div className='mt-24 px-20'>
        <Blogs />
      </div>
    </div>
  )
}

export default withLayout(Home)