feat: update the prducts on the gluestack website phone device

Author: ujjwal2608

apps/website/components/page-components/landing-page/ResponsiveSidebar/sidebar-header-items.tsx

@@ -163,22 +163,22 @@ export const headerItems: SidebarSectionProps[] = [
     title: 'Products',
     items: [
       {
-        title: 'AppLaunchKit',
-        link: 'https://applaunchk.it/',
+        title: 'RapidNative',
+        link: 'https://rapidnative.com/?utm_source=gluestack.io&utm_medium=header&utm_campaign=brand-awareness',
         logo: (
           <Image
-            alt="dark mode"
+            alt="RapidNative logo"
             className="w-5 h-5"
             size="md"
-            source={require('@/public/icon/logo/app-launch-kit/dark-mode.svg')}
+            source={require('@/public/icon/logo/rapidnative/logo.png')}
           />
         ),
         logoDark: (
           <Image
-            alt="light mode"
+            alt="RapidNative logo"
             className="w-5 h-5"
             size="md"
-            source={require('@/public/icon/logo/app-launch-kit/light-mode.svg')}
+            source={require('@/public/icon/logo/rapidnative/logo.png')}
           />
         ),
         badge: (
@@ -188,27 +188,27 @@ export const headerItems: SidebarSectionProps[] = [
         ),
       },
       {
-        title: 'Starter Kit',
-        link: 'https://github.com/gluestack/gluestack-ui-starter-kits/',
+        title: 'gluestack-ui pro',
+        link: 'https://pro.gluestack.io/?utm_source=gluestack.io&utm_medium=header&utm_campaign=site-navigation',
         logo: (
           <Image
-            alt="dark mode"
+            alt="gluestack-ui pro logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/gluestack/logo-dark.svg')}
           />
         ),
         logoDark: (
           <Image
-            alt="dark mode"
+            alt="gluestack-ui pro logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/gluestack/logo-light.svg')}
           />
         ),
         badge: (
-          <Badge size="md" variant="solid" action="success">
-            <BadgeText>FREE</BadgeText>
+          <Badge size="md" variant="solid" action="info">
+            <BadgeText>PAID</BadgeText>
           </Badge>
         ),
       },
@@ -217,15 +217,15 @@ export const headerItems: SidebarSectionProps[] = [
         link: 'https://theappmarket.io',
         logo: (
           <Image
-            alt="dark mode"
+            alt="theappmarket logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/theappmarket/appmarket-logo.svg')}
           />
         ),
         logoDark: (
           <Image
-            alt="dark mode"
+            alt="theappmarket logo"
             className="w-5 h-5"
             size="md"
             source={require('@/public/icon/logo/theappmarket/appmarket-logo.svg')}
@@ -237,6 +237,56 @@ export const headerItems: SidebarSectionProps[] = [
           </Badge>
         ),
       },
+      {
+        title: 'AppLaunchKit',
+        link: 'https://applaunchk.it/',
+        logo: (
+          <Image
+            alt="AppLaunchKit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/app-launch-kit/dark-mode.svg')}
+          />
+        ),
+        logoDark: (
+          <Image
+            alt="AppLaunchKit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/app-launch-kit/light-mode.svg')}
+          />
+        ),
+        badge: (
+          <Badge size="md" variant="solid" action="info">
+            <BadgeText>PAID</BadgeText>
+          </Badge>
+        ),
+      },
+      {
+        title: 'Starter Kit',
+        link: 'https://github.com/gluestack/gluestack-ui-starter-kits/',
+        logo: (
+          <Image
+            alt="Starter Kit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/gluestack/logo-dark.svg')}
+          />
+        ),
+        logoDark: (
+          <Image
+            alt="Starter Kit logo"
+            className="w-5 h-5"
+            size="md"
+            source={require('@/public/icon/logo/gluestack/logo-light.svg')}
+          />
+        ),
+        badge: (
+          <Badge size="md" variant="solid" action="success">
+            <BadgeText>FREE</BadgeText>
+          </Badge>
+        ),
+      },
     ],
   },
   {