<section class="bg-scarlet-100 text-gray-500">
    <div class="max-w-screen-xl mx-auto md:grid md:grid-cols-2 md:px-6 lg:px-8">
        <div class="py-12 px-4 sm:px-6 md:flex md:flex-col md:py-16 md:pl-0 md:pr-10 md:border-r md:border-scarlet-300 lg:pr-16">
            <div class="md:shrink-0">
                <a href="https://laravel-livewire.com">
                    <img class="h-10 enlarge" src="{{ asset('/images/livewire.svg') }}" alt="Livewire"/>
                </a>
            </div>
            <blockquote class="mt-8 md:flex-grow md:flex md:flex-col">
                <div class="relative text-lg leading-7 font-medium md:flex-grow">
                    <svg class="absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-scarlet-200" fill="currentColor" viewBox="0 0 32 32">
                        <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
                    </svg>
                    <p class="relative">
                        Finally, Blade gets a comprehensive UI Kit that works with all the things we’re already using!
                    </p>
                </div>

                <footer class="mt-8">
                    <div class="flex">
                        <div class="shrink-0 inline-flex rounded-full border-2 border-white">
                            <a href="https://twitter.com/calebporzio">
                                <x-avatar search="calebporzio" provider="github" class="h-12 w-12 rounded-full enlarge" />
                            </a>
                        </div>
                        <div class="ml-4">
                            <div class="text-base leading-6 font-medium">
                                <x-a href="https://twitter.com/calebporzio">
                                    Caleb Porzio
                                </x-a>
                            </div>
                            <div class="text-base leading-6 font-medium">
                                Creator, Livewire & Alpine.js
                            </div>
                        </div>
                    </div>
                </footer>
            </blockquote>
        </div>
        <div class="py-12 px-4 border-t-2 border-scarlet-300 sm:px-6 md:py-16 md:pr-0 md:pl-10 md:border-t-0 md:border-l lg:pl-16">
            <div class="md:shrink-0">
                <a href="https://laravel-news.com/category/podcast" class="text-red-500 flex items-center hover:text-red-600">
                    <svg class="inline-block h-10 enlarge rounded-sm" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 183 174" style="enable-background:new 0 0 183 174;" xml:space="preserve" fill="currentColor">
<g>
    <path class="st0" d="M183-4H0c0,0,0,0,0,0v173.2c0,2.6,2.1,4.8,4.8,4.8h173.5c2.6,0,4.7-2.1,4.7-4.7L183-4C183-4,183-4,183-4z M87.9,129.1C87.9,129.2,87.9,129.2,87.9,129.1c0,1-0.8,1.8-1.8,1.8H48.2h0c0,0,0,0,0,0c-2.5,0-4.5-2-4.5-4.5V44.9c0,0,0-0.1,0-0.1 c0-1,0.8-1.7,1.8-1.7h6.8c0,0,0.1,0,0.1,0c1,0,1.7,0.8,1.7,1.8v76.3h32c0,0,0.1,0,0.1,0c1,0,1.7,0.8,1.7,1.8V129.1z M141,128.3  c0,0,0,0.1,0,0.1c0,1.4-1.2,2.6-2.7,2.5h-7.6c-0.7,0-1.3-0.1-1.9-0.4c-0.6-0.3-1.1-0.8-1.4-1.3L87.5,59.5v48.8c0,0,0,0.1,0,0.1 c0,1-0.8,1.7-1.8,1.7h-6.3c0,0-0.1,0-0.1,0c-1,0-1.7-0.8-1.7-1.8V45.7c0,0,0-0.1,0-0.1c0-1.4,1.2-2.6,2.7-2.5h7.5 c0.7,0,1.3,0.1,1.9,0.4c0.6,0.3,1.1,0.8,1.4,1.3l40,69.7V44.9c0,0,0-0.1,0-0.1c0-1,0.8-1.7,1.8-1.7h6.3c0,0,0.1,0,0.1,0 c1,0,1.7,0.8,1.7,1.8V128.3z"></path>
</g>
</svg>
                    <h4 class="font-bold text-gray-600 mb-0 ml-4 tracking-tight">Laravel News</h4>
                </a>
            </div>
            <blockquote class="mt-8 md:flex-grow md:flex md:flex-col">
                <div class="relative text-lg leading-7 font-medium text-gray-500 md:flex-grow">
                    <svg class="absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-scarlet-200" fill="currentColor" viewBox="0 0 32 32">
                        <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
                    </svg>
                    <p class="relative">
                        Blade UI kit is a great set of renderless components for Laravel that let you focus on the parts of your application that are unique, rather than endless boilerplate and expanding snippets.
                    </p>
                </div>
                <footer class="mt-8">
                    <div class="flex">
                        <div class="shrink-0 inline-flex rounded-full border-2 border-white">
                            <a href="https://twitter.com/michaeldyrynda">
                                <x-avatar search="michaeldyrynda" provider="github" class="h-12 w-12 rounded-full enlarge" />
                            </a>
                        </div>
                        <div class="ml-4">
                            <div class="text-base leading-6 font-medium">
                                <x-a href="https://twitter.com/michaeldyrynda">
                                    Michael Dyrynda
                                </x-a>
                            </div>
                            <div class="text-base leading-6 font-medium">
                                Co-host, Laravel News Podcast
                            </div>
                        </div>
                    </div>
                </footer>
            </blockquote>
        </div>
    </div>
</section>
