Insurance Hero Design with a Vibrant Blue Layout

<!-- Tailwind CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />

<section class="relative bg-blue-50">
    <div class="max-w-7xl mx-auto px-6 lg:px-12 py-16 lg:py-24 flex flex-col lg:flex-row items-center">
        <!-- Text Content -->
        <div class="text-center lg:text-left lg:w-1/2">
            <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl leading-tight">
                Secure Your Future with <span class="text-blue-600">Reliable Insurance</span>
            </h1>
            <p class="mt-4 text-lg text-gray-700">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac justo nec velit feugiat scelerisque.
            </p>
            <div class="mt-6 flex flex-col sm:flex-row justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="#" class="px-6 py-3 bg-blue-600 text-white rounded-lg text-lg font-medium shadow-md hover:bg-blue-700">
                    Get a Quote
                </a>
                <a href="#" class="px-6 py-3 border border-gray-300 text-gray-900 rounded-lg text-lg font-medium hover:bg-gray-100">
                    Learn More
                </a>
            </div>
        </div>

        <!-- Image Section -->
        <div class="mt-10 lg:mt-0 lg:w-1/2 flex justify-center">
            <img
                src="https://www.renewbuy.com/sites/default/files/2023-10/Asset%205%40300x%20%281%29.png"
                alt="A cartoon style illustration for an insurance company"
                class="w-full max-w-md lg:max-w-lg rounded-lg shadow-md"
            >
        </div>
    </div>
</section>