From 8f44756df989d3ef104ed5316956b7e1a3e89bbc Mon Sep 17 00:00:00 2001
From: AmirGoodarzi <amirgoodarzi.web@gmail.com>
Date: Wed, 30 Apr 2025 23:34:12 +0330
Subject: [PATCH] Add top slider in explore page

---
 package.json                                |  2 +-
 src/App.css                                 |  3 +++
 src/pages/explore/+components/TopSlider.tsx | 19 +++++++++++++++++++
 src/pages/explore/index.tsx                 | 16 ++++++----------
 4 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/explore/+components/TopSlider.tsx

diff --git a/package.json b/package.json
index 4919838..755ea62 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "enduser.salona",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.css b/src/App.css
index df70129..0550647 100644
--- a/src/App.css
+++ b/src/App.css
@@ -156,3 +156,6 @@ input[inputMode='tel'] {
     box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
   }
 }
+.swiper-pagination-bullet-active {
+  @apply bg-white w-6 rounded-md;
+}
diff --git a/src/pages/explore/+components/TopSlider.tsx b/src/pages/explore/+components/TopSlider.tsx
new file mode 100644
index 0000000..a71a0ed
--- /dev/null
+++ b/src/pages/explore/+components/TopSlider.tsx
@@ -0,0 +1,19 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination } from 'swiper/modules';
+
+const TopSlider = () => {
+  return (
+    <Swiper pagination={true} modules={[Pagination]} className="size-full">
+      {new Array(5).fill('').map((_, index) => (
+        <SwiperSlide key={index} className="p-3 aspect-video">
+          <img
+            src="https://dkstatics-public.digikala.com/digikala-adservice-banners/50e6f10162fbacfd174b69bc92070852cf5c7bf9_1745837272.jpg?x-oss-process=image/quality,q_95/format,webp"
+            className="size-full object-cover rounded-lg"
+          />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+};
+
+export default TopSlider;
diff --git a/src/pages/explore/index.tsx b/src/pages/explore/index.tsx
index 63cadc4..fdede65 100644
--- a/src/pages/explore/index.tsx
+++ b/src/pages/explore/index.tsx
@@ -5,7 +5,6 @@ import { SwiperOptions } from 'swiper/types';
 import { Grid, Pagination, Navigation } from 'swiper/modules';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import ExploreCard from './+components/ExploreCard';
-import textLogo from '@/assets/images/text-logo.png';
 import ROUTES_OBJECT from '@/routes/RoutesObject';
 import deliveryListVector from '@/assets/images/delivery-list.svg';
 import mobileVector from '@/assets/images/mobile.svg';
@@ -16,6 +15,7 @@ import puzzleVector from '@/assets/images/puzzle.svg';
 import walletVector from '@/assets/images/wallet.svg';
 import customerSupportVector from '@/assets/images/customer-support.svg';
 import globalLocationVector from '@/assets/images/global-location.svg';
+import TopSlider from './+components/TopSlider';
 
 const sliderProps: SwiperOptions = {
   slidesPerView: 1,
@@ -53,7 +53,7 @@ const Explore = () => {
       {
         label: 'گزارش‌ها',
         icon: <img src={startupVector} className="size-14" />,
-        link: '',
+        link: ROUTES_OBJECT.report,
       },
       {
         label: 'تخفیف‌کده',
@@ -82,8 +82,7 @@ const Explore = () => {
       {
         label: 'پشتیبانی',
         icon: <img src={customerSupportVector} className="size-14" />,
-        link: '',
-        isLock: true,
+        link: ROUTES_OBJECT.support,
       },
     ],
     [],
@@ -99,12 +98,9 @@ const Explore = () => {
   const groupedCards = chunkArray(exploreCardsData, itemsPerSlide);
 
   return (
-    <div className="explore-page-wrapper min-h-[100dvh] flex flex-col">
-      <div className="relative min-h-36 h-md:min-h-48 flex items-center py-2 justify-center bg-[url('@/assets/images/primary-color-banner.jpg')] bg-[#F3F3F3] bg-cover lg:bg-auto bg-center lg:bg-right bg-no-repeat w-full rounded-br-[4rem] lg:rounded-br-[8rem]">
-        <img src={textLogo} className="w-2/5 max-w-52" data-aos="fade-down" />
-      </div>
-      <div className="relative bg-white w-full ms-auto min-h-16 rounded-tl-[6rem] before:absolute before:w-1/2 before:h-full before:top-0 before:end-0 before:-z-[1] before:bg-[#f8f3fa]" />
-      <div className="w-full relative p-2 flex-1 -mt-10 h-md:-mt-5">
+    <div className="explore-page-wrapper min-h-[100dvh] flex flex-col gap-3">
+      <TopSlider />
+      <div className="w-full relative p-2 flex-1">
         <Swiper dir="rtl" {...sliderProps} className="max-w-3xl mx-auto">
           {groupedCards.map((slideGroup, index) => (
             <SwiperSlide key={index} className="min-h-[450px]">