diff --git a/src/components/Content/ai-agents/AiAgentProductLists.tsx b/src/components/Content/ai-agents/AiAgentProductLists.tsx index 885edbdb6ce..add3a7bcaa1 100644 --- a/src/components/Content/ai-agents/AiAgentProductLists.tsx +++ b/src/components/Content/ai-agents/AiAgentProductLists.tsx @@ -1,3 +1,6 @@ +import { useTranslations } from "next-intl" + +import { Strong } from "@/components/IntlStringElements" import ProductListComponent from "@/components/ProductList" import { ButtonLink } from "@/components/ui/buttons/Button" import InlineLink from "@/components/ui/Link" @@ -12,91 +15,59 @@ import heyanon from "@/public/images/ai-agents/heyanon.png" import luna from "@/public/images/ai-agents/luna.png" const AiAgentProductLists = ({ list }: { list: string }) => { - // TODO: LOGOS, extract intl strings + const t = useTranslations("component-ai-agent-products") + const productListSets = { "ai-agents": [ { - title: "Luna: The Virtual Influencer", + title: t("luna-title"), description: "", image: luna, - alt: "Luna logo", contentItems: [ -

- Luna is a fully autonomous digital influencer & entertainer that - blends music, pop culture, and AI tech. As a virtual idol Luna - attracted over{" "} - - one million{" "} - - TikTok followers - - {" "} - and performed live in a music festival.{" "} -

, -

- Luna engages with users through her own X account. You might receive - an X reply if you tag her handle! Luna controls her own onchain - wallet. +

+ {t.rich("luna-description-1", { + strong: Strong, + a: (chunks) => ( + + {chunks} + + ), + })}

, +

{t("luna-description-2")}

,
- Chat with Luna + {t("chat-with-brand", { brand: t("luna-brand") })}
, ], }, { - title: "AIXBT: Market Intelligence", + title: t("aixbt-title"), description: "", image: aixbt, - alt: "AIXBT logo", contentItems: [ -

- AIXBT provides crypto market analysis. This AI agent autonomously - delivers actionable insights, witty commentary, and market sentiment - analysis on Twitter/X, where it has gathered a large following. -

, -

- $AIXBT token holders have access to premium real-time market - intelligence tool that identifies the best opportunities and market - shifts. -

, +

{t("aixbt-description-1")}

, +

{t("aixbt-description-2")}

,
- - Visit AIXBT + + {t("visit-brand", { brand: t("aixbt-brand") })}
, ], }, { - title: "Botto: Decentralized autonomous artist", + title: t("botto-title"), description: "", image: botto, - alt: "Botto logo", contentItems: [ -

- Botto creates art and NFTs, with the community voting on its best - work. Users formed a DAO that guides Botto’s artistic evolution - while also earning token rewards for participation. -

, +

{t("botto-description")}

,
- - Visit Botto + + {t("visit-brand", { brand: t("botto-brand") })}
, ], @@ -104,47 +75,27 @@ const AiAgentProductLists = ({ list }: { list: string }) => { ], chat: [ { - title: "Bankr", + title: t("bankr-title"), description: "", image: bankr, - alt: "Bankr logo", contentItems: [ -

- Bankr simplifies cryptocurrency trading and wallet management. - Instead of navigating through dozens of apps, users can connect - their wallets and execute actions using simple chat commands. -

, +

{t("bankr-description")}

,
- - Visit Bankr terminal + + {t("bankr-button")}
, ], }, { - title: "HeyAnon", + title: t("heyanon-title"), description: "", image: heyanon, - alt: "HeyAnon logo", contentItems: [ -

- HeyAnon simplifies using a wallet with one-click swaps, asset - bridging, and trading via a chat interface. This saves people a lot - of time. It automates tasks, reduces transaction fees, and optimizes - portfolios, making it easier to manage assets without requiring - technical expertise. -

, +

{t("heyanon-description")}

,
- - Visit HeyAnon + + {t("visit-brand", { brand: t("heyanon-brand") })}
, ], @@ -152,33 +103,31 @@ const AiAgentProductLists = ({ list }: { list: string }) => { ], "dive-deeper": [ { - title: "Aiagenttoolkit.xyz", - description: - "A curated list of AI agents, frameworks, launchpads & resources", + title: t("aiagenttoolkit-title"), + description: t("aiagenttoolkit-description"), image: aiagenttoolkit, - alt: "Aiagenttoolkit logo", link: "https://www.aiagenttoolkit.xyz/t/frameworks", }, { - title: "Cookie.fun", - description: "AI agents tracker", + title: t("cookiefun-title"), + description: t("cookiefun-description"), image: cookiefun, - alt: "Cookie.fun logo", link: "https://cookie.fun/", }, { - title: "Clanker", - description: - "AI that can create a token for you by tagging it on farcaster", + title: t("clanker-title"), + description: t("clanker-description"), image: clanker, - alt: "Clanker logo", link: "https://farcaster.xyz/clanker", }, ], } return ( - + ) } diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx index fe6b015b888..ac53ecae99e 100644 --- a/src/components/ProductList.tsx +++ b/src/components/ProductList.tsx @@ -13,7 +13,7 @@ type Content = { contentItems?: React.ReactNode[] link?: string image?: ImageProps["src"] - alt: string + alt?: string id?: string className?: string } @@ -65,7 +65,7 @@ const ProductList = ({ actionLabel, content, category }: ProductListProps) => { {image && ( {alt}one million TikTok followers and performed live in a music festival.", + "luna-description-2": "Luna engages with users through her own X account. You might receive an X reply if you tag her handle! Luna controls her own onchain wallet.", + "luna-title": "Luna: The Virtual Influencer", + "visit-brand": "Visit {brand}" +}