---
sliderConfig: "{ padding: { left: '64px', right: '64px', }, breakpoints: { 768: { padding: { left: '0px', right: '0px', }, }, }, gap: '128px' }"
---

<div class="bg-primary-100 dark:bg-dark-800 py-10 lg:py-16">
    <div class="container">
        <div id="testimonial-carousel-4" x-ignore ax-load="visible"
            x-data="slider('testimonial-carousel-4', {{ view:sliderConfig }})" class="splide">
            <div class="splide__track">
                <div class="splide__list">
                    {{ testimonials }}
                        <div class="splide__slide">
                            <div class="flex lg:flex-row flex-col max-lg:items-center gap-10 py-10 lg:py-16">
                                <div class="lg:w-2/3 max-lg:ml-16 relative">
                                    {{ svg src="quote" class="absolute size-20 -top-11 -left-14 fill-dark-900 dark:fill-white opacity-20" }}
                                    {{ if rich_text }}
                                        <x-richtext size="xl" color="dark">{{ rich_text }}</x-richtext>
                                    {{ /if }}
                                    {{ if has_author }}
                                        <div class="mt-12">
                                            <x-heading class="!text-lg font-bold">
                                                {{ full_name }}
                                            </x-heading>
                                            {{ if position }}
                                                <x-paragraph size="sm" color="gray">{{ position }}</x-paragraph>
                                            {{ /if }}
                                        </div>
                                    {{ /if }}
                                </div>
                                {{ if image }}
                                    <div class="lg:w-1/3 p-5">
                                        <div
                                            class="ring-[20px] ring-primary-300 dark:ring-dark-600 inline-block rounded-full relative">
                                            {{# Purple Circle #}}
                                            <div
                                                class="size-28 bg-primary-300 dark:bg-dark-600 rounded-full absolute right-0 top-0 translate-x-1/4 -translate-y-1/4 shadow-xl">
                                            </div>
                                            <div
                                                class="size-80 md:size-72 rounded-full ring-4 ring-white dark:ring-dark-900 relative z-10 overflow-hidden">
                                                {{ partial:components/picture cover="true" }}
                                            </div>
                                        </div>
                                    </div>
                                {{ /if }}
                            </div>
                        </div>
                    {{ /testimonials }}
                </div>
            </div>
        </div>
    </div>
</div>