Component Wizard v1

<div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
        <h1 class="text-3xl font-bold text-center mb-4">Welcome to Our Business</h1>
        <p class="text-center text-gray-700 mb-6">Your success is our priority. We provide innovative solutions tailored to your needs.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 rounded-lg shadow">
                <h2 class="text-xl font-semibold">Our Services</h2>
                <ul class="list-disc list-inside mt-2">
                    <li>Consulting</li>
                    <li>Marketing Solutions</li>
                    <li>Financial Advice</li>
                </ul>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg shadow">
                <h2 class="text-xl font-semibold">Contact Us</h2>
                <p class="mt-2">Email: info@business.com</p>
                <p>Phone: (123) 456-7890</p>
            </div>
        </div>
        <div class="text-center mt-6">
            <a href="#" class="inline-block px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Learn More</a>
        </div>
    </div>
</div>

<div class="bg-white shadow-md rounded-lg p-6 flex items-center">
    <div class="flex-shrink-0">
        <svg class="h-10 w-10 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 1 0 8 8A8.001 8.001 0 0 0 10 2zm0 14a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6z"/>
        </svg>
    </div>
    <div class="ml-4">
        <h2 class="text-2xl font-semibold text-gray-800">Statistic Title</h2>
        <p class="text-3xl font-bold text-gray-900">123</p>
    </div>
</div>

<div class="relative w-full max-w-xl mx-auto">
    <div class="flex overflow-hidden">
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image1.jpg" alt="Image 1" class="w-full h-auto">
        </div>
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image2.jpg" alt="Image 2" class="w-full h-auto">
        </div>
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image3.jpg" alt="Image 3" class="w-full h-auto">
        </div>
    </div>
    <button class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
        &#10094;
    </button>
    <button class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
        &#10095;
    </button>
</div>