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 @@
+
\ 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 @@
+
\ 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 @@
+
\ 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 (
+
+ {selectedBanner === "ai" ? (
+
+ ) : selectedBanner === "smart" ? (
+
+ ) : (
+
+ )}
+
{
+ IpcClient.getInstance().openExternalUrl(
+ "https://www.dyad.sh/pro#ai?utm_source=dyad-app&utm_medium=app&utm_campaign=in-app-banner-ai-access",
+ );
+ }}
+ >
+
+
+
+
+
+ Access leading AI models with one plan
+
+
+
+
+
+
+
{
+ IpcClient.getInstance().openExternalUrl(
+ "https://www.dyad.sh/pro#ai?utm_source=dyad-app&utm_medium=app&utm_campaign=in-app-banner-smart-context",
+ );
+ }}
+ >
+
+
+
+
+
+
+ Up to 5x cheaper
+
+
+ by using Smart Context
+
+
+
+
+
+
{
+ IpcClient.getInstance().openExternalUrl(
+ "https://www.dyad.sh/pro#ai?utm_source=dyad-app&utm_medium=app&utm_campaign=in-app-banner-turbo",
+ );
+ }}
+ >
+
+
+
+
+
+
+ Generate code 4–10x faster
+
+
+ with Turbo Models & Turbo Edits
+
+
+
+
+
+
+
Build your dream app
);
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 (
-
+
-
+
{randomPrompts.map((item, index) => (
+
+ 
+ 
+