fix homepage products images

src/lib/animations/Products/Products.svelte

@@ -1,4 +1,10 @@
 <script lang="ts" context="module">
+    import AuthShot from './(assets)/auth-shot.png?enhanced';
+    import DatabasesShot from './(assets)/db-shot.png?enhanced';
+    import FunctionsShot from './(assets)/fn-shot.png?enhanced';
+    import StorageShot from './(assets)/storage-shot.png?enhanced';
+    import RealtimeShot from './(assets)/realtime-shot.png?enhanced';
+
     export const elId = writable(0);
 
     export function getElSelector(el: string) {
@@ -36,7 +42,7 @@
                 'Rate-limits and advanced user protection',
                 'Custom SMTP and email templates'
             ],
-            shot: './images/products/auth.png'
+            shot: AuthShot
         },
         databases: {
             icon: {
@@ -53,7 +59,7 @@
                 'Custom data validation',
                 'Relationships support'
             ],
-            shot: './images/products/databases.png'
+            shot: DatabasesShot
         },
         functions: {
             icon: {
@@ -69,7 +75,7 @@
                 'Support for 30+ runtimes in 13 languages',
                 'Custom domain support'
             ],
-            shot: './images/products/functions.png'
+            shot: FunctionsShot
         },
         storage: {
             icon: {
@@ -85,7 +91,7 @@
                 'Built-in image transformation capabilities',
                 'Advanced compression with WebP/Brotli support'
             ],
-            shot: './images/products/storage.png'
+            shot: StorageShot
         },
         realtime: {
             icon: {
@@ -100,7 +106,7 @@
                 'Built-in permission management',
                 'Support for DBs, Auth, Storage & Functions'
             ],
-            shot: './images/products/realtime.png'
+            shot: RealtimeShot
         }
     };
 </script>

src/lib/animations/Products/ProductsMobile.svelte

@@ -3,7 +3,8 @@
     import { infos } from './Products.svelte';
 </script>
 
-<div class="wrapper">
+<div class="outside">
+    <div class="wrapper">
         <span class="aw-badges aw-eyebrow">Products_</span>
 
         <h2 class="aw-display aw-u-color-text-primary u-margin-block-start-16">
@@ -16,8 +17,9 @@
         </p>
 
         <div class="infos">
-        {#each objectKeys(infos) as prod}
+            {#each objectKeys(infos) as prod, i}
                 {@const info = infos[prod]}
+                {@const isLast = i === objectKeys(infos).length - 1}
 
                 {#if info}
                     <div class="info">
@@ -37,16 +39,19 @@
                         </ul>
 
                         {#if info.shot}
-                        <img src={info.shot} alt="" />
+                            <enhanced:img class="img" src={info.shot} alt="" />
                         {/if}
                     </div>
+
+                    {#if !isLast}
+                        <hr />
+                    {/if}
                 {/if}
             {/each}
         </div>
 
         <div class="post-wrapper">
             <img src="/images/products/post.png" alt="" />
-        <div class="img-overlay" />
 
             <h2>See your products grow</h2>
             <p>
@@ -54,31 +59,49 @@
                 products users love and use every day.
             </p>
         </div>
+    </div>
+    <div class="img-overlay" />
 </div>
 
 <style lang="scss">
-    .wrapper {
+    .outside {
+        position: relative;
+        overflow: hidden;
         display: none;
-        padding-block-start: 5rem;
-        padding-inline: 1.25rem;
 
-        max-width: 800px;
+        .img-overlay {
-        margin-inline: auto;
+            content: '';
-        overflow: visible;
+            background: linear-gradient(to bottom, transparent 0%, black 40%);
+            position: absolute;
+            bottom: 0;
+            width: 100vw;
+            height: 30rem;
+            z-index: 10;
+        }
     }
 
     @media (max-width: 1399px) {
-        .wrapper {
+        .outside {
             display: block;
         }
     }
 
+    .wrapper {
+        --padding-inline: 1.25rem;
+
+        padding-block-start: 5rem;
+        padding-inline: var(--padding-inline);
+
+        max-width: 600px;
+        margin-inline: auto;
+    }
+
     .infos {
         margin-block-start: 3rem;
 
         display: flex;
         flex-direction: column;
-        gap: 6rem;
+        gap: 3rem;
 
         .info {
             h3 {
@@ -128,11 +151,17 @@
                 }
             }
 
-            > img {
+            .img {
-                width: 100%;
+                inline-size: 100%;
+                block-size: auto;
                 margin-block-start: 2.5rem;
             }
         }
+
+        hr {
+            border: 1px solid hsl(var(--aw-color-smooth));
+            margin-inline: calc(var(--padding-inline) * -1);
+        }
     }
 
     .post-wrapper {
@@ -143,25 +172,16 @@
 
         position: relative;
         width: 100%;
+        /* overflow: hidden; */
 
         padding-block-start: 35rem;
         padding-block-end: 5rem;
 
-        .img-overlay {
-            content: '';
-            background: linear-gradient(to top, black, transparent);
-            position: absolute;
-            bottom: 0;
-            width: 100vw;
-            height: 30rem;
-            z-index: 10;
-        }
-
         img {
             display: block;
             max-block-size: unset;
-            max-inline-size: 100%;
+            max-inline-size: unset;
-            top: 0rem;
+            top: 5rem;
             left: 50%;
             transform: translateX(-50%);
             width: 37.5rem;