<section class="py-12 bg-white overflow-hidden md:py-20 lg:py-24">
    <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
        <svg class="absolute top-full right-full transform translate-x-1/3 -translate-y-1/4 lg:translate-x-1/2 xl:-translate-y-1/2" width="404" height="404" fill="none" viewBox="0 0 404 404" role="img" aria-labelledby="svg-workcation">
            <title id="svg-workcation">Workcation</title>
            <defs>
                <pattern id="ad119f34-7694-4c31-947f-5c9d249b21f3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                    <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
                </pattern>
            </defs>
            <rect width="404" height="404" fill="url(#ad119f34-7694-4c31-947f-5c9d249b21f3)" />
        </svg>

        <div class="relative">
            <x-p class="text-center">
                <img class="inline-block h-20 w-auto" src="{{ asset('/images/logo.svg') }}" alt="" />
            </x-p>
            <blockquote class="mt-8">
                <div class="max-w-2xl mx-auto text-center text-2xl leading-9 font-medium text-gray-900">
                    <p>
                        &ldquo;I wanted to make using Blade components as simple as possible. That's why I built Blade UI Kit.&rdquo;
                    </p>
                </div>
                <footer class="mt-8">
                    <div class="md:flex md:items-center md:justify-center">
                        <div class="md:shrink-0">
                            <a href="https://twitter.com/driesvints">
                                <x-avatar search="driesvints" provider="github" class="mx-auto h-10 w-10 rounded-full enlarge" />
                            </a>
                        </div>
                        <div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
                            <div class="text-base leading-6 font-medium text-gray-900">
                                <x-a class="font-semibold" href="https://twitter.com/driesvints">
                                    Dries Vints
                                </x-a>
                            </div>

                            <svg class="hidden md:block mx-1 h-5 w-5 text-scarlet-600" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M11 0h3L9 20H6l5-20z" />
                            </svg>

                            <div class="text-base leading-6 font-medium text-gray-500">
                                Developer at Laravel
                            </div>
                        </div>
                    </div>
                </footer>
            </blockquote>
        </div>
    </div>
</section>
