<% provide(:title, @user.name) %>

<div class="container mx-auto px-4 py-8">
  <aside class="max-w-2xl mx-auto">
    <section class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <!-- 头像和用户名布局 -->
        <h1 class="flex flex-col sm:flex-row items-center gap-6">
          <!-- 头像添加装饰效果 -->
          <div class="relative">
            <%= gravatar_for @user, size: 120, class: "rounded-full ring-2 ring-primary ring-offset-2 hover:ring-4 transition-all duration-300" %>
            <div class="absolute inset-0 rounded-full bg-primary/10 animate-pulse"></div>
          </div>

          <!-- 用户名样式 -->
          <div class="text-center sm:text-left">
            <span class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              <%= @user.name %>
            </span>
          </div>
        </h1>
      </div>
    </section>
  </aside>
</div>