package sections

templ Testimonials() {
	<section class="bg-zinc-800">
		<div class="py-12 md:py-20">
			<div class="max-w-6xl mx-auto px-4 sm:px-6">
				<div class="max-w-3xl mx-auto text-center pb-12 md:pb-20">
					<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-200">Loved by thousands of creatives from around the world</h2>
				</div>
			</div>
			<div class="max-w-[94rem] mx-auto space-y-6">
				<!-- Row #1 -->
				<div
					x-data="{}"
					x-init="$nextTick(() => {
                                let ul = $refs.testimonials;
                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
                                ul.nextSibling.setAttribute('aria-hidden', 'true');
                            })"
					class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
				>
					<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll group-hover:[animation-play-state:paused]">
						<!-- Item #1 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-01.jpg" width="44" height="44" alt="Testimonial 01"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Lina James</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">linaj87</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
						<!-- Item #2 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-02.jpg" width="44" height="44" alt="Testimonial 02"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Sarah Mendes</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">saramendes</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
						<!-- Item #3 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-03.jpg" width="44" height="44" alt="Testimonial 03"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Michał Rutt</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">michrutt</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
						<!-- Item #4 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-04.jpg" width="44" height="44" alt="Testimonial 04"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Mary Kahl</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">marykahl</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
					</div>
				</div>
				<!-- Row #2 -->
				<div
					x-data="{}"
					x-init="$nextTick(() => {
                                let ul = $refs.testimonials;
                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
                                ul.nextSibling.setAttribute('aria-hidden', 'true');
                            })"
					class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
				>
					<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll-inverse group-hover:[animation-play-state:paused] [animation-delay:-7.5s]">
						<!-- Item #5 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-05.jpg" width="44" height="44" alt="Testimonial 05"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Katy Dragán</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">katyd</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
						<!-- Item #6 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-06.jpg" width="44" height="44" alt="Testimonial 06"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Karl Ahmed</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">karl87</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
						<!-- Item #7 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-07.jpg" width="44" height="44" alt="Testimonial 07"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Carlotta Grech</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">carlagrech</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
						<!-- Item #8 -->
						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
							<div class="flex items-center mb-4">
								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-08.jpg" width="44" height="44" alt="Testimonial 08"/>
								<div>
									<div class="font-inter-tight font-bold text-zinc-200">Alejandra Gok</div>
									<div>
										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">alejandraIT</a>
									</div>
								</div>
							</div>
							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
}