Leaderboard Preview Table Section

<section class="bg-[#050507] z-10 pt-12 pr-6 pb-24 pl-6 relative">
        <div class="max-w-6xl mx-auto">
            <!-- Header -->
            <div class="flex flex-col md:flex-row md:items-baseline md:gap-4 mb-8 gap-x-2 gap-y-2">
                <h2 class="md:text-4xl text-3xl font-semibold tracking-tight text-white">Leaderboard Preview</h2>
                <p class="text-slate-500 text-sm md:text-base font-medium">Top performers by COSY Score (1Y).</p>
            </div>

            <!-- Table -->
            <div class="w-full">
                <div class="overflow-x-auto">
                    <table class="border-collapse text-left w-full">
                        <thead class="">
                            <tr class="border-b mt-0 mb-0 pt-0 pb-0 border-white/10">
                                <th class="text-sm font-medium pt-4 pr-8 pb-4 text-slate-200">Fund</th>
                                <th class="text-sm font-medium pt-4 pr-4 pb-4 pl-4 text-slate-200">Region</th>
                                <th class="text-sm font-medium pt-4 pr-4 pb-4 pl-4 text-slate-200">Crypto</th>
                                <th class="text-sm font-medium pt-4 pr-4 pb-4 pl-4 text-slate-200">Options</th>
                                <th class="text-sm font-medium pt-4 pr-4 pb-4 pl-4 text-slate-200">Stocks</th>
                                <th class="text-sm font-medium pt-4 pr-4 pb-4 pl-4 text-slate-200">Yield</th>
                                <th class="text-sm font-medium pt-4 pb-4 pl-4 text-slate-200">COSY</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5 text-slate-400">
                            <!-- Row 1 -->
                            <tr class="group hover:bg-white/[0.02] transition-colors">
                                <td class="pt-4 pr-8 pb-4">
                                    <div class="text-base font-semibold text-white">Apex Options Guild</div>
                                    <div class="text-sm text-slate-500 mt-1">Apex Capital</div>
                                </td>
                                <td class="text-sm pt-4 pr-4 pb-4 pl-4">US</td>
                                <td class="py-6 px-4 text-sm">0.0</td>
                                <td class="text-sm pt-4 pr-4 pb-4 pl-4">100.0</td>
                                <td class="text-sm pt-4 pr-4 pb-4 pl-4">0.0</td>
                                <td class="text-sm pt-4 pr-4 pb-4 pl-4">0.0</td>
                                <td class="pt-4 pb-4 pl-4">
                                    <span class="font-bold text-base text-white">100.0</span>
                                </td>
                            </tr>
                            <!-- Row 2 -->
                            <tr class="group hover:bg-white/[0.02] transition-colors">
                                <td class="pt-4 pr-8 pb-4">
                                    <div class="font-semibold text-base text-white">Spiking US Blue Whale Fund</div>
                                    <div class="text-sm text-slate-500 mt-1">Spiking Team</div>
                                </td>
                                <td class="py-6 px-4 text-sm">Global</td>
                                <td class="py-6 px-4 text-sm">100.0</td>
                                <td class="py-6 px-4 text-sm">16.0</td>
                                <td class="py-6 px-4 text-sm">60.0</td>
                                <td class="py-6 px-4 text-sm">80.0</td>
                                <td class="py-6 pl-4">
                                    <span class="font-bold text-base text-white">64.0</span>
                                </td>
                            </tr>
                            <!-- Row 3 -->
                            <tr class="group hover:bg-white/[0.02] transition-colors">
                                <td class="pt-4 pr-8 pb-4">
                                    <div class="font-semibold text-base text-white">QuantNova Strategies</div>
                                    <div class="text-sm text-slate-500 mt-1">QuantNova</div>
                                </td>
                                <td class="py-6 px-4 text-sm">EU</td>
                                <td class="py-6 px-4 text-sm">30.0</td>
                                <td class="py-6 px-4 text-sm">54.0</td>
                                <td class="py-6 px-4 text-sm">20.0</td>
                                <td class="py-6 px-4 text-sm">50.0</td>
                                <td class="py-6 pl-4">
                                    <span class="font-bold text-base text-white">38.5</span>
                                </td>
                            </tr>
                            <!-- Row 4 -->
                            <tr class="group hover:bg-white/[0.02] transition-colors">
                                <td class="pt-4 pr-8 pb-4">
                                    <div class="font-semibold text-base text-white">AlphaWave Macro Fund</div>
                                    <div class="text-sm text-slate-500 mt-1">AlphaWave Partners</div>
                                </td>
                                <td class="py-6 px-4 text-sm">US</td>
                                <td class="py-6 px-4 text-sm">26.7</td>
                                <td class="py-6 px-4 text-sm">20.0</td>
                                <td class="py-6 px-4 text-sm">73.3</td>
                                <td class="py-6 px-4 text-sm">13.3</td>
                                <td class="py-6 pl-4">
                                    <span class="font-bold text-base text-white">33.3</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>