feat: add homepage translations for asyncapi website

.gitignore

@@ -13,3 +13,5 @@ yarn.lock
 meetings.json
 .netlify
 .env
+cypress/screenshots
+cypress/videos

components/Calendar.js

@@ -2,8 +2,12 @@ import eventsData from '../config/meetings.json';
 import GoogleCalendarButton from './buttons/GoogleCalendarButton';
 import Heading from './typography/Heading';
 import { getEvents } from '../lib/staticHelpers';
+import { useTranslation } from '../lib/i18n';
 
 export default function Calendar({ className = '', size, text="text-left" }) {
+
+  const { t } = useTranslation('common');
+
   const CALENDAR_URL =
     'https://calendar.google.com/calendar/embed?src=c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com&ctz=UTC';
   const eventsExist = eventsData.length > 0;
@@ -12,7 +16,7 @@ export default function Calendar({ className = '', size, text="text-left" }) {
       className={`rounded-md border border-gray-200 overflow-hidden bg-white p-4`}
     >
       <Heading level="h2" typeStyle="heading-md-semibold">
-        Upcoming events
+        {t("calendar.title")}
       </Heading> 
       <ul>
         {getEvents(eventsData, size).map((event, index) => (
@@ -43,12 +47,12 @@ export default function Calendar({ className = '', size, text="text-left" }) {
         <div className='pt-4' data-testid="Calendar-button">
           <GoogleCalendarButton 
             href={CALENDAR_URL}
-            text="View Calendar"
+            text={t("calendar.viewCalendarBtn")}
           />
         </div>
         :
         <div className="mt-2 text-gray-700">
-          There are no meetings scheduled for next few days.
+        {t("calendar.noMeetingsMessage")}
         </div>
       }
     </div>

components/Hero.js

@@ -12,9 +12,9 @@ import {
   useTranslation,
 } from "../lib/i18n";
 
-export default function Hero({ className = ''}) {
+export default function Hero({ className = '' }) {
 
-  const { t } = useTranslation();
+  const { t } = useTranslation('landing-page');
 
   return (
     <>
@@ -29,22 +29,21 @@ export default function Hero({ className = ''}) {
             </span>
           </Heading>
           <Heading level="h2" typeStyle="body-lg" textColor="text-gray-700" className="mb-10 max-w-4xl mx-auto">
-            Open-Source tools to easily build and maintain your event-driven
-            architecture. All powered by the AsyncAPI specification, the {" "}
-            <strong>industry standard</strong> for defining asynchronous APIs.
+            {t('main.body_pretext')}{" "}
+            <strong>{t('main.body_boldtext')}</strong>{t('main.body_posttext')}
           </Heading>
           <div className='flex flex-row items-center justify-center'>
-            <Button className="block md:inline-block" text="Read the docs" href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />} 
-            data-testid="Hero-Button"/>
+            <Button className="block md:inline-block" text={t('main.docs_btn')} href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />}
+              data-testid="Hero-Button" />
             {/* Wrap SearchButton with AlgoliaSearch component */}
             <AlgoliaSearch>
-              <SearchButton 
+              <SearchButton
                 className="sm:flex items-center text-left space-x-3 px-4 py-3 ml-2 bg-white border-secondary-500 border text-secondary-500 hover:text-white shadow-md bg-secondary-100 hover:bg-secondary-500 transition-all duration-500 ease-in-out rounded-md"
               >
                 {({ actionKey }) => (
                   <>
                     <IconLoupe />
-                    <span className="flex-auto">Quick search...</span>
+                    <span className="flex-auto">{t('main.search_btn')}</span>
                     {actionKey && (
                       <kbd className="font-sans font-semibold">
                         <abbr
@@ -62,9 +61,9 @@ export default function Hero({ className = ''}) {
             </AlgoliaSearch>
           </div>
           <Paragraph typeStyle="body-sm" className="mt-4" textColor="text-gray-500">
-            Proud to be part of the {" "}
+            {t('main.slogan_text')} {" "}
             <a className="underline" href="https://www.linuxfoundation.org/">
-              Linux Foundation
+              {t('main.slogan_link')}
             </a>
           </Paragraph>
         </div>

components/NewsletterSubscribe.js

@@ -1,6 +1,7 @@
 import Button from "./buttons/Button";
 import Heading from "./typography/Heading";
 import Paragraph from "./typography/Paragraph";
+import { useTranslation } from "../lib/i18n";
 
 export default function NewsletterSubscribe ({
   className = 'p-8 text-center',
@@ -9,6 +10,9 @@ export default function NewsletterSubscribe ({
   subtitle = 'We respect your inbox. No spam, promise ✌️',
   type,
 }) {
+
+  const { t } = useTranslation('common'); 
+
   const headTextColor = dark ? 'text-white' : ''
   const paragraphTextColor = dark ? 'text-gray-300' : ''
 
@@ -20,17 +24,17 @@ export default function NewsletterSubscribe ({
         typeStyle="heading-lg"
         className="mb-4"
       >
-        {title}
+        {t('newsletterCTA.title')}
       </Heading>
       <Paragraph className="mb-8" textColor={paragraphTextColor}>
-        {subtitle}
+        {t('newsletterCTA.subtitle')}
       </Paragraph>
       <form name="form 1" method="POST" className="md:flex" data-netlify="true">
         <input type="hidden" name="form-name" value="form 1" />
         <input type="hidden" name="type" value={type} />
-        <input type="text" name="name" placeholder="Your name" className="form-input block w-full sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-text-input"/>
-        <input type="email" name="email" placeholder="Your email" className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-email-input"/>
-        <Button type="submit" text="Subscribe" className="w-full mt-2 md:mr-2 md:mt-0 md:flex-1" />
+        <input type="text" name="name" placeholder={t('newsletterCTA.nameInput')} className="form-input block w-full sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-text-input"/>
+        <input type="email" name="email" placeholder={t('newsletterCTA.emailInput')} className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-email-input"/>
+        <Button type="submit" text={t('newsletterCTA.subscribeBtn')} className="w-full mt-2 md:mr-2 md:mt-0 md:flex-1" />
       </form>
     </div>
   )

components/buttons/GoogleCalendarButton.js

@@ -1,16 +1,20 @@
 import Button from './Button';
 import IconGoogleCalendar from '../icons/GoogleCalendar';
+import { useTranslation } from '../../lib/i18n';
 
 export default function GoogleCalendarButton({
-  text = 'Add to Google Calendar',
+  text = 'googleCalendarBtn',
   href,
   target = '_blank',
   iconPosition = 'left',
   className,
 }) {
+
+  const { t } = useTranslation('common'); 
+
   return (
     <Button
-      text={text}
+      text={t(text)}
       icon={<IconGoogleCalendar />}
       href={href}
       iconPosition={iconPosition}

components/buttons/ICSFileButton.js

@@ -1,16 +1,20 @@
 import Button from './Button';
 import IconCalendar from '../icons/Calendar';
+import { useTranslation } from '../../lib/i18n';
 
 export default function ICSFButton({
-  text = 'Download ICS File',
+  text = 'icsFileBtn',
   href,
   target = '_blank',
   iconPosition = 'left',
   className,
 }) {
+
+  const { t } = useTranslation('common');
+
   return (
     <Button
-      text={text}
+      text={t(text)}
       icon={<IconCalendar />}
       href={href}
       iconPosition={iconPosition}

components/buttons/SubscribeButton.js

@@ -1,16 +1,20 @@
 import Button from './Button';
 import IconSubscribe from '../icons/Subscribe';
+import { useTranslation } from '../../lib/i18n';
 
 export default function GoogleCalendarButton({
-  text = 'Subscribe',
+  text = 'subscribeBtn',
   href,
   target = '_blank',
   iconPosition = 'left',
   className,
 }) {
+
+  const { t } = useTranslation('common');
+
   return (
     <Button
-      text={text}
+      text={t(text)}
       icon={<IconSubscribe />}
       href={href}
       iconPosition={iconPosition}

components/features/index.jsx

@@ -3,8 +3,12 @@ import Paragraph from "../typography/Paragraph";
 import TextLink from "../typography/TextLink";
 import Link from 'next/link'
 import { features } from "./FeatureList";
+import { useTranslation } from "../../lib/i18n";
 
 export default function Features() {
+
+  const { t } = useTranslation('landing-page');
+
   return (
     <section className="relative bg-white pt-16">
       <div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
@@ -13,25 +17,25 @@ export default function Features() {
           typeStyle="heading-lg"
           className="mt-2"
         >
-          Why AsyncAPI?
+          {t('features.title')}
         </Heading>
         <Paragraph className="mt-2 max-w-prose mx-auto">
-          Improving the current state of Event-Driven Architectures (EDA)
+          {t('features.description')}
         </Paragraph>
         <div className="mt-12 text-left">
           <ul className="grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3" data-testid="Feature-ul">
             {features.map((feature) => (
-              <li key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8" 
-              data-testid="Feature-li">
+              <li key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8"
+                data-testid="Feature-li">
                 <div >
-                  <Heading 
-                  level="h3"
-                  typeStyle="heading-md-semibold"
-                  className="mt-8"
-                 
-                >
-                  {feature.name}
-                </Heading>
+                  <Heading
+                    level="h3"
+                    typeStyle="heading-md-semibold"
+                    className="mt-8"
+
+                  >
+                    {feature.name}
+                  </Heading>
                   {feature.description && (
                     <Paragraph typeStyle="body-md" className="mt-5">
                       {feature.description}

components/newsroom/NewsroomSection.js

@@ -4,8 +4,12 @@ import Paragraph from '../typography/Paragraph';
 import Button from '../buttons/Button';
 import Link from 'next/link';
 import { getAllPosts } from '../../lib/api';
+import { useTranslation } from '../../lib/i18n';
 
 export default function NewsroomSection() {
+
+  const { t } = useTranslation('common');
+
   const posts = getAllPosts()['blog']
     .sort((i1, i2) => {
       const i1Date = new Date(i1.date);
@@ -20,19 +24,19 @@ export default function NewsroomSection() {
     <div className="mt-12 lg:flex justify-between">
       <section className="mt-10 lg:mt-4 relative w-fit mx-auto lg:w-1/2" data-testid="NewsroomSection-Featured">
         <div className='absolute z-10 -mt-6'>
-            <Button className="text-center block md:inline-block border-secondary-500 border text-secondary-500 shadow-md p-2" text="FEATURED BLOG POST" bgClassName="bg-secondary-100" />
+            <Button className="text-center block md:inline-block border-secondary-500 border text-secondary-500 shadow-md p-2" text={t("newsroomSection.newsroomFeaturedPost")} bgClassName="bg-secondary-100" />
         </div>
         <FeaturedBlogPost post={posts[0]} />
       </section>
       <section className="lg:text-left lg:max-w-xl lg:w-1/2 lg:ml-12 mt-5 lg:my-auto" data-testid="NewsroomSection-main">
         <Heading typeStyle="heading-md-semibold" level="h3">
-          Latest news and blogs
+          {t("newsroomSection.title")}
         </Heading>
         <Paragraph typeStyle="body-lg" className="mt-5">
-          Welcome to our Newsroom section. Here, you'll get latest information about our blogs, articles, announcements and Youtube live-streams. Let's get upto date with the recent activities in the organization.
+        {t("newsroomSection.description")}
         </Paragraph>
         <div className='mt-7' >
-        <Button text='Visit the Newsroom' href='/community/newsroom' data-testid="NewsroomSection-Link"/>
+        <Button text={t("newsroomSection.newsroomBtn")} href='/community/newsroom' data-testid="NewsroomSection-Link"/>
         </div>
       </section>
     </div>

cypress/test/Hero.cy.js

@@ -7,22 +7,22 @@ describe('Hero Component', () => {
 
     cy.contains('main.header');
     cy.contains('main.subHeader');
-    cy.contains('Open-Source tools to easily build and maintain your event-driven architecture.');
-    cy.contains('Read the docs');
-    cy.contains('Quick search...');
-    cy.contains('Proud to be part of the Linux Foundation');
+    cy.contains('main.body_pretext');
+    cy.contains('main.docs_btn');
+    cy.contains('main.search_btn');
+    cy.contains('main.slogan_text main.slogan_link');
   });
 
   it('navigates to the documentation page when "Read the docs" button is clicked', () => {
     mount(<Hero />);
-    cy.get('[data-testid="Button-link"]').contains('Read the docs');
+    cy.get('[data-testid="Button-link"]').contains('main.docs_btn');
 
   });
 
   it('performs a search when the search button is clicked', () => {
     mount(<Hero />);
 
-    cy.get('[data-testid="Search-Button"]').contains('Quick search...').click();
+    cy.get('[data-testid="Search-Button"]').contains('main.search_btn').click();
 
     // Type a search query and validate the results
     const searchQuery = 'example';

cypress/test/buttons/GoogleCalendarButton.cy.js

@@ -3,7 +3,7 @@ import GoogleCalendarButton from '../../../components/buttons/GoogleCalendarButt
 describe('GoogleCalendarButton', () => {
     it('renders correctly with default props', () => {
       mount(<GoogleCalendarButton />);
-      cy.contains('Add to Google Calendar').should('be.visible');
+      cy.contains('googleCalendarBtn').should('be.visible');
     });
 
     it('renders correctly with custom props', () => {

cypress/test/buttons/ICSFileButton.cy.js

@@ -21,6 +21,6 @@ describe('ICSFButton', () => {
 
   it('renders correctly with default props', () => {
     mount(<ICSFButton />);
-    cy.contains('Download ICS File').should('be.visible');
+    cy.contains('icsFileBtn').should('be.visible');
   });
 });

cypress/test/buttons/SubscribeButton.cy.js

@@ -4,7 +4,7 @@ import SubscribeButton from '../../../components/buttons/SubscribeButton';
 describe('Subscribe Button', () => {
     it('renders correctly with default props', () => {
       mount(<SubscribeButton/>);
-      cy.contains('Subscribe').should('be.visible');
+      cy.contains('subscribeBtn').should('be.visible');
 
 });
 

cypress/test/newsroom/NewsroomSection.cy.js

@@ -1,6 +1,6 @@
 import { mount } from 'cypress/react'
 import NewsroomSection from '../../../components/newsroom/NewsroomSection';
-const newsroom = ["Latest news and blogs"]
+const newsroom = ["newsroomSection.title"]
 describe('Newsroom Section Component', () => {
     beforeEach(() => {
         mount(<NewsroomSection />);

locales/de/common.json

@@ -0,0 +1,23 @@
+{
+    "newsletterCTA": {
+        "title": "Abonnieren Sie unseren Newsletter, um Neuigkeiten über AsyncAPI zu erhalten.",
+        "subtitle": "Wir respektieren Ihren Posteingang. Kein Spam, versprochen ✌️",
+        "nameInput": "Ihr Name",
+        "emailInput": "Deine E-Mail",
+        "subscribeBtn": "Abonnieren"
+    },
+    "newsroomSection": {
+        "title": "Aktuelle Nachrichten und Blogs",
+        "description": "Willkommen in unserem Newsroom-Bereich. Hier finden Sie die neuesten Informationen über unsere Blogs, Artikel, Ankündigungen und Youtube-Livestreams. Informieren Sie sich über die jüngsten Aktivitäten der Organisation.",
+        "newsroomBtn": "Besuchen Sie den Newsroom",
+        "newsroomFeaturedPost": "VORGESTELLTER BLOGEINTRAG"
+    },
+    "googleCalendarBtn": "Zu Google Kalender hinzufügen",
+    "subscribeBtn": "Abonnieren",
+    "icsFileBtn": "ICS-Datei herunterladen",
+    "calendar": {
+        "title": "Kommende Veranstaltungen",
+        "viewCalendarBtn": "Kalender ansehen",
+        "noMettingsMessage": "In den nächsten Tagen sind keine Sitzungen geplant."
+    }
+}