Bring back logo, promo text in secret sharing

frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx

@@ -1,4 +1,8 @@
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useGetActiveSharedSecretById } from "@app/hooks/api/secretSharing";
 
@@ -16,8 +20,19 @@ export const ViewSecretPublicPage = () => {
       <div />
       <div className="mx-auto w-full max-w-lg">
         <div className="mb-8 text-center">
-          <h1 className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-3xl font-medium text-transparent">
-            View Shared Secret
+          <div className="mb-4 flex justify-center pt-8">
+            <Link href="https://infisical.com">
+              <Image
+                src="/images/gradientLogo.svg"
+                height={90}
+                width={120}
+                alt="Infisical logo"
+                className="cursor-pointer"
+              />
+            </Link>
+          </div>
+          <h1 className="bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-4xl font-medium text-transparent">
+            View shared secret
           </h1>
           <p className="text-md">
             Powered by{" "}
@@ -33,6 +48,42 @@ export const ViewSecretPublicPage = () => {
         </div>
         {secret && key && <SecretContainer secret={secret} secretKey={key} />}
         {error && <SecretErrorContainer />}
+        <div className="m-auto my-8 flex w-full">
+          <div className="w-full border-t border-mineshaft-600" />
+        </div>
+        <div className="m-auto flex max-w-2xl flex-col items-center justify-center">
+          <div className="m-auto mb-12 flex w-full max-w-2xl flex-col justify-center rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
+            <p className="w-full pb-2 text-lg font-semibold text-mineshaft-100 md:pb-3 md:text-xl">
+              Open source{" "}
+              <span className="bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+                secret management
+              </span>{" "}
+              for developers
+            </p>
+            <div className="flex items-center">
+              <p className="md:text-md text-md mr-4">
+                <a
+                  href="https://github.com/infisical/infisical"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
+                >
+                  Infisical
+                </a>{" "}
+                is the all-in-one secret management platform to securely manage secrets, configs,
+                and certificates across your team and infrastructure.
+              </p>
+              <div className="cursor-pointer">
+                <Link href="https://infisical.com">
+                  <div className="flex items-center justify-between rounded-md border border-mineshaft-400/40 bg-mineshaft-600 py-2 px-3 duration-200 hover:border-primary/60 hover:bg-primary/20 hover:text-white">
+                    <p className="mr-4 whitespace-nowrap">Try Infisical</p>
+                    <FontAwesomeIcon icon={faArrowRight} />
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div className="w-full bg-mineshaft-600 p-2">
         <p className="text-center text-sm text-mineshaft-300">