Add TypeTable, Hydra8, Avenu, and Frontier News to products page

app/[lang]/(hyperjump)/products/data.ts

@@ -12,21 +12,57 @@ import {
   productsCommercialData4Text,
   productsCommercialData4Title,
   productsCommercialData5Text,
-  productsCommercialData5Title
+  productsCommercialData5Title,
+  productsCommercialData6Text,
+  productsCommercialData6Title,
+  productsCommercialData7Text,
+  productsCommercialData7Title,
+  productsCommercialData8Text,
+  productsCommercialData8Title,
+  productsCommercialData9Text,
+  productsCommercialData9Title
 } from "@/locales/.generated/strings";
 import type { SupportedLanguage } from "@/locales/.generated/types";
 
 export type CommercialProduct = {
   title: string;
   description: string;
   image: string;
-  urlLearnMore: string;
+  urlLearnMore?: string;
 };
 
+/**
+ * Returns commercial products for the products page, newest first.
+ *
+ * @param lang - Active locale for localized titles and descriptions
+ */
 export function getCommercialProduct(
   lang: SupportedLanguage
 ): CommercialProduct[] {
   return [
+    {
+      title: productsCommercialData6Title(lang),
+      description: productsCommercialData6Text(lang),
+      image: "/images/products/typetable.svg",
+      urlLearnMore: "https://typetable.io"
+    },
+    {
+      title: productsCommercialData7Title(lang),
+      description: productsCommercialData7Text(lang),
+      image: "/images/products/hydra8.png",
+      urlLearnMore: "https://hydra8.hyperjump.tech"
+    },
+    {
+      title: productsCommercialData8Title(lang),
+      description: productsCommercialData8Text(lang),
+      image: "/images/products/avenu.png",
+      urlLearnMore: "https://avenu.hyperjump.tech"
+    },
+    {
+      title: productsCommercialData9Title(lang),
+      description: productsCommercialData9Text(lang),
+      image: "/images/products/frontier-news.svg"
+    },
     {
       title: productsCommercialData2Title(lang),
       description: productsCommercialData2Text(lang),
@@ -65,6 +101,11 @@ export type OpenSourceProduct = {
   repo: string;
 };
 
+/**
+ * Returns open-source products for the products page.
+ *
+ * @param lang - Active locale for localized titles and descriptions
+ */
 export function openSourceProducts(
   lang: SupportedLanguage
 ): OpenSourceProduct[] {

app/[lang]/(hyperjump)/products/page.tsx

@@ -145,17 +145,19 @@ export default async function ProductsPage({ params }: ProductsProps) {
                       __html: featured.description
                     }}
                   />
-                  <Button
-                    asChild
-                    className="bg-hyperjump-blue hover:bg-hyperjump-blue/90 h-12 rounded-full px-8 text-base font-semibold text-white shadow-lg shadow-[#635BFF]/25 transition-all duration-200 hover:scale-[1.02] hover:shadow-xl hover:shadow-[#635BFF]/30">
-                    <Link
-                      href={featured.urlLearnMore}
-                      target="_blank"
-                      rel="noopener noreferrer">
-                      {productsLearnMore(lang)}
-                      <ArrowUpRightIcon className="ml-2 h-4 w-4" />
-                    </Link>
-                  </Button>
+                  {featured.urlLearnMore && (
+                    <Button
+                      asChild
+                      className="bg-hyperjump-blue hover:bg-hyperjump-blue/90 h-12 rounded-full px-8 text-base font-semibold text-white shadow-lg shadow-[#635BFF]/25 transition-all duration-200 hover:scale-[1.02] hover:shadow-xl hover:shadow-[#635BFF]/30">
+                      <Link
+                        href={featured.urlLearnMore}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        {productsLearnMore(lang)}
+                        <ArrowUpRightIcon className="ml-2 h-4 w-4" />
+                      </Link>
+                    </Button>
+                  )}
                 </SectionReveal>
               </div>
             </div>
@@ -222,14 +224,16 @@ function CommercialCard({ product, lang }: CommercialCardProps) {
           className="text-hyperjump-gray mb-6 flex-1 text-[15px] leading-relaxed"
           dangerouslySetInnerHTML={{ __html: product.description }}
         />
-        <Link
-          href={product.urlLearnMore}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-hyperjump-blue inline-flex items-center gap-1.5 text-sm font-semibold transition-all duration-200 hover:gap-2.5">
-          {productsLearnMore(lang)}
-          <ArrowUpRightIcon className="h-3.5 w-3.5" />
-        </Link>
+        {product.urlLearnMore && (
+          <Link
+            href={product.urlLearnMore}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-hyperjump-blue inline-flex items-center gap-1.5 text-sm font-semibold transition-all duration-200 hover:gap-2.5">
+            {productsLearnMore(lang)}
+            <ArrowUpRightIcon className="h-3.5 w-3.5" />
+          </Link>
+        )}
       </div>
     </div>
   );
@@ -249,20 +253,24 @@ function JsonLd({ lang, products }: JsonLdProps) {
           { name: mainProductsLabel(lang), item: `${url}/${lang}/products` }
         ]}
       />
-      {products.map(({ description, image, title, ...product }) => (
-        <SoftwareApplicationJsonLd
-          applicationCategory="BusinessApplication"
-          description={description}
-          image={`${url}${image}`}
-          key={title}
-          name={title}
-          operatingSystem="Web"
-          url={
-            (product as CommercialProduct)?.urlLearnMore ||
-            (product as OpenSourceProduct)?.url
-          }
-        />
-      ))}
+      {products.map(({ description, image, title, ...product }) => {
+        const productUrl =
+          (product as CommercialProduct)?.urlLearnMore ||
+          (product as OpenSourceProduct)?.url ||
+          `${url}/${lang}/products`;
+
+        return (
+          <SoftwareApplicationJsonLd
+            applicationCategory="BusinessApplication"
+            description={description}
+            image={`${url}${image}`}
+            key={title}
+            name={title}
+            operatingSystem="Web"
+            url={productUrl}
+          />
+        );
+      })}
     </>
   );
 }

locales/en/products.json

@@ -24,6 +24,22 @@
       "5": {
         "title": "Monitime",
         "text": "Monitime is a synthetic monitoring service in collaboration with Qwords. You can monitor your website regionally and globally and be notified through various notification channels including Telegram, Slack, and WhatsApp."
+      },
+      "6": {
+        "title": "TypeTable",
+        "text": "Say what to record. Fill it in instantly. Describe what your team keeps re-typing — TypeTable proposes the table, enforces the rules, and lets everyone add records in plain language."
+      },
+      "7": {
+        "title": "Hydra8",
+        "text": "Version, test, and monitor LLM prompts without redeploying. An open-source LLM gateway for versioned prompt templates, evaluations, and monitoring — ship prompt changes from one dashboard."
+      },
+      "8": {
+        "title": "Avenu",
+        "text": "Enterprise-ready AI gateway. Create routing rules and budget for your team."
+      },
+      "9": {
+        "title": "Frontier News",
+        "text": "Daily newsletter with curated summaries of YouTube videos about AI, available in multiple languages."
       }
     }
   },

locales/id/products.json

@@ -24,6 +24,22 @@
       "5": {
         "title": "Monitime",
         "text": "Monitime merupakan layanan synthetic monitoring hasil kolaborasi dengan Qwords yang memungkinkan pemantauan ketersediaan dan performa website secara regional maupun global. Sistem notifikasi mendukung berbagai kanal, termasuk Telegram, Slack, dan WhatsApp."
+      },
+      "6": {
+        "title": "TypeTable",
+        "text": "Ucapkan apa yang perlu dicatat. Isi secara instan. Jelaskan data yang biasanya diketik ulang tim Anda — TypeTable menyarankan tabel, menegakkan aturan, dan memungkinkan semua orang menambahkan catatan dengan bahasa sehari-hari."
+      },
+      "7": {
+        "title": "Hydra8",
+        "text": "Versi, uji, dan pantau prompt LLM tanpa perlu redeploy. Gateway LLM open-source untuk template prompt berversi, evaluasi, dan monitoring — kelola perubahan prompt dari satu dashboard."
+      },
+      "8": {
+        "title": "Avenu",
+        "text": "Gateway AI siap enterprise. Buat aturan routing dan anggaran untuk tim Anda."
+      },
+      "9": {
+        "title": "Frontier News",
+        "text": "Newsletter harian berisi ringkasan terkurasi dari video YouTube tentang AI, tersedia dalam berbagai bahasa."
       }
     }
   },