chore: add announcement blog (#383)

Author: AmirSa12

README.md

@@ -1,5 +1,7 @@
 <p align="center"><img src="https://github.com/user-attachments/assets/314d5112-f67f-4758-82bf-7b0c19c01ba6" /></p>
 
+**[Cloudflare is now backing pkg.pr.new's data infrastructure!](https://blog.stackblitz.com/posts/cloudflare-backing-pkg-pr-new-data-infrastructure/)**
+
 # pkg.pr.new <span><img src="https://emoji.slack-edge.com/TFHDVN56F/stackblitz/fd010078dcccebca.png" width="30" /></span>
 
 > We call it "Continuous Releases" too.

packages/app/app/components/AppFooter.vue

@@ -1,23 +1,48 @@
 <template>
   <footer
-    class="text-center p-12 opacity-50 hover:opacity-100 focus-within:opacity-100 flex flex-col items-center gap-3 text-xs"
+    class="text-center p-12 opacity-100 flex flex-col items-center gap-3 text-xs"
   >
-    <a href="https://stackblitz.com/" target="_blank">
-      <img
-        src="/stackblitz.svg"
-        alt="StackBlitz"
-        width="117"
-        height="24"
-        class="not-dark:hidden"
-      />
-      <img
-        src="/stackblitz-black.svg"
-        alt="StackBlitz"
-        width="117"
-        height="24"
-        class="dark:hidden"
-      />
-    </a>
+    <div class="flex gap-6 items-center justify-center">
+      <div class="flex items-center">
+        <a
+          href="https://blog.stackblitz.com/posts/pkg-pr-new/"
+          target="_blank"
+          class="block"
+        >
+          <img
+            src="/stackblitz.svg"
+            alt="StackBlitz"
+            width="117"
+            height="28"
+            class="not-dark:hidden"
+          />
+          <img
+            src="/stackblitz-black.svg"
+            alt="StackBlitz"
+            width="117"
+            height="28"
+            class="dark:hidden"
+          />
+        </a>
+      </div>
+      <div class="text-xs opacity-70 flex items-center">+</div>
+      <div class="flex items-center">
+        <a
+          href="https://blog.stackblitz.com/posts/cloudflare-backing-pkg-pr-new-data-infrastructure/"
+          target="_blank"
+          class="block"
+        >
+          <img
+            src="/cloudflare.svg"
+            alt="Cloudflare"
+            width="120"
+            height="24"
+            class="pb-1"
+          />
+        </a>
+      </div>
+    </div>
+
     <div class="flex gap-3 items-center">
       <div>
         Built in
@@ -29,6 +54,15 @@
         >
       </div>
       <UIcon name="ph-dot" />
+      <div>
+        <a
+          href="https://blog.stackblitz.com/posts/cloudflare-backing-pkg-pr-new-data-infrastructure/"
+          target="_blank"
+          class="text-primary"
+          >Backed by Cloudflare</a
+        >
+      </div>
+      <UIcon name="ph-dot" />
       <div>
         UI by
         <a href="https://github.com/Akryum" target="_blank" class="text-primary"

packages/app/app/pages/index.vue

@@ -15,6 +15,28 @@ function scrollToGettingStarted() {
 
 <template>
   <div>
+    <div class="flex justify-center pt-4 pb-2">
+      <a
+        href="https://blog.stackblitz.com/posts/cloudflare-backing-pkg-pr-new-data-infrastructure/"
+        target="_blank"
+        class="bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-white rounded-full px-5 py-2.5 block border border-gray-200 dark:border-gray-700"
+      >
+        <div class="flex items-center gap-2 text-sm">
+          <span><strong>pkg.pr.new</strong> is now backed by</span>
+          <img
+            src="/cloudflare-icon.svg"
+            alt="Cloudflare"
+            width="18"
+            height="18"
+            class="inline-block"
+          />
+          <span class="font-semibold text-orange-500 dark:text-orange-400"
+            >Cloudflare</span
+          >
+        </div>
+      </a>
+    </div>
+
     <div
       class="my-container flex flex-col items-center gap-4 md:gap-12 min-h-[calc(100vh-80px)]"
     >