first commit

src/widgets/welcome/ui/index.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Banner from '@/assets/banner.webp';
+import { AspectRatio } from '@/shared/ui/aspect-ratio';
+import useCategoryActive from '@/widgets/navbar/lib/openCategory';
+import Image from 'next/image';
+import 'swiper/css';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { categoryList } from '../lib/data';
+
+const Welcome = () => {
+  const { setActive, setOpenToolbar } = useCategoryActive();
+
+  return (
+    <div className="custom-container">
+      {/* Banner */}
+      <AspectRatio ratio={16 / 6} className="!p-0">
+        <div className="relative w-full h-full">
+          <Image
+            src={Banner || '/placeholder.svg'}
+            alt="Banner"
+            fill
+            className="rounded-2xl object-cover shadow-lg border border-slate-200"
+            priority
+          />
+        </div>
+      </AspectRatio>
+
+      {/* Category Slider */}
+      <div className="mx-auto mt-5 max-lg:hidden">
+        <Swiper
+          spaceBetween={4}
+          slidesPerView={4}
+          breakpoints={{
+            320: { slidesPerView: 1 },
+            640: { slidesPerView: 2 },
+            1024: { slidesPerView: 4 },
+          }}
+        >
+          {categoryList.map((item, index) => (
+            <SwiperSlide key={index} className="py-3 px-1">
+              <div
+                className="flex gap-1 items-center justify-center bg-gray-100/60 p-3 rounded-lg shadow-sm cursor-pointer space-x-3"
+                onClick={() => {
+                  setOpenToolbar(true);
+                  setActive(item);
+                }}
+              >
+                <Image
+                  src={item.image}
+                  alt={item.name}
+                  className="w-7 h-7 object-contain"
+                />
+                <p className="text-sm font-bold truncate line-clamp-2 leading-tight text-slate-700">
+                  {item.name}
+                </p>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;