From decd05e76488a42111c6c21ce3be0612ce00457d Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Tue, 16 Sep 2025 22:51:46 -0700
Subject: [PATCH] add pro banners (#1269)

<!-- This is an auto-generated description by cubic. -->

## Summary by cubic
Adds rotating Pro banners on the home page to promote Dyad Pro (AI
access, Smart Context savings, Turbo speed). Also tightens the home
layout and centers the setup headline.

- New Features
- Added ProBanner with three variants (AI Access, Smart Context, Turbo).
One shows at random and links to dyad.sh/pro with UTM tags.
- Banners are hidden when Pro is enabled or the user has a budget
(settings.enableDyadPro or userBudget).
- Added OpenAI, Google, and Anthropic logo assets for the AI Access
banner.
- Home updates: show 3 inspiration prompts (was 5), center and constrain
layout, and render ProBanner below content.
  - SetupBanner heading is centered and slightly smaller (text-5xl).

<!-- End of auto-generated description by cubic. -->
---
 assets/ai-logos/anthropic-logo.svg |   1 +
 assets/ai-logos/google-logo.svg    |   1 +
 assets/ai-logos/openai-logo.svg    |   1 +
 src/components/ProBanner.tsx       | 184 +++++++++++++++++++++++++++++
 src/components/SetupBanner.tsx     |   2 +-
 src/pages/home.tsx                 |   8 +-
 6 files changed, 193 insertions(+), 4 deletions(-)
 create mode 100644 assets/ai-logos/anthropic-logo.svg
 create mode 100644 assets/ai-logos/google-logo.svg
 create mode 100644 assets/ai-logos/openai-logo.svg
 create mode 100644 src/components/ProBanner.tsx

diff --git a/assets/ai-logos/anthropic-logo.svg b/assets/ai-logos/anthropic-logo.svg
new file mode 100644
index 0000000..cbcc39e
--- /dev/null
+++ b/assets/ai-logos/anthropic-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024.2" height="115" viewBox="0 0 1024.2 115"><defs><style>.a{fill:#1f1f1e;}</style></defs><path class="a" d="M250.649,23.3494h37.328V113.094h23.825V23.3494H349.13V1.9061H250.649Z"/><path class="a" d="M208.557,79.7376,158.522,1.9061H131.519V113.094h23.032V35.2624l50.035,77.8316h27.002V1.9061H208.557Z"/><path class="a" d="M444.434,46.2224H392.017V1.9061H368.191V113.094h23.826V67.6657h52.417V113.094H468.26V1.9061H444.434Z"/><path class="a" d="M44.3163,1.9061,0,113.094H24.779l9.0634-23.3495H80.2061L89.268,113.094h24.779L69.7307,1.9061ZM41.8575,69.0953l15.166-39.0746L72.19,69.0953Z"/><path class="a" d="M665.698,0c-32.086,0-54.8,23.826-54.8,57.6588,0,33.5152,22.714,57.3412,54.8,57.3412,31.926,0,54.482-23.826,54.482-57.3412C720.18,23.826,697.624,0,665.698,0Zm0,92.7624c-18.744,0-30.18-13.3425-30.18-35.1036,0-22.0787,11.436-35.4212,30.18-35.4212,18.584,0,29.861,13.3425,29.861,35.4212C695.559,79.42,684.282,92.7624,665.698,92.7624Z"/><path class="a" d="M998.785,75.7666c-4.13,10.8011-12.39,16.9958-23.668,16.9958-18.743,0-30.179-13.3425-30.179-35.1036,0-22.0787,11.436-35.4212,30.179-35.4212,11.278,0,19.538,6.1947,23.668,16.9958h25.255C1017.85,15.4075,999.261,0,975.117,0c-32.085,0-54.799,23.826-54.799,57.6588C920.318,91.174,943.032,115,975.117,115,999.42,115,1018,99.4337,1024.2,75.7666Z"/><path class="a" d="M846.934,1.9061,891.25,113.094h24.302L871.236,1.9061Z"/><path class="a" d="M796.74,1.9061H742.417V113.094h23.826V72.7486H796.74c25.256,0,40.663-13.3425,40.663-35.4213S821.996,1.9061,796.74,1.9061Zm-1.112,49.3991H766.243V23.3494h29.385c11.755,0,17.949,4.7652,17.949,13.9779S807.383,51.3052,795.628,51.3052Z"/><path class="a" d="M592.631,35.7389c0-20.9668-15.407-33.8328-40.663-33.8328H497.645V113.094h23.826V69.5718h26.525l23.827,43.5222h26.368L571.807,66.2568C585.05,61.166,592.631,50.4459,592.631,35.7389Zm-71.16-12.39h29.385c11.754,0,17.949,4.2887,17.949,12.39s-6.195,12.39-17.949,12.39H521.471Z"/></svg>
\ No newline at end of file
diff --git a/assets/ai-logos/google-logo.svg b/assets/ai-logos/google-logo.svg
new file mode 100644
index 0000000..a2a0c4f
--- /dev/null
+++ b/assets/ai-logos/google-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="74" height="24" viewBox="0 0 74 24"><path fill="#4285F4" d="M9.24 8.19v2.46h5.88c-.18 1.38-.64 2.39-1.34 3.1-.86.86-2.2 1.8-4.54 1.8-3.62 0-6.45-2.92-6.45-6.54s2.83-6.54 6.45-6.54c1.95 0 3.38.77 4.43 1.76L15.4 2.5C13.94 1.08 11.98 0 9.24 0 4.28 0 .11 4.04.11 9s4.17 9 9.13 9c2.68 0 4.7-.88 6.28-2.52 1.62-1.62 2.13-3.91 2.13-5.75 0-.57-.04-1.1-.13-1.54H9.24z"/><path fill="#EA4335" d="M25 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52z"/><path fill="#4285F4" d="M53.58 7.49h-.09c-.57-.68-1.67-1.3-3.06-1.3C47.53 6.19 45 8.72 45 12c0 3.26 2.53 5.81 5.43 5.81 1.39 0 2.49-.62 3.06-1.32h.09v.81c0 2.22-1.19 3.41-3.1 3.41-1.56 0-2.53-1.12-2.93-2.07l-2.22.92c.64 1.54 2.33 3.43 5.15 3.43 2.99 0 5.52-1.76 5.52-6.05V6.49h-2.42v1zm-2.93 8.03c-1.76 0-3.1-1.5-3.1-3.52 0-2.05 1.34-3.52 3.1-3.52 1.74 0 3.1 1.5 3.1 3.54.01 2.03-1.36 3.5-3.1 3.5z"/><path fill="#FBBC05" d="M38 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52z"/><path fill="#34A853" d="M58 .24h2.51v17.57H58z"/><path fill="#EA4335" d="M68.26 15.52c-1.3 0-2.22-.59-2.82-1.76l7.77-3.21-.26-.66c-.48-1.3-1.96-3.7-4.97-3.7-2.99 0-5.48 2.35-5.48 5.81 0 3.26 2.46 5.81 5.76 5.81 2.66 0 4.2-1.63 4.84-2.57l-1.98-1.32c-.66.96-1.56 1.6-2.86 1.6zm-.18-7.15c1.03 0 1.91.53 2.2 1.28l-5.25 2.17c0-2.44 1.73-3.45 3.05-3.45z"/></svg>
\ No newline at end of file
diff --git a/assets/ai-logos/openai-logo.svg b/assets/ai-logos/openai-logo.svg
new file mode 100644
index 0000000..859d7af
--- /dev/null
+++ b/assets/ai-logos/openai-logo.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1180 320" xmlns="http://www.w3.org/2000/svg"><path d="m367.44 153.84c0 52.32 33.6 88.8 80.16 88.8s80.16-36.48 80.16-88.8-33.6-88.8-80.16-88.8-80.16 36.48-80.16 88.8zm129.6 0c0 37.44-20.4 61.68-49.44 61.68s-49.44-24.24-49.44-61.68 20.4-61.68 49.44-61.68 49.44 24.24 49.44 61.68z"/><path d="m614.27 242.64c35.28 0 55.44-29.76 55.44-65.52s-20.16-65.52-55.44-65.52c-16.32 0-28.32 6.48-36.24 15.84v-13.44h-28.8v169.2h28.8v-56.4c7.92 9.36 19.92 15.84 36.24 15.84zm-36.96-69.12c0-23.76 13.44-36.72 31.2-36.72 20.88 0 32.16 16.32 32.16 40.32s-11.28 40.32-32.16 40.32c-17.76 0-31.2-13.2-31.2-36.48z"/><path d="m747.65 242.64c25.2 0 45.12-13.2 54-35.28l-24.72-9.36c-3.84 12.96-15.12 20.16-29.28 20.16-18.48 0-31.44-13.2-33.6-34.8h88.32v-9.6c0-34.56-19.44-62.16-55.92-62.16s-60 28.56-60 65.52c0 38.88 25.2 65.52 61.2 65.52zm-1.44-106.8c18.24 0 26.88 12 27.12 25.92h-57.84c4.32-17.04 15.84-25.92 30.72-25.92z"/><path d="m823.98 240h28.8v-73.92c0-18 13.2-27.6 26.16-27.6 15.84 0 22.08 11.28 22.08 26.88v74.64h28.8v-83.04c0-27.12-15.84-45.36-42.24-45.36-16.32 0-27.6 7.44-34.8 15.84v-13.44h-28.8z"/><path d="m1014.17 67.68-65.28 172.32h30.48l14.64-39.36h74.4l14.88 39.36h30.96l-65.28-172.32zm16.8 34.08 27.36 72h-54.24z"/><path d="m1163.69 68.18h-30.72v172.32h30.72z"/><path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z"/></svg>
\ No newline at end of file
diff --git a/src/components/ProBanner.tsx b/src/components/ProBanner.tsx
new file mode 100644
index 0000000..1b0c21c
--- /dev/null
+++ b/src/components/ProBanner.tsx
@@ -0,0 +1,184 @@
+// @ts-ignore
+import openAiLogo from "../../assets/ai-logos/openai-logo.svg";
+// @ts-ignore
+import googleLogo from "../../assets/ai-logos/google-logo.svg";
+// @ts-ignore
+import anthropicLogo from "../../assets/ai-logos/anthropic-logo.svg";
+import { IpcClient } from "@/ipc/ipc_client";
+import { useState } from "react";
+
+import { useSettings } from "@/hooks/useSettings";
+import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
+
+export function ProBanner() {
+  const { settings } = useSettings();
+  const { userBudget } = useUserBudgetInfo();
+  if (settings?.enableDyadPro || userBudget) {
+    return null;
+  }
+
+  const [selectedBanner] = useState<"ai" | "smart" | "turbo">(() => {
+    const options = ["ai", "smart", "turbo"] as const;
+    return options[Math.floor(Math.random() * options.length)];
+  });
+
+  return (
+    <div className="mt-6 max-w-2xl mx-auto">
+      {selectedBanner === "ai" ? (
+        <AiAccessBanner />
+      ) : selectedBanner === "smart" ? (
+        <SmartContextBanner />
+      ) : (
+        <TurboBanner />
+      )}
+    </div>
+  );
+}
+
+export function AiAccessBanner() {
+  return (
+    <div
+      className="w-full py-2 sm:py-2.5 md:py-3 rounded-lg bg-gradient-to-br from-white via-indigo-50 to-sky-100 dark:from-indigo-700 dark:via-indigo-700 dark:to-indigo-900 flex items-center justify-center relative overflow-hidden ring-1 ring-inset ring-black/5 dark:ring-white/10 shadow-sm cursor-pointer transition-all duration-200 hover:shadow-md hover:-translate-y-[1px]"
+      onClick={() => {
+        IpcClient.getInstance().openExternalUrl(
+          "https://www.dyad.sh/pro#ai?utm_source=dyad-app&utm_medium=app&utm_campaign=in-app-banner-ai-access",
+        );
+      }}
+    >
+      <div
+        className="absolute inset-0 z-0 bg-gradient-to-tr from-white/60 via-transparent to-transparent pointer-events-none dark:from-white/10"
+        aria-hidden="true"
+      />
+      <div className="absolute inset-0 z-0 pointer-events-none dark:hidden">
+        <div className="absolute -top-8 -left-6 h-40 w-40 rounded-full blur-2xl bg-violet-200/40" />
+        <div className="absolute -bottom-10 -right-6 h-48 w-48 rounded-full blur-3xl bg-sky-200/40" />
+      </div>
+      <div className="relative z-10 text-center flex flex-col items-center gap-0.5 sm:gap-1 md:gap-1.5 px-4 md:px-6 pr-6 md:pr-8">
+        <div className="mt-0.5 sm:mt-1 flex items-center gap-2 sm:gap-3 justify-center">
+          <div className="text-xl font-semibold tracking-tight text-indigo-900 dark:text-indigo-100">
+            Access leading AI models with one plan
+          </div>
+          <button
+            type="button"
+            aria-label="Subscribe to Dyad Pro"
+            className="inline-flex items-center rounded-md bg-white/90 text-indigo-800 hover:bg-white shadow px-3 py-1.5 text-xs sm:text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-white/50"
+          >
+            Get Dyad Pro
+          </button>
+        </div>
+
+        <div className="mt-1.5 sm:mt-2 grid grid-cols-3 gap-6 md:gap-8 items-center justify-items-center opacity-90">
+          <div className="flex items-center justify-center">
+            <img
+              src={openAiLogo}
+              alt="OpenAI"
+              width={96}
+              height={28}
+              className="h-4 md:h-5 w-auto dark:invert"
+            />
+          </div>
+          <div className="flex items-center justify-center">
+            <img
+              src={googleLogo}
+              alt="Google"
+              width={110}
+              height={30}
+              className="h-4 md:h-5 w-auto"
+            />
+          </div>
+          <div className="flex items-center justify-center">
+            <img
+              src={anthropicLogo}
+              alt="Anthropic"
+              width={110}
+              height={30}
+              className="h-3 w-auto dark:invert"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SmartContextBanner() {
+  return (
+    <div
+      className="w-full py-2 sm:py-2.5 md:py-3 rounded-lg bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-200 dark:from-emerald-700 dark:via-emerald-700 dark:to-emerald-900 flex items-center justify-center relative overflow-hidden ring-1 ring-inset ring-emerald-900/10 dark:ring-white/10 shadow-sm cursor-pointer transition-all duration-200 hover:shadow-md hover:-translate-y-[1px]"
+      onClick={() => {
+        IpcClient.getInstance().openExternalUrl(
+          "https://www.dyad.sh/pro#ai?utm_source=dyad-app&utm_medium=app&utm_campaign=in-app-banner-smart-context",
+        );
+      }}
+    >
+      <div
+        className="absolute inset-0 z-0 bg-gradient-to-tr from-white/60 via-transparent to-transparent pointer-events-none dark:from-white/10"
+        aria-hidden="true"
+      />
+      <div className="absolute inset-0 z-0 pointer-events-none dark:hidden">
+        <div className="absolute -top-10 -left-8 h-44 w-44 rounded-full blur-2xl bg-emerald-200/50" />
+        <div className="absolute -bottom-12 -right-8 h-56 w-56 rounded-full blur-3xl bg-teal-200/50" />
+      </div>
+      <div className="relative z-10 px-4 md:px-6 pr-6 md:pr-8">
+        <div className="mt-0.5 sm:mt-1 flex items-center gap-2 sm:gap-3 justify-center">
+          <div className="flex flex-col items-center text-center">
+            <div className="text-xl font-semibold tracking-tight text-emerald-900 dark:text-emerald-100">
+              Up to 5x cheaper
+            </div>
+            <div className="text-sm sm:text-base mt-1 text-emerald-700 dark:text-emerald-200/80">
+              by using Smart Context
+            </div>
+          </div>
+          <button
+            type="button"
+            aria-label="Get Dyad Pro"
+            className="inline-flex items-center rounded-md bg-white/90 text-emerald-800 hover:bg-white shadow px-3 py-1.5 text-xs sm:text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-white/50"
+          >
+            Get Dyad Pro
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TurboBanner() {
+  return (
+    <div
+      className="w-full py-2 sm:py-2.5 md:py-3 rounded-lg bg-gradient-to-br from-rose-50 via-rose-100 to-rose-200 dark:from-rose-800 dark:via-fuchsia-800 dark:to-rose-800 flex items-center justify-center relative overflow-hidden ring-1 ring-inset ring-rose-900/10 dark:ring-white/5 shadow-sm cursor-pointer transition-all duration-200 hover:shadow-md hover:-translate-y-[1px]"
+      onClick={() => {
+        IpcClient.getInstance().openExternalUrl(
+          "https://www.dyad.sh/pro#ai?utm_source=dyad-app&utm_medium=app&utm_campaign=in-app-banner-turbo",
+        );
+      }}
+    >
+      <div
+        className="absolute inset-0 z-0 bg-gradient-to-tr from-white/60 via-transparent to-transparent pointer-events-none dark:from-white/10"
+        aria-hidden="true"
+      />
+      <div className="absolute inset-0 z-0 pointer-events-none dark:hidden">
+        <div className="absolute -top-10 -left-8 h-44 w-44 rounded-full blur-2xl bg-rose-200/50" />
+        <div className="absolute -bottom-12 -right-8 h-56 w-56 rounded-full blur-3xl bg-fuchsia-200/50" />
+      </div>
+      <div className="relative z-10 px-4 md:px-6 pr-6 md:pr-8">
+        <div className="mt-0.5 sm:mt-1 flex items-center gap-2 sm:gap-3 justify-center">
+          <div className="flex flex-col items-center text-center">
+            <div className="text-xl font-semibold tracking-tight text-rose-900 dark:text-rose-100">
+              Generate code 4–10x faster
+            </div>
+            <div className="text-sm sm:text-base mt-1 text-rose-700 dark:text-rose-200/80">
+              with Turbo Models & Turbo Edits
+            </div>
+          </div>
+          <button
+            type="button"
+            aria-label="Get Dyad Pro"
+            className="inline-flex items-center rounded-md bg-white/90 text-rose-800 hover:bg-white shadow px-3 py-1.5 text-xs sm:text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-white/50"
+          >
+            Get Dyad Pro
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SetupBanner.tsx b/src/components/SetupBanner.tsx
index fdbec81..12342fc 100644
--- a/src/components/SetupBanner.tsx
+++ b/src/components/SetupBanner.tsx
@@ -109,7 +109,7 @@ export function SetupBanner() {
 
   if (itemsNeedAction.length === 0) {
     return (
-      <h1 className="text-6xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 tracking-tight">
+      <h1 className="text-center text-5xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400 tracking-tight">
         Build your dream app
       </h1>
     );
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 35bba86..71dce8f 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -32,6 +32,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import type { FileAttachment } from "@/ipc/ipc_types";
 import { NEON_TEMPLATE_IDS } from "@/shared/templates";
 import { neonTemplateHook } from "@/client_logic/template_hook";
+import { ProBanner } from "@/components/ProBanner";
 
 // Adding an export for attachments
 export interface HomeSubmitOptions {
@@ -96,7 +97,7 @@ export default function HomePage() {
   // Function to get random prompts
   const getRandomPrompts = useCallback(() => {
     const shuffled = [...INSPIRATION_PROMPTS].sort(() => 0.5 - Math.random());
-    return shuffled.slice(0, 5);
+    return shuffled.slice(0, 3);
   }, []);
 
   // Initialize random prompts
@@ -181,14 +182,14 @@ export default function HomePage() {
 
   // Main Home Page Content
   return (
-    <div className="flex flex-col items-center justify-center max-w-3xl m-auto p-8">
+    <div className="flex flex-col items-center justify-center max-w-3xl w-full m-auto p-8">
       <SetupBanner />
 
       <div className="w-full">
         <ImportAppButton />
         <HomeChatInput onSubmit={handleSubmit} />
 
-        <div className="flex flex-col gap-4 mt-4">
+        <div className="flex flex-col gap-4 mt-2">
           <div className="flex flex-wrap gap-4 justify-center">
             {randomPrompts.map((item, index) => (
               <button
@@ -242,6 +243,7 @@ export default function HomePage() {
             </span>
           </button>
         </div>
+        <ProBanner />
       </div>
       <PrivacyBanner />