fix product shot

appwrite · Oct 22, 2024 · 0b708a9 · 0b708a9
1 parent 91ce3ad
commit 0b708a9
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 17 deletions.
diff --git a/src/routes/products/auth/(assets)/platforms/nhost.svg b/src/routes/products/auth/(assets)/platforms/nhost.svg
diff --git a/src/routes/products/auth/(components)/features/Email.svelte b/src/routes/products/auth/(components)/features/Email.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <div
-    class="gradient !absolute z-10 flex max-w-sm scale-95 flex-col gap-4 rounded-lg backdrop-blur-[32px] max-md:-right-32 max-md:bottom-20 max-sm:-right-48 md:top-16 md:right-0 md:scale-100 md:rounded-2xl"
+    class="gradient z-10 flex max-w-sm scale-95 flex-col gap-4 rounded-lg backdrop-blur-[32px] md:rounded-2xl"
 >
     <div class="flex flex-col gap-1 divide-y divide-white/5">
         {#each emails as email}

diff --git a/src/routes/products/auth/(components)/features/Features.svelte b/src/routes/products/auth/(components)/features/Features.svelte
@@ -28,16 +28,26 @@
             'after:to-greyscale-900 after:absolute after:right-0 after:bottom-0 after:left-0 after:z-0 after:h-[350px] after:bg-gradient-to-b after:from-transparent'
         )}
     >
-        <div class="max-h-[50vh] overflow-hidden">
+        <div class="max-h-[40vh] overflow-hidden md:max-h-[50vh]">
             <Phone />
         </div>
-        <Identity />
-        <MultiFactor />
-        <VerificationCode />
-        <Email />
+        <div
+            class="absolute -right-6 scale-75 max-md:top-8 md:right-20 md:bottom-14 md:scale-100 lg:right-40"
+        >
+            <Identity />
+        </div>
+        <div class="absolute -bottom-20 -left-16 z-10 scale-90 md:-bottom-6 md:left-4 md:scale-100">
+            <MultiFactor />
+        </div>
+        <div class="absolute -top-14 -left-4 scale-75 md:left-10 md:scale-100 lg:left-40">
+            <VerificationCode />
+        </div>
+        <div class="absolute -right-52 bottom-12 md:-right-40 md:bottom-10">
+            <Email />
+        </div>
     </div>
 
-    <div class="mt-16 flex flex-col gap-y-4 p-4 md:p-0 md:text-center">
+    <div class="mt-32 flex flex-col gap-y-4 p-4 md:mt-16 md:p-0 md:text-center">
         <div class="mx-auto max-w-xl space-y-4">
             <h2 class="md:text-display text-title text-primary font-aeonik-pro">
                 Customer identity

diff --git a/src/routes/products/auth/(components)/features/Identity.svelte b/src/routes/products/auth/(components)/features/Identity.svelte
@@ -81,9 +81,7 @@
     };
 </script>
 
-<div
-    class="absolute right-0 flex w-[120px] scale-75 flex-col gap-4 max-md:top-8 md:right-[27%] md:bottom-14 md:scale-100"
->
+<div class="right-0 flex w-[120px] flex-col gap-4">
     <div
         class="gradient relative z-20 flex size-20 items-center justify-center overflow-hidden rounded-2xl backdrop-blur-2xl"
     >

diff --git a/src/routes/products/auth/(components)/features/MultiFactor.svelte b/src/routes/products/auth/(components)/features/MultiFactor.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-    class="gradient !absolute -bottom-6 z-10 flex scale-80 flex-col items-center justify-center gap-4 rounded-2xl py-6 px-4 text-center backdrop-blur-[32px] max-sm:-left-14 md:bottom-0 md:left-16 md:max-w-xs md:scale-100 md:rounded-2xl md:p-8"
+    class="gradient flex flex-col items-center justify-center gap-4 rounded-2xl py-6 px-4 text-center backdrop-blur-[32px] md:max-w-xs md:rounded-2xl md:p-8"
 >
     <div class="space-y-1">
         <h3 class="text-description text-primary">Verify your identity</h3>

diff --git a/src/routes/products/auth/(components)/features/VerificationCode.svelte b/src/routes/products/auth/(components)/features/VerificationCode.svelte
@@ -1,8 +1,6 @@
-<div class="absolute -top-14 -left-12 max-w-xs scale-75 md:left-40 md:scale-100">
+<div class="max-w-xs">
     <span class="text-[0.6875rem]">Wed, May 1</span>
-    <div
-        class="gradient flex items-end justify-center gap-2 py-2 px-1.5 text-center backdrop-blur-[32px] md:py-4 md:px-4"
-    >
+    <div class="gradient flex items-end justify-center gap-2 p-4 text-center backdrop-blur-[32px]">
         <span class="text-caption leading-normal -tracking-tight text-white"
             >Verification code for login is 003485</span
         >