banner4 + popular products

src/app/home/components/Banners4.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+const Banners4: FC = () => {
+    return (
+        <div className='flex gap-6 h-[340px]'>
+            <div className='flex-1 bg-blue-100 h-full rounded-[10px]'>
+            </div>
+
+            <div className='w-[158px] flex flex-col gap-6'>
+                <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-100' />
+                <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-200' />
+            </div>
+
+            <div className='w-[400px] bg-amber-50'>
+
+            </div>
+
+        </div>
+    )
+}
+
+export default Banners4

src/app/home/components/PopularProducts.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react'
+import {
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselNext,
+    CarouselPrevious,
+} from "@/components/ui/carousel"
+import ProductCard from '@/components/ProductCard'
+
+
+const PopularProducts: FC = () => {
+    return (
+        <div>
+            <h4 className='text-[#012B4D] text-lg'>محبوب ترین محصولات</h4>
+            <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
+                برای مشاهده ی محبوب ترین محصولات <span className='text-primary'>اینجا کلیک کنید</span>
+            </div>
+
+            <div className='mt-10'>
+                <Carousel
+                    opts={{
+                        align: "start",
+                        direction: "rtl",
+                    }}
+                    className="w-full"
+                >
+                    <CarouselContent className='gap-2'>
+                        {Array.from({ length: 5 }).map((_, index) => (
+                            <CarouselItem key={index} className="basis-[292px]">
+                                <ProductCard />
+                            </CarouselItem>
+                        ))}
+                    </CarouselContent>
+                    <CarouselPrevious className="left-auto -right-12 [&_svg]:-scale-x-100" />
+                    <CarouselNext className="right-auto -left-12 [&_svg]:-scale-x-100" />
+                </Carousel>
+            </div>
+        </div>
+    )
+}
+
+export default PopularProducts

src/app/page.tsx

@@ -5,7 +5,9 @@ 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'
+import NewestProducts from './home/components/LatestProducts'
+import Banners4 from './home/components/Banners4'
+import PopularProducts from './home/components/PopularProducts'
 
 const Home: NextPage = () => {
   return (
@@ -27,6 +29,12 @@ const Home: NextPage = () => {
 
       <div className='mt-24 bg-[#FAF8F6] p-20'>
         <NewestProducts />
+        <div className='mt-24'>
+          <Banners4 />
+        </div>
+        <div className='mt-20'>
+          <PopularProducts />
+        </div>
       </div>
     </div>
   )