feat: add Sayr bronze sponsor (#383)

* feat: add Sayr bronze sponsor

* fix: correct Sayr black logo URL

* update ui

README.md

@@ -123,6 +123,16 @@ We are grateful for the support of our sponsors.
   <img src="https://usesend.com/coderabbit-wordmark.png" alt="coderabbit.ai" style="width:200px;height:100px;">
 </a>
 
+### Bronze Sponsors
+
+<a href="https://sayr.io/?utm_source=useSend.com" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://cdn.doras.to/Sayr/Sayr%20white.png" />
+    <source media="(prefers-color-scheme: light)" srcset="https://cdn.doras.to/Sayr/sayr%20black.png" />
+    <img src="https://cdn.doras.to/Sayr/sayr%20black.png" alt="Sayr" style="width:180px;height:auto;">
+  </picture>
+</a>
+
 ### Other Sponsors
 
 <a href="https://doras.to/?utm_source=useSend.com" target="_blank">

apps/marketing/next.config.js

@@ -7,6 +7,13 @@ const config = {
   images: {
     // Required for static export if using images
     unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "cdn.doras.to",
+        pathname: "/Sayr/**",
+      },
+    ],
   },
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
 };

apps/marketing/src/app/page.tsx

@@ -60,11 +60,13 @@ function Hero() {
           Open source • Self-host in minutes • Free tier
         </p>
 
-        <div className="mt-12 text-center text-xs text-muted-foreground flex flex-col items-center justify-center gap-2">
+        <div className="mt-12 text-center text-xs text-muted-foreground flex flex-col items-center justify-center gap-4">
           <p className="text-xs">Proudly sponsored by</p>
+          <div className="flex flex-col items-center gap-2">
             <a
               href="https://coderabbit.ai/?utm_source=useSend.com"
               target="_blank"
+              rel="noopener noreferrer"
             >
               <Image
                 src="/code-rabbit-usesend-dark.svg"
@@ -72,24 +74,44 @@ function Hero() {
                 width={200}
                 height={100}
                 className="dark:hidden"
-              rel="noopener noreferrer"
               />
-          </a>
-          <a
-            href="https://coderabbit.ai/?utm_source=useSend.com"
-            target="_blank"
-          >
               <Image
                 src="/code-rabbit-usesend-light.svg"
                 alt="Code Rabbit"
                 width={200}
                 height={100}
                 className="hidden dark:block"
-              rel="noopener noreferrer"
               />
             </a>
           </div>
 
+          <div className="flex flex-col items-center gap-2 mt-4">
+            <p className="text-[11px] uppercase tracking-[0.25em] text-muted-foreground/80">
+              Bronze sponsor
+            </p>
+            <a
+              href="https://sayr.io/?utm_source=useSend.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                src="https://cdn.doras.to/Sayr/sayr%20black.png"
+                alt="Sayr"
+                width={80}
+                height={32}
+                className="h-8 w-auto dark:hidden"
+              />
+              <Image
+                src="https://cdn.doras.to/Sayr/Sayr%20white.png"
+                alt="Sayr"
+                width={80}
+                height={32}
+                className="hidden h-8 w-auto dark:block"
+              />
+            </a>
+          </div>
+        </div>
+
         <div className=" mt-32 mx-auto max-w-5xl">
           <div className="rounded-[18px] bg-primary/10 p-1 sm:p-1 ">
             <div className="rounded-2xl bg-primary/20 p-1 sm:p-1 ">
@@ -188,7 +210,9 @@ function TrustedBy() {
               <div className="mt-5 flex items-center gap-3">
                 <Avatar className="rounded-lg border-2 border-primary/50 h-8 w-8">
                   <AvatarImage src={t.image} alt={`${t.author} avatar`} />
-                  <AvatarFallback className="rounded-lg text-xs">{t.author.charAt(0).toUpperCase()}</AvatarFallback>
+                  <AvatarFallback className="rounded-lg text-xs">
+                    {t.author.charAt(0).toUpperCase()}
+                  </AvatarFallback>
                 </Avatar>
                 <figcaption className="text-sm">
                   <span className="font-medium">{t.author}</span>
@@ -219,7 +243,9 @@ function TrustedBy() {
               <div className="mt-5 flex items-center gap-3">
                 <Avatar className="rounded-lg border-2 border-primary/50 h-8 w-8">
                   <AvatarImage src={t.image} alt={`${t.author} avatar`} />
-                  <AvatarFallback className="rounded-lg text-xs">{t.author.charAt(0).toUpperCase()}</AvatarFallback>
+                  <AvatarFallback className="rounded-lg text-xs">
+                    {t.author.charAt(0).toUpperCase()}
+                  </AvatarFallback>
                 </Avatar>
                 <figcaption className="text-sm">
                   <span className="font-medium">{t.author}</span>