WIP adding 2 links below the api list

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx

@@ -199,6 +199,9 @@ function PossibleIntegrationsList({
           }
         })}
       </div>
+      <Header2 className="mb-2 mt-6">Missing an API?</Header2>
+      <AddIntegrationConnection identifier={""} name="" isIntegration={false} />
+      <Header2 className="mb-2 mt-6">Create your own Integration</Header2>
     </div>
   );
 }
@@ -363,7 +366,7 @@ function AddIntegrationConnection({
         variant="base"
         className="m-0 flex-1 text-left transition group-hover:text-bright"
       >
-        {name}{" "}
+        {name}
       </Paragraph>
       <div className="flex flex-none items-center gap-1">
         {isIntegration && <IntegrationIcon />}
@@ -379,3 +382,26 @@ function AddIntegrationConnection({
 export function IntegrationIcon() {
   return <LogoIcon className="h-3.5 w-3.5 flex-none pb-0.5" />;
 }
+
+function InfoLink({ text }: { text: string }) {
+  return (
+    <div className="group flex h-11 w-full items-center gap-3 rounded-md p-1 pr-3 transition hover:bg-slate-850">
+      <NamedIconInBox
+        name="integration"
+        className="h-9 w-9 flex-none transition group-hover:border-slate-750"
+      />
+      <Paragraph
+        variant="base"
+        className="m-0 flex-1 text-left transition group-hover:text-bright"
+      >
+        {text}
+      </Paragraph>
+      <div className="flex flex-none items-center gap-1">
+        <NamedIcon
+          name="docs"
+          className="h-6 w-6 flex-none text-slate-700 transition group-hover:text-bright"
+        />
+      </div>
+    </div>
+  );
+}