Price section for 3 different tiers

<section class="bg-[#ffffff] border-slate-100 border-t pt-24 pr-6 pb-24 pl-6">
    <div class="max-w-7xl mr-auto ml-auto">
        <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="text-4xl font-semibold text-slate-900 tracking-tight mb-4 font-dm-sans">Simple, transparent
                pricing</h2>
            <p class="text-lg text-slate-500 font-dm-sans tracking-tight">Start for free, scale as you grow.</p>
        </div>

        <div class="flex flex-col gap-24 max-w-7xl mx-auto px-4">
            <!-- Pricing Cards Grid -->
            <div class="grid lg:grid-cols-3 gap-6 items-stretch">

                <!-- Starter Plan -->
                <div
                    class="group relative bg-white rounded-[40px] p-10 min-h-[520px] flex flex-col justify-end overflow-hidden border border-slate-100 shadow-[0_2px_40px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_60px_rgba(0,0,0,0.06)] transition-all duration-500">
                    <!-- Gradient Mesh -->
                    <div
                        class="absolute -top-[20%] -right-[20%] w-[120%] h-[120%] bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-yellow-200 via-orange-100 to-transparent blur-[80px] opacity-60 mix-blend-multiply pointer-events-none">
                    </div>
                    <div
                        class="absolute top-0 right-0 w-[300px] h-[300px] bg-gradient-to-br from-yellow-300/40 to-transparent blur-[60px] opacity-50 pointer-events-none">
                    </div>

                    <!-- Content -->
                    <div class="relative z-10 mb-8">
                        <h3 class="text-[28px] font-medium text-slate-900 font-dm-sans tracking-tight mb-12">Starter
                        </h3>

                        <div class="flex flex-col gap-1 mb-8">
                            <span class="text-[13px] font-mono text-slate-500">Starting at</span>
                            <div class="flex items-baseline gap-1">
                                <span class="text-7xl font-medium text-slate-900 tracking-tighter font-dm-sans">$0</span>
                                <span class="text-lg text-slate-500 font-normal font-dm-sans">/month</span>
                            </div>
                        </div>

                        <p class="font-mono text-[13px] text-slate-600 leading-relaxed max-w-[240px]">
                            Essential task management for individuals and side projects.
                        </p>
                    </div>

                    <!-- Action Button -->
                    <button class="absolute bottom-10 right-10 w-14 h-14 bg-black rounded-full flex items-center justify-center text-white transition-all duration-300 group-hover:scale-110 group-hover:rotate-[-45deg] shadow-lg">
                <svg 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-arrow-right w-6 h-6"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
            </button>
                </div>

                <!-- Pro Plan -->
                <div
                    class="group relative bg-white rounded-[40px] p-10 min-h-[520px] flex flex-col justify-end overflow-hidden border border-slate-100 shadow-[0_2px_40px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_60px_rgba(0,0,0,0.06)] transition-all duration-500">
                    <!-- Gradient Mesh -->
                    <div
                        class="absolute -top-[20%] -right-[20%] w-[120%] h-[120%] bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-300 via-purple-200 to-transparent blur-[80px] opacity-60 mix-blend-multiply pointer-events-none">
                    </div>
                    <div
                        class="absolute top-0 right-0 w-[300px] h-[300px] bg-gradient-to-br from-purple-400/30 to-transparent blur-[60px] opacity-50 pointer-events-none">
                    </div>

                    <!-- Content -->
                    <div class="relative z-10 mb-8">
                        <div class="flex items-center gap-3 mb-12">
                            <h3 class="text-[28px] font-medium text-slate-900 font-dm-sans tracking-tight">Pro</h3>
                            <span class="bg-black text-white text-[10px] font-bold px-2 py-1 rounded-md tracking-widest font-dm-sans uppercase">PRO</span>
                        </div>

                        <div class="flex flex-col gap-1 mb-8">
                            <span class="text-[13px] font-mono text-slate-500">Starting at</span>
                            <div class="flex items-baseline gap-1">
                                <span class="text-7xl font-medium text-slate-900 tracking-tighter font-dm-sans">$12</span>
                                <span class="text-lg text-slate-500 font-normal font-dm-sans">/month</span>
                            </div>
                        </div>

                        <p class="font-mono text-[13px] text-slate-600 leading-relaxed max-w-[260px]">
                            Advanced workflows and automation for growing startup teams.
                        </p>
                    </div>

                    <!-- Action Button -->
                    <button class="absolute bottom-10 right-10 w-14 h-14 bg-black rounded-full flex items-center justify-center text-white transition-all duration-300 group-hover:scale-110 group-hover:rotate-[-45deg] shadow-lg">
                <svg 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-arrow-right w-6 h-6"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
            </button>
                </div>

                <!-- Business Plan -->
                <div
                    class="group relative bg-white rounded-[40px] p-10 min-h-[520px] flex flex-col justify-end overflow-hidden border border-slate-100 shadow-[0_2px_40px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_60px_rgba(0,0,0,0.06)] transition-all duration-500">
                    <!-- Gradient Mesh -->
                    <div
                        class="absolute -top-[20%] -right-[20%] w-[120%] h-[120%] bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-blue-400 via-indigo-300 to-transparent blur-[80px] opacity-50 mix-blend-multiply pointer-events-none">
                    </div>
                    <div
                        class="absolute top-0 right-0 w-[300px] h-[300px] bg-gradient-to-br from-blue-500/30 to-transparent blur-[60px] opacity-50 pointer-events-none">
                    </div>

                    <!-- Content -->
                    <div class="relative z-10 mb-8">
                        <h3 class="text-[28px] font-medium text-slate-900 font-dm-sans tracking-tight mb-12">Business
                        </h3>

                        <div class="flex flex-col gap-1 mb-8">
                            <span class="text-[13px] font-mono text-slate-500">Starting at</span>
                            <div class="flex items-baseline gap-1">
                                <span class="text-7xl font-medium text-slate-900 tracking-tighter font-dm-sans">$24</span>
                                <span class="text-lg text-slate-500 font-normal font-dm-sans">/month</span>
                            </div>
                        </div>

                        <p class="font-mono text-[13px] text-slate-600 leading-relaxed max-w-[240px]">
                            Enterprise-grade security and control for scaling organizations.
                        </p>
                    </div>

                    <!-- Action Button -->
                    <button class="absolute bottom-10 right-10 w-14 h-14 bg-black rounded-full flex items-center justify-center text-white transition-all duration-300 group-hover:scale-110 group-hover:rotate-[-45deg] shadow-lg">
                <svg 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-arrow-right w-6 h-6"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
            </button>
                </div>
            </div>

            <!-- Feature Comparison Table -->
            <div class="w-full max-w-5xl mx-auto">
                <div class="mb-10 text-center">
                    <h4 class="text-3xl font-medium text-slate-900 font-dm-sans tracking-tight">Feature Comparison</h4>
                </div>

                <div class="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead class="">
                                <tr class="bg-slate-50/50 border-b border-slate-200">
                                    <th class="py-5 px-6 text-sm font-semibold text-slate-900 font-dm-sans w-[40%]">
                                        Features</th>
                                    <th
                                        class="py-5 px-6 text-sm font-semibold text-slate-900 font-dm-sans w-[20%] text-center">
                                        Starter</th>
                                    <th
                                        class="py-5 px-6 text-sm font-semibold text-slate-900 font-dm-sans w-[20%] text-center">
                                        Pro</th>
                                    <th
                                        class="py-5 px-6 text-sm font-semibold text-slate-900 font-dm-sans w-[20%] text-center">
                                        Business</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                <!-- Usage -->
                                <tr class="bg-slate-50/30">
                                    <td class="py-3 px-6 text-xs font-bold text-slate-500 uppercase tracking-wider font-dm-sans"
                                        colspan="4">Usage Limits</td>
                                </tr>
                                <tr class="">
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">Team Members
                                    </td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">Up to 5</td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">Unlimited</td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">Unlimited</td>
                                </tr>
                                <tr>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">Active
                                        Projects</td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">3</td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">Unlimited</td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">Unlimited</td>
                                </tr>
                                <tr>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">File Storage
                                    </td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">100 MB</td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">10 GB</td>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-mono text-center">1 TB</td>
                                </tr>

                                <!-- Core Features -->
                                <tr class="bg-slate-50/30">
                                    <td class="py-3 px-6 text-xs font-bold text-slate-500 uppercase tracking-wider font-dm-sans"
                                        colspan="4">Productivity</td>
                                </tr>
                                <tr>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">Kanban Boards
                                    </td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                </tr>
                                <tr>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">Sprint
                                        Planning</td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="w-4 h-0.5 bg-slate-200 mx-auto"></div>
                                    </td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                </tr>
                                <tr>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">Custom
                                        Workflows</td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="w-4 h-0.5 bg-slate-200 mx-auto"></div>
                                    </td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                </tr>
                                <tr>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">GitHub
                                        Integration</td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="w-4 h-0.5 bg-slate-200 mx-auto"></div>
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <span class="text-xs font-mono text-slate-500">Read-only</span>
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <span class="text-xs font-mono text-slate-500">Full Sync</span>
                                    </td>
                                </tr>

                                <!-- Security & Admin -->
                                <tr class="bg-slate-50/30">
                                    <td class="py-3 px-6 text-xs font-bold text-slate-500 uppercase tracking-wider font-dm-sans"
                                        colspan="4">Security &amp; Support</td>
                                </tr>
                                <tr>
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">SAML SSO</td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="w-4 h-0.5 bg-slate-200 mx-auto"></div>
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="w-4 h-0.5 bg-slate-200 mx-auto"></div>
                                    </td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                </tr>
                                <tr class="">
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">Audit Logs
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="w-4 h-0.5 bg-slate-200 mx-auto"></div>
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="w-4 h-0.5 bg-slate-200 mx-auto"></div>
                                    </td>
                                    <td class="py-4 px-6 text-center"><svg 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-check w-4 h-4 mx-auto text-slate-900">
                                            <path d="M20 6 9 17l-5-5"></path>
                                        </svg></td>
                                </tr>
                                <tr class="">
                                    <td class="py-4 px-6 text-sm text-slate-600 font-medium font-dm-sans">Support SLA
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <span class="text-xs font-mono text-slate-500">Community</span>
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <span class="text-xs font-mono text-slate-500">Standard</span>
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <span class="text-xs font-mono text-slate-500">Priority (24h)</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>