From 4fd5dfd222a46ef04ca29f9a0a39726e8bb24d10 Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Fri, 3 Oct 2025 00:48:29 +0300
Subject: [PATCH] appview/pages: initial gfi banner

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 .../timeline/fragments/goodfirstissues.html   | 31 +++++++++++++++++++
 appview/pages/templates/timeline/home.html    |  1 +
 .../pages/templates/timeline/timeline.html    |  1 +
 3 files changed, 33 insertions(+)
 create mode 100644 appview/pages/templates/timeline/fragments/goodfirstissues.html

diff --git a/appview/pages/templates/timeline/fragments/goodfirstissues.html b/appview/pages/templates/timeline/fragments/goodfirstissues.html
new file mode 100644
index 00000000..7ad60f8e
--- /dev/null
+++ b/appview/pages/templates/timeline/fragments/goodfirstissues.html
@@ -0,0 +1,31 @@
+{{ 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 }}
diff --git a/appview/pages/templates/timeline/home.html b/appview/pages/templates/timeline/home.html
index c9c3aba6..febf520e 100644
--- a/appview/pages/templates/timeline/home.html
+++ b/appview/pages/templates/timeline/home.html
@@ -12,6 +12,7 @@
   <div class="flex flex-col gap-4">
     {{ template "timeline/fragments/hero" . }}
     {{ template "features" . }}
+    {{ template "timeline/fragments/goodfirstissues" . }}
     {{ template "timeline/fragments/trending" . }}
     {{ template "timeline/fragments/timeline" . }}
     <div class="flex justify-end">
diff --git a/appview/pages/templates/timeline/timeline.html b/appview/pages/templates/timeline/timeline.html
index c957ba2a..91b8ba36 100644
--- a/appview/pages/templates/timeline/timeline.html
+++ b/appview/pages/templates/timeline/timeline.html
@@ -13,6 +13,7 @@
        {{ template "timeline/fragments/hero" . }}
      {{ end }}
 
+    {{ template "timeline/fragments/goodfirstissues" . }}
     {{ template "timeline/fragments/trending" . }}
     {{ template "timeline/fragments/timeline" . }}
 {{ end }}
-- 
2.51.2