updates

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

@@ -73,7 +73,9 @@
                     y: [12, -5]
                 },
                 {
-                    type: 'spring'
+                    type: 'spring',
+                    bounce: 0.3,
+                    duration: 0.35
                 }
             );
             shouldAnimate = true;
@@ -86,7 +88,9 @@
                         y: [-5, 12]
                     },
                     {
-                        type: 'spring'
+                        type: 'spring',
+                        bounce: 0.3,
+                        duration: 0.35
                     }
                 );
 
@@ -106,7 +110,9 @@
                         y: [12, -5]
                     },
                     {
-                        type: 'spring'
+                        type: 'spring',
+                        bounce: 0.3,
+                        duration: 0.35
                     }
                 );
                 shouldAnimate = true;
@@ -119,7 +125,9 @@
                             y: [-5, 12]
                         },
                         {
-                            type: 'spring'
+                            type: 'spring',
+                            bounce: 0.3,
+                            duration: 0.35
                         }
                     );
 

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

@@ -98,7 +98,7 @@
 </script>
 
 <a
-    href="/producst/sites"
+    href="/products/sites"
     class="border-smooth group col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] lg:col-span-7"
     bind:this={container}
 >

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

@@ -9,37 +9,49 @@
     let image: HTMLElement;
 
     $effect(() => {
-        const from: AnimationSequence = [
+        hover(container, () => {
-            [image, { borderRadius: '4px', filter: 'grayscale(100%)' }]
+            if (isMobile()) return;
-        ];
 
-        const to: AnimationSequence = [[image, { borderRadius: '8px', filter: 'grayscale(50%)' }]];
+            animate(image, { borderRadius: '12px', filter: 'grayscale(25%)' }, { duration: 0.2 });
+
+            return () => {
+                animate(
+                    image,
+                    {
+                        borderRadius: '4px',
+                        filter: 'grayscale(100%)'
+                    },
+                    { duration: 0.2 }
+                );
+            };
+        });
 
         inView(
             container,
             () => {
                 if (!isMobile()) return;
 
-                animate(to, { duration: 0.2 });
+                animate(
+                    image,
+                    {
+                        borderRadius: '12px',
+                        filter: 'grayscale(25%)'
+                    },
+                    { duration: 0.2 }
+                );
 
                 return () => {
-                    animate(from, { duration: 0.2 });
+                    animate(
+                        image,
+                        { borderRadius: '4px', filter: 'grayscale(100%)' },
+                        { duration: 0.2 }
+                    );
                 };
             },
             {
                 amount: 'all'
             }
         );
-
-        hover(container, () => {
-            if (isMobile()) return;
-
-            animate(to, { duration: 0.25 });
-
-            return () => {
-                animate(from, { duration: 0.25 });
-            };
-        });
     });
 </script>
 
@@ -79,7 +91,7 @@
             <img
                 src={Image}
                 alt="Storage"
-                class="md:max-w-auto h-full w-full max-w-[350px] overflow-hidden object-contain transition-all"
+                class="md:max-w-auto h-full w-full max-w-[350px] overflow-hidden object-cover transition-all"
                 bind:this={image}
                 style:border-radius="4px"
                 style:filter="grayscale(100%)"

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

@@ -52,8 +52,8 @@
 
 <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-sm text-center text-5xl">
+        <h2 class="text-primary font-aeonik-pro mx-auto max-w-lg text-center text-5xl">
-            Backend APIs, frontend hosting
+            All the products you need, in one platform
         </h2>
 
         <div class="hidden justify-between gap-8 md:flex">

src/routes/(marketing)/(components)/case-studies.svelte

@@ -51,7 +51,7 @@
 
 <div
     class={classNames(
-        'relative -mb-4 flex min-h-[60vh] items-center justify-center overflow-hidden py-8',
+        'relative -mb-4 flex min-h-[60vh] items-center justify-center overflow-hidden pt-30 pb-40',
         'from-0% before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-radial-[circle_at_120%_-50%] before:from-purple-500/30 before:to-transparent before:to-40% before:blur-2xl',
         'after:from-accent/20 after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-radial-[circle_at_-15%_125%] after:from-0% after:to-transparent after:to-40% after:blur-2xl'
     )}

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

@@ -3,42 +3,50 @@
         {
             label: 'Self-Hosted',
             description: 'Own your data or host it on a cloud region of choice.',
-            icon: '/images/icons/gradients/self-hosted.svg'
+            icon: '/images/icons/gradients/self-hosted.svg',
+            href: '/docs/advanced/self-hosting'
         },
         {
             label: 'Encryption',
             description: 'Built-in data encryption both in rest and in transit.',
-            icon: '/images/icons/gradients/lock.svg'
+            icon: '/images/icons/gradients/lock.svg',
+            href: '/docs/advanced/security/encryption'
         },
         {
             label: 'Abuse protection',
             description: 'Protect your APIs from abuse with built-in protection.',
-            icon: '/images/icons/gradients/shield.svg'
+            icon: '/images/icons/gradients/shield.svg',
+            href: '/docs/advanced/security/abuse-protection#rate-limiting'
         },
         {
             label: 'Data migrations',
             description: 'Easily transfer data from 3rd parties or between Cloud and self-hosted.',
-            icon: '/images/icons/gradients/database.svg'
+            icon: '/images/icons/gradients/database.svg',
+            href: '/docs/advanced/migrations'
         },
         {
             label: 'GDPR',
             description: 'Safeguard user data and privacy with provided GDPR regulations.',
-            icon: '/images/icons/gradients/star.svg'
+            icon: '/images/icons/gradients/star.svg',
+            href: '/docs/advanced/security/gdpr'
         },
         {
             label: 'SOC-2',
             description: 'Ensure the highest level of security and privacy protection.',
-            icon: '/images/icons/gradients/soc-2.svg'
+            icon: '/images/icons/gradients/soc-2.svg',
+            href: '/docs/advanced/security/soc2'
         },
         {
             label: 'HIPAA',
             description: 'Protect sensitive user health data.',
-            icon: '/images/icons/gradients/hipaa.svg'
+            icon: '/images/icons/gradients/hipaa.svg',
+            href: '/docs/advanced/security/hipaa'
         },
         {
             label: 'CCPA',
             description: 'Protect sensitive user health data.',
-            icon: '/images/icons/gradients/ccpa.svg'
+            icon: '/images/icons/gradients/ccpa.svg',
+            href: '/docs/advanced/security/ccpa'
         }
     ];
 </script>
@@ -58,8 +66,9 @@
     <div class="mt-20 border-y border-dashed border-black/8">
         <div class="container grid grid-cols-1 overflow-hidden md:grid-cols-2 lg:grid-cols-4">
             {#each features as box}
-                <div
+                <a
                     class="text-sub-body relative border-b border-dashed border-black/8 py-8 font-medium last-of-type:border-0 nth-of-type-[4]:border-r-0 max-lg:even:border-r-0 md:border-r md:px-8 lg:nth-of-type-[5]:border-b-0 lg:nth-of-type-[6]:border-b-0 lg:nth-of-type-[7]:border-b-0 lg:nth-of-type-[8]:border-b-0"
+                    href={box.href}
                 >
                     <img src={box.icon} width="40" height="40" alt="" />
                     <h3 class="text-primary mt-4 flex flex-wrap items-baseline gap-3">
@@ -68,7 +77,7 @@
                     <p class="text-secondary mt-1">
                         {box.description}
                     </p>
-                </div>
+                </a>
             {/each}
         </div>
     </div>

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

@@ -35,8 +35,8 @@
             </GradientText>
 
             <p class="text-description text-secondary font-medium">
-                Appwrite’s open-source platform empowers you to build applications faster with ready
+                Appwrite is an open-source, all-in-one development platform. Use built-in backend
-                to use backend APIs and host your frontend on one platform.
+                APIs and web hosting, all from a single platform.
             </p>
 
             <div class="mt-4 flex flex-col gap-2 lg:flex-row">

src/routes/(marketing)/+page.svelte

@@ -22,9 +22,9 @@
     <LogoList class="border-smooth border-b" />
     <Bento />
     <Pullquote
-        name="Ryan O’Conner"
+        name="Phil McCluskey"
-        title="Founder, K Collect"
+        title="Development lead, Majik Kids"
-        avatar="/images/testimonials/ryan-oconner.png"
+        avatar="/images/testimonials/phil.jpg"
     >
         <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
         that you need with Appwrite.</Pullquote