Merge pull request #1157 from AsmitaMishra24/main

feat: Redesigned Destinations Section with Hover Card Effect

explore.css

@@ -1,7 +1,7 @@
-* {
+/* * {
   box-sizing: border-box;
   /* ADDED BORDER RADIUS IN IMAGE SECTION */
-  border-radius: 20px;
+  /*border-radius: 20px;
 }
 
 .outer-box {
@@ -17,7 +17,6 @@
 .containers {
   display: flex;
   width: 90vw;
-
 }
 
 .card {
@@ -27,7 +26,7 @@
   height: 70vh;
   border-radius: 35px 35px;
   /* border-radius: 20px; */
-  color: #fff;
+ /* color: #fff;
   cursor: pointer;
   flex: 0.5;
   margin: 10px;
@@ -37,7 +36,7 @@
   flex-direction: column; 
 }
 
-/* .card:hover {
+.card:hover {
     flex: 3;
 }
 
@@ -50,7 +49,7 @@
     visibility: visible;
 } */
 
-.info {
+/* .info {
   position: absolute;
   bottom: 20px;
   left: 25%;
@@ -77,7 +76,7 @@
   margin-top: 10px;
   font-weight: 500;
   /* -webkit-text-stroke:0.5px beige; */
-}
+/* }
 
 .card.active {
   flex: 3;
@@ -90,7 +89,7 @@
 
 .card.active .info {
   visibility: visible;
-}
+} 
 
 @media (max-width: 1300px) {
   .containers {
@@ -120,4 +119,159 @@
     width: 100px;
     left: 0px;
   }
-}
+}
+*/
+
+/* Destination Section */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#Destinations {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.section__title {
+  margin: 10px;
+}
+
+.section__subtitle {
+  margin-bottom: 10px;
+}
+
+/* Swiper */
+.swiper-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.swiper-wrapper {
+  display: flex;
+}
+
+.swiper-slide {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.swiper-button-prev, 
+.swiper-button-next {
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%);
+  padding: 20px;
+  color: #ffffff;
+  background-color: transparent;
+  border: none;
+  padding: 20px 20px;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.swiper-button-prev {
+  left: 14px;
+}
+
+.swiper-button-next {
+  right: 13px;
+}
+
+.swiper-button-prev:hover, 
+.swiper-button-next:hover {
+  background-color: transparent;
+  color: #FF5656;
+}
+
+/* Card */
+.card {
+  width: 100%; 
+  max-width: 300px;
+  height: auto;
+  border-radius: 20px;
+  overflow: hidden;
+  border: 8px solid #6A5ACD;
+  position: relative;
+  transition: transform 0.3s ease, border-color 0.3s ease;
+}
+
+.card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  overflow: hidden;
+  border-radius: 15px solid #6A5ACD;
+  transition: transform 0.3s ease;
+}
+
+.card-body {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  border: none;
+  color: #fff;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: opacity 0.5s ease-in-out;
+  opacity: 0;
+}
+
+.card:hover .card-body {
+  opacity: 1;
+}
+
+.card-title {
+  text-transform: uppercase;
+  font-size: 30px;
+  font-weight: 500;
+}
+
+.card-info {
+  font-size: 16px;
+  line-height: 25px;
+  margin: 20px 0;
+  font-weight: 400;
+}
+
+.card-btn {
+  color: #FF5656;
+  background-color: #ffffff;
+  padding: 10px 20px;
+  width: 120px;
+  border-radius: 5px;
+  text-transform: capitalize;
+  border: none;
+  outline: none;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.card-btn:hover {
+  color: #ffffff;
+  background-color: #FF5656;
+}
+
+.card:hover .card-img {
+  transform: scale(1.1);
+}
+
+.card.active {
+  transform: scale(1.05);
+  z-index: 10;
+}
+
+.card.active .card-body {
+  opacity: 1;
+}

explore.js

@@ -1,28 +1,15 @@
-let lastClickedCard = document.querySelector(".active");
+var swiper = new Swiper('.swiper-container', {
+  loop: true,
+});
 
-// Function to handle click events
-function handleClick(card) {
-  // Remove active classes from all cards
-  const panels = document.querySelectorAll(".card");
-  panels.forEach(panel => panel.classList.remove("active"));
 
-  // Add active class to the clicked card
-  card.classList.add("active");
-  lastClickedCard = card; // Update the reference to the last clicked card
+function goToNextSlide() {
+  swiper.slideNext();
 }
 
-// Attach click event listener to all cards
-const panels = document.querySelectorAll(".card");
-panels.forEach(panel => panel.addEventListener("click", () => handleClick(panel)));
+function goToPrevSlide() {
+  swiper.slidePrev();
+}
 
-// Adjust the mouseover event listener
-panels.forEach(panel => {
-  panel.addEventListener('mouseover', () => {
-      lastClickedCard.classList.remove("active");
-      panel.classList.add('active');
-  });
-  panel.addEventListener('mouseout', () => {
-    panel.classList.remove('active');
-    lastClickedCard.classList.add("active");
-});
-});
+document.querySelector('.swiper-button-next').addEventListener('click', goToNextSlide);
+document.querySelector('.swiper-button-prev').addEventListener('click', goToPrevSlide);