From 803e5884d9a57271c7f04281dcd4b06ffa6afe6d Mon Sep 17 00:00:00 2001
From: Colin Spence <udappia@gmail.com>
Date: Thu, 21 Mar 2024 11:18:30 -0600
Subject: [PATCH] Creates Intro Pop Up

---
 web/app/page.tsx              |  6 +-----
 web/components/Disclaimer.tsx | 10 ++++++---
 web/components/IntroPopUp.tsx | 39 +++++++++++++++++++++++++++++++++++
 web/components/Prompt.tsx     | 11 ++++++++--
 4 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 web/components/IntroPopUp.tsx

diff --git a/web/app/page.tsx b/web/app/page.tsx
index c223470..0b3bcac 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -24,9 +24,5 @@ function generateUniqueIndexes(arrayLength: number, count: number): number[] {
 export default function HomePage() {
   const promptIdxs = generateUniqueIndexes(EXAMPLE_PROMPTS.length, 6);
 
-  return (
-    <div className='flex h-full items-center justify-center'>
-      <Prompt promptIdxs={promptIdxs} />
-    </div>
-  );
+  return <Prompt promptIdxs={promptIdxs} />;
 }
diff --git a/web/components/Disclaimer.tsx b/web/components/Disclaimer.tsx
index 6f5cce3..2b89920 100644
--- a/web/components/Disclaimer.tsx
+++ b/web/components/Disclaimer.tsx
@@ -10,7 +10,7 @@ const Disclaimer = () => {
       <div className='fixed bottom-16 left-1/2 transform -translate-x-1/2 max-w-screen-sm w-[calc(100%-48px)] z-10'>
         <X
           onClick={() => setShowDisclaimer(false)}
-          className='absolute top-4 right-4 text-indigo-800 hover:text-indigo-500 cursor-pointer'
+          className='absolute top-3 right-3 text-indigo-800 hover:text-indigo-500 cursor-pointer'
           size={20}
           weight='bold'
         />
@@ -18,8 +18,12 @@ const Disclaimer = () => {
           <div className='font-bold text-sm'>
             This AI agent is experimental.
           </div>
-          <div className="text-[10px]">
-            The agent is evaluating projects based on self-reported data through past Gitcoin applications and therefore cannot guarantee their accuracy at this time. The agent also cannot guarantee that each project is still in control of its address, so please double check before sending large amounts.
+          <div className='text-[10px]'>
+            The agent is evaluating projects based on self-reported data through
+            past Gitcoin applications and therefore cannot guarantee their
+            accuracy at this time. The agent also cannot guarantee that each
+            project is still in control of its address, so please double check
+            before sending large amounts.
           </div>
         </div>
       </div>
diff --git a/web/components/IntroPopUp.tsx b/web/components/IntroPopUp.tsx
new file mode 100644
index 0000000..9cd61db
--- /dev/null
+++ b/web/components/IntroPopUp.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { X } from "@phosphor-icons/react/dist/ssr";
+import { SparkleIcon } from "./Icons";
+import { Dispatch, SetStateAction } from "react";
+
+interface IntroPopupProps {
+  setShowDisclaimer: Dispatch<SetStateAction<boolean>>;
+}
+
+const IntroPopUp = ({ setShowDisclaimer }: IntroPopupProps) => {
+  return (
+    <div className='fixed bottom-16 left-1/2 transform -translate-x-1/2 max-w-screen-md w-[calc(100%-48px)] z-10'>
+      <X
+        onClick={() => setShowDisclaimer(false)}
+        className='absolute top-3 right-3 text-indigo-800 hover:text-indigo-500 cursor-pointer'
+        size={20}
+        weight='bold'
+      />
+      <div className='p-6 bg-indigo-25 rounded-2xl border-2 border-indigo-200 space-y-1 shadow-md shadow-primary-shadow/20'>
+        <div className='flex items-center'>
+          <SparkleIcon size={24} className='transform -translate-x-1' />
+          <div className='text-lg font-bold'>
+            Welcome to fundpublicgoods.ai!
+          </div>
+        </div>
+        <div className='text-[13px] leading-relaxed'>
+          As a proof-of-concept project, fundpublicgoods.ai showcases the
+          potential of AI in revolutionizing funding for public goods. Our
+          platform offers personalized strategies to maximize the impact of your
+          contributions. Engage with our platform and community today to be part
+          of this innovative approach to philanthropy.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IntroPopUp;
diff --git a/web/components/Prompt.tsx b/web/components/Prompt.tsx
index 61ea4f3..b3721ad 100644
--- a/web/components/Prompt.tsx
+++ b/web/components/Prompt.tsx
@@ -9,9 +9,11 @@ import { startRun } from "@/app/actions";
 import clsx from "clsx";
 import { EXAMPLE_PROMPTS } from "@/utils/examplePrompts";
 import { toast } from "react-toastify";
+import IntroPopUp from "./IntroPopUp";
 
 export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
   const [prompt, setPrompt] = useState<string>("");
+  const [showDisclaimer, setShowDisclaimer] = useState<boolean>(true);
   const [isWaiting, setIsWaiting] = useState(false);
   const { data: session } = useSession();
   const searchParams = useSearchParams();
@@ -43,7 +45,11 @@ export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
   }, [searchParams, router]);
 
   return (
-    <>
+    <div
+      className={clsx(
+        "flex h-full justify-center md:items-center md:pt-0",
+        showDisclaimer ? "items-start pt-8" : "items-center"
+      )}>
       <div className='mx-auto max-w-screen-lg'>
         <div className='w-full space-y-8 px-6 flex flex-col items-center'>
           <div className='space-y-4 flex flex-col items-center w-full'>
@@ -88,6 +94,7 @@ export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
           </div>
         </div>
       </div>
-    </>
+      {showDisclaimer && <IntroPopUp setShowDisclaimer={setShowDisclaimer} />}
+    </div>
   );
 }