Creates Intro Pop Up

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} />;
 }

web/components/Disclaimer.tsx

@@ -10,16 +10,20 @@ 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'
         />
         <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='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>

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;

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>
   );
 }