hackatime/app/views/users/wakatime_setup_step_2.html.erb

<div class="min-h-screen text-white">
  <div class="max-w-6xl mx-auto p-4">
    <div class="text-center mb-4">
      <h1 class="text-4xl font-bold text-primary mb-2">Hackatime Setup</h1>
      <div class="flex items-center justify-center gap-2 mb-4">
        <div class="w-8 h-8 bg-green rounded-full flex items-center justify-center text-sm font-bold">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <div class="w-16 h-1 bg-green"></div>
        <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-sm font-bold">2</div>
        <div class="w-16 h-1 bg-darkless"></div>
        <div class="w-8 h-8 bg-darkless rounded-full flex items-center justify-center text-sm">3</div>
        <div class="w-16 h-1 bg-darkless"></div>
        <div class="w-8 h-8 bg-darkless rounded-full flex items-center justify-center text-sm">4</div>
      </div>
    </div>

    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold mb-4">What editor do you use?</h2>
      <p class="text-secondary text-lg"><em>Let's setup one for now, you can setup more later!</em></p>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-4xl mx-auto">
      <%= link_to my_wakatime_setup_step_3_path(editor: "vscode"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/vs-code-128.png" alt="VS Code" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">VS Code</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "vim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/vim-128.png" alt="Vim" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">Vim</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "neovim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/neovim-128.png" alt="Neovim" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">Neovim</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "emacs"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/emacs-128.png" alt="Emacs" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">Emacs</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "pycharm"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/pycharm-128.png" alt="PyCharm" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">PyCharm</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "sublime"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/sublime-text-128.png" alt="Sublime" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">Sublime Text</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "unity"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/unity-128.png" alt="Unity" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">Unity</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "godot"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <img src="/images/editor-icons/godot-128.png" alt="Godot" class="w-16 h-16 object-contain">
        </div>
        <div>
          <h3 class="font-bold text-lg">Godot</h3>
        </div>
      <% end %>

      <%= link_to my_wakatime_setup_step_3_path(editor: "other"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full col-span-2 md:col-span-3 lg:col-span-4" do %>
        <div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
          <div class="text-4xl">🔧</div>
        </div>
        <div>
          <h3 class="font-bold text-lg">Other Editor</h3>
          <p class="text-secondary text-sm">Hackatime supports 70+ editors</p>
        </div>
      <% end %>
    </div>
  </div>
</div>