diff --git a/aider/website/index.html b/aider/website/index.html index 2659df694..8a23d6d0e 100644 --- a/aider/website/index.html +++ b/aider/website/index.html @@ -241,7 +241,11 @@ aider --model o3-mini --api-key openai=<key> .testimonial-card { opacity: 1; transform: translateY(0); - transition: opacity 0.4s ease, transform 0.4s ease; + transition: opacity 0.4s ease, transform 0.4s ease, height 0.4s ease; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; } @@ -433,6 +437,29 @@ const testimonials = [ } container.innerHTML = html; + + // Set a fixed height for all testimonial cards after they've been created + setTimeout(setMaxTestimonialHeight, 50); + } + + // Calculate and set the maximum height for all testimonial cards + function setMaxTestimonialHeight() { + const cards = document.querySelectorAll('.testimonial-card'); + if (!cards.length) return; + + // Find the maximum height among all cards + let maxHeight = 0; + cards.forEach(card => { + // Temporarily remove any set height to get the natural height + card.style.height = 'auto'; + const height = card.offsetHeight; + maxHeight = Math.max(maxHeight, height); + }); + + // Set the max height on all cards + cards.forEach(card => { + card.style.height = `${maxHeight}px`; + }); } // Function to update a single testimonial @@ -485,11 +512,17 @@ const testimonials = [ // Update content when fully faded out setTimeout(() => { + // Keep the current height during the content swap + const currentHeight = testimonialElement.style.height; + testimonialElement.innerHTML = `
${newTestimonial.text}
`; + // Ensure the height remains consistent + testimonialElement.style.height = currentHeight; + // Start fade in setTimeout(() => { testimonialElement.style.opacity = "1";