refactor(features): update title handling to accept dynamic titles array and improve localization support

src/components/Features.astro

@@ -19,7 +19,11 @@ const {
   },
 } = getUI(locale)
 
-const { title1 = features.title1, title2 = features.title2, title3 = features.title3 } = Astro.props
+interface Props {
+  titles?: string[]
+}
+
+const { titles } = Astro.props
 
 const descriptions = Object.values(features.featureTabs).map((tab) => tab.description)
 ---
@@ -29,15 +33,18 @@ const descriptions = Object.values(features.featureTabs).map((tab) => tab.descri
   class="relative flex w-full flex-col py-12 text-start lg:py-36"
 >
   <Description class="mb-2 text-4xl sm:text-6xl font-bold">
-    <motion.span client:load {...getTitleAnimation(0.2)}>
-      {title1}
-    </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.4)}>
-      {title2}
-    </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.6)}>
-      {title3}
-    </motion.span>
+    {(titles || features.titles).map((title, index) => (
+      title !== '\n' ? (
+        <motion.span
+          client:load
+          {...getTitleAnimation(0.2 + index * 0.2)}
+        >
+          {title}
+        </motion.span>
+      ) : (
+        <br class="hidden md:block" />
+      )
+    ))}
   </Description>
   <motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2">
     {features.description}

src/components/Sponsors.astro

@@ -21,7 +21,7 @@ const {
 <section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
   <div class="mx-auto flex flex-col text-center">
     <motion.span client:load {...getTitleAnimation(0.2)}>
-      <Description class="mb-2 text-6xl font-bold">Our Sponsors</Description>
+      <Description class="mb-2 text-6xl font-bold">{sponsors.title}</Description>
     </motion.span>
     <motion.span client:load {...getTitleAnimation(0.4)}>
       <Description set:html={sponsors.description} />

src/constants/i18n.ts

@@ -13,7 +13,7 @@ export const i18n = {
  * Type definition for UI translations based on the English translation
  * @typedef {Object} UIProps
  */
-export type UIProps = typeof UI_EN
+export type UIProps = typeof UI_EN | typeof UI_JA
 
 export const getIntlLocale = (locale: string) => {
   return i18n.LOCALES.find((l) => l.value === locale)?.intl

src/i18n/en/translation.json

@@ -21,9 +21,7 @@
         }
       },
       "features": {
-        "title1": "Productivity",
-        "title2": "at",
-        "title3": "its best",
+        "titles": ["Productivity", "at", "its best"],
         "description": "Zen Browser is packed with features that help you stay productive and focused. Browsers should be tools that help you get things done, not distractions that keep you from your work.",
         "featureTabs": {
           "workspaces": {

src/i18n/ja/translation.json

@@ -21,9 +21,7 @@
         }
       },
       "features": {
-        "title1": "生産性",
-        "title2": "の",
-        "title3": "極み",
+        "titles": ["生産性", "の", "極み"],
         "description": "Zenは、生産性と集中力を高める機能が満載です。ブラウザーは作業の妨げではなく、作業を助けるツールであるべきです。",
         "featureTabs": {
           "workspaces": {

src/pages/[...locale]/welcome.astro

@@ -15,9 +15,7 @@ const {
 <Layout title={layout.welcome.title} description={layout.welcome.description}>
   <main class="container">
     <Features
-      title1={welcome.title[0]}
-      title2={welcome.title[1]}
-      title3={welcome.title[2]}
+      titles={welcome.title}
     />
   </main>
 </Layout>