feat(ui): handle no-permissions on scan page (#8624)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/components/ui/custom/custom-banner.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { InfoIcon } from "lucide-react";
+
+import { CustomButton } from ".";
+
+interface CustomBannerProps {
+  title: string;
+  message: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+
+export const CustomBanner = ({
+  title,
+  message,
+  buttonLabel = "Go Home",
+  buttonLink = "/",
+}: CustomBannerProps) => {
+  return (
+    <div className="flex items-center justify-start rounded-lg border-1 border-system-warning-light px-4 py-6 shadow-box dark:bg-prowler-blue-400">
+      <div className="flex w-full flex-col items-start gap-6 md:flex-row md:items-center md:justify-between md:gap-8">
+        <div className="flex flex-col space-y-3">
+          <div className="flex items-center justify-start gap-3">
+            <InfoIcon className="h-6 w-6 text-gray-800 dark:text-white" />
+            <h2 className="text-lg font-bold text-gray-800 dark:text-white">
+              {title}
+            </h2>
+          </div>
+          <p className="text-sm text-gray-600 dark:text-gray-300">{message}</p>
+        </div>
+        <div className="w-full md:w-auto md:flex-shrink-0">
+          <CustomButton
+            asLink={buttonLink}
+            className="w-full justify-center md:w-fit"
+            ariaLabel={buttonLabel}
+            variant="solid"
+            color="action"
+            size="md"
+          >
+            {buttonLabel}
+          </CustomButton>
+        </div>
+      </div>
+    </div>
+  );
+};