profile layout

2025-11-24 12:52:30 +05:30
1 parent 1573a267e6
commit 1494e1d979
@@ -0,0 +1,162 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Autoplay } from 'swiper/modules';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import 'swiper/css';
+import 'swiper/css/navigation';
+
+const images = [
+    "https://images.unsplash.com/photo-1612423284934-5b6e7f9e8b5e",
+    "https://images.unsplash.com/photo-1520975911596-5f7f2c1a1c6b",
+    "https://images.unsplash.com/photo-1544005313-94ddf0286df2",
+    "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
+    "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
+  ];
+const UserDashboardHome = () => {
+  return (
+    <>
+    <div className=" flex items-center justify-center p-4">
+      <div className="w-full max-w-7xl relative">
+        {/* Left Arrow */}
+        <button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
+          <ChevronLeft className="w-6 h-6 text-white" />
+        </button>
+
+        {/* Right Arrow */}
+        <button className="swiper-button-next-custom absolute right-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
+          <ChevronRight className="w-6 h-6 text-white" />
+        </button>
+
+        <Swiper
+          modules={[Navigation, Autoplay]}
+          navigation={{
+            prevEl: '.swiper-button-prev-custom',
+            nextEl: '.swiper-button-next-custom',
+          }}
+          grabCursor={true}
+          centeredSlides={true}
+          slidesPerView="auto"
+          spaceBetween={20}
+          autoplay={{
+            delay: 3000,
+            disableOnInteraction: false,
+          }}
+          loop={true}
+          className="mySwiper"
+        >
+          {images.map((img, idx) => (
+            <SwiperSlide key={idx}>
+              <div className="relative overflow-hidden rounded-3xl shadow-2xl w-[100%] max-w-[400px] h-[280px]">
+                <img
+                  src={img}
+                  alt={`Slide ${idx + 1}`}
+                  className="w-full h-full object-cover"
+                />
+                <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
+                  <span className="text-white font-semibold text-lg">Slide {idx + 1}</span>
+                </div>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+
+      <style>{`
+        .swiper {
+          width: 100%;
+          padding: 60px 80px;
+          overflow: visible;
+        }
+
+        .swiper-slide {
+          width: 320px;
+          height: 420px;
+          transition: all 0.4s ease;
+          opacity: 0.4;
+          transform: scale(0.85);
+        }
+
+        .swiper-slide-active {
+          width: 500px !important;
+          height: 600px !important;
+          opacity: 1;
+          transform: scale(1);
+          z-index: 2;
+        }
+
+        .swiper-slide > div {
+          width: 100%;
+          height: 100%;
+        }
+
+        .swiper-button-prev-custom,
+        .swiper-button-next-custom {
+          cursor: pointer;
+        }
+
+        @media (max-width: 1024px) {
+          .swiper {
+            padding: 50px 60px;
+          }
+
+          .swiper-slide {
+            width: 240px;
+            height: 340px;
+          }
+
+          .swiper-slide-active {
+            width: 380px !important;
+            height: 480px !important;
+          }
+        }
+
+        @media (max-width: 768px) {
+          .swiper {
+            padding: 40px 50px;
+          }
+
+          .swiper-slide {
+            width: 180px;
+            height: 280px;
+          }
+
+          .swiper-slide-active {
+            width: 300px !important;
+            height: 400px !important;
+          }
+
+          .swiper-button-prev-custom,
+          .swiper-button-next-custom {
+            width: 40px;
+            height: 40px;
+          }
+        }
+
+        @media (max-width: 480px) {
+          .swiper {
+            padding: 30px 40px;
+          }
+
+          .swiper-slide {
+            width: 140px;
+            height: 220px;
+          }
+
+          .swiper-slide-active {
+            width: 240px !important;
+            height: 340px !important;
+          }
+
+          .swiper-button-prev-custom,
+          .swiper-button-next-custom {
+            width: 36px;
+            height: 36px;
+          }
+        }
+      `}</style>
+    </div>
+
+    </>
+  )
+}
+
+export default UserDashboardHome