 }

      .highlight-item {
          opacity: 0;
      }
  </style>
{% endblock %}
{% block content %}
  <div class="container mx-auto px-4 py-12" role="main">
    <div class="mb-16 text-center animate-fade-in opacity-0"
         style="animation-delay: 0.2s;
                animation-fill-mode: forwards">
      <h1 class="text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 animate-gradient">
        Community Features
      </h1>
      <p class="text-gray-600