feat: updated content

docs/3.0.x/installation.mdx

@@ -6,7 +6,7 @@ title: Installation
 import { InstallationTiles } from "../../src/components";
 
 **NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/).
-(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation) for better performance, new design).
+(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase+website&utm_medium=Docs&utm_campaign=nbpage) for better performance, new design).
 
 Refer the guides shown below to setup NativeBase in your React app.
 

docs/3.1.x/installation.mdx

@@ -6,7 +6,7 @@ title: Installation
 import { InstallationTiles } from "../../src/components";
 
 **NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/).
-(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation) for better performance, new design).
+(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase+website&utm_medium=Docs&utm_campaign=nbpage) for better performance, new design).
 
 Refer the guides shown below to setup NativeBase in your React app.
 
@@ -31,4 +31,4 @@ All snippets start with the prefix `nb-` and are followed by the name of the des
     source={{ uri: "https://cdn.nativebase.io/NativeBaseSnippet.gif" }}
     alt="aang transitioning to avatar state"
   />
-</AspectRatio>
+</AspectRatio>

docs/3.2.x/installation.mdx

@@ -6,7 +6,7 @@ title: Installation
 import { InstallationTiles } from "../../src/components";
 
 **NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/).
-(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation) for better performance, new design).
+(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase+website&utm_medium=Docs&utm_campaign=nbpage) for better performance, new design).
 
 Refer the guides shown below to setup NativeBase in your React app.
 

docs/3.3.x/installation.mdx

@@ -6,7 +6,7 @@ title: Installation
 import { InstallationTiles } from "../src/components";
 
 **NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/).
-(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation) for better performance, new design).
+(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase+website&utm_medium=Docs&utm_campaign=nbpage) for better performance, new design).
 
 Refer the guides shown below to setup NativeBase in your React app.
 

docs/3.4.x/installation.mdx

@@ -6,7 +6,7 @@ title: Installation
 import { InstallationTiles } from "../src/components";
 
 **NativeBase** is supported in [Expo](https://docs.expo.dev/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/).
-(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation) for better performance, new design).
+(Note: If you are starting a new project, please try [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase+website&utm_medium=Docs&utm_campaign=nbpage) for better performance, new design).
 
 Refer the guides shown below to setup NativeBase in your React app.
 

layouts/index.tsx

@@ -377,30 +377,12 @@ function Layout({
                     >
                       <AlertIcon height={18} width={18} />
                       <Text ml="1">
-                        Please opt in to our enterprise plan (coming soon) for
-                        priority support with NativeBase. If you are starting a
-                        new project, we recommend using{" "}
-                        <a href="https://ui.gluestack.io/" target="_blank">
-                          <Text
-                            fontWeight="semibold"
-                            textDecorationLine="underline"
-                          >
-                            gluestack-ui
-                          </Text>
-                        </a>
-                        {". "}
-                        For your existing projects, you can utilize{" "}
-                        <a
-                          href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
-                          target="_blank"
-                        >
-                          <Text
-                            fontWeight="semibold"
-                            textDecorationLine="underline"
-                          >
-                            @gluestack-ui/themed
-                          </Text>
-                        </a>
+                        {" "}
+                        If you are starting a new project, please try{" "}
+                        <Link href="https://gluestack.io/ui/docs/home/getting-started/installation">
+                          gluestack-ui
+                        </Link>{" "}
+                        for better performance and new design.
                       </Text>
                     </Box>
                   </Stack>

src/components/GettingStartedHero.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text, VStack, Stack, useColorModeValue } from "native-base";
+import { Box, Text, VStack, Stack, useColorModeValue, Link } from "native-base";
 import {
   CodePlaygroundIcon,
   BookMarkIcon,
@@ -32,47 +32,46 @@ export function GettingStartedHero() {
               allowing you to develop apps for Android, iOS and the Web.
               <br />
               <br />
-              Please opt in to our enterprise plan (coming soon) for priority
-              support with NativeBase.
-              <br />
-              IMPORTANT MESSAGE — If you are starting a new project with
-              NativeBase, we recommend using{" "}
-              <a href="https://ui.gluestack.io/" target="_blank">
-                <Text fontWeight="semibold" textDecorationLine="underline">
-                  gluestack-ui
-                </Text>
-              </a>{" "}
-              instead. However, if you are already working on a NativeBase
-              project, we recommend using{" "}
-              <a
-                href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
-                target="_blank"
-              >
-                <Text fontWeight="semibold" textDecorationLine="underline">
-                  @gluestack-ui/themed
-                </Text>
-              </a>{" "}
-              instead.{" "}
-              <a
-                href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
-                target="_blank"
+              <Box
+                mb="8"
+                px="8"
+                rounded="8"
+                py="6"
+                borderWidth="1"
+                borderLeftWidth="12"
+                _light={{
+                  bg: "info.50",
+                  borderColor: "info.600",
+                  borderLeftColor: "info.600",
+                }}
+                _dark={{
+                  bg: "black:alpha.10",
+                  borderColor: "info.700:alpha.30",
+                  borderLeftColor: "info.700",
+                }}
               >
-                <Text fontWeight="semibold" textDecorationLine="underline">
-                  Know More
+                <Text
+                  fontSize="lg"
+                  mb={"0"}
+                  _light={{ color: "tipBackgroundColorLight" }}
+                  _dark={{ color: "coolGray.50" }}
+                  fontWeight="medium"
+                >
+                  Info:{" "}
+                  <Text
+                    fontSize="md"
+                    fontWeight="light"
+                    _light={{ color: "tipBackgroundColorLight" }}
+                    _dark={{ color: "tipBackgroundColorDark" }}
+                  >
+                    If you are starting a new project, please try{" "}
+                    <Link href="https://gluestack.io/ui/docs/home/getting-started/installation/?utm_source=nativebase+website&utm_medium=Docs&utm_campaign=nbpage">
+                      gluestack-ui
+                    </Link>{" "}
+                    for better performance and new design.
+                  </Text>
                 </Text>
-              </a>
-              .
-            </Text>
-            <Text
-              fontSize="sm"
-              textAlign="left"
-              color="muted.800"
-              _dark={{
-                color: "muted.200",
-              }}
-            >
-              Please opt in to our enterprise plan (coming soon) for priority
-              support with NativeBase.
+              </Box>
             </Text>
             <Stack direction={{ lg: "row" }} space="4">
               <TileLink

src/new-components/Navbar.tsx

@@ -116,17 +116,27 @@ export default function Navbar(props: any) {
           >
             <Menu.Item
               _light={{
-                bg: "gluestack-ui" === activeVersion ? "coolGray.200" : "coolGray.50",
+                bg:
+                  "gluestack-ui" === activeVersion
+                    ? "coolGray.200"
+                    : "coolGray.50",
               }}
               _dark={{
-                bg: "gluestack-ui" === activeVersion ? "coolGray.800" : "coolGray.800",
+                bg:
+                  "gluestack-ui" === activeVersion
+                    ? "coolGray.800"
+                    : "coolGray.800",
               }}
             >
-              <NBLink href="https://gluestack.io" isExternal isUnderlined={false}>
-              gluestack-ui
+              <NBLink
+                href="https://www.gluestack.io/?utm_source=nativebase+website&utm_medium=Header&utm_campaign=nbpage"
+                isExternal
+                isUnderlined={false}
+              >
+                gluestack-ui
               </NBLink>
             </Menu.Item>
-            <Menu.Item
+            {/* <Menu.Item
               onPress={() => {
                 setActiveVersion("next");
                 updateActiveVersion("next", versions);
@@ -139,7 +149,7 @@ export default function Navbar(props: any) {
               }}
             >
               next
-            </Menu.Item>
+            </Menu.Item> */}
             {versions.map((version: string, index: any) => {
               return (
                 <Menu.Item