Bring back logo, promo text in secret sharing

frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx

@@ -1,13 +1,29 @@
+import Image from "next/image";
+import Link from "next/link";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { ShareSecretForm } from "./components";
 
 export const ShareSecretPublicPage = () => {
   return (
-    <div className="flex h-screen flex-col justify-between bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:[color-scheme:dark]">
+    <div className="flex h-screen flex-col justify-between bg-gradient-to-tr from-mineshaft-700 to-bunker-800 px-4 text-gray-200 dark:[color-scheme:dark]">
       <div />
-      <div className="mx-auto w-full max-w-lg">
+      <div className="mx-auto w-full max-w-xl">
         <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">
-            Share a 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">
+            Share a secret
           </h1>
           <p className="text-md">
             Powered by{" "}
@@ -24,7 +40,44 @@ export const ShareSecretPublicPage = () => {
         <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
           <ShareSecretForm isPublic />
         </div>
+        <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">
           Made with ❤️ by{" "}

frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx

@@ -220,8 +220,8 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
     </form>
   ) : (
     <>
-      <div className="mb-4 flex items-center justify-between">
-        <h2>Secret Link</h2>
+      <div className="mr-2 flex items-center justify-end rounded-md bg-white/[0.05] p-2 text-base text-gray-400">
+        <p className="mr-4 break-all">{secretLink}</p>
         <IconButton
           ariaLabel="copy icon"
           colorSchema="secondary"
@@ -234,9 +234,6 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
           <FontAwesomeIcon icon={isCopyingSecret ? faCheck : faCopy} />
         </IconButton>
       </div>
-      <div className="mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-        <p className="mr-4 break-all">{secretLink}</p>
-      </div>
       <Button
         className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
         colorSchema="primary"

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">

frontend/src/views/ViewSecretPublicPage/components/SecretContainer.tsx

@@ -43,8 +43,10 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
 
   return (
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <h2>Shared Secret</h2>
+      <div className="flex items-center justify-between rounded-md bg-white/[0.05] p-2 text-base text-gray-400">
+        <p className="whitespace-pre-wrap break-all">
+          {isVisible ? decryptedSecret : hiddenSecret}
+        </p>
         <div className="flex">
           <IconButton
             ariaLabel="copy icon"
@@ -67,11 +69,6 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
           </IconButton>
         </div>
       </div>
-      <div className="flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-        <p className="whitespace-pre-wrap break-all">
-          {isVisible ? decryptedSecret : hiddenSecret}
-        </p>
-      </div>
       <Button
         className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
         colorSchema="primary"

frontend/src/views/ViewSecretPublicPage/components/SecretErrorContainer.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const SecretErrorContainer = () => {
   return (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
       <div className="text-center">
         <FontAwesomeIcon icon={faKey} size="2x" />
         <p className="mt-4">The secret you are looking is missing or has expired</p>