feat: integration banner

apps/app/pages/[workspaceSlug]/settings/integrations.tsx

@@ -14,6 +14,8 @@ import { SingleIntegrationCard } from "components/integration";
 // ui
 import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { ExclamationIcon } from "components/icons";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -45,7 +47,17 @@ const WorkspaceIntegrations: NextPage = () => {
       }
     >
       <section className="space-y-8">
+        <div className="flex flex-col items-start gap-3">
           <h3 className="text-2xl font-semibold">Integrations</h3>
+          <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-xs text-brand-base">
+            <ExclamationIcon height={20} width={20} className="fill-current text-brand-base" />
+            <p className="leading-5">
+              Integrations and importers are only available on the cloud version. We plan to
+              open-source our SDKs in the near future so that the community can request or
+              contribute integrations as needed.
+            </p>
+          </div>
+        </div>
         <div className="space-y-5">
           {appIntegrations ? (
             appIntegrations.map((integration) => (