Merge pull request #2110 from appwrite/product-order

src/lib/components/FooterNav.svelte

@@ -35,12 +35,12 @@
             Products: [
                 { label: 'Auth', href: '/products/auth' },
                 { label: 'Databases', href: '/docs/products/databases' },
+                { label: 'Storage', href: '/products/storage' },
                 { label: 'Functions', href: '/products/functions' },
                 { label: 'Messaging', href: '/products/messaging' },
-                { label: 'Storage', href: '/products/storage' },
                 { label: 'Realtime', href: '/docs/apis/realtime' },
-                { label: 'Network', href: '/docs/products/network' },
+                { label: 'Hosting', href: '/docs/products/sites' },
-                { label: 'Hosting', href: '/docs/products/sites' }
+                { label: 'Network', href: '/docs/products/network' }
             ],
             Learn: [
                 { label: 'Blog', href: '/blog' },

src/lib/components/ProductsSubmenu.svelte

@@ -43,17 +43,17 @@
             description: 'Set up a full-functioning messaging service.',
             icon: '/images/icons/illustrated/dark/messaging.png'
         },
-        {
-            name: 'Sites',
-            href: '/products/sites',
-            description: 'The open-source Vercel alternative.',
-            icon: '/images/icons/illustrated/dark/sites.png'
-        },
         {
             name: 'Realtime',
             href: '/docs/apis/realtime',
             description: 'Subscribe and react to any event.',
             icon: '/images/icons/illustrated/dark/realtime.png'
+        },
+        {
+            name: 'Sites',
+            href: '/products/sites',
+            description: 'The open-source Vercel alternative.',
+            icon: '/images/icons/illustrated/dark/sites.png'
         }
     ];
 

src/lib/components/layout/navigation/menus/product-menu.svelte

@@ -33,6 +33,11 @@
             name: 'Realtime',
             href: '/docs/apis/realtime',
             description: 'Subscribe and react to any event.'
+        },
+        {
+            name: 'Sites',
+            href: '/products/sites',
+            description: 'The open-source Vercel alternative.'
         }
     ];
 </script>

src/lib/components/layout/navigation/mobile-nav.svelte

@@ -33,6 +33,11 @@
             name: 'Realtime',
             href: '/docs/apis/realtime',
             description: 'Subscribe and react to any event.'
+        },
+        {
+            name: 'Sites',
+            href: '/products',
+            description: 'The open-source Vercel alternative.'
         }
     ];
 

src/lib/components/layout/site-footer.svelte

@@ -34,10 +34,11 @@
             Products: [
                 { label: 'Auth', href: '/products/auth' },
                 { label: 'Databases', href: '/docs/products/databases' },
+                { label: 'Storage', href: '/products/storage' },
                 { label: 'Functions', href: '/products/functions' },
                 { label: 'Messaging', href: '/products/messaging' },
-                { label: 'Storage', href: '/products/storage' },
+                { label: 'Realtime', href: '/docs/apis/realtime' },
-                { label: 'Realtime', href: '/docs/apis/realtime' }
+                { label: 'Sites', href: '/products/sites' }
             ],
             Learn: [
                 { label: 'Docs', href: '/docs' },

src/lib/components/product-pages/product-cards.svelte

@@ -1,25 +1,12 @@
 <script lang="ts">
     import { page } from '$app/state';
-
     const allProducts = {
-        messaging: {
-            title: 'Messaging',
-            description: 'Use Appwrite messaging to send email, SMS, and push notifications.',
-            icon: '/images/icons/illustrated/dark/messaging.png',
-            url: '/products/messaging'
-        },
         auth: {
             title: 'Auth',
             description: 'Build secure authentication and manage your users.',
             icon: '/images/icons/illustrated/dark/auth.png',
             url: '/products/auth'
         },
-        functions: {
-            title: 'Functions',
-            description: ' Scale big and unlock limitless potential with Appwrite functions.',
-            icon: '/images/icons/illustrated/dark/functions.png',
-            url: '/products/functions'
-        },
         databases: {
             title: 'Databases',
             description: 'Store and query structured data, ensuring scalable storage.',
@@ -32,17 +19,30 @@
             icon: '/images/icons/illustrated/dark/storage.png',
             url: '/products/storage'
         },
-        sites: {
+        functions: {
-            title: 'Sites',
+            title: 'Functions',
-            description: 'The open-source Vercel alternative.',
+            description: ' Scale big and unlock limitless potential with Appwrite functions.',
-            icon: '/images/icons/illustrated/dark/sites.png',
+            icon: '/images/icons/illustrated/dark/functions.png',
-            url: '/products/sites'
+            url: '/products/functions'
+        },
+
+        messaging: {
+            title: 'Messaging',
+            description: 'Use Appwrite messaging to send email, SMS, and push notifications.',
+            icon: '/images/icons/illustrated/dark/messaging.png',
+            url: '/products/messaging'
         },
         realtime: {
             title: 'Realtime',
             description: 'Subscribe and react to any event using the Realtime API.',
             icon: '/images/icons/illustrated/dark/realtime.png',
             url: '/docs/realtime'
+        },
+        sites: {
+            title: 'Sites',
+            description: 'The open-source Vercel alternative.',
+            icon: '/images/icons/illustrated/dark/sites.png',
+            url: '/products/sites'
         }
     } as const;
 

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { classNames } from '$lib/utils/classnames';
     import Auth from './(animations)/auth.svelte';
     import Databases from './(animations)/databases.svelte';

src/routes/docs/Sidebar.svelte

@@ -48,6 +48,12 @@
                     icon: 'icon-database',
                     isParent: true
                 },
+                {
+                    label: 'Storage',
+                    href: '/docs/products/storage',
+                    icon: 'icon-folder',
+                    isParent: true
+                },
                 {
                     label: 'Functions',
                     href: '/docs/products/functions',
@@ -67,12 +73,6 @@
                     isParent: true,
                     new: isNewUntil('19 Jul 2025')
                 },
-                {
-                    label: 'Storage',
-                    href: '/docs/products/storage',
-                    icon: 'icon-folder',
-                    isParent: true
-                },
                 {
                     label: 'Network',
                     href: '/docs/products/network',

src/routes/products/sites/(components)/integrate.svelte

@@ -42,45 +42,45 @@
                    </svg>`,
             image: DatabasesSlide
         },
-        {
-            label: 'Functions',
-            icon: Functions,
-            line: (
-                isActive: boolean
-            ) => `<svg width="98" height="75" viewBox="0 0 98 75" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M0 74H35.3623C41.9897 74 47.3623 68.6274 47.3623 62V13C47.3623 6.37258 52.7349 0.999998 59.3623 0.999998H98" class="group-hover:stroke-white ${isActive && 'stroke-white'} group-focus-within:stroke-white transition-all stroke-smooth" stroke-dasharray="4 4"/>
-                   </svg>`,
-            image: FunctionsSlide
-        },
         {
             label: 'Storage',
             icon: Storage,
             line: (
                 isActive: boolean
             ) => `<svg width="98" height="75" viewBox="0 0 98 75" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M98 1H62.6377C56.0103 1 50.6377 6.37258 50.6377 13V62C50.6377 68.6274 45.2651 74 38.6377 74H-9.53674e-07" class="group-hover:stroke-white ${isActive && 'stroke-white'} group-focus-within:stroke-white transition-all stroke-smooth" stroke-dasharray="4 4"/>
+                        <path d="M0 74H35.3623C41.9897 74 47.3623 68.6274 47.3623 62V13C47.3623 6.37258 52.7349 0.999998 59.3623 0.999998H98" class="group-hover:stroke-white ${isActive && 'stroke-white'} group-focus-within:stroke-white transition-all stroke-smooth" stroke-dasharray="4 4"/>
                    </svg>`,
             image: StorageSlide
         },
         {
-            label: 'Realtime',
+            label: 'Functions',
-            icon: Realtime,
+            icon: Functions,
             line: (
                 isActive: boolean
-            ) => `<svg width="98" height="2" viewBox="0 0 98 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+            ) => `<svg width="98" height="75" viewBox="0 0 98 75" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M0 1L98 1.00001" class="group-hover:stroke-white group-focus-within:stroke-white ${isActive && 'stroke-white'} transition-all stroke-smooth" stroke-dasharray="4 4"/>
+                        <path d="M98 1H62.6377C56.0103 1 50.6377 6.37258 50.6377 13V62C50.6377 68.6274 45.2651 74 38.6377 74H-9.53674e-07" class="group-hover:stroke-white ${isActive && 'stroke-white'} group-focus-within:stroke-white transition-all stroke-smooth" stroke-dasharray="4 4"/>
                    </svg>`,
-            image: RealtimeSlide
+            image: FunctionsSlide
         },
         {
             label: 'Messaging',
             icon: Messaging,
+            line: (
+                isActive: boolean
+            ) => `<svg width="98" height="2" viewBox="0 0 98 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0 1L98 1.00001" class="group-hover:stroke-white group-focus-within:stroke-white ${isActive && 'stroke-white'} transition-all stroke-smooth" stroke-dasharray="4 4"/>
+                   </svg>`,
+            image: MessagingSlide
+        },
+        {
+            label: 'Realtime',
+            icon: Realtime,
             line: (
                 isActive: boolean
             ) => `<svg width="98" height="75" viewBox="0 0 98 75" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M98 74H62.6377C56.0103 74 50.6377 68.6274 50.6377 62V13C50.6377 6.37258 45.2651 0.999998 38.6377 0.999998H-9.53674e-07" class="group-hover:stroke-white ${isActive && 'stroke-white'} group-focus-within:stroke-white transition-all stroke-smooth" stroke-dasharray="4 4"/>
                    </svg>`,
-            image: MessagingSlide
+            image: RealtimeSlide
         }
     ];