Merge pull request #2070 from appwrite/homepage-hotfixes

Author: thejessewinton

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`);

src/routes/(marketing)/(components)/logo-list.svelte

@@ -110,7 +110,7 @@
         >
             {title}
         </h2>
-        <div class="relative grid grid-cols-2 gap-4 py-10 md:grid-cols-4">
+        <div class="relative grid grid-cols-2 gap-8 py-10 md:grid-cols-4 md:gap-4">
             {#each logoGroups as group, i}
                 <div class="relative flex aspect-[8/2] flex-col items-center justify-center">
                     {#each group as { src, alt, width, height }, index}

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

@@ -15,7 +15,9 @@
         <h2 class="text-primary font-aeonik-pro text-5xl">
             The Appwrite Network<span class="text-accent">_</span>
         </h2>
-        <p class="text-description text-secondary max-w-[90%] font-medium md:max-w-[40%]">
+        <p
+            class="text-description text-secondary max-w-[90%] font-medium md:max-w-[75%] lg:max-w-[40%]"
+        >
             Pick one of our many cloud regions or edges to meet your project's needs and reduce
             latency.
         </p>

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

@@ -67,7 +67,7 @@
             <div class="mt-4 flex flex-col gap-2 lg:flex-row">
                 <Button
                     href={getAppwriteDashboardUrl()}
-                    class="w-full! md:w-fit!"
+                    class="w-full! lg:w-fit!"
                     onclick={() => {
                         trackEvent(`pricing-get-started-click`);
                     }}>Start building for free</Button
@@ -77,7 +77,7 @@
                         trackEvent(`pricing-view-plans-click`);
                     }}
                     href="/pricing"
-                    class="w-full! md:w-fit!"
+                    class="w-full! lg:w-fit!"
                     variant="secondary">View pricing plans</Button
                 >
             </div>
@@ -88,7 +88,7 @@
         >
             {#each plans as { name, price, tag: label, subtitle, description, event }}
                 {@const isEnterprise = name === 'Enterprise'}
-                <div class="flex h-full w-full grow flex-col gap-1 px-5 py-5 md:pb-0">
+                <div class="flex h-full w-full grow flex-col gap-1 px-5 py-5 md:py-0">
                     <div class="flex items-center gap-2.5">
                         <span class="text-description text-secondary font-medium">{name}</span>
                         {#if label}

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

@@ -93,7 +93,7 @@
     use:visible
 >
     <div class="relative z-10 container w-fit md:w-full">
-        <div class="mt-12 max-w-xl">
+        <div class="mt-12 md:max-w-xl">
             <h2 class="text-primary font-aeonik-pro text-5xl tracking-tighter text-pretty">
                 Thousands of developers <span class="text-secondary">scale with Appwrite</span><span
                     class="text-accent">_</span