bug fix

src/widgets/welcome/ui/index.tsx

@@ -1,10 +1,13 @@
 'use client';
 
+import CategoryImage from '@/assets/water-bottle.png';
 import { category_api } from '@/shared/config/api/category/api';
+import { product_api } from '@/shared/config/api/product/api';
 import { BASE_URL } from '@/shared/config/api/URLs';
 import { Link } from '@/shared/config/i18n/navigation';
 import { AspectRatio } from '@/shared/ui/aspect-ratio';
 import { Button } from '@/shared/ui/button';
+import { Card } from '@/shared/ui/card';
 import {
   Carousel,
   CarouselContent,
@@ -13,13 +16,13 @@ import {
 } from '@/shared/ui/carousel';
 import { Skeleton } from '@/shared/ui/skeleton';
 import { CategoryCarousel } from '@/widgets/categories/ui/category-carousel';
+import { ProductCard } from '@/widgets/categories/ui/product-card';
 import { useQuery } from '@tanstack/react-query';
 import { AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
 import Image from 'next/image';
 import { useState } from 'react';
 import 'swiper/css';
 import { banner_api } from '../lib/api';
-import CategoryImage from '@/assets/water-bottle.png';
 
 const Welcome = () => {
   const [api, setApi] = useState<CarouselApi>();
@@ -65,6 +68,18 @@ const Welcome = () => {
     apiCat?.scrollNext();
   };
 
+  const { data: product, isLoading: productLoading } = useQuery({
+    queryKey: ['list'],
+    queryFn: () =>
+      product_api.list({
+        page: 1,
+        page_size: 16,
+      }),
+    select(data) {
+      return data.data;
+    },
+  });
+
   return (
     <>
       <div className="custom-container">
@@ -166,6 +181,39 @@ const Welcome = () => {
           </Button>
         </Carousel>
       </div>
+      <section className="relative custom-container mt-5 justify-center items-center border-b border-slate-200">
+        <Carousel className="w-full mt-2" setApi={setApi}>
+          <CarouselContent className="pr-[12%] sm:pr-0">
+            {productLoading &&
+              Array.from({ length: 6 }).map((__, index) => (
+                <CarouselItem
+                  key={index}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                >
+                  <Card className="p-3 space-y-3 rounded-xl">
+                    <Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-4 w-1/2" />
+                    <Skeleton className="h-10 w-full rounded-lg" />
+                  </Card>
+                </CarouselItem>
+              ))}
+            {product &&
+              !isLoading &&
+              product.results
+                .filter((product) => product.state === 'A')
+                .map((product) => (
+                  <CarouselItem
+                    key={product.id}
+                    className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6 pb-2"
+                  >
+                    <ProductCard product={product} />
+                  </CarouselItem>
+                ))}
+          </CarouselContent>
+        </Carousel>
+      </section>
+
       {category &&
         category
           .slice(0, 6)