Merge branch 'main' into SLA_Docs

Author: EVDOG4LIFE

src/lib/components/ProductsSubmenu.svelte

@@ -166,13 +166,13 @@
                 >
                     <header class="flex items-center justify-between">
                         <span
-                            class="font-aeonik-fono tracking-loose text-secondary block text-xs uppercase"
+                            class="font-aeonik-fono tracking-loose text-primary block text-xs uppercase"
                             >Customer Stories<span class="text-accent">_</span></span
                         >
                         <a
                             href="/blog/category/customer-stories"
-                            class="text-primary text-caption flex items-center gap-2"
-                            >Read more customer stories" <Icon
+                            class="text-secondary text-caption flex items-center"
+                            >Read more customer stories <Icon
                                 name="chevron-right"
                                 class="transition-transform group-hover:translate-x-0.5"
                             ></Icon></a

src/routes/(marketing)/(components)/bento/(animations)/auth.svelte

@@ -68,7 +68,7 @@
         </p>
     </div>
     <div
-        class="relative flex h-85 items-center justify-between overflow-clip rounded-xl bg-black/24 px-8"
+        class="relative mt-auto mb-0 flex h-85 items-center justify-between overflow-clip rounded-xl bg-black/24 px-8"
     >
         <div class="flex h-full w-full items-center justify-center">
             <div

src/routes/(marketing)/(components)/bento/(animations)/databases.svelte

@@ -165,7 +165,7 @@
         </p>
     </div>
     <div
-        class="relative flex h-85 max-h-85 flex-1 flex-col overflow-hidden rounded-xl bg-black/24 px-8"
+        class="relative mt-auto mb-0 flex h-85 max-h-85 flex-1 flex-col overflow-hidden rounded-xl bg-black/24 px-8"
     >
         <div
             class="border-smooth -z-3 mt-6 flex aspect-[4/2] w-full min-w-[450px] flex-col overflow-clip rounded-2xl border bg-[#232325]/90 mask-b-from-60% mask-b-to-100% shadow-[4px_8px_20px_rgba(0,0,0,0.2)] backdrop-blur-md md:mt-12"

src/routes/(marketing)/(components)/bento/(animations)/functions.svelte

@@ -111,7 +111,7 @@
         </p>
     </div>
     <div
-        class="relative flex h-85 items-center justify-between overflow-clip rounded-xl bg-black/24 px-8"
+        class="relative mt-auto mb-0 flex h-85 items-center justify-between overflow-clip rounded-xl bg-black/24 px-8"
     >
         <div
             class={classNames(

src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte

@@ -75,12 +75,13 @@
         </p>
     </div>
     <div
-        class="relative flex h-85 items-center justify-center overflow-clip rounded-xl bg-black/24 px-8"
+        class="relative mt-auto mb-0 flex h-85 items-center justify-center overflow-clip rounded-xl bg-black/24 px-8"
     >
         <div
             class="light absolute top-14 z-10 flex h-[65px] w-[85%] items-center justify-between gap-4 rounded-[20px] bg-white/80 px-3 py-2 shadow-[-8px_4px_32px_rgba(0,0,0,0.24)] backdrop-blur-xl"
             style="transform: translateY(-15px); opacity: 0; filter: blur(4px);"
             bind:this={notification}
+            data-theme-ignore
         >
             <div class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-black">
                 <div class="size-3 rounded-full bg-white"></div>
@@ -99,6 +100,7 @@
             class="light mt-20 flex h-full w-[300px] flex-col rounded-t-[42px] border-x border-t border-white/12 bg-white/8 mask-b-from-60% mask-b-to-100% backdrop-blur-2xl"
             style:transform="translateY(15px)"
             bind:this={device}
+            data-theme-ignore
         >
             <div class="m-2 flex-1 rounded-t-[34px] bg-[#19191C]">
                 <div class="flex items-center justify-between px-8 pt-4">

src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte

@@ -82,7 +82,7 @@
         </p>
     </div>
     <div
-        class="relative flex h-85 items-center justify-center overflow-hidden rounded-xl bg-black/24 px-8"
+        class="relative mt-auto mb-0 flex h-85 items-center justify-center overflow-hidden rounded-xl bg-black/24 px-8"
     >
         <div
             class="relative grid aspect-square h-[240px] w-[240px] grid-cols-2 grid-rows-2 items-center justify-center"

src/routes/(marketing)/(components)/bento/(animations)/sites.svelte

@@ -122,7 +122,7 @@
         </p>
     </div>
     <div
-        class="relative flex h-85 flex-col items-center justify-center overflow-hidden rounded-xl bg-black/24 px-3 md:flex-1 md:px-8"
+        class="relative mt-auto mb-0 flex h-85 flex-col items-center justify-center overflow-hidden rounded-xl bg-black/24 px-3 md:flex-1 md:px-8"
     >
         <div
             class="mx-auto mt-6 hidden w-full flex-col overflow-hidden rounded-[1.25rem] bg-[#232325]/90 mask-b-from-60% mask-b-to-100% px-1 pb-1 backdrop-blur-md md:mt-12 md:flex"

src/routes/(marketing)/(components)/bento/(animations)/storage.svelte

@@ -80,7 +80,7 @@
         </p>
     </div>
     <div
-        class="relative flex h-85 items-center justify-center overflow-clip rounded-xl bg-black/24 p-8"
+        class="relative mt-auto mb-0 flex h-85 items-center justify-center overflow-clip rounded-xl bg-black/24 p-8"
     >
         <div class="relative h-fit border border-white/50 p-1">
             {#each [1, 2, 3, 4] as _, i}

src/routes/(marketing)/(components)/bento/bento.svelte

@@ -52,11 +52,11 @@
 
 <div class="container py-20">
     <div class="mx-auto mb-16 flex max-w-5xl flex-col gap-8">
-        <h2 class="text-primary font-aeonik-pro mx-auto max-w-lg text-center text-5xl">
+        <h2 class="text-primary font-aeonik-pro mx-auto max-w-lg text-center text-4xl md:text-5xl">
             All the products you need, in one platform
         </h2>
 
-        <div class="hidden justify-between gap-8 md:flex">
+        <div class="hidden justify-between gap-8 lg:flex">
             <div
                 class={classNames(
                     'bg-card border-smooth text-primary relative flex h-10 items-center gap-4 rounded-full border border-dashed p-1 text-sm',

src/routes/(marketing)/(components)/features.svelte

@@ -54,9 +54,9 @@
     ];
 </script>
 
-<div class="light bg-[#EDEDF0] pt-20 pb-12 md:pt-40">
+<div class="light mt-4 bg-[#EDEDF0] pt-20 pb-12 md:pt-40">
     <div class="container mx-auto">
-        <section class="flex flex-col items-start md:flex-row">
+        <section class="flex flex-col items-start gap-x-20 md:flex-row">
             <h2
                 class="text-title-lg font-aeonik-pro text-primary max-w-[700px] leading-12 text-pretty"
             >
@@ -72,7 +72,7 @@
         <div class="container grid grid-cols-2 overflow-hidden lg:grid-cols-4">
             {#each features as box}
                 <a
-                    class="text-sub-body group relative border-b border-dashed border-black/8 px-4 py-8 font-medium last-of-type:border-0 nth-of-type-[4]:border-r-0 nth-of-type-[7]:border-b-0 max-lg:even:border-r-0 md:border-r lg:nth-of-type-[5]:border-b-0 lg:nth-of-type-[6]:border-b-0 lg:nth-of-type-[8]:border-b-0"
+                    class="text-sub-body group relative border-b border-dashed border-black/8 p-8 font-medium last-of-type:border-0 nth-of-type-[4]:border-r-0 nth-of-type-[7]:border-b-0 max-lg:even:border-r-0 md:border-r lg:nth-of-type-[5]:border-b-0 lg:nth-of-type-[6]:border-b-0 lg:nth-of-type-[8]:border-b-0"
                     href={box.href}
                     onclick={() => {
                         trackEvent(`feature-${box.label.toLowerCase().replace(' ', '-')}-click`);