Get Started section

src/components/Home/components/HomeHero.tsx

@@ -17,13 +17,13 @@ export const HomeHero: React.FC = () => {
         <div className="description flex flex-col gap-8 sm:gap-10">
           <div className="grid grid-cols-10 gap-5 md:gap-8 text-base leading-[160%] font-normal text-grey-400 dark:text-grey-300">
             <p className="col-span-10 md:col-span-5">
-              ZetaChain is the only decentralized blockchain and smart contract platform built for omnichain
-              interoperability.
+              ZetaChain is the first Universal Blockchain with native access to Bitcoin, Ethereum, Solana, and more,
+              offering seamless UX and unified liquidity to the next billions of users.
             </p>
 
             <p className="col-span-10 md:col-span-5">
-              A truly fluid, multi-chain crypto ecosystem, where users and developers can use and appreciate the
-              benefits of any blockchain.
+              With its Universal EVM, ZetaChain empowers developers to build Universal Apps that operate natively across
+              any blockchain, creating a fluid crypto ecosystem from a single platform.
             </p>
           </div>
 

src/components/shared/components/Layout/Layout.constants.tsx

@@ -73,13 +73,27 @@ export const navMainItems: NavItem[][] = [
       url: "/",
     },
   ],
+  [
+    {
+      label: "Get Started",
+      icon: IconAbout,
+      url: "/start",
+    },
+  ],
   [
     {
       label: "Build",
       icon: IconCode,
       url: "/developers",
     },
   ],
+  [
+    {
+      label: "Tools",
+      icon: IconTools,
+      url: "/reference",
+    },
+  ],
   [
     {
       label: "Run a Node",
@@ -94,13 +108,6 @@ export const navMainItems: NavItem[][] = [
       url: "/users",
     },
   ],
-  [
-    {
-      label: "Tools",
-      icon: IconTools,
-      url: "/reference",
-    },
-  ],
   [
     {
       label: "About",

src/components/shared/components/Layout/components/NavigationAccordionLink.tsx

@@ -20,7 +20,11 @@ const StyledAccordion = styled(Accordion)`
   }
 `;
 
-type NavigationAccordionLinkProps = PropsWithChildren<{ page: Page; onClick?: () => void }>;
+type NavigationAccordionLinkProps = PropsWithChildren<{
+  page: Page;
+  onClick?: () => void;
+  isTopLevelPage?: boolean;
+}>;
 
 const NavigationAccordion: React.FC<NavigationAccordionLinkProps> = ({ page, children }) => {
   const router = useRouter();
@@ -64,7 +68,7 @@ const NavigationAccordion: React.FC<NavigationAccordionLinkProps> = ({ page, chi
   );
 };
 
-export const NavigationAccordionLink: React.FC<NavigationAccordionLinkProps> = ({ page, onClick }) => {
+export const NavigationAccordionLink: React.FC<NavigationAccordionLinkProps> = ({ page, onClick, isTopLevelPage }) => {
   const router = useRouter();
   const isRouteSelected = router.pathname === page.route;
 
@@ -78,12 +82,14 @@ export const NavigationAccordionLink: React.FC<NavigationAccordionLinkProps> = (
         })}
         onClick={onClick}
       >
-        <div
-          className={clsx("w-1 h-1 ml-1 mr-2 mt-2 sm:mt-[5px] shrink-0 transition-all", {
-            "bg-green-100 ": isRouteSelected,
-            "bg-grey-200 dark:bg-grey-600 group-hover:bg-green-100": !isRouteSelected,
-          })}
-        />
+        {!isTopLevelPage && (
+          <div
+            className={clsx("w-1 h-1 ml-1 mr-2 mt-2 sm:mt-[5px] shrink-0 transition-all", {
+              "bg-green-100 ": isRouteSelected,
+              "bg-grey-200 dark:bg-grey-600 group-hover:bg-green-100": !isRouteSelected,
+            })}
+          />
+        )}
 
         <div className="text-base leading-[130%] sm:text-xs sm:leading-[110%] whitespace-pre-wrap text-ellipsis overflow-hidden">
           {getPageTitle(page)}

src/components/shared/components/Layout/components/NavigationLayout.tsx

@@ -89,7 +89,12 @@ export const NavigationLayout: React.FC<NavigationLayoutProps> = ({ isMainPage,
                                 .filter((page) => page.route !== item.url)
                                 .map((page) => (
                                   <div key={page.route} className="px-3 pl-12 sm:pr-6 pb-3 sm:pb-2">
-                                    <NavigationAccordionLink key={page.route} page={page} onClick={closeMobileDrawer} />
+                                    <NavigationAccordionLink
+                                      key={page.route}
+                                      page={page}
+                                      onClick={closeMobileDrawer}
+                                      isTopLevelPage
+                                    />
                                   </div>
                                 ))}
                             </List>

src/pages/_meta.json

@@ -3,10 +3,18 @@
     "title": "ZetaChain Documentation",
     "description": "ZetaChain is the only decentralized blockchain and smart contract platform built for omnichain interoperability."
   },
+  "start": {
+    "title": "Get Started",
+    "description": "Start building on ZetaChain."
+  },
   "developers": {
     "title": "Build",
     "description": "Learn how to build on ZetaChain."
   },
+  "reference": {
+    "title": "Tools",
+    "description": "Useful articles to help get you up and running."
+  },
   "nodes": {
     "title": "Run a Node",
     "description": "Setup and run a ZetaChain node.",
@@ -17,12 +25,8 @@
     "title": "Using our Products",
     "description": "Start using our many products."
   },
-  "reference": {
-    "title": "Tools",
-    "description": "Useful articles to help get you up and running."
-  },
   "about": {
     "title": "About",
     "description": "All about ZetaChain, the foundational, public blockchain that enables omnichain, generic smart contracts and messaging between any blockchain."
   }
-}
+}