{{ define "timeline/fragments/goodfirstissues" }}
  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm mb-4">
      <div class="px-6 py-4">
          <div class="flex flex-col md:flex-row items-center gap-4">
              <div class="flex-1">
                  <div class="flex items-center gap-2 mb-2">
                      <span class="text-sm text-gray-500 dark:text-gray-400">Oct&ndash;Nov 2025</span>
                  </div>
                  <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                      Get your first PR merged and earn Dolly stickers! 🎉
                  </h4>
                  <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">
                      Merge a PR for "good first issue" (make this a label) a and get Tangled stickers shipped free.
                  </p>
                  <a href="/goodfirstissues"
                     class="btn my-2 gap-2">
                     browse issues
                      {{ i "arrow-right" "size-4" }}
                  </a>
              </div>
              <div class="flex-shrink-0">
                  <div class="flex items-center gap-1 p-3 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded border border-purple-200 dark:border-purple-700">
                      {{ template "fragments/dolly/logo" "w-6 h-6" }}
                      {{ template "fragments/dolly/silhouette" }}
                      <span class="text-xs text-purple-600 dark:text-purple-400 font-medium">Free stickers!</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
{{ end }}