feat: app demo image in hero.

One-Click-Auth · Sep 24, 2023 · 9099b33 · 9099b33
1 parent 59819ca
commit 9099b33
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/GradientPlatform.tsx b/src/components/GradientPlatform.tsx
@@ -28,7 +28,7 @@ export default function GradientPlatform() {
       <div className="relative">
         <div className="flex items-center justify-center px-4">
           <div
-            className="relative z-10  mt-6 h-full max-h-[738px] w-2/3  rounded-3xl border border-white border-opacity-25 bg-white bg-opacity-5 p-12 shadow-inner"
+            className="relative z-10 mt-6 h-full max-h-[738px]  w-2/3 rounded-3xl border border-white border-opacity-25 bg-white bg-opacity-5 p-8 shadow-inner"
             style={{
               borderRadius: "2.12119rem",
               border: "1.212px solid rgba(255, 255, 255, 0.25)",
@@ -38,7 +38,16 @@ export default function GradientPlatform() {
               backdropFilter: "blur(24.153770446777344px)",
             }}
           >
-            <img src="/page3.png" alt="imagetrustauthx" className="bg-cover" />
+            <div
+              style={{
+                borderRadius: "0.90906rem",
+                background: "linear-gradient(180deg, #EBEBEB 0%, #E1E1E1 100%)",
+                boxShadow:
+                  "0px 1.18388px 37.88403px -7.27255px #000, 0px 24.24183px 37.88403px -6.06046px rgba(0, 0, 0, 0.10)",
+              }}
+            >
+              <img src="/page3.png" alt="imagetrustauthx" className="p-4" />
+            </div>
           </div>
         </div>
         <AnimatedGradient />

diff --git a/src/components/LandingHero.tsx b/src/components/LandingHero.tsx
@@ -49,11 +49,9 @@ export default function LandingHero() {
           </p>
         </button>
       </div>
-      <Image
-        src={appDemo}
-        alt="Preview of TrustAuthX app"
-        className="z-20 -mt-52"
-      />
+      <div className="relative -mt-[25rem]">
+        <Image src={appDemo} alt="Preview of TrustAuthX app" />
+      </div>
     </>
   );
 }