Merge pull request Mujtabaa07#364 from Pratibha666/feature/enhance-te…

…stimonial-page

enhanced testimonial page

src/Pages/Testimonial.css

@@ -1,4 +1,4 @@
-
+/* General Reset */
 * {
   margin: 0;
   padding: 0;
@@ -54,8 +54,48 @@ h1 {
   background: white;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  animation: fadeInUp 1s ease-in-out;
-  transition: all 0.3s ease-in-out;
+  perspective: 1000px; /* Add perspective */
+}
+
+/* Inner card container for flipping */
+.card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+/* Flip effect on hover */
+.single:hover .card-inner {
+  transform: rotateY(180deg);
+}
+
+/* Front and Back Styling */
+.front, .back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  top: 0;
+  left: 0;
+}
+
+/* Front Styling */
+.front {
+  transform: rotateY(0deg);
+}
+
+/* Back Styling */
+.back {
+  transform: rotateY(180deg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-sizing: border-box;
 }
 
 /* Image Styling */
@@ -96,7 +136,7 @@ h1 {
 }
 
 /* Review Text Styling */
-.image-text p {
+.image-text p, .back p {
   font-size: 1rem;
   color: #333;
 }
@@ -110,86 +150,94 @@ h1 {
 /* Keyframe Animations */
 @keyframes fadeIn {
   0% {
-      opacity: 0;
-      transform: translateY(-20px);
+    opacity: 0;
+    transform: translateY(-20px);
   }
   100% {
-      opacity: 1;
-      transform: translateY(0);
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
 @keyframes fadeInUp {
   0% {
-      opacity: 0;
-      transform: translateY(20px);
+    opacity: 0;
+    transform: translateY(20px);
   }
   100% {
-      opacity: 1;
-      transform: translateY(0);
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
 /* Responsive Styling for Tablets */
 @media (max-width: 768px) {
   h1 {
-      font-size: 2rem;
+    font-size: 2rem;
   }
 
   .testimonial-row {
-      flex-direction: column;
-      align-items: center;
-      gap: 1.5rem;
-      padding: 3rem 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 3rem 0;
   }
 
   .single {
-      max-width: 90%; /* Adjust card width */
-      height: auto;
+    max-width: 90%; /* Adjust card width */
+    height: auto;
   }
 
   .image {
-      width: 100px;
-      height: 100px;
-      top: -50px;
+    width: 100px;
+    height: 100px;
+    top: -50px;
   }
 
   .image-text h2 {
-      font-size: 1.3rem;
+    font-size: 1.3rem;
   }
 
   .image-text p {
-      font-size: 0.9rem;
+    font-size: 0.9rem;
   }
 }
 
 /* Responsive Styling for Mobile Devices */
 @media (max-width: 480px) {
   h1 {
-      font-size: 1.8rem;
+    font-size: 1.8rem;
   }
 
   .testimonial-row {
-      flex-direction: column;
-      gap: 1rem;
+    flex-direction: column;
+    gap: 1rem;
   }
 
   .single {
-      max-width: 95%; /* Adjust card width */
-      height: auto;
+    max-width: 95%; /* Adjust card width */
+    height: auto;
   }
 
   .image {
-      width: 80px;
-      height: 80px;
-      top: -40px;
+    width: 80px;
+    height: 80px;
+    top: -40px;
   }
 
   .image-text h2 {
-      font-size: 1.1rem;
+    font-size: 1.1rem;
   }
 
   .image-text p {
-      font-size: 0.8rem;
+    font-size: 0.8rem;
   }
 }
+.heading{
+  font-weight: 1000;
+  font-size: 50px;
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
+}
+.name{
+  font-weight: 500;
+}

src/Pages/Testimonial.js

@@ -6,7 +6,7 @@ function Testimonial() {
     <>
       <div className="testimonial">
         <div className="container">
-          <h1>What Our Customers Say</h1>
+          <h1 className='heading'>What Our Customers Say</h1>
           <div className="carousel-container">
             <div
               id="carouselExampleSlidesOnly"
@@ -80,8 +80,7 @@ function Testimonial() {
                 className="carousel-control-prev"
                 type="button"
                 data-bs-target="#carouselExampleSlidesOnly"
-                data-bs-slide="prev"
-              >
+                data-bs-slide="prev">
                 <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                 <span className="visually-hidden">Previous</span>
               </button>
@@ -102,24 +101,28 @@ function Testimonial() {
 }
 
 function TestimonialCard({ name, image, rating, text }) {
-
   return (
-
     <div className="single">
-      <div className="image">
-        <img src={image} alt={name} />
-      </div>
-      <div className="image-text">
-        <h2>{name}</h2>
-        <p>{rating}</p>
-        <p>{text}</p>
+      <div className="card-inner">
+        <div className="front">
+          <div className="image">
+            <img src={image} alt={name} />
+          </div>
+          <div className="image-text">
+            <br />
+            <br />
+            <h2 className='name'>{name}</h2>
+            <br />
+            <p>{rating}</p>
+          </div>
+        </div>
+        <div className="back">
+          <p className='content'>{text}</p>
+        </div>
       </div>
     </div>
   );
 }
 
-export default Testimonial;
-
-
-
 
+export default Testimonial;