<div class="bg-white">
    <div class="bg-theme-brand -mt-6 px-8 md:px-12 lg:px-28 py-6 md:py-10 lg:py-24">
        @if ($posts->isEmpty())
            <p class="text-theme-background">
                {{ __('No page available in your language at the moment') }}
            </p>
        @else
            @foreach ($posts as $post)
                <div class="relative m-0 p-20">

                    <!-- Title CTA -->
                    @if (isset($post->translations[0]) && isset($post->translations[0]->title))
                        <div class="absolute inset-0 flex items-center justify-center">
                            <h2 class="text-2xl lg:text-3xl font-semibold text-theme-background">
                                {{ $post->translations[0]->title }}
                            </h2>
                        </div>
                    @endif
                </div>

                <!--  Content CTA -->
                @if (isset($post->translations[0]) && isset($post->translations[0]->content))
                    <div
                         class="content dark:text-theme-primary mb-6 max-w-7xl mx-auto text-left text-xl lg:text-2xl font-normal leading-relaxed lg:!leading-10 text-theme-background">
                        {!! \App\Helpers\StringHelper::sanitizeHtml($post->translations[0]->content) !!}
                    </div>
                @endif

    </div>

    <!-- Call carousel -->
    <div class="py-8">
        @livewire('welcome-page.call-card-carousel', ['random' => false])
    </div>

    <div>
        <!-- CTA / Excerpt -->
        @if (isset($post->translations[0]) && isset($post->translations[0]->excerpt))
            <div class="post mx-auto my-0 max-w-4xl bg-white px-8 py-20">
                <div class="flex flex-col md:flex-row items-center justify-center md:gap-12 lg:gap-20">
                    <!-- Content -->
                    <div class="text-theme-primary">
                        <div class="content text-center text-base leading-loose">
                            {{ $post->translations[0]->excerpt }}
                        </div>
                    </div>

                    <!-- Button -->
                    <div class="flex items-center justify-center shrink-0">
                        <x-jetstream.button class="leading-tight !text-lg sm:!text-xl px-12 py-1 sm:px-12 sm:py-4 md:px-10 md:py-1 mt-12 mb-4 sm:mt-6 sm:mb-2 md:my-4" wire:click.prevent="register">
                            {{ __('Register now') }}
                        </x-jetstream.button>
                    </div>
                </div>
            </div>
        @endif
        @endforeach
        @endif
    </div>
