grid wrapper + newest products + latest blogs

src/app/page.tsx

@@ -2,6 +2,10 @@ 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/NewestProducts'
 
 const Home: NextPage = () => {
   return (
@@ -9,6 +13,20 @@ const Home: NextPage = () => {
       <Carousel />
       <div className='mt-24 px-20'>
         <HotOffer />
+        <div className='mt-24'>
+          <Categories />
+        </div>
+        <div className='mt-24'>
+          <Banners3
+          />
+        </div>
+        <div className='mt-16'>
+          <Blogs />
+        </div>
+      </div>
+
+      <div className='mt-24 bg-[#FAF8F6] p-20'>
+        <NewestProducts />
       </div>
     </div>
   )