Update titles of the products (#1827)

Author: kamilkisiela

.changeset/unlucky-hornets-warn.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Update titles of the products

packages/components/src/components/hive-footer.tsx

@@ -149,7 +149,7 @@ const DEVELOPER: ILink[] = [
   },
   {
     children: 'Hive Updates',
-    title: 'Read most recent developments from GraphQL Hive',
+    title: 'Read most recent developments from Hive',
     href: 'https://the-guild.dev/graphql/hive/product-updates',
   },
   {

packages/components/src/components/hive-navigation/index.tsx

@@ -50,7 +50,12 @@ export interface HiveNavigationProps {
   productName: string;
   logo?: ReactNode;
   navLinks?: { href: string; children: ReactNode }[];
-  developerMenu?: { href: string; icon: React.FC<{ className?: string }>; children: ReactNode }[];
+  developerMenu?: {
+    href: string;
+    title?: string;
+    icon: React.FC<{ className?: string }>;
+    children: ReactNode;
+  }[];
 }
 /**
  *
@@ -213,11 +218,12 @@ export const ProductsMenu = React.forwardRef<HTMLDivElement, ProductsMenuProps>(
               Hive
             </p>
             <p className="mt-1 text-sm leading-5 text-green-800 dark:text-neutral-400">
-              GraphQL Management Platform & Decision-making Engine
+              GraphQL Federation Platform with Schema Registry and Analytics
             </p>
           </NavigationMenuLink>
           <Anchor
             href="https://app.graphql-hive.com/"
+            title="Discover the Hive platform"
             className="hive-focus -my-2 ml-2 flex items-center gap-2 rounded-lg p-2 font-medium text-green-800 transition-colors hover:bg-beige-100 hover:text-green-1000 dark:text-neutral-400 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-200"
           >
             <span>Get started</span> <ArrowIcon />
@@ -228,7 +234,7 @@ export const ProductsMenu = React.forwardRef<HTMLDivElement, ProductsMenuProps>(
           <ul>
             {(
               [
-                [PRODUCTS.HIVE_GATEWAY, 'Federation Gateway'],
+                [PRODUCTS.HIVE_GATEWAY, 'GraphQL Federation Gateway'],
                 [PRODUCTS.MESH, 'Anything to GraphQL'],
                 [PRODUCTS.YOGA, 'GraphQL Server & Subgraph'],
               ] as const
@@ -238,6 +244,7 @@ export const ProductsMenu = React.forwardRef<HTMLDivElement, ProductsMenuProps>(
                 <li key={product.name}>
                   <NavigationMenuLink
                     href={bidirectionalProductLink(product)}
+                    title={product.title}
                     className="flex flex-row items-center gap-4 p-4"
                   >
                     <div className="size-12 rounded-lg bg-blue-400 p-2.5">
@@ -323,7 +330,12 @@ interface DeveloperMenuProps extends React.HTMLAttributes<HTMLDivElement> {
   isHive: boolean;
   developerMenu:
     | undefined
-    | { href: string; icon: React.FC<{ className?: string }>; children: ReactNode }[];
+    | {
+        href: string;
+        title?: string;
+        icon: React.FC<{ className?: string }>;
+        children: ReactNode;
+      }[];
 }
 /**
  * @internal
@@ -334,17 +346,32 @@ export const DeveloperMenu = React.forwardRef<HTMLDivElement, DeveloperMenuProps
       {
         href: isHive ? '/docs' : 'https://the-guild.dev/graphql/hive/docs',
         icon: PaperIcon,
+        title: 'Visit the documentation',
         children: 'Documentation',
       },
-      { href: 'https://status.graphql-hive.com/', icon: TargetIcon, children: 'Status' },
+      {
+        href: 'https://status.graphql-hive.com/',
+        title: 'Check Hive status',
+        icon: TargetIcon,
+        children: 'Status',
+      },
       {
         href: isHive ? '/product-updates' : 'https://the-guild.dev/graphql/hive/product-updates',
+        title: 'Read most recent developments from Hive',
         icon: RightCornerIcon,
         children: 'Product Updates',
       },
-      { href: 'https://the-guild.dev/blog', icon: PencilIcon, children: 'Blog' },
       {
-        href: 'https://github.com/dotansimha/graphql-code-generator',
+        href: 'https://the-guild.dev/blog',
+        title: 'Read our blog post',
+        icon: PencilIcon,
+        children: 'Blog',
+      },
+      {
+        href: isHive
+          ? 'https://github.com/graphql-hive/console'
+          : 'https://github.com/dotansimha/graphql-code-generator',
+        title: 'Give us a star',
         icon: GitHubIcon,
         children: 'GitHub',
       },
@@ -355,8 +382,8 @@ export const DeveloperMenu = React.forwardRef<HTMLDivElement, DeveloperMenuProps
         <div>
           <ColumnLabel>Developer</ColumnLabel>
           <ul>
-            {developerMenu.map(({ href, icon, children }, i) => (
-              <MenuColumnListItem key={i} href={href} icon={icon}>
+            {developerMenu.map(({ href, title, icon, children }, i) => (
+              <MenuColumnListItem key={i} title={title} href={href} icon={icon}>
                 {children}
               </MenuColumnListItem>
             ))}
@@ -392,16 +419,19 @@ DeveloperMenu.displayName = 'DeveloperMenu';
 function MenuColumnListItem({
   children,
   href,
+  title,
   icon: Icon,
 }: {
   children: ReactNode;
   href: string;
+  title?: string;
   icon: React.FC<{ className?: string }>;
 }) {
   return (
     <li>
       <NavigationMenuLink
         href={href}
+        title={title}
         className="flex flex-row items-center gap-3 text-nowrap px-4 py-2"
         arrow
       >

packages/components/src/products.tsx

@@ -59,21 +59,22 @@ export interface ProductInfo {
 export const PRODUCTS: Record<ProductType, ProductInfo> = {
   HIVE: {
     name: 'Hive',
-    title: 'Schema registry for your GraphQL workflows',
+    title: 'Open Source GraphQL Federation Platform (Schema Registry, Gateway, Analytics) ',
     href: 'https://the-guild.dev/graphql/hive',
     logo: HiveIcon,
     primaryColor: '#ffb21d',
   },
   HIVE_GATEWAY: {
     name: 'Hive Gateway',
-    title: 'A fully-featured GraphQL gateway framework',
+    title:
+      'GraphQL Gateway (Router) for federated GraphQL with Subscriptions support and built-in security features',
     href: 'https://the-guild.dev/graphql/hive/docs/gateway',
     logo: HiveGatewayIcon,
     primaryColor: '#ffb21d',
   },
   MESH: {
     name: 'Mesh',
-    title: 'A fully-featured GraphQL gateway framework',
+    title: 'A fully-featured GraphQL federation framework',
     href: 'https://the-guild.dev/graphql/mesh',
     logo: MeshIcon,
     primaryColor: '#1bcbe2',