Component Wizard v1

<div class="max-w-2xl mx-auto p-6 bg-white shadow-md rounded-lg">
    <h1 class="text-2xl font-semibold text-center mb-4">{{ title }}</h1>
    <p class="text-gray-700 text-center mb-4">{{ headerText }}</p>
    
    <div class="mb-6">
        <p class="text-gray-600">
            Type: {{ type }}<br>
            Other Type: {{ otherType }}<br>
            Send Date: {{ sendDate.toLocaleDateString() }}
        </p>
    </div>

    <p class="text-gray-700 text-center mb-4">{{ footerText }}</p>
    
    <div class="text-center">
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Send</button>
    </div>
</div>

<div class="flex flex-col items-center">
    <div class="relative mb-10">
        <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-pink-200 via-purple-200 to-blue-200"></div>
        <div class="flex items-center mb-4">
            <div class="h-8 w-8 bg-white rounded-full border-4 border-gradient-to-b from-pink-200 via-purple-200 to-blue-200 flex items-center justify-center">
                <span class="text-xs text-gray-700">1</span>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-800">Step 1</h3>
                <p class="text-gray-600">Description of the first step in the timeline.</p>
            </div>
        </div>
    </div>
    <div class="relative mb-10">
        <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-pink-200 via-purple-200 to-blue-200"></div>
        <div class="flex items-center mb-4">
            <div class="h-8 w-8 bg-white rounded-full border-4 border-gradient-to-b from-pink-200 via-purple-200 to-blue-200 flex items-center justify-center">
                <span class="text-xs text-gray-700">2</span>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-800">Step 2</h3>
                <p class="text-gray-600">Description of the second step in the timeline.</p>
            </div>
        </div>
    </div>
    <div class="relative mb-10">
        <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-pink-200 via-purple-200 to-blue-200"></div>
        <div class="flex items-center mb-4">
            <div class="h-8 w-8 bg-white rounded-full border-4 border-gradient-to-b from-pink-200 via-purple-200 to-blue-200 flex items-center justify-center">
                <span class="text-xs text-gray-700">3</span>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-800">Step 3</h3>
                <p class="text-gray-600">Description of the third step in the timeline.</p>
            </div>
        </div>
    </div>
</div>

<button class="relative inline-flex items-center justify-center p-4 overflow-hidden font-medium text-white transition-all bg-transparent border-2 border-white rounded-md group">
    <span class="absolute inset-0 w-full h-full transition-transform transform scale-110 bg-gradient-to-r from-red-400 to-purple-500 group-hover:scale-125"></span>
    <span class="relative z-10">Click Me</span>
</button>