update readme and footer

Author: AmirSa12

README.md

@@ -4,6 +4,8 @@
 
 > We call it "Continuous Releases" too.
 
+🚀 **[Cloudflare is now backing pkg.pr.new's data infrastructure!](https://blog.stackblitz.com/posts/cloudflare-backing-pkg-pr-new-data-infrastructure/)**
+
 With pkg.pr.new, each of your commits and pull requests will trigger an instant preview release without publishing anything to NPM. This enables users to access features and bug-fixes without the need to wait for release cycles using npm or pull request merges.
 
 - 🚀 Instant Builds

packages/app/app/components/AppFooter.vue

@@ -2,22 +2,39 @@
   <footer
     class="text-center p-12 opacity-50 hover:opacity-100 focus-within: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://stackblitz.com/" 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://cloudflare.com/" 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 +46,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,29 @@ 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-900 dark:bg-gray-800 text-white rounded-full px-6 py-3 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 block relative overflow-hidden before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2 before:w-0 before:h-0.5 before:bg-gradient-to-r before:from-orange-400 before:to-blue-400 before:rounded-full before:transition-all before:duration-500 hover:before:w-16"
+      >
+        <div class="flex items-center gap-3 text-sm">
+          <div class="flex items-center gap-2">
+            <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-400">Cloudflare</span>
+          </div>
+          <UIcon name="ph-arrow-right" class="text-gray-400" />
+        </div>
+      </a>
+    </div>
+
     <div
       class="my-container flex flex-col items-center gap-4 md:gap-12 min-h-[calc(100vh-80px)]"
     >