home

slider

padding

title

Our Categories

banners

All Products

product-slider

Latest Products

Trending Products

trending-products

populer-product

three-banner-products

<div class="raw-html-embed"><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TREADY TOUCH Customer Reviews</title> <style> /* Import a clean, elegant font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); /* Main container for the component */ .testimonial-container { font-family: 'Poppins', sans-serif; background-color: #F9F9F9; /* Neutral background from your palette */ display: flex; justify-content: center; align-items: center; padding: 50px 20px; box-sizing: border-box; width: 100%; } .testimonial-slider { max-width: 800px; width: 100%; text-align: center; overflow: hidden; /* This is crucial to hide the other slides */ position: relative; background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); padding: 40px; box-sizing: border-box; } /* Heading style */ .testimonial-slider h2 { font-size: 28px; font-weight: 600; color: #2C3E7B; /* Primary Blue */ margin-bottom: 30px; } /* Container that moves */ .testimonial-slides { display: flex; transition: transform 0.5s ease-in-out; /* The sliding animation */ } /* Individual slide style */ .testimonial-slide { min-width: 100%; box-sizing: border-box; padding: 0 20px; } /* Customer name style */ .testimonial-slide .customer-name { font-size: 20px; font-weight: 600; color: #4267B2; /* Secondary Blue */ margin-bottom: 15px; } /* Review text style */ .testimonial-slide .review-text { font-size: 16px; color: #333333; /* Charcoal Grey for text */ line-height: 1.6; font-style: italic; } /* Styling for the navigation dots */ .testimonial-dots { margin-top: 30px; } .dot { cursor: pointer; height: 12px; width: 12px; margin: 0 5px; background-color: #B2C3EE; /* Lighter version of Secondary Blue */ border-radius: 50%; display: inline-block; transition: background-color 0.3s ease; } .dot.active, .dot:hover { background-color: #4267B2; /* Secondary Blue */ } </style>  <div class="testimonial-container"> <div class="testimonial-slider"> <h2>What Our Customers Say</h2> <div class="testimonial-slides">  <div class="testimonial-slide"> <p class="review-text">"The quality of the Abaya I purchased is just exceptional. The fabric is so comfortable and the design is elegant and modern. Truly worth every penny. I received so many compliments!"</p> <h3 class="customer-name">- Fatima Ahmed</h3> </div>  <div class="testimonial-slide"> <p class="review-text">"I am in love with my new Borkha from Treandy Touch. The craftsmanship is beautiful and it fits perfectly. Their customer service was also incredibly helpful. Will definitely be shopping here again."</p> <h3 class="customer-name">- Aisha Khan</h3> </div>  <div class="testimonial-slide"> <p class="review-text">"The fabric of this Borkha is so soft and breathable, yet it looks absolutely elegant. I wore it all day and still felt comfortable and confident."</p> <h3 class="customer-name">- Sameera Chowdhury</h3> </div>  <div class="testimonial-slide"> <p class="review-text">"Fast delivery and beautiful packaging. The abaya looked even more stunning in person than it did on the website. I feel so confident and graceful wearing it. Highly recommended!"</p> <h3 class="customer-name">- Jannatul Islam</h3> </div> </div> <div class="testimonial-dots">  </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const slidesContainer = document.querySelector('.testimonial-slides'); const slides = document.querySelectorAll('.testimonial-slide'); const dotsContainer = document.querySelector('.testimonial-dots'); const totalSlides = slides.length; let currentSlide = 0; let slideInterval; // Create dots for navigation slides.forEach((_, i) => { const dot = document.createElement('span'); dot.classList.add('dot'); if (i === 0) dot.classList.add('active'); dot.addEventListener('click', () => { goToSlide(i); resetInterval(); }); dotsContainer.appendChild(dot); }); const dots = document.querySelectorAll('.dot'); // Function to go to a specific slide const goToSlide = (slideIndex) => { currentSlide = slideIndex; slidesContainer.style.transform = translateX(-${currentSlide * 100}%); // Update active dot dots.forEach(dot => dot.classList.remove('active')); dots[currentSlide].classList.add('active'); }; // Function to show the next slide const nextSlide = () => { currentSlide = (currentSlide + 1) % totalSlides; goToSlide(currentSlide); }; // Function to reset the automatic sliding interval const resetInterval = () => { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, 4500); // 4.5 seconds }; // Start the automatic slide show slideInterval = setInterval(nextSlide, 9000); }); </script></div>

content-editor

Products

Our Categories

All Products

What Our Customers Say

- Fatima Ahmed

- Aisha Khan

- Sameera Chowdhury

- Jannatul Islam

Company

Help Center

Privacy & Tearms