updated home page

container/Home/Collection.js

@@ -136,12 +136,14 @@ const CollectionSlider = ({CollectionData}) => {
           {CollectionData?.item?.map((item, index) => (
             <SwiperSlide key={index}>
               <Link href={item?.url || "#"} className="collection-card">
-                <img
+                {/* <div> */}
+                  <img
                   src={cleanImage(item?.image?.url)}
                   alt={item?.title}
                   className="img-fluid rounded-lg hover-zooms"
                 />
-                <p className="mt-3">{item?.title}</p>
+                <p className="mt-3">{item?.title} <i class="fa-solid fa-arrow-right"></i></p>
+                {/* </div> */}
               </Link>
             </SwiperSlide>
           ))}

styles/globals.css

@@ -544,7 +544,8 @@ aspect-ratio: 16 / 7;
 
 .collectionSwiper .collection-card{
   position: relative;
-  height: 450px;
+  height: 525px;
+  display: block;
 }
 .collectionSwiper .collection-card p{
   font-size: 1.04vw;
@@ -558,7 +559,7 @@ aspect-ratio: 16 / 7;
   object-fit: cover;
   display: block;
   transition: height 0.4s ease;   /* 👈 add this */
-  /* position: absolute; */
+  position: absolute;
 }
 
 .h-slider .collectionSwiper .collection-card:hover img {
@@ -567,7 +568,44 @@ aspect-ratio: 16 / 7;
 .experience_sec.es-cust .swiperbtn1 {
     bottom: -6%;
 }
+.collectionSwiper .collection-card p{
+  position: absolute;
+  bottom: 0;
+}
+/**/
+.collectionSwiper .collection-card p {
+ 
+
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+}
+
+.collectionSwiper .collection-card p:hover {
+
+}
+.collectionSwiper .collection-card p i {
+  margin-left: 0;
+  opacity: 0;
+  transform: translateX(-8px);
+  max-width: 0;
+  overflow: hidden;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease,
+    max-width 0.3s ease,
+    margin-left 0.3s ease;
+}
+
+.collectionSwiper .collection-card:hover i {
+  opacity: 1;
+  transform: translateX(0);
+  max-width: 20px;
+  margin-left: 0.5rem;
+}
 
+/**/
 
 /* ====Blog=== */
 .blog-date {