aperonight/app/views/pages/dashboard.html.erb

<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Hero section with metrics -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-6">Tableau de bord</h1>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative">
          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
            <%= @available_parties %>
          </div>
          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
            Événements disponibles
          </p>
          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative">
          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
            <%= @events_this_week %>
          </div>
          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
            Événements aujourd'hui
          </p>
          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
        </div>
      </div>



      <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-800 border border-neutral-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 transition-all duration-300 p-8">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative">
          <div class="text-5xl md:text-3xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
            <%= @events_this_week %>
          </div>
          <p class="text-neutral-700 dark:text-neutral-300 font-mono uppercase tracking-widest text-sm font-medium">
            Événements cette semaine
          </p>
          <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
        </div>
      </div>

    </div>
  </div>

  <!-- Today's parties -->
  <div class="card hover-lift mb-8">
    <div class="card-header">
      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Évenements du jour</h2>
    </div>
    <div class="card-body">
      <% if @today_parties.any? %>
        <ul class="space-y-4">
          <% @today_parties.each do |party| %>
            <li>
              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
                <div class="flex items-center space-x-4">
                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
                      <%= party.name %>
                    </h3>
                    <p class="text-sm text-slate-600 dark:text-slate-400">
                      <%= l(party.start_time, format: :short) %>
                    </p>
                  </div>
                </div>
              <% end %>
            </li>
          <% end %>
        </ul>
      <% else %>
        <p class="text-slate-600 dark:text-slate-400">Aucune partie aujourd'hui.</p>
      <% end %>
    </div>
  </div>

  <!-- Tomorrow's parties -->
  <div class="card hover-lift mb-8">
    <div class="card-header">
      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Évenements de demain</h2>
    </div>
    <div class="card-body">
      <% if @tomorrow_parties.any? %>
        <ul class="space-y-4">
          <% @tomorrow_parties.each do |party| %>
            <li>
              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
                <div class="flex items-center space-x-4">
                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
                      <%= party.name %>
                    </h3>
                    <p class="text-sm text-slate-600 dark:text-slate-400">
                      <%= l(party.start_time, format: :short) %>
                    </p>
                  </div>
                </div>
              <% end %>
            </li>
          <% end %>
        </ul>
      <% else %>
        <p class="text-slate-600 dark:text-slate-400">Aucune partie demain.</p>
      <% end %>
    </div>
  </div>

  <!-- Other upcoming parties with pagination -->
  <div class="card hover-lift">
    <div class="card-header">
      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Autres évenements à venir</h2>
    </div>
    <div class="card-body">
      <% if @other_parties.any? %>
        <ul class="space-y-4">
          <% @other_parties.each do |party| %>
            <li>
              <%= link_to party_path(party.slug, party), class: "group block p-4 rounded-lg border border-slate-200 dark:border-slate-700 hover:border-purple-300 dark:hover:border-purple-600 hover:shadow-md transition-all duration-200" do %>
                <div class="flex items-center space-x-4">
                  <div class="w-16 h-16 bg-slate-200 dark:bg-slate-700 rounded-lg overflow-hidden flex-shrink-0">
                    <%= image_tag party.image, alt: party.name, class: "w-full h-full object-cover" if party.image.present? %>
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-200">
                      <%= party.name %>
                    </h3>
                    <p class="text-sm text-slate-600 dark:text-slate-400">
                      <%= l(party.start_time, format: :short) %>
                    </p>
                  </div>
                </div>
              <% end %>
            </li>
          <% end %>
        </ul>

        <!-- Pagination -->
        <div class="mt-8">
          <%= paginate @other_parties %>
        </div>
      <% else %>
        <p class="text-slate-600 dark:text-slate-400">Aucune autre partie à venir.</p>
      <% end %>
    </div>
  </div>
</div>