Testimonials are powerful tools that can significantly influence potential customers' decisions. They provide authentic insights into the experiences of previous clients, adding credibility to your brand.
In this article, we will explore 10 compelling testimonial examples that showcase how businesses effectively leverage customer feedback to build trust and drive engagement.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect UI effortlessly, ensuring your testimonials look stunning on any device.
Ready to elevate your design game? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs with ease. Our drag-and-drop editor and beautifully crafted components make creating pixel-perfect designs a breeze.
Experience unparalleled efficiency and start creating immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testimonials Slider</title> <style> :root { --primary-bg: #f7f7f7; --dark-text: #1a1a1a; --light-text: #757575; --accent: #333333; --highlight: #e0e0e0; --slider-duration: 10s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--primary-bg); display: flex; justify-content: center; align-items: center; min-height: 100vh; color: var(--dark-text); overflow-x: hidden; } .testimonial-container { width: 100%; max-width: 650px; height: 450px; position: relative; margin: 0 auto; background-color: white; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border-radius: 12px; overflow: hidden; } .pattern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 50px 50px, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 2px, transparent 2px), radial-gradient(circle at 150px 150px, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 2px, transparent 2px), radial-gradient(circle at 250px 250px, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 2px, transparent 2px); background-size: 300px 300px; opacity: 0.3; z-index: 1; pointer-events: none; } .testimonials-slider { width: 100%; height: 100%; position: relative; z-index: 2; display: flex; flex-direction: column; padding: 40px; } .logo { font-size: 24px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.5px; display: flex; align-items: center; } .logo::before { content: ""; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background-color: var(--accent); margin-right: 12px; transition: transform 0.3s ease; } .logo:hover::before { transform: scale(1.2); } .testimonial-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 90px 40px 40px; opacity: 0; transition: opacity 0.8s ease; display: flex; flex-direction: column; justify-content: center; } .testimonial-slide.active { opacity: 1; z-index: 3; } .quote { font-size: 22px; line-height: 1.5; font-weight: 500; margin-bottom: 30px; position: relative; color: var(--dark-text); } .quote::before { content: """; position: absolute; top: -50px; left: -10px; font-size: 120px; color: var(--highlight); font-family: Georgia, serif; z-index: -1; } .quote-attribution { display: flex; align-items: center; margin-top: auto; } .avatar { width: 50px; height: 50px; border-radius: 50%; background-color: var(--highlight); margin-right: 15px; overflow: hidden; position: relative; } .avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .avatar:hover img { transform: scale(1.1); } .attribution-info { display: flex; flex-direction: column; } .client-name { font-size: 16px; font-weight: 600; margin-bottom: 5px; } .client-title { font-size: 14px; color: var(--light-text); } .controls { position: absolute; bottom: 40px; right: 40px; display: flex; z-index: 10; gap: 10px; } .slider-control { width: 36px; height: 36px; border-radius: 50%; background-color: transparent; border: 1px solid var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .slider-control:hover { background-color: var(--accent); transform: translateY(-2px); } .slider-control:hover svg { fill: white; } .slider-control svg { width: 18px; height: 18px; fill: var(--accent); transition: fill 0.3s ease; } .dot-indicator { position: absolute; bottom: 40px; left: 40px; z-index: 10; display: flex; gap: 8px; } .dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--highlight); cursor: pointer; transition: all 0.3s ease; } .dot.active { background-color: var(--accent); transform: scale(1.3); } .dot:hover { transform: scale(1.3); } .progress-bar { position: absolute; bottom: 0; left: 0; height: 3px; background-color: var(--accent); width: 0; transition: width 0.1s linear; z-index: 10; } .paused .progress-bar { animation-play-state: paused; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 2px; background-color: var(--accent); z-index: 100; opacity: 1; transition: width 0.5s ease, opacity 0.3s ease 0.5s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 700px) { .testimonial-container { height: 500px; max-width: 90%; } .testimonials-slider, .testimonial-slide { padding: 30px; } .testimonial-slide { padding-top: 80px; } .quote { font-size: 18px; } .controls, .dot-indicator { bottom: 20px; right: 20px; left: 20px; } } @media (max-width: 480px) { .testimonial-container { height: 550px; max-width: 95%; } .quote { font-size: 16px; } } /* Animated wave background for active dot */ .dot.active::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: var(--accent); z-index: -1; opacity: 0.3; animation: ripple 1.5s ease-out infinite; } @keyframes ripple { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(3); opacity: 0; } } </style> </head> <body> <div class="loader"></div> <div class="testimonial-container"> <div class="pattern-overlay"></div> <div class="testimonials-slider"> <div class="logo">Luminex</div> <div class="testimonial-slide active"> <div class="quote">After switching to Luminex for our data analytics, our team's productivity increased by 37%. The real-time visualization capabilities help us make decisions in minutes instead of days.</div> <div class="quote-attribution"> <div class="avatar"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23333'/><circle cx='50' cy='40' r='20' fill='%23999'/><circle cx='50' cy='100' r='35' fill='%23999'/></svg>" alt="Sarah T."> </div> <div class="attribution-info"> <div class="client-name">Sarah Thompson</div> <div class="client-title">CTO at FinanceStream</div> </div> </div> </div> <div class="testimonial-slide"> <div class="quote">The customization features in Luminex saved us countless development hours. We were able to deploy mission-critical dashboards in 2 weeks instead of the 2 months we had budgeted.</div> <div class="quote-attribution"> <div class="avatar"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23333'/><circle cx='50' cy='40' r='20' fill='%23999'/><circle cx='50' cy='100' r='35' fill='%23999'/></svg>" alt="Michael R."> </div> <div class="attribution-info"> <div class="client-name">Michael Rodriguez</div> <div class="client-title">Head of Engineering at TechWave</div> </div> </div> </div> <div class="testimonial-slide"> <div class="quote">Luminex's AI-powered insights identified a critical market trend our team had overlooked. This single discovery led to a new product line that now accounts for 22% of our annual revenue.</div> <div class="quote-attribution"> <div class="avatar"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23333'/><circle cx='50' cy='40' r='20' fill='%23999'/><circle cx='50' cy='100' r='35' fill='%23999'/></svg>" alt="Jennifer C."> </div> <div class="attribution-info"> <div class="client-name">Jennifer Chen</div> <div class="client-title">Product Director at NexusRetail</div> </div> </div> </div> <div class="testimonial-slide"> <div class="quote">The integration capabilities of Luminex allowed us to connect our legacy systems seamlessly. We were importing historical data within hours, not the weeks we anticipated with other solutions.</div> <div class="quote-attribution"> <div class="avatar"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23333'/><circle cx='50' cy='40' r='20' fill='%23999'/><circle cx='50' cy='100' r='35' fill='%23999'/></svg>" alt="Daniel O."> </div> <div class="attribution-info"> <div class="client-name">Daniel Okafar</div> <div class="client-title">Solutions Architect at GlobalHealth</div> </div> </div> </div> <div class="controls"> <button class="slider-control prev"> <svg viewBox="0 0 24 24"> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/> </svg> </button> <button class="slider-control pause"> <svg viewBox="0 0 24 24" class="pause-icon"> <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/> </svg> <svg viewBox="0 0 24 24" class="play-icon" style="display: none;"> <path d="M8 5v14l11-7z"/> </svg> </button> <button class="slider-control next"> <svg viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> </button> </div> <div class="dot-indicator"></div> <div class="progress-bar"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Load animation const loader = document.querySelector('.loader'); loader.style.width = '100%'; setTimeout(() => { loader.style.opacity = '0'; setTimeout(() => { loader.style.display = 'none'; }, 300); }, 500); const slides = document.querySelectorAll('.testimonial-slide'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); const pauseBtn = document.querySelector('.pause'); const pauseIcon = document.querySelector('.pause-icon'); const playIcon = document.querySelector('.play-icon'); const container = document.querySelector('.testimonial-container'); const progressBar = document.querySelector('.progress-bar'); const dotIndicator = document.querySelector('.dot-indicator'); let currentSlide = 0; let slideInterval; let isPaused = false; const slideDuration = 5000; // 5 seconds per slide // Create dot indicators slides.forEach((_, index) => { const dot = document.createElement('div'); dot.classList.add('dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => { goToSlide(index); resetInterval(); }); dotIndicator.appendChild(dot); }); const dots = document.querySelectorAll('.dot'); // Initialize progress bar animation const startProgressBar = () => { progressBar.style.width = '0'; // CSS transition doesn't work well for this duration, so we use // a manual animation with requestAnimationFrame let startTime = null; function animate(timestamp) { if (!startTime) startTime = timestamp; const elapsed = timestamp - startTime; const progress = Math.min(elapsed / slideDuration, 1); progressBar.style.width = `${progress * 100}%`; if (progress < 1 && !isPaused) { requestAnimationFrame(animate); } } requestAnimationFrame(animate); }; const goToSlide = (n) => { slides[currentSlide].classList.remove('active'); dots[currentSlide].classList.remove('active'); currentSlide = (n + slides.length) % slides.length; slides[currentSlide].classList.add('active'); dots[currentSlide].classList.add('active'); startProgressBar(); }; const nextSlide = () => { goToSlide(currentSlide + 1); }; const prevSlide = () => { goToSlide(currentSlide - 1); }; const startInterval = () => { slideInterval = setInterval(nextSlide, slideDuration); startProgressBar(); }; const resetInterval = () => { clearInterval(slideInterval); if (!isPaused) { startInterval(); } }; const togglePause = () => { isPaused = !isPaused; if (isPaused) { clearInterval(slideInterval); container.classList.add('paused'); pauseIcon.style.display = 'none'; playIcon.style.display = 'block'; } else { startInterval(); container.classList.remove('paused'); pauseIcon.style.display = 'block'; playIcon.style.display = 'none'; } }; // Event listeners prevBtn.addEventListener('click', () => { prevSlide(); resetInterval(); }); nextBtn.addEventListener('click', () => { nextSlide(); resetInterval(); }); pauseBtn.addEventListener('click', togglePause); // Touch events for mobile let touchStartX = 0; let touchEndX = 0; container.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }); container.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); const handleSwipe = () => { if (touchEndX < touchStartX - 50) { nextSlide(); resetInterval(); } if (touchEndX > touchStartX + 50) { prevSlide(); resetInterval(); } }; // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight') { nextSlide(); resetInterval(); } else if (e.key === 'ArrowLeft') { prevSlide(); resetInterval(); } else if (e.key === ' ') { togglePause(); } }); // Pause when not in viewport const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { if (!isPaused) { startInterval(); } } else { clearInterval(slideInterval); } }, { threshold: 0.5 }); observer.observe(container); // Add animation to new slide slides.forEach(slide => { slide.addEventListener('transitionend', function() { if (this.classList.contains('active')) { this.style.animation = 'fadeIn 0.5s ease forwards'; const avatar = this.querySelector('.avatar'); avatar.style.animation = 'pulse 2s ease-in-out'; } else { this.style.animation = ''; } }); }); // Initialize slider startInterval(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Agency Testimonials Grid</title> <style> :root { --primary: #6C5CE7; --secondary: #00B894; --accent: #FD79A8; --light: #F7F7F7; --dark: #2D3436; --shadow: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { max-width: 700px; width: 100%; margin: 0 auto; } header { text-align: center; margin-bottom: 40px; } h1 { font-size: 2.5rem; margin-bottom: 15px; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--accent); border-radius: 2px; } .subtitle { color: var(--dark); opacity: 0.8; font-size: 1.1rem; max-width: 600px; margin: 0 auto; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-bottom: 30px; } .testimonial-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 30px var(--shadow); position: relative; height: 200px; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .testimonial-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(108, 92, 231, 0.2); } .testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to right, var(--primary), var(--secondary)); } .card-content { padding: 25px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .client-info { display: flex; align-items: center; margin-bottom: 15px; } .client-image { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; border: 3px solid white; box-shadow: 0 5px 10px var(--shadow); } .client-details { flex: 1; } .client-name { font-weight: 700; font-size: 1rem; margin-bottom: 3px; color: var(--dark); } .client-company { font-size: 0.85rem; color: var(--accent); font-weight: 600; display: flex; align-items: center; } .client-company svg { margin-right: 5px; } .testimonial-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 5px; color: var(--primary); position: relative; z-index: 2; } .testimonial-excerpt { font-size: 0.9rem; line-height: 1.4; margin-bottom: 15px; color: var(--dark); opacity: 0.8; max-height: 3.9em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; position: relative; z-index: 2; } .expanded-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; padding: 25px; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 3; display: flex; flex-direction: column; } .testimonial-card:hover .expanded-content { transform: translateY(0); } .close-expanded { position: absolute; top: 15px; right: 15px; background: var(--primary); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; } .expanded-content:hover .close-expanded { opacity: 1; } .full-testimonial { font-size: 0.95rem; line-height: 1.5; margin-bottom: 20px; overflow-y: auto; max-height: 120px; padding-right: 5px; } .full-testimonial::-webkit-scrollbar { width: 5px; } .full-testimonial::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; } .full-testimonial::-webkit-scrollbar-track { background: var(--light); border-radius: 10px; } .rating { display: flex; margin-top: 10px; } .star { color: #FFD700; margin-right: 2px; } .project-details { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.85rem; display: flex; justify-content: space-between; } .project-type { background: rgba(108, 92, 231, 0.1); color: var(--primary); padding: 5px 10px; border-radius: 20px; font-weight: 600; } .project-date { opacity: 0.7; } .expansion-indicator { position: absolute; bottom: 15px; right: 15px; color: var(--secondary); animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-2px); } } .filters { display: flex; justify-content: center; margin-bottom: 25px; flex-wrap: wrap; gap: 10px; } .filter-btn { background: white; border: none; border-radius: 25px; padding: 8px 15px; font-size: 0.9rem; font-weight: 600; color: var(--dark); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px var(--shadow); } .filter-btn:hover, .filter-btn.active { background: var(--primary); color: white; transform: translateY(-2px); } @media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } h1 { font-size: 2rem; } .subtitle { font-size: 1rem; } } .card-badge { position: absolute; top: 15px; right: 15px; background: var(--accent); color: white; font-size: 0.75rem; font-weight: 700; padding: 5px 10px; border-radius: 20px; transform: scale(0); transition: transform 0.3s ease; z-index: 5; } .testimonial-card:hover .card-badge { transform: scale(1); animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(253, 121, 168, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(253, 121, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 121, 168, 0); } } .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.5s ease, visibility 0.5s ease; } .loader { width: 60px; height: 60px; border-radius: 50%; border: 5px solid rgba(108, 92, 231, 0.2); border-top-color: var(--primary); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { opacity: 0; visibility: hidden; } .fade-in { animation: fadeIn 0.6s ease-in-out forwards; opacity: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .filter-container { position: relative; overflow: hidden; width: 100%; padding-bottom: 20px; } .filter-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .filter-scroll::-webkit-scrollbar { display: none; } .scroll-indicator { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: rgba(108, 92, 231, 0.1); border-radius: 3px; } .scroll-position { height: 100%; background: var(--primary); border-radius: 3px; width: 30%; transition: transform 0.3s ease; } </style> </head> <body> <div class="loading-overlay"> <div class="loader"></div> </div> <div class="container fade-in"> <header> <h1>Client Success Stories</h1> <p class="subtitle">See how we've helped businesses transform their digital presence with innovative strategies and stunning designs.</p> </header> <div class="filter-container"> <div class="filter-scroll" id="filters"> <button class="filter-btn active" data-filter="all">All Projects</button> <button class="filter-btn" data-filter="web">Web Design</button> <button class="filter-btn" data-filter="branding">Branding</button> <button class="filter-btn" data-filter="marketing">Digital Marketing</button> <button class="filter-btn" data-filter="ecommerce">E-commerce</button> </div> <div class="scroll-indicator"> <div class="scroll-position" id="scrollIndicator"></div> </div> </div> <div class="testimonial-grid" id="testimonialGrid"> <!-- Cards will be dynamically inserted here --> </div> </div> <script> // Testimonial data const testimonials = [ { id: 1, name: "Emily Richardson", company: "Vertex Labs", image: "https://randomuser.me/api/portraits/women/32.jpg", title: "Transformed Our E-commerce Conversion Rate", excerpt: "Our online sales increased by 167% within the first quarter after redesigning our user journey.", fullTestimonial: "When we approached this agency, our e-commerce platform was underperforming despite having quality products. The team conducted a thorough UX audit and completely reimagined our customer journey. They simplified the checkout process, implemented personalized product recommendations, and optimized for mobile. The results were immediate and dramatic – our conversion rate jumped from 1.8% to 4.9%, and AOV increased by 32%. What impressed me most was their data-driven approach combined with creative design solutions that genuinely reflected our brand values.", rating: 5, projectType: "ecommerce", date: "June 2023", badge: "167% Growth" }, { id: 2, name: "Marcus Johnson", company: "Horizon Media", image: "https://randomuser.me/api/portraits/men/43.jpg", title: "Brand Identity That Stands Out in a Crowded Market", excerpt: "Our rebrand has received industry recognition and helped us secure 3 major clients.", fullTestimonial: "After 10 years in business, our brand identity had become outdated and inconsistent across touchpoints. This agency didn't just refresh our logo – they developed a comprehensive brand system that's flexible, distinctive, and truly represents our company's evolution. The new brand guidelines have made it incredibly easy to maintain consistency, and the positive feedback has been overwhelming. We've won three major clients who specifically mentioned our brand presence as a factor in their decision. The team's collaborative approach meant they really understood our vision and translated it into something better than we could have imagined.", rating: 5, projectType: "branding", date: "March 2023", badge: "Award-winning" }, { id: 3, name: "Sophia Chen", company: "Pinnacle Finance", image: "https://randomuser.me/api/portraits/women/65.jpg", title: "Website Redesign That Drives Client Trust", excerpt: "Our new website has decreased bounce rates by 42% and increased consultation requests by 75%.", fullTestimonial: "In the financial services industry, establishing trust is paramount. Our previous website wasn't reflecting our expertise or professionalism. The agency completely transformed our digital presence with a sophisticated design that perfectly balances trustworthiness with approachability. They integrated interactive tools like financial calculators and resource libraries that provide real value to visitors. The information architecture makes complex services easy to understand. Since launch, not only have metrics improved dramatically, but our sales team reports that new leads are coming in much more informed about our services, shortening the sales cycle considerably.", rating: 5, projectType: "web", date: "October 2022", badge: "75% More Leads" }, { id: 4, name: "Daniel Martinez", company: "GreenPath Organics", image: "https://randomuser.me/api/portraits/men/72.jpg", title: "SEO Campaign That Delivered Real Results", excerpt: "Organic traffic increased by 210% within 6 months, directly impacting our bottom line.", fullTestimonial: "As a sustainable products company, we were struggling to reach our target audience through organic search. The agency developed a comprehensive SEO strategy focusing on educational content around sustainability topics relevant to our products. Their approach went beyond just technical optimization – they created a content hub that positioned us as thought leaders in our industry. The most impressive part was their transparent reporting and continuous optimization. Every month, we could clearly see which strategies were working and how they were being refined. Now we rank in the top 3 positions for over 40 high-value keywords, and the increased traffic has translated directly to a 43% increase in revenue from organic channels.", rating: 4, projectType: "marketing", date: "January 2023", badge: "210% Traffic Boost" }, { id: 5, name: "Alexandra Wright", company: "NovaTech Solutions", image: "https://randomuser.me/api/portraits/women/22.jpg", title: "SaaS Platform Design That Users Love", excerpt: "User engagement up 86% and churn reduced by half after UI/UX redesign.", fullTestimonial: "Our SaaS product had powerful functionality but a confusing interface that was leading to high churn rates. The agency conducted extensive user research, including interviews with current, former, and potential customers to identify pain points. The redesigned interface they delivered maintained all the functionality while making it intuitive and actually enjoyable to use. They created a design system that's allowed our in-house team to easily maintain consistency as we add new features. Most importantly, user satisfaction scores have jumped from 6.2 to 8.9 out of 10, and our onboarding completion rate increased from 68% to 94%. This project has fundamentally changed how we approach product development.", rating: 5, projectType: "web", date: "April 2023", badge: "86% Engagement" }, { id: 6, name: "Robert Lewis", company: "Urban Craft Brewery", image: "https://randomuser.me/api/portraits/men/55.jpg", title: "Packaging Design That Flew Off Shelves", excerpt: "Our rebrand led to a 92% increase in retail pickups and significant social media traction.", fullTestimonial: "As a craft brewery in a saturated market, our products weren't standing out on increasingly crowded shelves. The agency developed packaging that tells our story at a glance – bold, distinctive, and with a cohesive system that works across our various product lines while giving each its own character. The designs incorporate subtle local landmarks and brewing elements that reward closer inspection. Beyond the aesthetic improvement, they ensured the designs were practical for our production process. We've seen dramatic results in retail performance, and unexpectedly, our products have become Instagram favorites – customers regularly post photos of our cans and bottles, giving us valuable organic marketing reach.", rating: 5, projectType: "branding", date: "November 2022", badge: "92% Retail Growth" } ]; // Function to create testimonial cards function createTestimonialCards(filterCategory = 'all') { const grid = document.getElementById('testimonialGrid'); grid.innerHTML = ''; const filteredTestimonials = filterCategory === 'all' ? testimonials : testimonials.filter(t => t.projectType === filterCategory); filteredTestimonials.forEach((testimonial, index) => { const card = document.createElement('div'); card.className = 'testimonial-card fade-in'; card.style.animationDelay = `${index * 0.1}s`; card.innerHTML = ` <div class="card-badge">${testimonial.badge}</div> <div class="card-content"> <div> <div class="client-info"> <img src="${testimonial.image}" alt="${testimonial.name}" class="client-image"> <div class="client-details"> <div class="client-name">${testimonial.name}</div> <div class="client-company"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V3H2V21H22V7H12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> ${testimonial.company} </div> </div> </div> <h3 class="testimonial-title">${testimonial.title}</h3> <p class="testimonial-excerpt">${testimonial.excerpt}</p> </div> <div class="rating"> ${Array(testimonial.rating).fill('<span class="star">★</span>').join('')} ${Array(5 - testimonial.rating).fill('<span class="star" style="color: #ddd">★</span>').join('')} </div> </div> <div class="expansion-indicator"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="expanded-content"> <button class="close-expanded"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <h3 class="testimonial-title">${testimonial.title}</h3> <div class="full-testimonial">${testimonial.fullTestimonial}</div> <div class="project-details"> <span class="project-type">${testimonial.projectType.charAt(0).toUpperCase() + testimonial.projectType.slice(1)}</span> <span class="project-date">${testimonial.date}</span> </div> </div> `; grid.appendChild(card); }); // Add event listeners to close expanded content document.querySelectorAll('.close-expanded').forEach(button => { button.addEventListener('click', (e) => { e.stopPropagation(); const expandedContent = e.target.closest('.expanded-content'); expandedContent.style.transform = 'translateY(100%)'; setTimeout(() => { expandedContent.style.transform = ''; }, 300); }); }); } // Filter functionality document.querySelectorAll('.filter-btn').forEach(button => { button.addEventListener('click', () => { // Update active button document.querySelectorAll('.filter-btn').forEach(btn => { btn.classList.remove('active'); }); button.classList.add('active'); // Filter testimonials const filterValue = button.getAttribute('data-filter'); createTestimonialCards(filterValue); }); }); // Horizontal scroll indicator for filters const filterScroll = document.getElementById('filters'); const scrollIndicator = document.getElementById('scrollIndicator'); filterScroll.addEventListener('scroll', () => { const scrollPercentage = (filterScroll.scrollLeft / (filterScroll.scrollWidth - filterScroll.clientWidth)) * 100; const indicatorWidth = 30; // Width in percentage const maxTranslate = 100 - indicatorWidth; const translateX = (scrollPercentage / 100) * maxTranslate; scrollIndicator.style.transform = `translateX(${translateX}%)`; }); // Initialize window.addEventListener('load', () => { setTimeout(() => { document.querySelector('.loading-overlay').classList.add('hidden'); createTestimonialCards(); }, 800); // Simulate loading for effect }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FitQuest Testimonials</title> <style> :root { --primary: #FF5A5F; --secondary: #00C9A7; --accent: #845EC2; --dark: #2C2C54; --light: #F8F9FA; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; padding: 20px; } .app-container { position: relative; width: 100%; max-width: 700px; height: 600px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; padding: 20px; display: flex; flex-direction: column; } .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .app-title { font-size: 1.8rem; font-weight: 700; color: var(--dark); } .app-logo { height: 40px; width: 40px; background-color: var(--primary); border-radius: 10px; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 20px; } .app-content { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; } .testimonial-modal { position: absolute; width: 90%; max-width: 500px; background: white; border-radius: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); overflow: hidden; transform: translateY(100vh); opacity: 0; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease; } .testimonial-modal.active { transform: translateY(0); opacity: 1; } .modal-header { padding: 20px; background: linear-gradient(90deg, var(--primary), var(--accent)); color: white; text-align: center; position: relative; } .close-btn { position: absolute; right: 15px; top: 15px; background: rgba(255, 255, 255, 0.3); border: none; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; justify-content: center; align-items: center; transition: background 0.3s ease; } .close-btn:hover { background: rgba(255, 255, 255, 0.5); } .modal-title { font-size: 1.5rem; margin-bottom: 5px; } .modal-subtitle { font-size: 0.9rem; opacity: 0.9; } .testimonial-container { position: relative; overflow: hidden; height: 350px; } .testimonial-slider { display: flex; transition: transform 0.5s ease; height: 100%; } .testimonial { min-width: 100%; padding: 25px; display: flex; flex-direction: column; } .testimonial-content { flex: 1; display: flex; flex-direction: column; } .quote { font-size: 1.2rem; line-height: 1.6; color: var(--dark); margin-bottom: 20px; position: relative; padding-left: 20px; border-left: 3px solid var(--secondary); } .quote::before { content: """; font-size: 4rem; color: var(--secondary); position: absolute; top: -30px; left: -15px; opacity: 0.2; } .author { display: flex; align-items: center; margin-top: auto; } .author-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: #ddd; margin-right: 15px; overflow: hidden; position: relative; } .author-avatar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, var(--primary) 0%, transparent 50%); opacity: 0.3; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-info { display: flex; flex-direction: column; } .author-name { font-weight: 600; color: var(--dark); margin-bottom: 3px; } .author-title { font-size: 0.8rem; color: #666; } .app-stats { display: flex; justify-content: center; margin-top: 10px; } .star-rating { display: flex; align-items: center; margin-right: 15px; } .star { color: gold; margin-right: 2px; } .rating-value { font-weight: bold; margin-left: 5px; } .download-count { display: flex; align-items: center; color: var(--dark); } .download-icon { margin-right: 5px; } .nav-dots { display: flex; justify-content: center; margin-top: 15px; } .dot { width: 8px; height: 8px; background-color: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background-color 0.3s, transform 0.3s; } .dot.active { background-color: var(--primary); transform: scale(1.3); } .swipe-indicator { display: flex; justify-content: center; align-items: center; font-size: 0.8rem; color: #999; margin-top: 10px; opacity: 0.8; } .swipe-icon { display: inline-block; animation: swipeAnimation 1.5s infinite; margin: 0 5px; } .trigger-button { margin-top: 20px; background: linear-gradient(90deg, var(--primary), var(--accent)); color: white; border: none; padding: 12px 24px; border-radius: 30px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; align-self: center; } .trigger-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .trigger-button:active { transform: translateY(0); } .background-shape { position: absolute; border-radius: 50%; opacity: 0.1; z-index: -1; } .shape1 { width: 300px; height: 300px; background-color: var(--primary); top: -100px; left: -100px; } .shape2 { width: 200px; height: 200px; background-color: var(--secondary); bottom: -50px; right: -50px; } .shape3 { width: 150px; height: 150px; background-color: var(--accent); bottom: 100px; left: 50px; } @keyframes swipeAnimation { 0% { transform: translateX(-3px); opacity: 0.5; } 50% { transform: translateX(3px); opacity: 1; } 100% { transform: translateX(-3px); opacity: 0.5; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 500px) { .app-container { height: 550px; } .modal-title { font-size: 1.3rem; } .quote { font-size: 1rem; } .testimonial-container { height: 300px; } } </style> </head> <body> <div class="app-container"> <div class="background-shape shape1"></div> <div class="background-shape shape2"></div> <div class="background-shape shape3"></div> <div class="app-header"> <h1 class="app-title">FitQuest</h1> <div class="app-logo">F</div> </div> <div class="app-content"> <button class="trigger-button">See What Users Are Saying</button> <div class="testimonial-modal"> <div class="modal-header"> <button class="close-btn">×</button> <h2 class="modal-title">Real Results, Real Stories</h2> <p class="modal-subtitle">Join 150,000+ FitQuest enthusiasts</p> <div class="app-stats"> <div class="star-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="rating-value">4.9</span> </div> <div class="download-count"> <span class="download-icon">↓</span> <span>150K+</span> </div> </div> </div> <div class="testimonial-container"> <div class="testimonial-slider"> <div class="testimonial"> <div class="testimonial-content"> <p class="quote">After trying 5 different fitness apps, FitQuest actually kept me accountable. The daily micro-challenges and streak rewards really tap into my competitive side. I've lost 24 pounds in 3 months!</p> <div class="author"> <div class="author-avatar"> <img src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3e%3crect width='50' height='50' fill='%23EEEEEE'/%3e%3ccircle cx='25' cy='20' r='9' fill='%23AAAAAA'/%3e%3cpath d='M40,45 C40,34 32,28 25,28 C18,28 10,34 10,45' fill='%23AAAAAA'/%3e%3c/svg%3e" alt="Sarah"> </div> <div class="author-info"> <div class="author-name">Sarah K.</div> <div class="author-title">Busy mom, 90-day streak</div> </div> </div> </div> </div> <div class="testimonial"> <div class="testimonial-content"> <p class="quote">The AI coach adjustments are mind-blowing. It noticed I was struggling with certain moves and automatically modified my program. As someone with a previous knee injury, this level of personalization has been crucial.</p> <div class="author"> <div class="author-avatar"> <img src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3e%3crect width='50' height='50' fill='%23EEEEEE'/%3e%3ccircle cx='25' cy='20' r='9' fill='%23AAAAAA'/%3e%3cpath d='M40,45 C40,34 32,28 25,28 C18,28 10,34 10,45' fill='%23AAAAAA'/%3e%3c/svg%3e" alt="Marcus"> </div> <div class="author-info"> <div class="author-name">Marcus J.</div> <div class="author-title">Former athlete, 6-month user</div> </div> </div> </div> </div> <div class="testimonial"> <div class="testimonial-content"> <p class="quote">The nutrition scanner feature is a game-changer! I've learned so much about macros by simply taking photos of my meals. Combined with the workout plans, I've gained 12lbs of muscle and feel stronger than ever.</p> <div class="author"> <div class="author-avatar"> <img src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3e%3crect width='50' height='50' fill='%23EEEEEE'/%3e%3ccircle cx='25' cy='20' r='9' fill='%23AAAAAA'/%3e%3cpath d='M40,45 C40,34 32,28 25,28 C18,28 10,34 10,45' fill='%23AAAAAA'/%3e%3c/svg%3e" alt="Aisha"> </div> <div class="author-info"> <div class="author-name">Aisha T.</div> <div class="author-title">Tech professional, 4-month user</div> </div> </div> </div> </div> </div> </div> <div class="nav-dots"> <div class="dot active" data-index="0"></div> <div class="dot" data-index="1"></div> <div class="dot" data-index="2"></div> </div> <div class="swipe-indicator"> <span>Swipe</span> <span class="swipe-icon">⟷</span> <span>for more</span> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const modal = document.querySelector('.testimonial-modal'); const triggerButton = document.querySelector('.trigger-button'); const closeButton = document.querySelector('.close-btn'); const slider = document.querySelector('.testimonial-slider'); const dots = document.querySelectorAll('.dot'); const testimonials = document.querySelectorAll('.testimonial'); let currentIndex = 0; let startX, moveX; let isDown = false; // Open modal with animation triggerButton.addEventListener('click', () => { modal.classList.add('active'); triggerButton.style.display = 'none'; }); // Close modal closeButton.addEventListener('click', () => { modal.classList.remove('active'); triggerButton.style.display = 'block'; }); // Update the slider position function updateSlider() { slider.style.transform = `translateX(-${currentIndex * 100}%)`; // Update dots dots.forEach((dot, index) => { if (index === currentIndex) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); } // Dot navigation dots.forEach(dot => { dot.addEventListener('click', () => { currentIndex = parseInt(dot.dataset.index); updateSlider(); }); }); // Touch events for swipe slider.addEventListener('mousedown', (e) => { isDown = true; startX = e.pageX - slider.offsetLeft; slider.style.transition = 'none'; }); slider.addEventListener('touchstart', (e) => { isDown = true; startX = e.touches[0].pageX - slider.offsetLeft; slider.style.transition = 'none'; }); slider.addEventListener('mouseleave', () => { isDown = false; }); slider.addEventListener('mouseup', () => { isDown = false; handleSwipeEnd(); }); slider.addEventListener('touchend', () => { isDown = false; handleSwipeEnd(); }); slider.addEventListener('mousemove', (e) => { if (!isDown) return; e.preventDefault(); moveX = e.pageX - slider.offsetLeft; const walk = moveX - startX; handleSwipeMove(walk); }); slider.addEventListener('touchmove', (e) => { if (!isDown) return; moveX = e.touches[0].pageX - slider.offsetLeft; const walk = moveX - startX; handleSwipeMove(walk); }); function handleSwipeMove(walk) { const offset = -currentIndex * 100 + (walk / slider.offsetWidth) * 100; slider.style.transform = `translateX(${offset}%)`; } function handleSwipeEnd() { slider.style.transition = 'transform 0.5s ease'; if (!isDown || !moveX) return; const walk = moveX - startX; const threshold = slider.offsetWidth / 4; if (walk < -threshold && currentIndex < testimonials.length - 1) { currentIndex++; } else if (walk > threshold && currentIndex > 0) { currentIndex--; } updateSlider(); moveX = null; } // Auto-rotate testimonials let autoRotate = setInterval(() => { if (modal.classList.contains('active')) { currentIndex = (currentIndex + 1) % testimonials.length; updateSlider(); } }, 5000); // Clear auto-rotate when user interacts slider.addEventListener('mousedown', () => clearInterval(autoRotate)); slider.addEventListener('touchstart', () => clearInterval(autoRotate)); // Restart auto-rotate after interaction slider.addEventListener('mouseup', startAutoRotate); slider.addEventListener('touchend', startAutoRotate); function startAutoRotate() { clearInterval(autoRotate); autoRotate = setInterval(() => { if (modal.classList.contains('active')) { currentIndex = (currentIndex + 1) % testimonials.length; updateSlider(); } }, 5000); } // Add pulse animation to trigger button setTimeout(() => { triggerButton.style.animation = 'pulse 2s infinite'; }, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vintage Testimonials Timeline</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #8a7968; --secondary: #d8c3a5; --tertiary: #e0e2db; --accent: #c6a15b; --dark: #423e37; --light: #f6f5f1; --timeline-width: 4px; } body { font-family: 'Source Sans Pro', sans-serif; background-color: var(--light); color: var(--dark); height: 100vh; padding: 1.5rem; overflow-x: hidden; background-image: radial-gradient(var(--secondary) 1px, transparent 1px), radial-gradient(var(--secondary) 1px, transparent 1px); background-size: 50px 50px; background-position: 0 0, 25px 25px; background-attachment: fixed; background-blend-mode: soft-light; } .container { max-width: 700px; height: 700px; margin: 0 auto; overflow-y: auto; overflow-x: hidden; padding: 1rem; position: relative; scrollbar-width: thin; scrollbar-color: var(--primary) var(--tertiary); } .container::-webkit-scrollbar { width: 8px; } .container::-webkit-scrollbar-track { background: var(--tertiary); border-radius: 10px; } .container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 10px; } .header { text-align: center; margin-bottom: 2rem; position: sticky; top: 0; background: var(--light); padding: 1rem 0; z-index: 10; border-bottom: 2px solid var(--primary); } .header h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--dark); margin-bottom: 0.5rem; letter-spacing: 1px; } .header p { color: var(--primary); font-style: italic; max-width: 80%; margin: 0 auto; } .timeline { position: relative; padding: 1rem 0; } .timeline::before { content: ''; position: absolute; height: 100%; width: var(--timeline-width); background-color: var(--primary); left: 50%; transform: translateX(-50%); } .testimony { position: relative; margin-bottom: 3rem; width: 42%; opacity: 0; transform: translateY(20px); transition: all 0.8s ease; } .testimony.visible { opacity: 1; transform: translateY(0); } .testimony:nth-child(odd) { left: 0; } .testimony:nth-child(even) { left: 58%; } .testimony-content { position: relative; padding: 1.5rem; background-color: var(--light); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; border: 1px solid var(--secondary); } .testimony-content::before { content: ''; position: absolute; width: 20px; height: 20px; background-color: var(--light); top: 50%; transform: translateY(-50%) rotate(45deg); border: 1px solid var(--secondary); } .testimony:nth-child(odd) .testimony-content::before { right: -10px; border-top: none; border-left: none; } .testimony:nth-child(even) .testimony-content::before { left: -10px; border-bottom: none; border-right: none; } .testimony-content:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .testimony-date { position: absolute; background-color: var(--accent); color: var(--light); padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; top: -12px; letter-spacing: 1px; } .testimony:nth-child(odd) .testimony-date { right: 10px; } .testimony:nth-child(even) .testimony-date { left: 10px; } .testimony-icon { position: absolute; width: 40px; height: 40px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--light); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0 0 0 4px var(--light), 0 0 0 6px var(--secondary); transition: all 0.3s ease; } .testimony:hover .testimony-icon { background-color: var(--accent); transform: translate(-50%, -50%) scale(1.15); } .testimony-connector { position: absolute; height: 2px; background-color: var(--secondary); top: 50%; transform: translateY(-50%); z-index: 1; width: 8%; } .testimony:nth-child(odd) .testimony-connector { right: -8%; } .testimony:nth-child(even) .testimony-connector { left: -8%; } .testimony-quote { margin-bottom: 1rem; font-style: italic; line-height: 1.6; color: var(--dark); position: relative; padding-left: 1.2rem; } .testimony-quote::before { content: '"'; font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--accent); position: absolute; left: -5px; top: -10px; opacity: 0.5; } .testimony-author { display: flex; align-items: center; margin-top: 1rem; } .testimony-avatar { width: 45px; height: 45px; border-radius: 50%; margin-right: 1rem; object-fit: cover; border: 2px solid var(--secondary); } .testimony-info h4 { font-family: 'Playfair Display', serif; font-weight: 700; margin-bottom: 0.2rem; color: var(--dark); } .testimony-info p { font-size: 0.85rem; color: var(--primary); } .testimony-rating { margin-top: 0.8rem; color: var(--accent); font-size: 0.9rem; } .footer { text-align: center; margin-top: 2rem; padding: 1rem 0; color: var(--primary); font-style: italic; position: relative; } .footer::before { content: '•••'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); letter-spacing: 5px; color: var(--accent); } @media (max-width: 600px) { .header h1 { font-size: 1.8rem; } .timeline::before { left: 40px; } .testimony { width: calc(100% - 80px); left: 80px !important; margin-bottom: 2rem; } .testimony-connector { width: 40px; left: -40px !important; right: auto !important; } .testimony-icon { left: 40px; } .testimony-content::before { left: -10px !important; right: auto !important; border-bottom: none !important; border-right: none !important; } .testimony-date { left: 10px !important; right: auto !important; } } /* Vintage texture overlay */ .container::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAQWUlEQVR4nO1dbVczNw69JCEvBJInEEIgEIb//6/6fbu73e77xEDaJMB8qHRkWZYtjx8g6Tn1nOlMZnzH8li6kixpMhExWWVZXYzWRfHoPh6vi9G+r/vq/fzqx+PZ/WJUvo9Xv+Qsj/A8P64XVbYoqswi3mflWV7eq/z3dbz63s9eV1kT1R1s8bqvcSxEPj8dDEQexlE9jKsePLRvWA+Hy4dxmY/umKqDWVzPL7o8c3U9E/Wo3sEczya2vE7H5KWfockj6nMwm9DymDquA92hJtsYr0oR4+FK6IIF48WsXzFejaP3+bgQW2Q+eR3d8yx+rkeMZ/4M7JGC8cMcf7GjxyJmlFdRMJWxCRFQSqQFZ5pVPIXqTLMMdcgdRFOXLqsrYOjr6e3qenImDu/R9SMdydbjl5HdouXlfNK6c98zqZi9TH6d0PdkES9i8/KzHlX5RYoxz9NGt5dnPK6urqcc3jsYP2QSLdTjfxsZXomUyZG+pKK4Uo8zcMNjpY3iPej9SJ6BZ0Tle9JuV+yRGtrVqJXziFCWZ5HqOnPL56eqPPBVr/xjUbA8ik0X2AQ7s+d69J2ZnKHlFdXvR52JuEiKRFDHmakefccO8Sj4jC1nQmSOa5n5/XQlLbEQbGwYy/P4FRSJeJ5NchS9yKyGAKJlXbPIci96Eshjqou+H9X9kR5R1hdZQbBDdpcVaHHdnjGNTaqOdGIGrM7qGBOnJPTCGR5Vl/GMtV4I88jHDH1ZRcXXhgCIiCnUFsfu8jW0u+vVrx8ntEhdrnT4WQN3dTrUddCcUQm5Vy9umAmgW3BGPdj1S0bum6s0F7x+o1ESuTgA+pFIvQqr7/gcj16xZvpLdL3LUv3oJyqWdzjftIGGlbNcoP+lUfA0KWLKMdXELVxLtF7PaIrGuXvUoY7ea8XcXZL7xdVLRdz1gl73+JGiH50vrw5SjqcOIDDXY6HGmUi9KJg+BHnzXnFlki90O0quRbNElZBnllVjkfqRk1ybO9Ow9OgydbQsNuARDxBXtLEpD9sAvXbkgvFRMG0vBAg2K+HWXvdiY2a+LLEQRHcWgmpFHRog8iyK0CRyjaSdS/RJKlwnjLJPMlU9xToxpufc/E7cBheUR6N/8SwfnFmjwYhhEt6zYCPwSZeMK2jjJoNfCOw0JVNg4U4sW923jmgSPj2SCphIh3q8xrM5XFFGDsHRYlZJQxm5G37GGJuAVOQZ+iQO17OA2YUW1LtQ/S7vCgA/XH/LQJKhblSv0wP5LK2rnXnVVNEKQj2wEItHJRW6BK6l/2uqXISMYi1qRcxApMS7TiWTeZDZa+o3vKxkwriiOHZeRJ90rRvSjhJRGcx8NtQ51+JS4UsssiU0rUlBl2F1EV4gDMYrrhclsuOeHO3YIAP/OCBcRLQsuQq+FcXnQmxhbsdovdjCzd3N3RU+3NxdYpx7e4xxN670awt/fn71r/HdP8eA7za/w/jnn+NalX8f/x7//rmo7n/9HN1fbXF3eY/b2+vxeHt5g5tLjEXs4hZXZsbNHcYP4+7ydXz/7/jX729/j8ebWzy+/T3+9+ZqfP/X1S3ur65we331Oj7fXeH17T3ubse8l5dvcXlzgcub1/HtP8bf/hnfX+HPN3++xr/Gn1/e4uZy3tuLy3v8dX+Jf11f4+bljNvXV7i8fMGfl6/j+/823o8fF5d4uXirxt9X1/h+eYmXF+D+5hb3F7d4ubzFzf0tXk/AfWzjA03X7vZgexNyeKWsA0iq6M7VULJ9MHO8I2XL3DLnMdnO2IOj51Vn/LIsgBvdEsoi0SKWqcfA4E+2uJiilcndStpxuYh3oFqlXjUbTtZnCKsVPbJ85nqu0qEeXi/uFH3/pIVcmrJ4A6+3GlQtjVKjC0H8GiEKoV5K7FbStP06GL3q4Z/vsJzMJHeNTCuH2IbckW7qzaQONG2W77SiblJdXdRajJWW8ug8qxGqVpzd1Z1VSVNaa30GqhVaIr8b6FpnAu9DSO0qMdbiWX0vd9Y0g5FGG1NRFlQrZsq9bHgWQmqOCdCGw+5pWXMl++rAUKE1bD0+M5ZzRjRaLVYtyYOkfIVFC8VrEHH8JIJKzIta5FPUJnMz82qRgk/yLJLW4i1RWDU1c0XQJae+nD/UHG7qU2TkpEifIqQl2q5bVvtZq07ar9GJlDYSQ2DaNJbJRRJlCz4/2Dn+r+oGfzGAhAQGI+e1TMY9VQzaL4Z6JI0H2o50Gbdw49TIgVbvSa1lsZld4rlJvVDWEYl6RMss011HEm5AUWlnH4JVrk5mlbdGJVuZJfUi5VlSL6Ku8sQY27CfsTuLnmQOl1yZpW6OdPWiA+pH3RDKVAuSRFsI7cmweIdMqwNWUDeY0a3eMX0Qk6IZUFd3UxJ1reXVkoHXzItAXCgvEQsrHbGGWpOhUsvnbsSVbzKuoE3QiCWWVEQbuQ2YvNDhvU5FuIWEr3jH9SB90W5hR7VoKYpCEjj5rEiCXhN2lk6pj4lVvegYDYJJNQTuGGTzJoEfamHvWAnkjbQKGfOXRyFWpSuI3rGSMIUDCSyRx5QcWL7GltwjL0sY0z4aTCw5/cSG9lq1iEfWEWFtgnZ95UUs5YfmAUPDr++JQGNJm0USZp06FrVTa2l4TIVDdVoTEYNMpBJiPtYg0o3jJmwCM8ROWdJd8UIvCdF3dp4VUcjj3MQtAGm0RJE56jpYz2Tx4sCxf4W0CW+pHcIixQxUy0EC87FSKqM/4SMdPCTnXHFnxG5M3BDOj4Tw3UrtZJekc+K5Pnau9W2N10HsVLGF7BnJMm8D+oZIYOjJrTLgluMywJaw2ZXk6U5qMJ1q9UM6+Cpy8oH3YEtDLJlgGBBTFqdbcUNAWFLRfqxNmfRWEa+Zp+FsW/AmbHuWH6MWNDO5EFXtoN5ZyZWtUSpVtOu8uPNlsXg2J3H9eFMwqcjkQi3GhWWPhrmwUUQtWIprV0Xi0s6yGrSVTbvfAdHFJh1Y9GsSrJJmWCm0qIonhJ37FYmfIw3REoSGJZg4XMRijUJJCwv9kOW8k6VtWo+hEtMkIqdmGC1si2Uj0jZx+cqrMU7HQklM1dDWpLAl6lYVfFv2TqiMYdKZApnyjHdCvNlF6ZNE7R1pQ+yo0DHjxRmXYbZ4JHqYhVLPSUwhcvXiGv/kxBQjtvN+8RcvdgPy/jk1FH5QgUGX9KUGO4Y+JJDw9oW4G1O3JWU7QmhQH5TUdQgtxEsWfDKEwhOZbPGc8Cdc0dVp52JK5lKTTCVuJYVmMKoiDQXUbcFIJZ0v+Q1JaS+UuiWCVOILYQVN5pMgcDxrrYDZJdpd5N8RaqZ8CFOUAcl8SHohtFXvMmYwt1rlYF1ZxJfBLcBSP5upyJYwGzCQA9KArKEWe6FTUPWrxSKxWCJDLYrGYlEm8UiyqJTDZjBhS9j0GN/OMZLAbC8XzCbwW8JOfSkR09J5BmjBvs+XQXkS1kHcWYCk9G2UhXb8FogHOkRiVu7sD+SBfJeBcyQmnx1F5dA5kVMwJ04vUi+g3fxCcUDXiiVMosXYzauslnThOA5wE0m2ksQnCZcxdzJmTkVFPmGhyLN31jbTlUfIpXG0Dk++aMK6CRk7XsMCYsLVWVIUXHIXuxvXSE7xjCg7K3ATtLCYZLspJHW/oVIWrL0Oq73XCdnJLvfMz7NGZg5Bqj2Q5iF03jbIhDsLWNrZXsM5GpO5BNr2ZOyYILBolUE4aVhXx+I64DX7MHZLMFhZ+oLNB0rn2G8HHcuceF73gu901UXZbcHkGH90PwH28x0gKUoX3J9bITA7vySzMm7IxWr/UiTe/yANW98ZF9cMWUTTVq9r4+r4+R4fOCbsXK6XQ2A8+K5cEV08M+5wCXKC0hgWPZBpz1Wj9nR1yPHQGBTdsvqnRWXYTj7TOl7FI3cVrXE6aHoL5KW7MfU0CkKwsP/Woi56rrxSUSH+GEGz8dEIUBgFTnfAXlZRJuSyWC/+3CGQNzRxVjS/5cgpC6+eL7RPPl3dgz3rkl+7gXuPqTqaZhR7z6z3KmODfMAzjgd4vz5N9pIvB4WeNXNH2i5vOhhFz/XqoGkgx+jrC36n5TK4CJnFwdRaxA5RXbzImYzRQzqoQ5zQxw5Z1qkFJDVvM4nIW1YzEn1EbytIMnI5mPLXLIyCSrPntX08W1jD5s9Rjt6/EYTw8YC1p8AYqS7b52AOYwvR/jDk3DUbXzb4yBEQhYOeJZspBXAR5+VXLmMeW1OdqyJoXtdqaFYFH8nBIrmqKr39JLhZj3s4eP8zSLw+e3y0mCnDiRfdEMz68NHGaXaRFiQsZS1hcn4JYeWsAVpRGJ1YJfR0GZk1qQbUL1JQ2QEy8QEPj0jGlVRHPJdS2g3nwB1gJg+yDFwI6Bt74WfgpmAHSQdmR5Zw8BShPQKj+2T0nFUzYOu/k3DZe/wLj1a6RO5dRhrtX6OoQrJj9xmxc0N7L/TDYwXE3ntWnXlnZv6seBMMG2QJ2w3/XYKffiIQKR0fXYlYL//JiHxWZ1fwpwGhLF27iHvwQiJPgkVlBWsw36q8q1lfb7+kq44EUhKL6QrKkTXp9cj+Qo6BfhXlGb3wblBAkBTuSPNRcYl0aUe5xG0hpNw6dR3u6vkzcMtHcT16uY1MmMZsLZfRhUYazrNIDe3xiMPKBEJCpVkztfUgGnM5kY40yXeXZTw8V6ffsvjKWLsJ6uNuxkIAGY9jUL0pf7+GDv3lMXzKHdLVJiLI3/2kc5hcQK/Usjm5WQtFx8J20m2OGYP43dHcMTr553Uauy9ZTJ3LqKA+j1wYJYG0aFLdXrlyLtOVVdFFxJvyfnY7mShCcGtmEGjJrlwNtgUf3nHQbzc5TfdM5rqsBcvV9P/0UUlhOb5yXWKRSp9YB5XELkj9EilyG4g4UHw4/MgDttPm37jXZBbdjwEXJ9jqVLwYd3cYxfOLnJSJ8QzRCb9sC3Bg4BsjCi+JA2pCrD1B7mxQKfYqq1AuK+QS9yWUZaK7K/YshN8A9A8lMWvIZ1tV2f4UXv4Fh5fSRYKZcnKBiQwnZoG6s8jLZUQUfdkUYeBclE1B0WJ71i3/5AzoBQZJ8GTX9T4FxXXZR30uM5vfBGwHqitpyXYbv5U9KuOc3kQ2dOtUfG1ZoIi++vSc/Lrb+LBc0P2E6S7Dt5b0dVx2nQqeqFjZdW5eMECCKA3AYKOHlZE8U/dOiJLSRSIKiMxLHhIQQGWKvLDDVN2t+AxVLxogdNmKLIkVGMDjtPfKz/Io71HHpgTlxKpnz1FN+c18oLSTUK9iSJZ2GdOeKQnzBE6AyJ1nUW7YvQWjUnZLxnqWyGG0wfmk8C8T2Ocy8VnvU2aK4Fwf2ZolzLTZRxK3NwmiBx7HYlxw8TkLmcK5S49QsQsQRs5xMCfJcOp9mL9LnIc5Rh+Ol0PdxE9vKPjA7p92wL11fNBVPVCE14j+9uuRpKEeQ8QAAAABJRU5ErkJggg=='); opacity: 0.03; pointer-events: none; z-index: 10; } /* Vintage stamp style */ .vintage-stamp { position: absolute; top: 5px; right: 5px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: bold; color: var(--accent); border: 2px solid var(--accent); border-radius: 50%; transform: rotate(15deg); opacity: 0.7; padding: 5px; text-align: center; text-transform: uppercase; letter-spacing: 1px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Client Stories Through the Years</h1> <p>From first sketches to finished projects, these voices have shaped my journey as a designer.</p> </div> <div class="timeline"> <div class="testimony"> <div class="testimony-content"> <div class="testimony-date">May 2017</div> <p class="testimony-quote">Sarah transformed our outdated corporate identity into something that truly represents our values. Her process was methodical yet creative, capturing our essence perfectly.</p> <div class="testimony-author"> <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Client" class="testimony-avatar"> <div class="testimony-info"> <h4>Robert Caldwell</h4> <p>Founder, Meridian Solutions</p> <div class="testimony-rating">★★★★★</div> </div> </div> </div> <div class="testimony-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 8H16V4H20V8ZM20 10H16V14H20V10ZM12 4H8V8H12V4ZM16 16H20V20H16V16ZM12 10H8V14H12V10ZM4 4H8V8H4V8M4 10H8V14H4V10ZM4 16H8V20H4V16ZM12 16H16V20H12V16Z" fill="currentColor"/> </svg> </div> <div class="testimony-connector"></div> </div> <div class="testimony"> <div class="testimony-content"> <div class="testimony-date">October 2018</div> <p class="testimony-quote">Working with this designer was unlike any previous experience. Their ability to listen and translate our complex technical needs into a beautiful, intuitive interface was remarkable.</p> <div class="testimony-author"> <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Client" class="testimony-avatar"> <div class="testimony-info"> <h4>Emma Lin</h4> <p>CTO, TechVantage</p> <div class="testimony-rating">★★★★★</div> </div> </div> </div> <div class="testimony-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 2C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2H6ZM6 4H13V9H18V20H6V4ZM8 12V14H16V12H8ZM8 16V18H13V16H8Z" fill="currentColor"/> </svg> </div> <div class="testimony-connector"></div> </div> <div class="testimony"> <div class="testimony-content"> <div class="testimony-date">March 2019</div> <p class="testimony-quote">What sets this studio apart is their meticulous attention to typography and visual hierarchy. Our editorial spreads now communicate with such clarity and sophistication.</p> <div class="testimony-author"> <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Client" class="testimony-avatar"> <div class="testimony-info"> <h4>Victor Okafor</h4> <p>Editor-in-Chief, Perspective Magazine</p> <div class="testimony-rating">★★★★★</div> </div> </div> </div> <div class="testimony-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z" fill="currentColor"/> </svg> </div> <div class="testimony-connector"></div> </div> <div class="testimony"> <div class="testimony-content"> <div class="testimony-date">August 2020</div> <p class="testimony-quote">In the midst of pandemic-induced uncertainty, this designer delivered a website that became our lifeline to customers. The seamless e-commerce integration increased our online sales by 178%.</p> <div class="testimony-author"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="testimony-avatar"> <div class="testimony-info"> <h4>Julia Martínez</h4> <p>Owner, Botanica Handcrafted</p> <div class="testimony-rating">★★★★★</div> </div> </div> <div class="vintage-stamp">Client pick</div> </div> <div class="testimony-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 13H13V3H11V13H8L12 17L16 13ZM4 19V21H20V19H4Z" fill="currentColor"/> </svg> </div> <div class="testimony-connector"></div> </div> <div class="testimony"> <div class="testimony-content"> <div class="testimony-date">January 2021</div> <p class="testimony-quote">Our rebranding needed to respect 40 years of heritage while appealing to modern audiences. The designer's approach was thoughtful, respectful, and brilliantly executed.</p> <div class="testimony-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="testimony-avatar"> <div class="testimony-info"> <h4>Daniel Bergmann</h4> <p>Marketing Director, Heritage Crafts</p> <div class="testimony-rating">★★★★★</div> </div> </div> </div> <div class="testimony-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carousel Testimonials Over Video</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary-color: #3a86ff; --secondary-color: #ff006e; --accent-color: #8338ec; --light-color: #ffffff; --dark-color: #1d1d1d; --overlay-color: rgba(0, 0, 0, 0.65); --overlay-gradient: linear-gradient(120deg, rgba(58, 134, 255, 0.4), rgba(131, 56, 236, 0.4)); } body, html { width: 100%; height: 100%; overflow: hidden; } .container { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--dark-color); } .video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .video-container video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-color); z-index: 2; } .carousel-container { position: relative; width: 90%; max-width: 650px; height: 400px; z-index: 3; overflow: hidden; margin: 0 auto; border-radius: 12px; background: var(--overlay-gradient); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .carousel { position: absolute; width: 100%; height: 100%; display: flex; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); } .slide { flex: 0 0 100%; width: 100%; height: 100%; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--light-color); text-align: center; opacity: 0; transform: scale(0.9); transition: opacity 0.6s ease, transform 0.6s ease; } .slide.active { opacity: 1; transform: scale(1); } .quote-icon { font-size: 40px; color: var(--primary-color); margin-bottom: 20px; opacity: 0.8; } .testimonial-text { font-size: 20px; line-height: 1.7; margin-bottom: 30px; max-width: 85%; font-weight: 300; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; } .testimonial-text::before, .testimonial-text::after { content: ''; position: absolute; width: 40px; height: 4px; background: var(--secondary-color); border-radius: 4px; } .testimonial-text::before { top: -15px; left: 50%; transform: translateX(-50%); } .testimonial-text::after { bottom: -15px; left: 50%; transform: translateX(-50%); } .client-info { display: flex; flex-direction: column; align-items: center; margin-top: 10px; } .client-image { width: 65px; height: 65px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; border: 3px solid var(--primary-color); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transform: translateY(30px); opacity: 0; transition: transform 0.5s ease 0.3s, opacity 0.5s ease 0.3s; } .slide.active .client-image { transform: translateY(0); opacity: 1; } .client-image img { width: 100%; height: 100%; object-fit: cover; } .client-name { font-size: 18px; font-weight: 600; margin-bottom: 5px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(20px); opacity: 0; transition: transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s; } .slide.active .client-name { transform: translateY(0); opacity: 1; } .client-role { font-size: 14px; color: rgba(255, 255, 255, 0.8); transform: translateY(20px); opacity: 0; transition: transform 0.5s ease 0.5s, opacity 0.5s ease 0.5s; } .slide.active .client-role { transform: translateY(0); opacity: 1; } .carousel-controls { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; z-index: 10; } .dot { width: 12px; height: 12px; margin: 0 6px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; } .dot.active { background-color: var(--primary-color); transform: scale(1.3); } .progress-bar { position: absolute; bottom: 0; left: 0; height: 4px; background: linear-gradient(to right, var(--primary-color), var(--accent-color)); width: 0; transition: width 0.1s linear; z-index: 10; } .nav-button { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; backdrop-filter: blur(5px); } .nav-button:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.1); } .nav-button.prev { left: 15px; } .nav-button.next { right: 15px; } .nav-button svg { fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; width: 20px; height: 20px; } @media (max-width: 768px) { .carousel-container { width: 95%; height: 450px; } .testimonial-text { font-size: 18px; max-width: 100%; } .nav-button { width: 36px; height: 36px; } .nav-button.prev { left: 5px; } .nav-button.next { right: 5px; } } @media (max-width: 480px) { .carousel-container { height: 500px; } .slide { padding: 25px 15px; } .testimonial-text { font-size: 16px; line-height: 1.5; } .quote-icon { font-size: 30px; margin-bottom: 15px; } } /* Custom cursor */ .cursor { position: fixed; width: 30px; height: 30px; border: 2px solid var(--primary-color); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, border-color 0.3s; z-index: 9999; mix-blend-mode: difference; } .cursor-dot { position: fixed; width: 8px; height: 8px; background-color: var(--secondary-color); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; mix-blend-mode: difference; } /* Highlight effect on hover */ .highlight-hover { position: relative; display: inline-block; } .highlight-hover::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transition: width 0.3s ease; } .highlight-hover:hover::after { width: 100%; } </style> </head> <body> <div class="container"> <div class="video-container"> <video autoplay muted loop playsinline> <source src="https://assets.mixkit.co/videos/preview/mixkit-time-lapse-of-a-city-at-night-9747-large.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div class="overlay"></div> <div class="carousel-container"> <div class="progress-bar"></div> <div class="carousel"> <div class="slide active"> <div class="quote-icon">❝</div> <p class="testimonial-text">Implementing this video backdrop system completely transformed our brand perception. Our engagement metrics improved by <span class="highlight-hover">247% in just one month</span>, with users spending an average of 3.5 minutes longer on our landing page.</p> <div class="client-info"> <div class="client-image"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Client"> </div> <div class="client-name">Sophia Martinez</div> <div class="client-role">Digital Marketing Director, TechVision</div> </div> </div> <div class="slide"> <div class="quote-icon">❝</div> <p class="testimonial-text">The dynamic testimonials over our product demo videos increased our conversion rate by <span class="highlight-hover">38.5% quarter-over-quarter</span>. Prospective clients tell us they feel more confident seeing real feedback while watching our solution in action.</p> <div class="client-info"> <div class="client-image"> <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Client"> </div> <div class="client-name">David Chen</div> <div class="client-role">VP of Product, Streamline Solutions</div> </div> </div> <div class="slide"> <div class="quote-icon">❝</div> <p class="testimonial-text">As a lifestyle brand, visual storytelling is crucial. This video carousel reduced our bounce rate by <span class="highlight-hover">42% on mobile devices</span> and generated a 3.2x increase in social shares compared to our previous static testimonial design.</p> <div class="client-info"> <div class="client-image"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Client"> </div> <div class="client-name">Emma Wilson</div> <div class="client-role">Brand Director, Urban Essence</div> </div> </div> <div class="slide"> <div class="quote-icon">❝</div> <p class="testimonial-text">The semi-transparent overlay design solved our readability challenges while maintaining the emotional impact of our background footage. User testing showed a <span class="highlight-hover">94% comprehension rate</span> with 89% of visitors rating the experience as "highly professional."</p> <div class="client-info"> <div class="client-image"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Client"> </div> <div class="client-name">Marcus Johnson</div> <div class="client-role">UX Research Lead, Interface Innovations</div> </div> </div> </div> <div class="nav-button prev"> <svg viewBox="0 0 24 24"> <path d="M15 18l-6-6 6-6"></path> </svg> </div> <div class="nav-button next"> <svg viewBox="0 0 24 24"> <path d="M9 18l6-6-6-6"></path> </svg> </div> <div class="carousel-controls"> <div class="dot active" data-index="0"></div> <div class="dot" data-index="1"></div> <div class="dot" data-index="2"></div> <div class="dot" data-index="3"></div> </div> </div> </div> <div class="cursor"></div> <div class="cursor-dot"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Elements const carousel = document.querySelector('.carousel'); const slides = document.querySelectorAll('.slide'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); const progressBar = document.querySelector('.progress-bar'); // Custom cursor const cursor = document.querySelector('.cursor'); const cursorDot = document.querySelector('.cursor-dot'); // Variables let currentIndex = 0; const slideCount = slides.length; let slideInterval; let progressWidth = 0; let progressInterval; const autoplayDelay = 6000; // 6 seconds // Initialize function init() { updateSlidePosition(); startAutoplay(); // Event listeners prevBtn.addEventListener('click', prevSlide); nextBtn.addEventListener('click', nextSlide); dots.forEach(dot => { dot.addEventListener('click', function() { goToSlide(parseInt(this.getAttribute('data-index'))); }); }); // Custom cursor document.addEventListener('mousemove', (e) => { cursor.style.top = e.clientY + 'px'; cursor.style.left = e.clientX + 'px'; cursorDot.style.top = e.clientY + 'px'; cursorDot.style.left = e.clientX + 'px'; }); // Custom cursor interactions const interactiveElements = document.querySelectorAll('.nav-button, .dot, .highlight-hover'); interactiveElements.forEach(el => { el.addEventListener('mouseenter', () => { cursor.style.width = '50px'; cursor.style.height = '50px'; cursor.style.borderColor = 'var(--secondary-color)'; }); el.addEventListener('mouseleave', () => { cursor.style.width = '30px'; cursor.style.height = '30px'; cursor.style.borderColor = 'var(--primary-color)'; }); }); // Pause autoplay on hover document.querySelector('.carousel-container').addEventListener('mouseenter', () => { stopAutoplay(); }); document.querySelector('.carousel-container').addEventListener('mouseleave', () => { startAutoplay(); }); } // Update slide position function updateSlidePosition() { slides.forEach((slide, index) => { slide.classList.remove('active'); }); slides[currentIndex].classList.add('active'); dots.forEach((dot, index) => { dot.classList.remove('active'); }); dots[currentIndex].classList.add('active'); } // Next slide function nextSlide() { currentIndex = (currentIndex + 1) % slideCount; updateSlidePosition(); resetProgress(); } // Previous slide function prevSlide() { currentIndex = (currentIndex - 1 + slideCount) % slideCount; updateSlidePosition(); resetProgress(); } // Go to specific slide function goToSlide(index) { currentIndex = index; updateSlidePosition(); resetProgress(); } // Start autoplay function startAutoplay() { slideInterval = setInterval(nextSlide, autoplayDelay); startProgress(); } // Stop autoplay function stopAutoplay() { clearInterval(slideInterval); clearInterval(progressInterval); progressBar.style.width = '0%'; } // Start progress bar function startProgress() { progressWidth = 0; progressBar.style.width = '0%'; progressInterval = setInterval(() => { progressWidth += 0.1; progressBar.style.width = progressWidth + '%'; if (progressWidth >= 100) { clearInterval(progressInterval); } }, autoplayDelay / 1000); } // Reset progress bar function resetProgress() { clearInterval(progressInterval); progressWidth = 0; progressBar.style.width = '0%'; startProgress(); } // Initialize init(); }); </script> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GreenThumb Product Testimonials</title> <style> :root { --primary: #1c6758; --primary-light: #3d8361; --secondary: #d6cda4; --accent: #eef2e6; --text: #333; --text-light: #666; --white: #fff; --shadow: 0 4px 15px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--accent); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { max-width: 680px; width: 100%; margin: 0 auto; } header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; position: relative; } header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background-color: var(--primary); border-radius: 2px; } header h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 12px; font-weight: 700; } header p { color: var(--text-light); line-height: 1.6; font-size: 1rem; } .testimonials-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; } .testimonial { background-color: var(--white); border-radius: 12px; padding: 25px; box-shadow: var(--shadow); transition: var(--transition); position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; height: 100%; } .testimonial::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .testimonial:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .testimonial:hover::before { transform: scaleX(1); } .testimonial-header { display: flex; align-items: center; margin-bottom: 15px; } .avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-right: 15px; border: 3px solid var(--secondary); transition: var(--transition); } .testimonial:hover .avatar { border-color: var(--primary); transform: scale(1.05); } .user-info { flex: 1; } .username { font-weight: 600; font-size: 1.1rem; margin-bottom: 5px; color: var(--primary); } .verification-badge { display: inline-flex; align-items: center; font-size: 0.8rem; color: var(--primary-light); margin-left: 5px; } .verification-badge svg { width: 14px; height: 14px; margin-right: 4px; fill: var(--primary-light); } .purchase-date { font-size: 0.8rem; color: var(--text-light); } .rating { display: flex; align-items: center; margin-bottom: 15px; transition: var(--transition); } .stars { display: flex; margin-right: 10px; } .star { width: 18px; height: 18px; margin-right: 2px; fill: var(--secondary); transition: var(--transition); } .testimonial:hover .star { fill: #ffc107; transform: rotate(5deg) scale(1.1); transition-delay: calc(0.05s * var(--star-order)); } .rating-value { font-weight: 700; font-size: 0.9rem; color: var(--text); } .product-info { display: flex; align-items: center; background-color: rgba(214, 205, 164, 0.2); padding: 10px; border-radius: 8px; margin-bottom: 15px; transition: var(--transition); } .testimonial:hover .product-info { background-color: rgba(28, 103, 88, 0.05); } .product-image { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; margin-right: 10px; } .product-name { font-size: 0.85rem; font-weight: 600; color: var(--primary); } .testimonial-content { font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; color: var(--text); flex-grow: 1; position: relative; } .quote-icon { position: absolute; top: -10px; left: -5px; width: 25px; height: 25px; opacity: 0.1; fill: var(--primary); } .testimonial-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 0.8rem; } .helpful { display: flex; align-items: center; } .helpful-btn { display: flex; align-items: center; background: none; border: 1px solid var(--secondary); border-radius: 50px; padding: 5px 12px; font-size: 0.75rem; color: var(--text-light); cursor: pointer; transition: var(--transition); margin-right: 10px; } .helpful-btn:hover, .helpful-btn.active { background-color: var(--primary); color: var(--white); border-color: var(--primary); } .helpful-btn svg { width: 14px; height: 14px; margin-right: 5px; fill: currentColor; } .helpful-count { color: var(--text-light); } .testimonial-date { color: var(--text-light); } .filter-container { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; } .filter-btn { padding: 8px 16px; background-color: var(--white); border: none; border-radius: 50px; color: var(--text); font-size: 0.9rem; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow); } .filter-btn:hover, .filter-btn.active { background-color: var(--primary); color: var(--white); } .pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .page-btn { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 5px; background-color: var(--white); border: none; color: var(--text); font-weight: 500; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow); } .page-btn:hover, .page-btn.active { background-color: var(--primary); color: var(--white); } .page-btn.nav { background-color: transparent; box-shadow: none; } .page-btn.nav svg { width: 18px; height: 18px; fill: var(--primary); } .page-btn.nav:hover svg { fill: var(--primary-light); } .animated-bg { position: absolute; width: 200px; height: 200px; background: linear-gradient(45deg, var(--primary-light), var(--primary)); border-radius: 50%; filter: blur(80px); opacity: 0.1; z-index: -1; transition: var(--transition); } .bg-1 { top: 10%; left: 20%; animation: float 8s ease-in-out infinite; } .bg-2 { bottom: 10%; right: 15%; animation: float 10s ease-in-out infinite 2s; } @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(20px, 20px) rotate(5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .powered-by { margin-top: 20px; font-size: 0.8rem; color: var(--text-light); text-align: center; } .logo-text { font-weight: 700; color: var(--primary); } @media (max-width: 700px) { header h1 { font-size: 1.8rem; } .testimonials-container { grid-template-columns: 1fr; } .filter-container { justify-content: flex-start; overflow-x: auto; padding-bottom: 10px; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; width: calc(100% + 20px); } .filter-btn { white-space: nowrap; } } /* Pulse animation for stars on load */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .testimonial.animate-in .star { animation: pulse 0.5s ease-in-out forwards; animation-delay: calc(0.1s * var(--star-order)); } /* Fade in animation for testimonials */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .testimonial { opacity: 0; } .testimonial.animate-in { animation: fadeInUp 0.5s ease-out forwards; animation-delay: calc(0.15s * var(--card-order)); } </style> </head> <body> <div class="animated-bg bg-1"></div> <div class="animated-bg bg-2"></div> <div class="container"> <header> <h1>What Our Customers Say</h1> <p>Discover how GreenThumb's eco-friendly gardening tools have transformed gardens worldwide</p> </header> <div class="filter-container"> <button class="filter-btn active" data-rating="all">All Reviews</button> <button class="filter-btn" data-rating="5">5 Stars</button> <button class="filter-btn" data-rating="4">4 Stars</button> <button class="filter-btn" data-rating="3">3 Stars & Below</button> <button class="filter-btn" data-rating="product">Garden Pro Set</button> </div> <div class="testimonials-container"> <div class="testimonial" data-rating="5" data-card-order="1"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="Emma R." class="avatar"> <div class="user-info"> <div class="username">Emma R. <span class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"/></svg> Verified Purchase </span></div> <div class="purchase-date">Purchased on July 12, 2023</div> </div> </div> <div class="rating"> <div class="stars"> <svg class="star" style="--star-order: 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> </div> <span class="rating-value">5.0</span> </div> <div class="product-info"> <img src="https://images.unsplash.com/photo-1599598177991-ec67b5c37318?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="Ergonomic Garden Shears" class="product-image"> <div class="product-name">Ergonomic Garden Shears</div> </div> <div class="testimonial-content"> <svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/></svg> These shears have completely transformed my pruning experience. The ergonomic handle actually prevents the wrist strain I used to get, and the blades stay sharp even after cutting through tough woody stems. I can garden for hours without discomfort now. Perfect for my rose bushes! </div> <div class="testimonial-footer"> <div class="helpful"> <button class="helpful-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 10h2.5l1-4H14V2h-4v4H4v16h6v-5h4v5h6v-8h-6v-4zm-4 5H6v-7h4v7z"/></svg> Helpful </button> <span class="helpful-count">28 people found this helpful</span> </div> <div class="testimonial-date">September 8, 2023</div> </div> </div> <div class="testimonial" data-rating="4" data-card-order="2"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="James T." class="avatar"> <div class="user-info"> <div class="username">James T. <span class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"/></svg> Verified Purchase </span></div> <div class="purchase-date">Purchased on August 3, 2023</div> </div> </div> <div class="rating"> <div class="stars"> <svg class="star" style="--star-order: 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill-opacity="0.3"/></svg> </div> <span class="rating-value">4.0</span> </div> <div class="product-info"> <img src="https://images.unsplash.com/photo-1599809275671-b5942cabc7a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="Garden Pro Set" class="product-image"> <div class="product-name">Garden Pro Set</div> </div> <div class="testimonial-content"> <svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/></svg> The Garden Pro Set has significantly upgraded my weekend gardening sessions. The trowel and cultivator are exceptional with comfortable grips and durable construction. I do wish the pruners were a bit more heavy-duty for thicker stems—they struggle with anything over 1/2 inch. Still, a great value overall! </div> <div class="testimonial-footer"> <div class="helpful"> <button class="helpful-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 10h2.5l1-4H14V2h-4v4H4v16h6v-5h4v5h6v-8h-6v-4zm-4 5H6v-7h4v7z"/></svg> Helpful </button> <span class="helpful-count">15 people found this helpful</span> </div> <div class="testimonial-date">August 27, 2023</div> </div> </div> <div class="testimonial" data-rating="5" data-card-order="3"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="Sofia M." class="avatar"> <div class="user-info"> <div class="username">Sofia M. <span class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"/></svg> Verified Purchase </span></div> <div class="purchase-date">Purchased on June 17, 2023</div> </div> </div> <div class="rating"> <div class="stars"> <svg class="star" style="--star-order: 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> </div> <span class="rating-value">5.0</span> </div> <div class="product-info"> <img src="https://images.unsplash.com/photo-1590422749897-47160ef3133a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="Self-Watering Plant Pot" class="product-image"> <div class="product-name">Self-Watering Plant Pot</div> </div> <div class="testimonial-content"> <svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/></svg> As someone who travels frequently, these self-watering pots have been a lifesaver for my houseplants! The water indicator is truly accurate, and my fiddle leaf fig thrived even during my 2-week vacation. The recycled plastic material feels sturdy yet lightweight. My plants have never looked better! </div> <div class="testimonial-footer"> <div class="helpful"> <button class="helpful-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 10h2.5l1-4H14V2h-4v4H4v16h6v-5h4v5h6v-8h-6v-4zm-4 5H6v-7h4v7z"/></svg> Helpful </button> <span class="helpful-count">42 people found this helpful</span> </div> <div class="testimonial-date">August 3, 2023</div> </div> </div> <div class="testimonial" data-rating="3" data-card-order="4"> <div class="testimonial-header"> <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" alt="Marcus L." class="avatar"> <div class="user-info"> <div class="username">Marcus L. <span class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"/></svg> Verified Purchase </span></div> <div class="purchase-date">Purchased on July 28, 2023</div> </div> </div> <div class="rating"> <div class="stars"> <svg class="star" style="--star-order: 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="star" style="--star-order: 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Portfolio Testimonials</title> <style> :root { --primary: #ff6b6b; --secondary: #4ecdc4; --accent1: #ffe66d; --accent2: #6a0572; --accent3: #1a2a6c; --light: #f7f7f7; --dark: #333; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--light); width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; perspective: 1000px; } .container { position: relative; width: 100%; max-width: 700px; height: 700px; padding: 20px; overflow: hidden; } .header { text-align: center; margin-bottom: 20px; opacity: 0; transform: translateY(-20px); animation: fadeInDown 0.8s ease forwards; } .header h1 { font-size: 2.2rem; color: var(--dark); margin-bottom: 10px; font-weight: 800; background: linear-gradient(45deg, var(--accent2), var(--accent3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .header p { font-size: 1rem; color: var(--dark); opacity: 0.8; max-width: 80%; margin: 0 auto; } .testimonial-grid { position: relative; height: 560px; width: 100%; } .testimonial-card { position: absolute; background: white; border-radius: 12px; padding: 20px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; overflow: hidden; opacity: 0; transform: translateY(30px) scale(0.95); animation: fadeInUp 0.8s ease forwards; } .testimonial-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.12); z-index: 10; } .testimonial-card:hover .quote { opacity: 0.12; } .testimonial-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(to right, var(--primary), var(--secondary)); } .card-small { width: 200px; height: 180px; } .card-medium { width: 240px; height: 220px; } .card-large { width: 300px; height: 260px; } .quote { position: absolute; bottom: 5px; right: 10px; font-size: 80px; line-height: 1; font-family: Georgia, serif; opacity: 0.06; transition: opacity 0.3s ease; } .client-info { display: flex; align-items: center; margin-bottom: 12px; } .client-avatar { width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; background-size: cover; background-position: center; border: 2px solid var(--accent1); } .client-name { font-weight: 600; font-size: 0.9rem; line-height: 1.2; } .client-title { font-size: 0.7rem; opacity: 0.7; } .testimonial-text { font-size: 0.9rem; line-height: 1.5; color: var(--dark); } .card-small .testimonial-text { font-size: 0.8rem; max-height: 85px; overflow: hidden; } .card-medium .testimonial-text { max-height: 125px; overflow: hidden; } .card-large .testimonial-text { max-height: 165px; overflow: hidden; } .accent-1 { color: var(--primary); } .accent-2 { color: var(--secondary); } .accent-3 { color: var(--accent2); } .btn-rotate { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: linear-gradient(45deg, var(--accent2), var(--primary)); color: white; border: none; padding: 10px 20px; border-radius: 30px; cursor: pointer; font-weight: 600; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; z-index: 20; opacity: 0; animation: fadeIn 1s ease 1s forwards; } .btn-rotate:hover { transform: translateX(-50%) scale(1.05); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } /* Particle effect */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .particle { position: absolute; border-radius: 50%; opacity: 0; animation: float 3s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; } 50% { opacity: 0.7; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Make it responsive */ @media (max-width: 700px) { .header h1 { font-size: 1.8rem; } .header p { font-size: 0.9rem; } .card-small { width: 160px; height: 160px; } .card-medium { width: 200px; height: 180px; } .card-large { width: 240px; height: 200px; } .testimonial-text { font-size: 0.8rem; } } @media (max-width: 500px) { .header h1 { font-size: 1.5rem; } .card-small, .card-medium, .card-large { width: 85%; left: 50% !important; transform: translateX(-50%) !important; height: auto; min-height: 140px; } .testimonial-card:hover { transform: translateX(-50%) translateY(-5px) !important; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>What Clients <span class="accent-1">Say</span> About My <span class="accent-2">Work</span></h1> <p>From branding to web design, I've had the pleasure of collaborating with amazing clients across industries</p> </div> <div class="testimonial-grid" id="testimonialGrid"> <!-- Testimonial cards will be injected here --> </div> <button class="btn-rotate" id="rotateBtn">Shuffle Testimonials</button> <div class="particles" id="particles"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const testimonials = [ { name: "Sophie Crawford", title: "Art Director, Prisma Studios", avatar: "https://i.pravatar.cc/150?img=1", text: "The branding exploration we did together transformed how our audience perceives us. Emily has an incredible ability to translate abstract concepts into visual storytelling that resonates deeply.", size: "large", color: "#ff6b6b" }, { name: "Marcus Chen", title: "Founder, Evergreen Coffee", avatar: "https://i.pravatar.cc/150?img=2", text: "Our packaging redesign led to a 47% increase in retail placement. The new identity perfectly captures our sustainable approach while standing out on crowded shelves.", size: "medium", color: "#4ecdc4" }, { name: "Olivia Sanchez", title: "Marketing Lead, TechSphere", avatar: "https://i.pravatar.cc/150?img=3", text: "Working with a designer who truly understands UX psychology made all the difference in our product launch. Conversion rates jumped 32% with the new landing page design.", size: "medium", color: "#ffe66d" }, { name: "Jordan Taylor", title: "Creative Director, Lumen Agency", avatar: "https://i.pravatar.cc/150?img=4", text: "The editorial layouts created for our magazine completely elevated our visual narrative. Sophisticated yet accessible - exactly what we needed.", size: "small", color: "#6a0572" }, { name: "Aisha Patel", title: "CEO, Nomad Collective", avatar: "https://i.pravatar.cc/150?img=5", text: "The immersive brand experience designed for our pop-up installations created genuine emotional connections with visitors. Three months later, people are still talking about it.", size: "large", color: "#1a2a6c" }, { name: "Leo Washington", title: "Product Manager, Wavelength", avatar: "https://i.pravatar.cc/150?img=6", text: "Our app redesign not only looks beautiful but dramatically improved our user retention metrics by 28%. The thoughtful micro-interactions make all the difference.", size: "medium", color: "#ff6b6b" }, { name: "Emma Blackwood", title: "Author & Publisher", avatar: "https://i.pravatar.cc/150?img=7", text: "The book cover design perfectly captured the essence of my story. Several readers mentioned they purchased based on the cover alone!", size: "small", color: "#4ecdc4" }, { name: "Thomas Eriksen", title: "Festival Director, SoundWave", avatar: "https://i.pravatar.cc/150?img=8", text: "The dynamic motion graphics package created for our music festival received industry recognition and elevated our digital presence to a new level.", size: "small", color: "#ffe66d" }, ]; const grid = document.getElementById('testimonialGrid'); const particlesContainer = document.getElementById('particles'); // Initial rendering of testimonials renderTestimonials(); // Create particles createParticles(); // Add event listener for shuffle button document.getElementById('rotateBtn').addEventListener('click', function() { // First remove all testimonials with animation const cards = document.querySelectorAll('.testimonial-card'); cards.forEach((card, index) => { setTimeout(() => { card.style.opacity = '0'; card.style.transform = 'translateY(30px) scale(0.95)'; }, index * 50); }); // Then re-render them with new positions setTimeout(() => { grid.innerHTML = ''; renderTestimonials(); // Add particle burst effect createParticleBurst(); }, cards.length * 50 + 300); }); function renderTestimonials() { // Shuffle the testimonials array const shuffled = [...testimonials].sort(() => Math.random() - 0.5); // Define positions based on a grid layout with some overlap const positions = [ { top: '10px', left: '10px' }, { top: '10px', left: '220px' }, { top: '10px', left: '440px' }, { top: '200px', left: '50px' }, { top: '200px', left: '300px' }, { top: '380px', left: '10px' }, { top: '380px', left: '240px' }, { top: '380px', left: '440px' }, ]; shuffled.forEach((testimonial, index) => { const card = document.createElement('div'); card.className = `testimonial-card card-${testimonial.size}`; // Position the card if (positions[index]) { card.style.top = positions[index].top; card.style.left = positions[index].left; } else { // Fallback positioning if needed card.style.top = `${Math.random() * 400}px`; card.style.left = `${Math.random() * 400}px`; } // Set animation delay card.style.animationDelay = `${index * 0.1}s`; card.innerHTML = ` <div class="client-info"> <div class="client-avatar" style="background-image: url(${testimonial.avatar})"></div> <div> <div class="client-name">${testimonial.name}</div> <div class="client-title">${testimonial.title}</div> </div> </div> <div class="testimonial-text">${testimonial.text}</div> <div class="quote" style="color: ${testimonial.color}">"</div> `; grid.appendChild(card); }); } function createParticles() { for (let i = 0; i < 15; i++) { const particle = document.createElement('div'); particle.className = 'particle'; const size = Math.random() * 8 + 3; particle.style.width = size + 'px'; particle.style.height = size + 'px'; // Random colors from our palette const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#6a0572', '#1a2a6c']; particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; // Random position particle.style.left = Math.random() * 100 + '%'; particle.style.top = Math.random() * 100 + '%'; // Random animation delay particle.style.animationDelay = Math.random() * 5 + 's'; particlesContainer.appendChild(particle); } } function createParticleBurst() { for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.className = 'particle'; const size = Math.random() * 10 + 5; particle.style.width = size + 'px'; particle.style.height = size + 'px'; // Random colors from our palette const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#6a0572', '#1a2a6c']; particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; // Start from center particle.style.left = '50%'; particle.style.top = '50%'; // Custom animation for burst effect const angle = Math.random() * Math.PI * 2; const distance = 100 + Math.random() * 100; const duration = 1 + Math.random() * 2; particle.style.animation = 'none'; particle.style.opacity = '0.8'; // Apply dynamic animation setTimeout(() => { particle.style.transition = `all ${duration}s ease-out`; particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) rotate(${Math.random() * 360}deg)`; particle.style.opacity = '0'; }, 10); particlesContainer.appendChild(particle); // Remove particle after animation completes setTimeout(() => { particle.remove(); }, duration * 1000 + 100); } } // Add interactions for cards document.addEventListener('mousemove', function(e) { const cards = document.querySelectorAll('.testimonial-card'); cards.forEach(card => { const rect = card.getBoundingClientRect(); const cardCenterX = rect.left + rect.width / 2; const cardCenterY = rect.top + rect.height / 2; const distanceX = (e.clientX - cardCenterX) / 30; const distanceY = (e.clientY - cardCenterY) / 30; const maxTilt = 3; const tiltX = Math.max(Math.min(distanceY, maxTilt), -maxTilt); const tiltY = Math.max(Math.min(-distanceX, maxTilt), -maxTilt); // Only apply to cards that are close to the mouse const distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)); if (distance < 10) { card.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(1.05)`; } else { card.style.transform = ''; } }); }); }); </script> </body> </html>
<html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #334155; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; } .dashboard-container { width: 100%; max-width: 660px; height: 660px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; } .dashboard-header { padding: 28px 32px; background-color: #fff; border-bottom: 1px solid #e2e8f0; position: relative; z-index: 2; } .dashboard-header h1 { font-size: 20px; font-weight: 600; color: #1e293b; margin-bottom: 6px; } .dashboard-header p { font-size: 14px; color: #64748b; font-weight: 400; } .filter-controls { display: flex; gap: 10px; margin-top: 18px; } .filter-button { padding: 6px 14px; background-color: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px; font-size: 13px; color: #64748b; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .filter-button:hover { background-color: #e2e8f0; color: #334155; } .filter-button.active { background-color: #4f46e5; color: white; border-color: #4f46e5; } .testimonials-container { flex: 1; overflow-y: auto; padding: 0 32px; scroll-behavior: smooth; } .testimonials-container::-webkit-scrollbar { width: 6px; } .testimonials-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } .testimonials-container::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; } .testimonial { padding: 24px 0; border-bottom: 1px solid #e2e8f0; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; position: relative; overflow: hidden; } .testimonial:last-child { border-bottom: none; } .testimonial.visible { opacity: 1; transform: translateY(0); } .testimonial-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .user-info { display: flex; align-items: center; gap: 12px; } .avatar { width: 42px; height: 42px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid #f1f5f9; position: relative; } .avatar::after { content: ""; position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background-color: #10b981; border-radius: 50%; border: 2px solid white; } .name-role { display: flex; flex-direction: column; } .name { font-weight: 600; font-size: 15px; color: #1e293b; } .role { font-size: 13px; color: #64748b; } .rating { display: flex; align-items: center; gap: 3px; } .star { color: #fbbf24; font-size: 16px; } .date { font-size: 12px; color: #94a3b8; margin-left: 10px; } .testimonial-content { font-size: 14.5px; line-height: 1.6; margin-bottom: 15px; color: #334155; } .testimonial-footer { display: flex; justify-content: space-between; align-items: center; } .product-info { display: flex; align-items: center; background-color: #f8fafc; padding: 6px 12px; border-radius: 6px; gap: 6px; } .product-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 10px; color: white; background-color: #4f46e5; } .product-name { font-size: 12px; font-weight: 500; color: #475569; } .actions { display: flex; gap: 16px; } .action-button { background: none; border: none; cursor: pointer; color: #64748b; font-size: 14px; display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 4px; transition: all 0.2s ease; } .action-button:hover { background-color: #f1f5f9; color: #334155; } .action-button.liked { color: #ef4444; } .verification-badge { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #10b981; font-weight: 500; margin-top: 5px; } .tag { display: inline-block; padding: 3px 8px; background-color: #eff6ff; color: #3b82f6; border-radius: 4px; font-size: 11px; font-weight: 500; margin-right: 5px; margin-top: 8px; } .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } } .highlight-effect { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(90deg, rgba(79, 70, 229, 0) 0%, rgba(79, 70, 229, 0.1) 50%, rgba(79, 70, 229, 0) 100%); transform: translateX(-100%); pointer-events: none; z-index: 1; } .testimonial:hover .highlight-effect { animation: highlight 1.5s ease-in-out; } @keyframes highlight { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .dashboard-footer { padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e2e8f0; background-color: #fff; } .page-info { font-size: 13px; color: #64748b; } .pagination { display: flex; gap: 8px; } .page-button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background-color: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .page-button:hover { background-color: #e2e8f0; } .page-button.active { background-color: #4f46e5; color: white; border-color: #4f46e5; } .page-button.disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 600px) { .dashboard-container { height: 100%; max-height: 660px; } .dashboard-header { padding: 20px; } .testimonials-container { padding: 0 20px; } .filter-controls { flex-wrap: wrap; } .dashboard-footer { padding: 12px 20px; flex-direction: column; gap: 10px; } } </style> </head> <body> <div class="dashboard-container"> <div class="dashboard-header"> <h1>Customer Testimonials</h1> <p>See what our verified users are saying about AnalyticsPro</p> <div class="filter-controls"> <button class="filter-button active" data-filter="all">All Reviews</button> <button class="filter-button" data-filter="5-star">5 Star</button> <button class="filter-button" data-filter="recent">Recent</button> <button class="filter-button" data-filter="enterprise">Enterprise</button> </div> </div> <div class="testimonials-container" id="testimonials"> <div class="testimonial" data-rating="5" data-category="enterprise"> <div class="highlight-effect"></div> <div class="testimonial-header"> <div class="user-info"> <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/72.jpg')"></div> <div class="name-role"> <span class="name">Sarah Johnson</span> <span class="role">Data Analytics Lead</span> <div class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> Verified Purchase </div> </div> </div> <div> <div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="date">Apr 12, 2023</span> </div> </div> </div> <div class="testimonial-content"> The real-time pipeline monitoring has transformed our data operations. We've reduced downtime by 63% and can now identify anomalies before they impact business decisions. The custom dashboard templates saved our team weeks of development time. </div> <div class="testimonial-footer"> <div> <div class="product-info"> <div class="product-icon">AP</div> <span class="product-name">AnalyticsPro Enterprise</span> </div> <span class="tag">Pipeline Monitoring</span> <span class="tag">Anomaly Detection</span> </div> <div class="actions"> <button class="action-button like-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> <span class="like-count">24</span> </button> <button class="action-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> <span>Reply</span> </button> </div> </div> </div> <div class="testimonial" data-rating="5" data-category="recent"> <div class="highlight-effect"></div> <div class="testimonial-header"> <div class="user-info"> <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg')"></div> <div class="name-role"> <span class="name">Miguel Santos</span> <span class="role">Marketing Director</span> <div class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> Verified Purchase </div> </div> </div> <div> <div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="date">May 2, 2023</span> </div> </div> </div> <div class="testimonial-content"> The attribution modeling feature gave us insights we never had before. We discovered that our email campaigns were driving 31% more conversions than we thought. The drag-and-drop report builder makes sharing insights with executives incredibly simple. </div> <div class="testimonial-footer"> <div> <div class="product-info"> <div class="product-icon">AP</div> <span class="product-name">AnalyticsPro Marketing</span> </div> <span class="tag">Attribution Modeling</span> <span class="tag">Report Builder</span> </div> <div class="actions"> <button class="action-button like-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> <span class="like-count">18</span> </button> <button class="action-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> <span>Reply</span> </button> </div> </div> </div> <div class="testimonial" data-rating="4" data-category=""> <div class="highlight-effect"></div> <div class="testimonial-header"> <div class="user-info"> <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/28.jpg')"></div> <div class="name-role"> <span class="name">Aisha Patel</span> <span class="role">Product Manager</span> <div class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> Verified Purchase </div> </div> </div> <div> <div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star" style="color: #e2e8f0">★</span> <span class="date">Apr 27, 2023</span> </div> </div> </div> <div class="testimonial-content"> User journey visualization helped us identify a critical bottleneck in our onboarding flow. The cohort analysis tools are powerful, though there's a learning curve. Would appreciate better documentation for advanced features, hence the 4 stars. </div> <div class="testimonial-footer"> <div> <div class="product-info"> <div class="product-icon">AP</div> <span class="product-name">AnalyticsPro Growth</span> </div> <span class="tag">User Journey</span> <span class="tag">Cohort Analysis</span> </div> <div class="actions"> <button class="action-button like-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> <span class="like-count">9</span> </button> <button class="action-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> <span>Reply</span> </button> </div> </div> </div> <div class="testimonial" data-rating="5" data-category="enterprise"> <div class="highlight-effect"></div> <div class="testimonial-header"> <div class="user-info"> <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/55.jpg')"></div> <div class="name-role"> <span class="name">David Chen</span> <span class="role">CTO</span> <div class="verification-badge pulse"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> Verified Purchase </div> </div> </div> <div> <div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="date">May 5, 2023</span> </div> </div> </div> <div class="testimonial-content"> The multi-tenant architecture is exceptional. We deployed custom analytics to 47 client portals in just 3 days. The API flexibility and event streaming capabilities handled our 8M daily events with no performance issues. Worth every penny for enterprise needs. </div> <div class="testimonial-footer"> <div> <div class="product-info"> <div class="product-icon">AP</div> <span class="product-name">AnalyticsPro Enterprise+</span> </div> <span class="tag">Multi-tenant</span> <span class="tag">API Integration</span> <span class="tag">Event Streaming</span> </div> <div class="actions"> <button class="action-button like-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> <span class="like-count">32</span> </button> <button class="action-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> <span>Reply</span> </button> </div> </div> </div> <div class="testimonial" data-rating="5" data-category="recent"> <div class="highlight-effect"></div> <div class="testimonial-header"> <div class="user-info"> <div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/42.jpg')"></div> <div class="name-role"> <span class="name">Jessica Williams</span> <span class="role">Growth Marketer</span> <div class="verification-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> Verified Purchase </div> </div> </div> <div> <div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="date">May 8, 2023</span> </div> </div> </div> <div class="testimonial-content"> The funnel analysis helped us increase conversion by 27% in just 2 weeks. Being able to segment users in real-time based on behavior has transformed our email campaigns. The predictive churn model is eerily accurate—it caught at-risk accounts we wouldn't have noticed. </div> <div class="testimonial-footer"> <div> <div class="product-info"> <div class="product-icon">AP</div> <span class="product-name">AnalyticsPro Growth</span> </div> <span class="tag">Funnel Analysis</span> <span class="tag">Churn Prediction</span> </div> <div class="actions"> <button class="action-button like-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> <span class="like-count">15</span> </button> <button class="action-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </svg> <span>Reply</span> </button> </div> </div> </div> </div> <div class="dashboard-footer"> <div class="page-info">Showing <b>5</b> of <b>28</b> testimonials</div> <div class="pagination"> <button class="page-button disabled"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="15 18 9 12 15 6"></polyline> </svg> </button> <button class="page-button active">1</button> <button class="page-button">2</button> <button class="page-button">3</button> <button class="page-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animate testimonials on load const testimonials = document.querySelectorAll('.testimonial'); function animateTestimonials() { testimonials.forEach((testimonial, index) => { setTimeout(() => { testimonial.classList.add('visible'); }, 100 * index); }); } animateTestimonials(); // Handle like button clicks const likeButtons = document.querySelectorAll('.like-button'); likeButtons.forEach(button => { button.addEventListener('click', function() { const likeCount = this.querySelector('.like-count'); if (this.classList.contains('liked')) { this.classList.remove('liked'); likeCount.textContent = parseInt(likeCount.textContent) - 1; } else { this.classList.add('liked'); likeCount.textContent = parseInt(likeCount.textContent) + 1; // Add heart animation const heart = document.createElement('div'); heart.style.position = 'absolute'; heart.style.color = '#ef4444'; heart.style.fontSize = '20px'; heart.style.pointerEvents = 'none'; heart.style.zIndex = '10'; heart.innerHTML = '♥'; heart.style.left = (this.offsetLeft + this.offsetWidth / 2) + 'px'; heart.style.top = (this.offsetTop + this.offsetHeight / 2) + 'px'; this.parentNode.appendChild(heart); heart.animate([ { opacity: 1, transform: 'translateY(0) scale(1)' }, { opacity: 0, transform: 'translateY(-40px) scale(1.5)' } ], { duration: 700, easing: 'ease-out' }).onfinish = () => heart.remove(); } }); }); // Filter functionality const filterButtons = document.querySelectorAll('.filter-button'); filterButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const filter = this.getAttribute('data-filter'); // Reset all testimonials visibility first testimonials.forEach(testimonial => { testimonial.classList.remove('visible'); setTimeout(() => { testimonial.style.display = 'block'; }, 300); }); // Apply filter if (filter !== 'all') { setTimeout(() => { testimonials.forEach(testimonial => { if (filter === '5-star' && testimonial.getAttribute('data-rating') === '5') { // Show 5-star testimonials } else if (filter === testimonial.getAttribute('data-category')) { // Show testimonials matching category } else { testimonial.style.display = 'none'; } }); // Re-animate visible testimonials const visibleTestimonials = Array.from(testimonials).filter(t => t.style.display !== 'none'); visibleTestimonials.forEach((testimonial, index) => { setTimeout(() => { testimonial.classList.add('visible'); }, 100 * index); }); }, 300); } else { // Show all and animate setTimeout(animateTestimonials, 300); } }); }); // Pagination buttons const pageButtons = document.querySelectorAll('.pagination .page-button:not(.disabled)'); pageButtons.forEach(button => { button.addEventListener('click', function() { if (this.classList.contains('active')) return; pageButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); // Scroll to top of testimonials with animation document.querySelector('.testimonials-container').scrollTo({ top: 0, behavior: 'smooth' }); // Simulate page change testimonials.forEach(testimonial => { testimonial.classList.remove('visible'); }); setTimeout(animateTestimonials, 400); }); }); // Intersection Observer for lazy loading animation const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !entry.target.classList.contains('visible')) { entry.target.classList.add('visible'); } }); }, { root: document.querySelector('.testimonials-container'), threshold: 0.1 }); testimonials.forEach(testimonial => { observer.observe(testimonial); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Testimonials</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f7f9fc; color: #2c3e50; padding: 30px; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; overflow-x: hidden; } .container { max-width: 640px; width: 100%; position: relative; } .header { text-align: center; margin-bottom: 40px; } h1 { font-size: 32px; color: #1a365d; font-weight: 600; margin-bottom: 12px; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(90deg, #3182ce, #63b3ed); border-radius: 2px; } .tagline { font-size: 16px; color: #718096; max-width: 500px; margin: 0 auto; line-height: 1.6; } .testimonial-container { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); } .testimonial { margin-bottom: 16px; background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); position: relative; transition: transform 0.3s ease; } .testimonial:hover { transform: translateY(-4px); } .testimonial:last-child { margin-bottom: 0; } .testimonial-header { padding: 20px 24px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; transition: all 0.3s ease; position: relative; z-index: 1; } .testimonial.active .testimonial-header { border-bottom-color: #e2e8f0; } .testimonial-header-content { display: flex; align-items: center; flex: 1; } .testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 16px; border: 2px solid #e2e8f0; transition: transform 0.3s ease; } .testimonial.active .testimonial-avatar { transform: scale(1.1); border-color: #3182ce; } .testimonial-meta { flex: 1; } .testimonial-name { font-weight: 600; font-size: 16px; margin-bottom: 2px; color: #2d3748; } .testimonial-position { font-size: 13px; color: #718096; display: flex; align-items: center; } .testimonial-company { font-weight: 500; color: #4a5568; } .testimonial-summary { font-size: 15px; color: #4a5568; margin-top: 8px; line-height: 1.5; font-style: italic; } .testimonial-toggle { width: 24px; height: 24px; position: relative; transition: transform 0.3s ease; } .testimonial-toggle::before, .testimonial-toggle::after { content: ''; position: absolute; background-color: #3182ce; transition: all 0.3s ease; } .testimonial-toggle::before { width: 2px; height: 16px; top: 4px; left: 11px; opacity: 1; } .testimonial-toggle::after { width: 16px; height: 2px; top: 11px; left: 4px; } .testimonial.active .testimonial-toggle::before { opacity: 0; transform: rotate(90deg); } .testimonial.active .testimonial-toggle { transform: rotate(180deg); } .testimonial-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); background-color: #fff; padding: 0 24px; position: relative; } .testimonial-content-inner { padding: 20px 0 24px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: 0.1s; } .testimonial.active .testimonial-content-inner { opacity: 1; transform: translateY(0); } .testimonial-quote { font-size: 15px; line-height: 1.7; color: #4a5568; margin-bottom: 20px; position: relative; padding-left: 24px; border-left: 3px solid #3182ce; } .testimonial-metrics { display: flex; gap: 20px; margin-top: 16px; } .metric { background-color: #f8fafc; padding: 10px 16px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; flex: 1; transition: all 0.3s ease; } .metric:hover { background-color: #edf2f7; transform: translateY(-2px); } .metric-value { font-weight: 700; font-size: 20px; color: #3182ce; margin-bottom: 4px; } .metric-label { font-size: 12px; color: #718096; text-transform: uppercase; letter-spacing: 0.5px; } .highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .highlight-tag { background-color: rgba(49, 130, 206, 0.1); color: #3182ce; font-size: 12px; padding: 4px 12px; border-radius: 20px; font-weight: 500; transition: all 0.3s ease; } .highlight-tag:hover { background-color: rgba(49, 130, 206, 0.2); } .logo-backdrop { position: absolute; right: 20px; bottom: 20px; opacity: 0.04; width: 100px; height: auto; transform: rotate(-10deg); pointer-events: none; } @media (max-width: 600px) { body { padding: 20px 15px; } .header { margin-bottom: 30px; } h1 { font-size: 26px; } .tagline { font-size: 14px; } .testimonial-header { padding: 16px 20px; } .testimonial-content { padding: 0 20px; } .testimonial-avatar { width: 40px; height: 40px; } .testimonial-metrics { flex-direction: column; gap: 10px; } .metric { padding: 8px 12px; } } /* Decorative elements */ .pattern { position: absolute; z-index: -1; opacity: 0.07; pointer-events: none; } .pattern-top { top: 0; right: 0; width: 150px; height: 150px; background-image: radial-gradient(circle, #3182ce 2px, transparent 2px); background-size: 20px 20px; } .pattern-bottom { bottom: 0; left: 0; width: 150px; height: 150px; background-image: radial-gradient(circle, #3182ce 2px, transparent 2px); background-size: 20px 20px; } /* Pulsating dot effect for "active" client indicator */ .active-indicator { display: inline-block; width: 8px; height: 8px; background-color: #48bb78; border-radius: 50%; margin-right: 6px; position: relative; } .active-indicator::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #48bb78; border-radius: 50%; z-index: -1; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(2); opacity: 0; } 100% { transform: scale(2); opacity: 0; } } </style> </head> <body> <div class="pattern pattern-top"></div> <div class="pattern pattern-bottom"></div> <div class="container"> <div class="header"> <h1>Client Success Stories</h1> <p class="tagline">Discover how our enterprise solutions have transformed operations and driven measurable results for industry leaders.</p> </div> <div class="testimonial-container"> <div class="testimonial"> <div class="testimonial-header"> <div class="testimonial-header-content"> <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Sarah Johnson" class="testimonial-avatar"> <div class="testimonial-meta"> <div class="testimonial-name">Sarah Johnson</div> <div class="testimonial-position"> <span class="active-indicator"></span> CTO at <span class="testimonial-company">Apex Financial</span> </div> <div class="testimonial-summary">"Dramatically reduced our cloud infrastructure costs..."</div> </div> </div> <div class="testimonial-toggle"></div> </div> <div class="testimonial-content"> <div class="testimonial-content-inner"> <div class="testimonial-quote"> "After migrating to your enterprise solution, we saw a dramatic 42% reduction in our cloud infrastructure costs while improving performance by 37%. The dedicated implementation team made our transition painless, working through our complex legacy systems with expertise. What impressed us most was the proactive security monitoring that identified and patched vulnerabilities before they became threats." </div> <div class="testimonial-metrics"> <div class="metric"> <div class="metric-value">42%</div> <div class="metric-label">Cost Reduction</div> </div> <div class="metric"> <div class="metric-value">37%</div> <div class="metric-label">Performance Gain</div> </div> <div class="metric"> <div class="metric-value">99.9%</div> <div class="metric-label">Uptime</div> </div> </div> <div class="highlights"> <span class="highlight-tag">Cloud Migration</span> <span class="highlight-tag">Cost Optimization</span> <span class="highlight-tag">Financial Services</span> </div> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L95 50 L50 95 L5 50 Z' fill='%233182ce'/%3E%3C/svg%3E" alt="Company Logo" class="logo-backdrop"> </div> </div> </div> <div class="testimonial"> <div class="testimonial-header"> <div class="testimonial-header-content"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Rodriguez" class="testimonial-avatar"> <div class="testimonial-meta"> <div class="testimonial-name">Michael Rodriguez</div> <div class="testimonial-position">VP Operations at <span class="testimonial-company">Nexgen Manufacturing</span></div> <div class="testimonial-summary">"Streamlined our supply chain visibility by 86%..."</div> </div> </div> <div class="testimonial-toggle"></div> </div> <div class="testimonial-content"> <div class="testimonial-content-inner"> <div class="testimonial-quote"> "Your platform transformed our multi-tiered supply chain operations almost immediately. We achieved 86% better visibility across our 43 global manufacturing facilities, which helped us reduce inventory carrying costs by 28%. The predictive analytics module identified seasonal demand patterns we'd missed for years. Within six months, we recouped our entire investment and are now saving over $2.4M annually in operational efficiency." </div> <div class="testimonial-metrics"> <div class="metric"> <div class="metric-value">86%</div> <div class="metric-label">Better Visibility</div> </div> <div class="metric"> <div class="metric-value">28%</div> <div class="metric-label">Inventory Reduction</div> </div> <div class="metric"> <div class="metric-value">$2.4M</div> <div class="metric-label">Annual Savings</div> </div> </div> <div class="highlights"> <span class="highlight-tag">Supply Chain</span> <span class="highlight-tag">Predictive Analytics</span> <span class="highlight-tag">Manufacturing</span> </div> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L80 20 L80 80 L20 80 Z' fill='%233182ce'/%3E%3C/svg%3E" alt="Company Logo" class="logo-backdrop"> </div> </div> </div> <div class="testimonial"> <div class="testimonial-header"> <div class="testimonial-header-content"> <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Emily Chen" class="testimonial-avatar"> <div class="testimonial-meta"> <div class="testimonial-name">Emily Chen</div> <div class="testimonial-position">Director of IT at <span class="testimonial-company">HealthPoint Systems</span></div> <div class="testimonial-summary">"Reduced patient data processing time from days to minutes..."</div> </div> </div> <div class="testimonial-toggle"></div> </div> <div class="testimonial-content"> <div class="testimonial-content-inner"> <div class="testimonial-quote"> "In healthcare, data security and speed are everything. Your solution reduced our patient data processing time from 3.5 days to just 18 minutes while maintaining HIPAA compliance across our network of 12 hospitals. The custom reporting dashboards revolutionized how our practitioners analyze patient outcomes. The implementation team's healthcare expertise was evident throughout—they understood our compliance requirements implicitly." </div> <div class="testimonial-metrics"> <div class="metric"> <div class="metric-value">99%</div> <div class="metric-label">Processing Time Cut</div> </div> <div class="metric"> <div class="metric-value">12</div> <div class="metric-label">Hospitals Connected</div> </div> <div class="metric"> <div class="metric-value">100%</div> <div class="metric-label">HIPAA Compliant</div> </div> </div> <div class="highlights"> <span class="highlight-tag">Healthcare</span> <span class="highlight-tag">Compliance</span> <span class="highlight-tag">Data Processing</span> </div> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%233182ce'/%3E%3C/svg%3E" alt="Company Logo" class="logo-backdrop"> </div> </div> </div> <div class="testimonial"> <div class="testimonial-header"> <div class="testimonial-header-content"> <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="James Wilson" class="testimonial-avatar"> <div class="testimonial-meta"> <div class="testimonial-name">James Wilson</div> <div class="testimonial-position">CISO at <span class="testimonial-company">Global Retail Partners</span></div> <div class="testimonial-summary">"Blocked 2,300+ sophisticated attacks in the first month..."</div> </div> </div> <div class="testimonial-toggle"></div> </div> <div class="testimonial-content"> <div class="testimonial-content-inner"> <div class="testimonial-quote"> "As a multi-billion dollar retail operation with 8,400 global endpoints, security is mission-critical. Your zero-trust security framework blocked over 2,300 sophisticated attacks in just the first month of implementation—attacks our previous solution missed entirely. The machine-learning threat detection adapts to new attack vectors faster than any solution we've tested. When we did experience a breach attempt, your incident response team was engaged within 4 minutes." </div> <div class="testimonial-metrics"> <div class="metric"> <div class="metric-value">2,300+</div> <div class="metric-label">Threats Blocked</div> </div> <div class="metric"> <div class="metric-value">8,400</div> <div class="metric-label">Protected Endpoints</div> </div> <div class="metric"> <div class="metric-value">4 min</div> <div class="metric-label">Response Time</div> </div> </div> <div class="highlights"> <span class="highlight-tag">Cybersecurity</span> <span class="highlight-tag">Zero-Trust Architecture</span> <span class="highlight-tag">Retail</span> </div> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 50 L50 10 L90 50 L50 90 Z' fill='%233182ce'/%3E%3C/svg%3E" alt="Company Logo" class="logo-backdrop"> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const testimonials = document.querySelectorAll('.testimonial'); testimonials.forEach(testimonial => { const header = testimonial.querySelector('.testimonial-header'); const content = testimonial.querySelector('.testimonial-content'); const contentInner = testimonial.querySelector('.testimonial-content-inner'); header.addEventListener('click', () => { const isActive = testimonial.classList.contains('active'); // Close all testimonials testimonials.forEach(item => { const itemContent = item.querySelector('.testimonial-content'); if (item !== testimonial) { item.classList.remove('active'); itemContent.style.maxHeight = '0px'; } }); // Toggle current testimonial if (!isActive) { testimonial.classList.add('active'); content.style.maxHeight = `${contentInner.offsetHeight}px`; } else { testimonial.classList.remove('active'); content.style.maxHeight = '0px'; } }); // For smooth animations, set initial height content.style.maxHeight = '0px'; }); // Add hover ripple effect to testimonial headers const testimonialHeaders = document.querySelectorAll('.testimonial-header'); testimonialHeaders.forEach(header => { header.addEventListener('mouseenter', function(e) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = header.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.cssText = ` position: absolute; top: ${e.clientY - rect.top - size / 2}px; left: ${e.clientX - rect.left - size / 2}px; width: ${size}px; height: ${size}px; background-color: rgba(49, 130, 206, 0.1); border-radius: 50%; transform: scale(0); animation: ripple-effect 0.6s linear; z-index: 0; `; header.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add keyframe animation for ripple effect const style = document.createElement('style'); style.textContent = ` @keyframes ripple-effect { to { transform: scale(2); opacity: 0; } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Map Testimonials - Axiom Global Consultancy</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } :root { --primary: #1e63ee; --primary-light: #4c84f4; --secondary: #ff6b6b; --neutral-dark: #2d3748; --neutral: #4a5568; --neutral-light: #e2e8f0; --background: #f7fafc; --success: #48bb78; } body { background-color: var(--background); color: var(--neutral); height: 700px; width: 700px; overflow: hidden; margin: 0 auto; } .container { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 1.5rem; position: relative; } header { margin-bottom: 1rem; } h1 { font-size: 1.5rem; color: var(--neutral-dark); font-weight: 700; margin-bottom: 0.5rem; } .subtitle { font-size: 0.9rem; color: var(--neutral); line-height: 1.5; } .map-container { position: relative; width: 100%; height: calc(100% - 6rem); background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); overflow: hidden; } .map { width: 100%; height: 100%; background-color: #f3f8ff; position: relative; overflow: hidden; } svg.world-map { width: 200%; height: 200%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .map-controls { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 10; } .control-btn { width: 40px; height: 40px; border-radius: 8px; background-color: white; border: none; display: flex; align-items: center; justify-content: center; color: var(--neutral); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.2s ease; } .control-btn:hover { background-color: #f5f7fa; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .location-marker { position: absolute; width: 16px; height: 16px; background-color: var(--primary); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 10; transition: all 0.2s ease; } .location-marker::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: var(--primary); opacity: 0.4; animation: pulse 2s infinite; z-index: -1; } .location-marker:hover { transform: translate(-50%, -50%) scale(1.3); background-color: var(--primary-light); } @keyframes pulse { 0% { transform: scale(1); opacity: 0.4; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.5); opacity: 0; } } .testimonial-preview { position: absolute; width: 240px; background-color: white; border-radius: 10px; padding: 1rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); transform: translateY(20px); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 20; } .testimonial-preview.active { transform: translateY(0); opacity: 1; pointer-events: all; } .testimonial-header { display: flex; align-items: center; margin-bottom: 0.8rem; } .avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--neutral-light); margin-right: 0.8rem; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .client-info { flex: 1; } .client-name { font-weight: 600; font-size: 0.85rem; color: var(--neutral-dark); margin-bottom: 0.2rem; } .client-company { font-size: 0.75rem; color: var(--neutral); } .preview-quote { font-size: 0.8rem; line-height: 1.5; color: var(--neutral); margin-bottom: 0.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .service-tag { display: inline-block; padding: 0.3rem 0.5rem; background-color: var(--primary-light); background-opacity: 0.1; color: white; font-size: 0.65rem; font-weight: 500; border-radius: 4px; } .close-btn { position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--neutral-light); border: none; color: var(--neutral); font-size: 0.7rem; cursor: pointer; opacity: 0.7; transition: all 0.2s ease; } .close-btn:hover { opacity: 1; background-color: var(--neutral-light); } .stats-container { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; } .stat { display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 0.2rem; } .stat-label { font-size: 0.7rem; color: var(--neutral); } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.5s ease; } .loading-indicator { width: 40px; height: 40px; border: 3px solid rgba(78, 132, 243, 0.2); border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 1rem; } .loading-text { font-size: 0.9rem; color: var(--neutral); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .legend { position: absolute; top: 20px; left: 20px; background-color: white; padding: 0.8rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); z-index: 10; font-size: 0.75rem; } .legend-title { font-weight: 600; margin-bottom: 0.5rem; color: var(--neutral-dark); } .legend-item { display: flex; align-items: center; margin-bottom: 0.3rem; } .legend-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 0.5rem; } .filter-btn { display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; background-color: white; border: 1px solid var(--neutral-light); border-radius: 20px; font-size: 0.75rem; color: var(--neutral); margin-right: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.2s ease; } .filter-btn.active { background-color: var(--primary); color: white; border-color: var(--primary); } .filter-btn:hover { border-color: var(--primary-light); color: var(--primary); } .filter-btn.active:hover { color: white; } .filters { display: flex; flex-wrap: wrap; margin-bottom: 1rem; } @media (max-width: 600px) { .container { padding: 1rem; } h1 { font-size: 1.2rem; } .subtitle { font-size: 0.8rem; } .testimonial-preview { width: 200px; } .legend, .map-controls { transform: scale(0.9); transform-origin: top left; } } </style> </head> <body> <div class="container"> <header> <h1>Client Success Around the Globe</h1> <p class="subtitle">Explore our global impact with real testimonials from partners who've transformed their organizations with Axiom's consultancy services.</p> </header> <div class="filters"> <button class="filter-btn active" data-service="all">All Services</button> <button class="filter-btn" data-service="strategy">Strategy</button> <button class="filter-btn" data-service="operations">Operations</button> <button class="filter-btn" data-service="digital">Digital</button> <button class="filter-btn" data-service="sustainability">Sustainability</button> </div> <div class="stats-container"> <div class="stat"> <div class="stat-value">37</div> <div class="stat-label">Countries</div> </div> <div class="stat"> <div class="stat-value">240+</div> <div class="stat-label">Clients</div> </div> <div class="stat"> <div class="stat-value">92%</div> <div class="stat-label">Satisfaction</div> </div> <div class="stat"> <div class="stat-value">$1.8B</div> <div class="stat-label">Value Created</div> </div> </div> <div class="map-container"> <div class="map" id="map"> <svg class="world-map" viewBox="0 0 1000 500"> <!-- World map outline --> <path class="land" fill="#e2e8f0" stroke="#cbd5e0" stroke-width="0.5" d="M673,186.2l-0.6,2.5l-0.8-0.2l-2.4-1.5l0.2-1.1l1.7-1.1l1.9,1.4 M680.3,170.5l-2.4,0.5l-2.5-1.5h-3.4l-0.1-1.7l0.9-1.6l3.5,1 M685.5,156.4l-1.5-0.3l-2.7-0.7l-0.9,1.3l-1.5,2.9l2.7,2.3l0.7,2l1.8-0.1l0.4-3.5l-0.9-3.9 M670.9,165.6l-3,1.7l-2.1,2.2l-3.3,1.6l-1.8-0.9l-1.9-0.7l-2.2-3l2.3-2.4l1.8-2.2l3.5-1.6l2.4,0.3l4.3,5M604.7,324.1l-0.5,1.9l2,2.9l0.4,1.9l-4.5,2.1l-1.7,4.5l-2.2,1l-2.7,0.4l-0.9,5.1l-2.4,1.1l-2.8-1l-1.9,2.2l-3.2,1.8l-3.2-2.6l-0.9-3.4l-1-3.7l-2.5-5.5l-3,2.3l-3.6-0.4l-3-1.1l-1.5-1.9l-1.9-3.3l-3.2-3.2l-3.5-2.9l-4-0.2l-3.6,1.1l-2.9-0.1l-2.1-1.8l-3-0.3l-0.8-1.8l-0.2-3.9l1.1-2.2l1.1-4.1l2.9-1.1l1.9-1.6l0.5-2.5l1.9-3.1l2-2.5l2.3-0.2l1.5-1.1l1.9-1.8l3.2-2.1l1.6,0.7l1.3-0.8l2.2,0.4l1.8-2.3l2.2-0.1l1.2-1.1l1.2-3.3l1.4-1.3l1.9-2.2l3.2,0.2l2.6,0.4l1.3,1.3l0.2,2.4l0.9,2l1.3-0.9l2.6-0.1l2.9-1.1l1.9,0.1l2.5,2.5l5.1,0.3l2.5,0.6l2.3,1.1l1.4,1.4l1.9,6l0.4,2.8l0.8,2.2l-0.2,4.4l0.5,1.4l-1.9,1.9l0.3,1l-0.6,1.4l0.7,2.7l-0.7,2.9l0.5,1.1l-0.8,1l-0.7,2.1l-2.2,1.1l-2.2,0.9l-1.1,2.2l0.4,3.5 M614.4,305.9l3.4,0.9l-0.3,3.9l-3.7,0.9l-2.9,1.5l-3.6-2l0.6-2.8l2.6-1.3l3.9-1.1 M615.5,313.8l1.8,3.3l-3.1,0.4l-1.3-1.5l-1.4-1.9l3.9-1.4 M656.4,215.4l1.1,2.5l0.6,1.8l-0.2,1.7l-2.2-0.9l-1.7,0.3l-0.9-1l-0.9-1.5l-0.9-2l2.5-1.1l2.6,0.2 M639.4,217.5l1.1,1.8l2.5,1l2.5,0.9l2.1,2.6l2,3.5l0.9,3.9l-0.1,2.5l-1.6,3.1l-3,2.6l-4.2,2.6l-2.8,0.3l-2.7,0.8l-3.1-0.4l-3.1-2l-3.3-1.4l-2.6-1.8l-0.5-2l0.5-1.9l-0.7-2.3l-2.7-1.2l-4.4-0.1l-3-0.5l-3.6-1.4l-2.6-2.5l-1.5-2l-0.5-2.1l0.1-1.8l1.1-1.9l2.5-1.8l2.4-0.9l3-0.2l3.5,0.6l3.7,0.2l4-0.1l3.6,1.1l4.4,0.1l1.8-2.4l2.4-0.4l1.8,1.8 M622.9,231.5l0.2,2.2l-2-0.3l-0.4-1.5l0.3-1.8l0.7-1.9l0.7,0.6l0.5,2.7 M613.1,217.5l-1.1,2.2l0.8,2.1l-2,2.3l-3.1-0.5l-1.7-2.6l-2-3.1l-2.7-1.5l-2.3-1.9l-2.6-3.1l-0.8-2.4l-1.2-2.2l0.1-1.6l1.5-1.3l2.2-0.8l0.8,0.1l-1,2.7l2.4,0.5l0.8,2.1l2.7,1.5l1.3,1.9l2.8,1.5l3.2,0 M668.3,124.8l-0.6,1.4l3.2,4.8l2.5,1.3l2.3,1.9l5.8,1.1l4.6,0.3l1.8,1l-1.5,2.2l-0.7,2.6l-1.3,1.6l-4.3-0.8l-7.1-0.5l-2.9,0.5l-4.3,1.2l-1,1.4l-1,3.4l-3.8,3.2l-4.8,2.1l-3.8,0.9l-5.3,2.7l-2.5,0.4l-2.2-0.2l-2.6-1.1l-3.1-0.3l-2.1,0.2l-0.5-3.6l-0.8-2.3l-3.9-1.4l-3.5-0.5l-3.5,0.8l-0.8-2l-1-3.1l-1.9-1.4l1.8-1.9l3.5-0.9l1.1-1.2l0.4-2.5l1.6-1.9l3.9,0.3l3.1-1.5l3.8-0.3l3.8-0.8l2.9-1.1l2-2.2h3.5l3.5-2.6l3.7-0.8l4.1-1.7l4.8,0.8l3.1,0.5l3.7,0.8l2.9-1.5l2.4,1l1.3,1.7 M692.7,158.1l-0.8,2.3l-1,1.8l-1.1-1.6l-1.2-2.9l-0.6-3.5l0.3-3.8l1.4-2.5l1.9-1.2l-0.3,4.1l0.6,2.9l0.8,4.4 M685.5,135.7l-1.8-2.3l-2.4-2.1l-1-0.5l-0.9-1.1l-0.3-2.2l0.2-4.2l0.5-1.6l-2.3-1.1l-2.4-0.2l0.8-2.6l3.1-0.7l2.9-1.3l3.5-3.1l0.2-1.8l-0.6-1.7l2.2-0.2l4,1.9l2.8,0.8l1.6,2.9l0.4,3.3l-1.9,1.9l0.8,2.9l0.8,4l0.3,2.6l-3.5,1.3l-4.9,1.4l-2.1,0.8 M665.7,98.6l-2.6,1.3l-2.1,0.1l-0.7-0.9l0.3-1.3l1.9-0.9l3-0.8l1.7,0.1l-1.5,2.4 M673.5,91l-1.6,0.6l-1.5-0.2v-1.3l0.9-0.9l2.2-0.1l-0.3,1l0.3,0.9 M687.7,95.5l1.8,0.1l-2,0.4l-2,1.3l-1.3,0.1l-1.1-0.9l2.3-1.1l2.3,0.1 M598.4,332.3v1.7l-2.2-0.5l-0.2-1.2l-1-1.5l2.2-1.1l1.3,0.4l-0.1,2.2 M593.5,331.9l-0.9,0.9l-3.8-0.4l-2.3,0.8l-3.3-1.4l0.5-1.1l2.6-1.1l1.8,0.4l1.3,0.3l4.1,1.6 M538.4,327v3.1l0.3,0.8l5.8,1.3l2.1,1.1l5.2,2.2l2.1,0.2l2.5-1.8l2.5-1.7l-0.8-1.4l-1.4-1l-1.6-3.2l-0.4-3.3l-1.6-1.4l-4.2-2.3l-1.7-1.3l-3.6-1.4h-3.3l-1,1.3l-0.5,1.5l0.5,1.7l1.6,0.9l-2.1,2.7 M564.9,311.7l-1.9,0.9l-0.9,1.6v1.3l3-1.8l0.4-1.1l-0.6-0.9"/> <path d="M747.5,235.5l1.8,1.8l0.9-0.9l-0.2-1.1l-2-0.3l-0.5,0.5 M756.4,227.2l-0.9,0.3l-0.5,0.6l0.5,0.7l1.1-0.3l1.2-0.1l0.8-0.4l-0.7-0.7l-1.5-0.1 M792.2,188.1l-0.2,0.9l-0.1,1.8l0.9,1.1h2.3l-0.5-2.3l-2.4-1.5 M789.9,243.7l-0.3,2.8l1.3,1.5l1.2-2.1l-0.8-1.7l-1.4-0.5 M794.7,257.7l0.2,2.1l1.5,1.5l1-1.5l-0.2-1.7l-2.5-0.4 M779.9,253.3l1.8-0.7l0.5-1.7l-0.4-1.8l-1.6,0.7l-0.3,3.5 M803.4,216.3l-1.6,0.9l0.6,1.4l1.5-0.6l-0.5-1.7 M874.1,181.6l-2.6-0.9l-0.6,0.9l1.3,1.5l1.9-1.5 M894.5,204.8l-0.5,1.8l2.4-0.3l-0.5-1.4l-1.4-0.1 M884.7,221.4l1.6-1l-0.4-0.8l-1.4-0.3l-0.6,0.7l0.8,1.4 M567.8,468.2l-1.8-1.6l-2.1-0.8l0.4-1.5l-1.3-0.7l-0.6-0.4l-2.9-0.1l-1.4-0.7l-0.9,0.3l-1,1.3h-1l-2.5-1.4l-0.5-1.7l0.6-1.7l-0.2-1.6l-2.9-1.2l-1.7,0.7h-2.2l-3.2,1.1l-1.8,1l-2.3,0.8l-0.3,0.9l-1.5,1.3l-2.2,2.7l-1.2,1.8l-0.6,2.3l0.1,2.9l1.1,2.1l1.8,2.7l2.3,2.5l0.8,1.8l0.7,3.2l1.3,1.4l0.5,2.8l3.8,3.2l0.9-2.5v-2.1l0.5-1.1l-0.4-3.5l0.7-3.1l1.9-3.1l1.7-1.8l2-0.6l2.4-2.5l1.8-3.1l2.8-1.6l1.9-0.9l0.8-1.1l1.7-0.5l0.1-1.4l0.5-0.3l2.5,0.9l1.6-0.1l1.1-1.3l1.3-0.6l-0.1,0.9l-2.2,1.7l-0.2,1.3l-1.5,0.7l0.2,1.5l-2.7,2.3l-1.9,0.5l-1.4,0.9l-0.7,1.3l0.1,1.2l-0.9,0.3l-0.4,0.5l-0.1,1.4l-0.9,0.7l-0.7,1.5l-0.8-1.4l0.1-0.9l-0.8-0.9v-0.5l1.3-0.1l0.8-1.7l0.2-1.6l-0.2-1.8l-0.6-0.8l0.7-1.7l-0.4-0.8l0.2-1.9l-0.6-0.9"/> <path d="M788.3,335l-0.1,1.7l1.6,2.1l1.8-1.1l-0.1-1.1l-3.2-1.6 M801.2,219.9l-1.9,0.2l-0.8,1.1l1.8,1.6l1.9-0.3l-1-2.6 M805.7,338.3l-1.2-0.1l-1.4,1.3v1.6l1,0.7l1.1-1.2l0.5-2.3 M754.6,350.1l-0.5-0.5l-1.9,1l-1.1,1.3l0.5,1.6l1.3,1.4l1.6-0.9l-0.3-1.8l0.9-1.3l-0.5-0.8 M758.1,344.9l-0.9,1.3l0.3,1.7l2.5,0.5l0.8-1.4l-0.2-1.1l-2.5-1 M756.7,357.3l-0.5,0.8l0.8,0.8h1.3l0.9-0.5l-0.5-1.2l-2-0.1 M756.4,362.9l-0.1,1.7l1.2,0.9l0.8-0.6l-0.1-1.1l-1.8-0.9 M739.4,343.5l-1-0.2l-1.1,0.7l0.5,1.1l1.1,0.2l0.5-1.8 M740.2,364l-1.3,0.7l0.8,1.2l1,0.8l1-0.3l-0.9-1.7l-0.6-0.7 M741.6,349.9l-0.3,0.9l0.8,0.5l0.9-0.4l-0.1-0.8l-1.3-0.2 M641.6,349.4l-1.5,0.5l-0.5,0.8l-2.9,0.8l-1.9,1.2l-1.9,1.5l-1.1,1.6l-0.1,1.3l0.5,2.4l-0.5,2.1l0.4,2.6l1.9,4.9l0.6,5.6l-0.9,0.9l0.4,1.7l1.9,0.2l1.2,0.7l0.8,0.9l1.7-0.8l2.5-1.8l1-1.4l0.5-2.3l-0.7-1.9l0.3-2.7l0.6-1.3l2.1-1.5l1.9-0.8l3.3-0.6l1.4-0.9l0.5-1.2l1.9-1.1l2.5-2.5l1.8-1.3l0.7-1l2.8-1l1.2-0.8l-0.5-1.4l2.7-1.6l-0.3-0.7l-1.8-0.5l0.5-1.1l-3.7-0.3l-2-0.6l-2.1,0.7l-3.5-1.2l-3-2.3l-3.5-1.2l-2.6,0.1L641.6,349.4z M670.8,359.7l-2.2,1.3l-2.2,1.9l-0.9,1.5l-0.1,3.5l2.5,3.5l2.1,1.2l1.5,0.2l1-0.1l1.7-1.3l0.1-0.5l2.2-0.9l0.9-0.9l1.2-3.7l-0.3-3.5l-1.2-1.9l-1.7-0.1l-2.5-0.2l-2.1,0.1 M694.9,364.9l-1.4,1.1l-1.7,3.3l0.1,3.2l0.1,0.1l1.5,2.2l2.3,0.1l1.3-0.6l1-1.1l0.5-3l-0.1-2.8l-1.7-1.8l-1.9-0.7 M634.4,339.4l-4.8,1.7l-2.7,2.5v1l-3.1,1.5l-2.3,1.7h-3.6l-2.2-0.9l-3.6,0.4l-1.8,0.8l-3,3.4l-2.7,1.2l-2.3,0.1l-0.5,0.9l-2.3-0.8l-0.3-1.5l-1.9-2.3l-2.5-1.2l-2.4-1.4l-0.5-0.9l-2.5-1.2l-2.1-1.8l-2.2-1.1l-0.2-1l-1.8-1.4l0.6-1.9l-1.5-1.2l-2.7-3.3l-2.6-1.5l-1.3-1.9l-0.9-2.7l-0.2-1.7l-1.6-1l-0.1-1.8l-1.3-0.8l-1-0.2l-1.7,2.5l-1.6,2.6l-0.6,2.2v2.2l0.5,2.1l0.1,1.2l-0.5,0.9l-0.4,2.9l0.6,2l1.7,2.5v2.5l-1.5,1.1l-0.6,0.8l-0.8,3.8l-2.4,2.3l-1.5,1.2l-1,1.4l-1.8,3.4l-2.2,2.2l-2.8,2.8l-0.6,1.5l-1.5,1.5l-0.9,0.2l-0.8,1.5l-1.8,1.7l-1.2,1.3l-0.6,2.8l0.8,5v1.8l0.8,2.2l2.2,1.8l1.3,0.7l1.6,2.8l2.5,2.8l1,2.7l1.8,0.6l2.5-0.5l3-1.2l2-1.1l1.2-1.7l0.3-2.6l-0.3-2.2l0.9-1.5l1.8-0.5l0.9-0.9l0.9-1.8l1.1-1l2.5-0.2l2.7-0.8l2.3-1.6l1.3-1.5l2-1.6l2.1,0.3l3.6-1.1l2.1,1.6l2.9-0.5l1.2-0.8l1.4,0.1l3.1-2.4l2.9-1.4l1.8-1.6l2.1-0.7l0.9-0.3l-0.1-1.9l-0.6-2.1l0.9-2.5l1.8-2.2l2.3-0.3l1.9,0.1l0.9-0.3l0.9,2.2l
