From 015b2533a6df9b487f4f978b363d27c1d2556178 Mon Sep 17 00:00:00 2001
From: Pranjal Negi <negipranjal555@gmail.com>
Date: Sun, 2 Feb 2025 16:59:54 +0530
Subject: [PATCH] Enhanced Styling of Testimonials Section (#669)

---
 css/custom.css | 164 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html     | 115 +++++++++++-----------------------
 2 files changed, 200 insertions(+), 79 deletions(-)

diff --git a/css/custom.css b/css/custom.css
index 36f9b60c..644e70af 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -558,3 +558,167 @@ ul {
   transform: translateY(1px); /* Makes the button appear pressed when clicked */
   box-shadow: 0 2px 5px rgba(255, 204, 0, 0.4); /* Adds a subtle shadow effect when the button is active */
 }
+
+/* Testimonial Styling */
+
+#testimonials {
+  background-color: #3b3b4f; /* Change the background color */
+  padding: 5rem 0;
+}
+
+.testimonials-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+.testimonials-header {
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.testimonials-title {
+  font-size: 2.5rem;
+  color: white;
+  margin-bottom: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+
+.testimonials-subtitle {
+  font-size: 1.1rem;
+  color: white;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.testimonial-carousel-wrapper {
+  position: relative;
+  padding: 0 2rem;
+}
+
+.testimonial-card {
+  background: white;
+  border-radius: 1rem;
+  padding: 2.5rem;
+  margin: 1rem;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+  transition: transform 0.3s ease;
+}
+
+.testimonial-card:hover {
+  transform: translateY(-5px);
+}
+
+.testimonial-content {
+  position: relative;
+}
+
+.testimonial-text {
+  font-size: 1.1rem;
+  color: #4a5568;
+  line-height: 1.8;
+  margin-bottom: 1.5rem;
+  position: relative;
+  padding-left: 2rem;
+}
+
+.testimonial-text::before {
+  content: "“";
+  position: absolute;
+  left: -1rem;
+  top: -1rem;
+  font-size: 4rem;
+  color: #48bb78;
+  font-family: Georgia, serif;
+  opacity: 0.3;
+}
+
+.testimonial-author {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.author-name {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 1rem;
+}
+
+.author-role {
+  color: #718096;
+  font-size: 0.9rem;
+}
+
+/* Owl Carousel Customization */
+.owl-dots {
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.owl-dot {
+  height: 12px;
+  width: 12px;
+  margin: 0 5px;
+  border-radius: 50%;
+  background: #cbd5e0 !important;
+  transition: all 0.3s ease;
+}
+
+.owl-dot.active {
+  background: #48bb78 !important;
+  transform: scale(1.2);
+}
+
+.owl-nav button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: white !important;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  color: #48bb78 !important;
+  font-size: 1.5rem !important;
+}
+
+.owl-nav button:hover {
+  background: #48bb78 !important;
+  color: white !important;
+}
+
+.owl-prev {
+  left: -50px;
+}
+
+.owl-next {
+  right: -50px;
+}
+
+@media (max-width: 768px) {
+  .testimonials-title {
+    font-size: 2rem;
+  }
+  
+  .testimonial-card {
+    padding: 1.5rem;
+    margin: 0.5rem;
+  }
+  
+  .testimonial-text {
+    font-size: 1rem;
+    padding-left: 1.5rem;
+  }
+  
+  .owl-nav button {
+    width: 35px;
+    height: 35px;
+    font-size: 1.2rem !important;
+  }
+}
diff --git a/index.html b/index.html
index b402f870..eddb73c2 100755
--- a/index.html
+++ b/index.html
@@ -194,87 +194,44 @@ <h4 data-target="170" class="count">0</h4>
   </div>
 </section>
 
-<!-- Testimonials -->
-<section id="call-to-action">
-  <div class="container customMargin3">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-8 col-md-push-2" >
-            <div class="section-title text-center">
-              <h2>What we hear</h2>
-	    </div>
-	    <div>
-              <p>This is what we've heard about Sugar Labs from students, teachers, parents, and growing developers.</p>
-	    </div>
+<!-- Testimonials Section -->
+<section id="testimonials">
+  <div class="testimonials-container">
+    <div class="testimonials-header">
+      <h2 class="testimonials-title">What We Hear</h2>
+      <p class="testimonials-subtitle">Hear from students, teachers, parents, and developers about their Sugar Labs experiences.</p>
+    </div>
+    <div class="testimonials-carousel-wrapper">
+      <div class="testimonial-carousel owl-carousel">
+        
+        <!-- Testimonial Item 1 -->
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            <p class="testimonial-text">"This summer was super fun and filled with learning! I enjoyed testing over 60+ activities with kids to get first-hand feedback which had a positive impact in the way they approach problems..."</p>
+            <div class="testimonial-author">
+              <span class="author-name">Sourabha G.</span>
+              <span class="author-role">GSoC 2021 Student</span>
+            </div>
           </div>
         </div>
-        <div class="row justify-content-around">
-          <div class="col-md-5 col-md-push-1 customPadding4" >
-            <div class="testimonial-carousel customPadding4 borderNone">
-              <div id="testimonial-slider2" class="owl-carousel customPadding4">
-                <div>
-                  <p class="leftAlign">"This summer
-                    was super fun and filled with
-                    learning! I enjoyed testing over
-                    60+ activities with kids to get
-                    first-hand feedback which had a
-                    positive impact in the way they
-                    approach problems. The fact that
-                    these activities are used by kids
-                    as a tool of learning motivates me
-                    to contribute more and more. I'm
-                    going to continue to contribute
-                    and be a part of Sugar
-                    Labs."</p>
-                  <div class="user">
-                    <p><span>Sourabha G., </span>GSoC 2021 student</p>
-                  </div>
-                </div>
-		<div>
-                  <p class="leftAlign">"I would like
-                    to thank my mentors Walter Bender
-                    and Devin Ulibarri for their
-                    constant guidance and
-                    motivation. A big thanks to Sugar
-                    Labs community and Google Summer
-                    of Code (GSoC) for providing such
-                    a wonderful opportunity for
-                    learning and helping me to be an
-                    active member of Open Source
-                    Community."</p>
-                  <div class="user">
-                    <p><span>Riya Lohia, </span>GSoC 2018 student</p>
-                  </div>
-                </div>
-		<div>
-                  <p class="leftAlign">"I think
-                    Music Blocks will inspire many
-                    young folks to become programmers,
-                    mathematicians, composers, and
-                    music theorists. It will also
-                    provide important experiences to
-                    other young folk who pursue other
-                    fields. You are to be
-                    congratulated on your
-                    efforts."</p> <!-- Move Hermann to MB and give Alan Kay's quote more context somewhere else.
-                                       <div class="user">
-                                         <p><span>Richard Hermann, PhD, </span>Prof. of Music Theory and Composition, University of New Mexico</p>
-                                       </div>
-                </div>
-                <div>
-                  <p class="leftAlign">"A successful technology creates problems that only it can solve."</p>
-                  <div class="user">
-                    <p><span>Alan Kay</span></p>
-                  </div>
-                </div>-->
-                <div>
-                  <p class="leftAlign">"Fedora-Based Sugar on a Stick Is One Sweet Desktop."</p>
-                  <div class="user">
-                    <p><span>LinuxInsider</span></p>
-                  </div>
-                </div>
-              </div>
+
+        <!-- Testimonial Item 2 -->
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            <p class="testimonial-text">"I would like to thank my mentors Walter Bender and Devin Ulibarri for their constant guidance and motivation..."</p>
+            <div class="testimonial-author">
+              <span class="author-name">Riya Lohia</span>
+              <span class="author-role">GSoC 2018 Student</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Testimonial Item 3 -->
+        <div class="testimonial-card">
+          <div class="testimonial-content">
+            <p class="testimonial-text">"Fedora-Based Sugar on a Stick Is One Sweet Desktop."</p>
+            <div class="testimonial-author">
+              <span class="author-name">LinuxInsider</span>
             </div>
           </div>
         </div>