<div class=" flex flex-col justify-center items-center  h-fit w-[470px] rounded-md p-5 bg-slate-100 border border-red-500">
    <div class="w-full">
        <div class="flex justify-center w-full">

            <div class="flex justify-center items-center text-slate-100 relative bottom-8 w-[180px] h-[20px] rounded-full bg-red-500">
                Recommended
            </div>
        </div>
        <h3 class="flex items-end gap-2 font-bold text-5xl text-slate-700 ">
            <div class="flex items-center gap-2">
                <span class="line-through text-lg">$99</span>
                $59
            </div>
        <span class="text-3xl">/month</span>

        </h3>
        <ul class="mt-10 list-inside space-y-3">
            <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
                Benefit #1            
            </li>
            <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
                Benefit #2 
            </li>
            <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
                Benefit #3           
            </li>
            <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
                Benefit #4     
            </li>
            <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
                Benefit #5     
            </li>
            <li class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
                Benefit #6     
            </li>
    
        </ul>

    </div>
    <%if user_signed_in?%>
        <%= button_to "",
        class:"flex justify-center items-center gap-2 w-[420px] p-3 mt-5 group rounded-md font-semibold bg-red-500 hover:bg-red-600 text-slate-50 transition-all" do%>
            Get Locomotive
            <svg class="group-hover:rotate-180 transition-all duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-train-track"><path d="M2 17 17 2"/><path d="m2 14 8 8"/><path d="m5 11 8 8"/><path d="m8 8 8 8"/><path d="m11 5 8 8"/><path d="m14 2 8 8"/><path d="M7 22 22 7"/></svg>
        <%end%>
    <%else%>
        <%= link_to "",
        class:"flex justify-center items-center gap-2 w-[420px] p-3 mt-5 group rounded-md font-semibold bg-red-500 hover:bg-red-600 text-slate-50 transition-all" do%>
            Get Locomotive
            <svg class="group-hover:rotate-180 transition-all duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-train-track"><path d="M2 17 17 2"/><path d="m2 14 8 8"/><path d="m5 11 8 8"/><path d="m8 8 8 8"/><path d="m11 5 8 8"/><path d="m14 2 8 8"/><path d="M7 22 22 7"/></svg>
        <%end%>
    <%end%>

</div>