From 3d65ba1c37d19e7e30108f3b0c7f0b54a3b1629c Mon Sep 17 00:00:00 2001
From: Sayan Paul <sayanp607@gmail.com>
Date: Sat, 19 Oct 2024 13:33:26 +0530
Subject: [PATCH] responsive review section added

---
 index.html | 57 +++++++++++++++++++++++++++++++++---------------------
 script.js  | 26 +++++++++++++++++++++++++
 script1.js |  1 +
 styles.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 119 insertions(+), 22 deletions(-)
 create mode 100644 script.js

diff --git a/index.html b/index.html
index 77b67e9..832837b 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="about.css">
@@ -1105,28 +1106,40 @@ <h3>Sell Train Tickets</h3>
 <script src="about.js"></script>
   </div>
 
-  <div class="content-wrapper">
-    <h1>Our Reviews</h1>
-    <div class="blue-line"></div>
-    <div class="wrapper-for-arrows">
-        <div style="opacity: 0;" class="chicken"></div>
-        <div id="reviewWrap" class="review-wrap">
-            <div id="imgDiv" class="">
-            </div>
-            <div id="personName"></div>
-            <div id="profession"></div>
-            <div id="description">
-            </div>
-        </div>
-        <div class="surprise-me-btn">Surprise me</div>
-        <div class="left-arrow-wrap arrow-wrap">
-            <div class="arrow" id="leftArrow"></div>
-        </div>
-        <div class="right-arrow-wrap arrow-wrap">
-            <div class="arrow" id="rightArrow"></div>
-        </div>
+  <div class="review-section">
+    <h2>Our Reviews</h2>
+    <div class="reviews-slider">
+      <div class="review-card">
+        <h3>Angel Roy</h3>
+        <h4>Kolkata</h4>
+        <p>Great platform to book tickets online! Highly recommend.</p>
+      </div>
+      <div class="review-card">
+        <h3>Jane Sharma</h3>
+        <h4>Delhi</h4>
+        <p>Amazing service and no worry to make travel plans now .</p>
+      </div>
+      <div class="review-card">
+        <h3>Sam Rathod</h3>
+        <h4>Rajasthan</h4>
+        <p>This ticket booking site really helped me book my tickets anytime anywhere!</p>
+      </div>
+      <div class="review-card">
+        <h3>Charles de Souza </h3>
+        <h4>Mumbai</h4>
+        <p>Very satisfied with this service.Helped me a lot.</p>
+      </div>
+      <div class="review-card">
+        <h3>Alex Patel</h3>
+        <h4>Bangalore</h4>
+        <p>Quick ticket booking made my journey more easier now,Thanks.</p>
+      </div>
     </div>
-</div>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
+  <script src="script.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
 <script src="main.js"></script>
  
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..cfd2e4c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,26 @@
+// script.js
+$(document).ready(function(){
+  $('.reviews-slider').slick({
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3, // Show 3 reviews at a time
+    slidesToScroll: 1, // Scroll one review at a time
+    responsive: [
+      {
+        breakpoint: 1024, // For tablets
+        settings: {
+          slidesToShow: 2, // Show 2 reviews on tablets
+          slidesToScroll: 1
+        }
+      },
+      {
+        breakpoint: 768, // For mobile devices
+        settings: {
+          slidesToShow: 1, // Show 1 review on mobile
+          slidesToScroll: 1
+        }
+      }
+    ]
+  });
+});
diff --git a/script1.js b/script1.js
index 5e21c65..829b0bf 100644
--- a/script1.js
+++ b/script1.js
@@ -74,3 +74,4 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 });
+
diff --git a/styles.css b/styles.css
index 340cab9..8714439 100644
--- a/styles.css
+++ b/styles.css
@@ -13,6 +13,63 @@ body {
     font-size: 16px;
 }
 
+.review-section {
+    width: 80%;
+    margin: 50px auto;
+    text-align: center;
+  }
+  
+  h2 {
+    margin-bottom: 20px;
+    font-size: 2rem;
+    color: #333;
+  }
+  
+  .reviews-slider {
+    display: flex;
+  }
+  
+  .review-card {
+    background-color: #f9f9f9;
+    padding: 20px;
+    margin: 10px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    outline: none; /* Fixes slick carousel focus issue */
+    width: 100%;
+    text-align: center;
+  }
+  
+  .review-card:hover {
+    transform: scale(1.05);
+  }
+  
+  .review-card h3 {
+    font-size: 1.5rem;
+    color: #333;
+  }
+  
+  .review-card p {
+    color: #555;
+    font-size: 1rem;
+    margin-top: 10px;
+  }
+  
+  /* Custom styles for slick */
+  .slick-prev:before, .slick-next:before {
+    color: #333;
+  }
+  
+  .slick-dots li button:before {
+    color: #333;
+  }
+  
+  .slick-dots li.slick-active button:before {
+    opacity: 0.75;
+    color: #000;
+  }
+  
 h1,
 h2,
 h3,