feat(testimonials): replace static quote with 11-item Swiper carousel

Installs swiper, rewrites HomeTestimonials with loop, 6400ms autoplay,
clickable pagination bullets, and prev/next navigation. Extracts all 11
testimonials from the live site into both EN and ES content files. Styles
bullets and arrows with accent colour tokens to match the live site.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-09 16:32:00 -07:00
parent 5f4fbd5e05
commit 1eeb5a6820
7 changed files with 118 additions and 19 deletions
+42 -5
View File
@@ -6,10 +6,47 @@ const { section } = Astro.props;
<section class="section cream-section testimonial-section">
<div class="container">
<h2>{section.heading}</h2>
<blockquote>
<strong>{section.featured.author}</strong>
{section.featured.paragraphs.map((p) => <p>{p}</p>)}
</blockquote>
<div class="testimonial-dots" aria-hidden="true">• • • • • • • • • • •</div>
<div class="testimonial-swiper swiper">
<div class="swiper-wrapper">
{section.items.map(({ author, text }) => (
<div class="swiper-slide">
<blockquote>
<p class="testimonial-author">{author}</p>
<p>{text}</p>
</blockquote>
</div>
))}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<style is:global>
@import 'swiper/css/bundle';
</style>
<script>
import Swiper from 'swiper/bundle';
new Swiper('.testimonial-swiper', {
direction: 'horizontal',
loop: true,
autoplay: {
delay: 6400,
disableOnInteraction: true,
},
slidesPerView: 1,
spaceBetween: 50,
pagination: {
el: '.testimonial-swiper .swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.testimonial-swiper .swiper-button-next',
prevEl: '.testimonial-swiper .swiper-button-prev',
},
});
</script>