From b194db92007d0aeb6e6abda3fa518d33b93e2802 Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Wed, 27 Nov 2024 09:01:02 +0200
Subject: [PATCH] add translation

split translation into messages

add missing translation

add missing thank you messages
---
 .../ecommerce-jewellery-store/src/App.tsx     |  55 +-
 .../src/components/AdminView.tsx              |  82 +--
 .../src/components/CategoryList.tsx           |  11 +-
 .../src/components/FilterComponent.tsx        |  28 +-
 .../src/components/Footer.tsx                 |  55 +-
 .../src/components/Header.tsx                 |  53 +-
 .../src/components/ShoppingCartList.tsx       | 104 +---
 .../src/components/Testemonials.tsx           | 116 ++--
 .../src/data/languageItems.ts                 |  13 +
 .../src/data/listData.ts                      | 353 +++++++------
 .../src/data/messages/en.ts                   | 494 ++++++++++++++++++
 .../src/data/messages/es.ts                   | 493 +++++++++++++++++
 .../src/data/messages/fr.ts                   | 445 ++++++++++++++++
 .../src/data/types.ts                         |  53 ++
 .../src/helpers/LanguageContext.tsx           |  33 ++
 .../src/pages/AllProductsListView.tsx         |  86 +--
 .../src/pages/Contacts.tsx                    |  24 +-
 .../src/pages/DetailedCategory.tsx            | 101 ++--
 .../src/pages/Home.tsx                        |  71 +--
 .../src/pages/PaymentDetails.tsx              |  44 +-
 .../src/pages/ProductsDetails.tsx             |  37 +-
 .../src/pages/ThankYou.tsx                    |  24 +-
 22 files changed, 2203 insertions(+), 572 deletions(-)
 create mode 100644 examples/ecommerce-jewellery-store/src/data/languageItems.ts
 create mode 100644 examples/ecommerce-jewellery-store/src/data/messages/en.ts
 create mode 100644 examples/ecommerce-jewellery-store/src/data/messages/es.ts
 create mode 100644 examples/ecommerce-jewellery-store/src/data/messages/fr.ts
 create mode 100644 examples/ecommerce-jewellery-store/src/helpers/LanguageContext.tsx

diff --git a/examples/ecommerce-jewellery-store/src/App.tsx b/examples/ecommerce-jewellery-store/src/App.tsx
index 8212d999..f4f6169c 100644
--- a/examples/ecommerce-jewellery-store/src/App.tsx
+++ b/examples/ecommerce-jewellery-store/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
+import { ShoppingCartList } from "./components/ShoppingCartList";
 import Contacts from "./pages/Contacts";
 import ThankYou from "./pages/ThankYou";
 import PaymentDetails from "./pages/PaymentDetails";
@@ -14,35 +15,37 @@ import { CartProvider } from "./helpers/CartContext";
 import { AdminProvider } from './helpers/AdminContext';
 import { CategoriesProvider } from './helpers/CategoriesContext';
 import { ThemeProvider } from './helpers/ThemeContext'; 
-import { ShoppingCartList } from "./components/ShoppingCartList"; 
+import { LanguageProvider } from "./helpers/LanguageContext";
 
 function App() {
   return (
-    <ThemeProvider> 
-      <CartProvider>
-        <AdminProvider>
-          <CategoriesProvider>
-            <Router basename="/kendo-react/ecommerce-jewellery-store">
-              <Header />
-              <SizedParent>
-                <Routes>
-                  <Route path="/" element={<Home />} />
-                  <Route path="/paymentdetails" element={<PaymentDetails />} />
-                  <Route path="/thankyou" element={<ThankYou />} />
-                  <Route path="/contacts" element={<Contacts />} />
-                  <Route path="/products" element={<AllProductsListView />} />
-                  <Route path="/category" element={<DetailedCategory />} />
-                  <Route path="/product/:id" element={<ProductDetails />} />
-                  <Route path="/shoppingcart" element={<ShoppingCartList />} />
-                </Routes>
-              </SizedParent>
-              <Footer />
-            </Router>
-          </CategoriesProvider>
-        </AdminProvider>
-      </CartProvider>
-    </ThemeProvider>
+    <LanguageProvider>
+      <ThemeProvider>
+        <CartProvider>
+          <AdminProvider>
+            <CategoriesProvider>
+              <Router basename="/kendo-react/ecommerce-jewellery-store">
+                <Header />
+                <SizedParent>
+                  <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/paymentdetails" element={<PaymentDetails />} />
+                    <Route path="/thankyou" element={<ThankYou />} />
+                    <Route path="/contacts" element={<Contacts />} />
+                    <Route path="/products" element={<AllProductsListView />} />
+                    <Route path="/category" element={<DetailedCategory />} />
+                    <Route path="/product/:id" element={<ProductDetails />} />
+                    <Route path="/shoppingcart" element={<ShoppingCartList />} />
+                  </Routes>
+                </SizedParent>
+                <Footer />
+              </Router>
+            </CategoriesProvider>
+          </AdminProvider>
+        </CartProvider>
+      </ThemeProvider>
+    </LanguageProvider>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/examples/ecommerce-jewellery-store/src/components/AdminView.tsx b/examples/ecommerce-jewellery-store/src/components/AdminView.tsx
index 2febadfe..7ba8b458 100644
--- a/examples/ecommerce-jewellery-store/src/components/AdminView.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/AdminView.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { getter } from '@progress/kendo-react-common';
+import * as React from "react";
+import { getter } from "@progress/kendo-react-common";
 import {
   Grid,
   GridColumn,
@@ -10,16 +10,21 @@ import {
   getSelectedStateFromKeyDown,
   GridSortChangeEvent,
   GridPageChangeEvent,
-} from '@progress/kendo-react-grid';
+} from "@progress/kendo-react-grid";
 import {
   ChartWizard,
   ChartWizardDataRow,
   getWizardDataFromGridSelection,
-} from '@progress/kendo-react-chart-wizard';
-import { Button } from '@progress/kendo-react-buttons';
-import { orderBy } from '@progress/kendo-data-query';
-import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
-import { sampleData } from '../data/shared-gd-sampleChartData';
+} from "@progress/kendo-react-chart-wizard";
+import { Button } from "@progress/kendo-react-buttons";
+import { orderBy } from "@progress/kendo-data-query";
+import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
+import { sampleData } from "../data/shared-gd-sampleChartData";
+import { useLanguageContext } from "../helpers/LanguageContext";
+import { LocalizationProvider, loadMessages } from "@progress/kendo-react-intl";
+import esMessages from "../data/messages/es";
+import frMessages from "../data/messages/fr";
+import enMessages from "../data/messages/en";
 
 interface SampleDataItem {
   ID: string;
@@ -33,8 +38,8 @@ interface SampleDataItem {
   URL: string;
 }
 
-const DATA_ITEM_KEY = 'ID';
-const SELECTED_FIELD = 'selected';
+const DATA_ITEM_KEY = "ID";
+const SELECTED_FIELD = "selected";
 const idGetter = getter(DATA_ITEM_KEY);
 
 interface SelectedState {
@@ -44,8 +49,8 @@ interface SelectedState {
 const AdminView: React.FC = () => {
   const gridRef = React.useRef<GridHandle>(null);
   const [selectedState, setSelectedState] = React.useState<SelectedState>({});
-  const [sort, setSort] = React.useState<{ field: string; dir: 'asc' | 'desc' }[]>([
-    { field: 'Sales', dir: 'desc' },
+  const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
+    { field: "Sales", dir: "desc" },
   ]);
   const [showChartWizard, setShowChartWizard] = React.useState<boolean>(false);
   const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
@@ -53,6 +58,18 @@ const AdminView: React.FC = () => {
   const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
   const [page, setPage] = React.useState<{ skip: number; take: number }>({ skip: 0, take: 4 });
 
+  const { t, language } = useLanguageContext();
+
+  React.useEffect(() => {
+    if (language === "es") {
+      loadMessages(esMessages, "es");
+    } else if (language === "fr") {
+      loadMessages(frMessages, "fr");
+    } else {
+      loadMessages(enMessages, "en");
+    }
+  }, [language]);
+
   const data = sampleData.map((item) => ({
     ...item,
     [SELECTED_FIELD]: selectedState[idGetter(item)],
@@ -96,7 +113,7 @@ const AdminView: React.FC = () => {
       setChartData(chartWizardData);
       setShowChartWizard(true);
     } else {
-      console.error('Grid reference is not available.');
+      console.error("Grid reference is not available.");
     }
   }, [selectedState]);
 
@@ -111,8 +128,8 @@ const AdminView: React.FC = () => {
     const sortedTop3Sales = selectedData
       .sort(
         (a, b) =>
-          b.find((field) => field.field === 'Total Sales')?.value -
-          a.find((field) => field.field === 'Total Sales')?.value
+          b.find((field) => field.field === "Total Sales")?.value -
+          a.find((field) => field.field === "Total Sales")?.value
       )
       .slice(0, 3);
 
@@ -127,29 +144,30 @@ const AdminView: React.FC = () => {
     const imageUrl = field && field in dataItem ? (dataItem as Record<string, any>)[field] : dataItem.URL;
     return (
       <td>
-        <img src={imageUrl} alt="Product" style={{ width: '100px', height: 'auto' }} />
+        <img src={imageUrl} alt="Product" style={{ width: "100px", height: "auto" }} />
       </td>
     );
   };
 
   return (
-    <>
-      <div style={{ marginBottom: '10px' }}>
+    <LocalizationProvider language={language}>
+      <div style={{ marginBottom: "10px" }}>
         <Button
           svgIcon={chartAreaStackedIcon}
           onClick={handleSelectedChart}
           disabled={disabled}
-          style={{ marginRight: '10px' }}
+          style={{ marginRight: "10px" }}
         >
-          Chart of Selected Data
+          {t.chartSelectedDataButton}
         </Button>
         <Button svgIcon={chartAreaStackedIcon} onClick={handleTop3Sales}>
-          Top 3 Sales per Category
+          {t.top3SalesButton}
         </Button>
       </div>
       <Grid
+        key={language} 
         ref={gridRef}
-        style={{ height: '500px' }}
+        style={{ height: "500px" }}
         data={pagedData}
         dataItemKey={DATA_ITEM_KEY}
         selectedField={SELECTED_FIELD}
@@ -161,7 +179,7 @@ const AdminView: React.FC = () => {
         selectable={{
           enabled: true,
           drag: true,
-          mode: 'multiple',
+          mode: "multiple",
         }}
         navigatable={true}
         onSelectionChange={onSelectionChange}
@@ -169,16 +187,16 @@ const AdminView: React.FC = () => {
         sortable={true}
         sort={sort}
         onSortChange={(e: GridSortChangeEvent) => {
-          setSort(e.sort as { field: string; dir: 'asc' | 'desc' }[]);
+          setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
         }}
       >
-        <GridColumn field="URL" title="Product" cell={URLImageCell} />
-        <GridColumn field="Product" title="Name" />
-        <GridColumn field="SKU" title="SKU" />
-        <GridColumn field="Category" title="Category" />
-        <GridColumn field="Price" title="Price" />
-        <GridColumn field="Quantity" title="Quantity" />
-        <GridColumn field="Sales" title="Total Sales" />
+        <GridColumn field="URL" title={t.grid.productTitle} cell={URLImageCell} />
+        <GridColumn field="Product" title={t.grid.nameTitle} />
+        <GridColumn field="SKU" title={t.grid.skuTitle} />
+        <GridColumn field="Category" title={t.grid.categoryTitle} />
+        <GridColumn field="Price" title={t.grid.priceTitle} />
+        <GridColumn field="Quantity" title={t.grid.quantityTitle} />
+        <GridColumn field="Sales" title={t.grid.totalSalesTitle} />
       </Grid>
 
       {showChartWizard && (
@@ -194,7 +212,7 @@ const AdminView: React.FC = () => {
           onClose={() => setTop3Visible(false)}
         />
       )}
-    </>
+    </LocalizationProvider>
   );
 };
 
diff --git a/examples/ecommerce-jewellery-store/src/components/CategoryList.tsx b/examples/ecommerce-jewellery-store/src/components/CategoryList.tsx
index 9db2421e..08d78b2b 100644
--- a/examples/ecommerce-jewellery-store/src/components/CategoryList.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/CategoryList.tsx
@@ -1,17 +1,18 @@
-
 import { useNavigate } from "react-router-dom";
 import { CategoryListProps } from "../data/types";
 import { Button } from "@progress/kendo-react-buttons";
 import { CardDescriptor } from "../data/types";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitle, colSpan = 4 }) => {
     const navigate = useNavigate();
+    const { t } = useLanguageContext(); 
 
     const onNavigate = (card: CardDescriptor) => {
         if (card.collectionText === `Collection "AURELIA"`) {
-            navigate("/category")
+            navigate("/category");
         }
-    }
+    };
 
     return (
         <>
@@ -48,7 +49,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
                                 }}
                             >
                                 <Button themeColor={"primary"} size={"large"} onClick={() => onNavigate(card)}>
-                                    Buy Now
+                                    {t.buyNowButtonText} 
                                 </Button>
                             </div>
                         </div>
@@ -57,4 +58,4 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
             </div>
         </>
     );
-}
+};
diff --git a/examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx b/examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx
index b2d455fb..8d5ea4ad 100644
--- a/examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx
@@ -4,10 +4,7 @@ import { SvgIcon } from "@progress/kendo-react-common";
 import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
 import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
 import { useCategoriesContext } from "../helpers/CategoriesContext";
-
-const chips = ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"];
-const statuses = ["Sale", "Recommended", "Must Have"];
-const materials = ["Gold", "Silver"];
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 interface FilterComponentProps {
   updateUI: (state: State) => void;
@@ -15,9 +12,15 @@ interface FilterComponentProps {
 
 export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) => {
   const { selectedCategory, setSelectedCategory } = useCategoriesContext();
+  const { t } = useLanguageContext();
+
   const [categoryValue, setCategoryValue] = React.useState<string[]>([]);
-  const [statusValue, setStatusValue] = React.useState<string>("Recommended");
-  const [materialValue, setMaterialValue] = React.useState<string>("Material");
+  const [statusValue, setStatusValue] = React.useState<string>(t.statusRecommended);
+  const [materialValue, setMaterialValue] = React.useState<string>(t.materialPlaceholder);
+
+  const chips = t.categoriesData || [];
+  const statuses = t.statusesData || [];
+  const materials = t.materialsData || [];
 
   useEffect(() => {
     if (selectedCategory) {
@@ -96,8 +99,8 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
 
   const clearFilters = () => {
     setCategoryValue([]);
-    setStatusValue("Recommended");
-    setMaterialValue("Material");
+    setStatusValue(t.statusRecommended);
+    setMaterialValue(t.materialPlaceholder);
     setSelectedCategory(null);
     updateUI({ filter: undefined, sort: undefined });
   };
@@ -106,13 +109,13 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
     <section className="k-d-flex k-justify-content-between k-align-items-center">
       <span className="k-d-flex k-align-items-center">
         <span className="k-d-flex k-align-items-center k-pr-2">
-          <SvgIcon icon={filterIcon}></SvgIcon> Filter:
+          <SvgIcon icon={filterIcon}></SvgIcon> {t.filterLabel}
         </span>
         <span className="k-pr-2">
           <MultiSelect
             data={chips}
             value={categoryValue}
-            placeholder="Category"
+            placeholder={t.categoryPlaceholder}
             onChange={onCategoryChange}
             style={{ minWidth: "119px" }}
           />
@@ -123,13 +126,14 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
       </span>
       <span className="k-d-flex k-align-items-center">
         <span className="k-d-flex k-align-items-center k-pr-2">
-          <SvgIcon icon={sortAscIcon}></SvgIcon> Sort by:
+          <SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
         </span>
         <span>
           <DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
         </span>
       </span>
-      <button className="k-button k-button-flat" onClick={clearFilters}>Clear Filters</button>
+      <button className="k-button k-button-flat" onClick={clearFilters}>{t.clearFiltersButton}</button>
     </section>
   );
 };
+
diff --git a/examples/ecommerce-jewellery-store/src/components/Footer.tsx b/examples/ecommerce-jewellery-store/src/components/Footer.tsx
index f18f8526..93f602e7 100644
--- a/examples/ecommerce-jewellery-store/src/components/Footer.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/Footer.tsx
@@ -9,30 +9,33 @@ import {
   twitterIcon,
 } from '@progress/kendo-svg-icons';
 import viloraLogo from '@/assets/vilora-logo.png';
+import { useLanguageContext } from '../helpers/LanguageContext';
 
 const Footer: React.FC = () => {
+  const { t } = useLanguageContext();
+
   return (
     <section className="k-py-10 k-px-12 footer"> 
       <div className="k-d-flex k-flex-wrap k-justify-content-between k-gap-8 k-text-align-left">
-        <div className="k-flex-basis-250 k-flex-grow-1 k-mb-4 k-mt-6" style={{marginLeft: '50px'}}> 
+        <div className="k-flex-basis-250 k-flex-grow-1 k-mb-4 k-mt-6" style={{ marginLeft: '50px' }}> 
           <a href="#" className="k-d-block k-mb-4 k-text-align-center">
             <img src={viloraLogo} alt="Logo" />
           </a>
-          <p className="k-m-0">We use cookies to improve your experience.</p> 
-          <p className="k-m-0">All rights reserved.</p>
-          <p className="k-mt-4">Subscribe to our Newsletter:</p>
-          <Label editorId="email" className="k-sr-only">Your Email</Label>
+          <p className="k-m-0">{t.cookiesText}</p> 
+          <p className="k-m-0">{t.rightsReservedText}</p>
+          <p className="k-mt-4">{t.subscribeText}</p>
+          <Label editorId="email" className="k-sr-only">{t.emailPlaceholder}</Label>
           <TextBox
-            placeholder="Email"
+            placeholder={t.emailPlaceholder}
             className="k-w-full"
             suffix={() => (
               <InputSuffix>
                 <InputSeparator />
-                <Button themeColor="primary">Subscribe</Button>
+                <Button themeColor="primary">{t.subscribeButtonText}</Button>
               </InputSuffix>
             )}
           />
-          <p className="k-mt-6">Follow us:</p>  
+          <p className="k-mt-6">{t.followUsText}</p>  
           <div className="k-d-flex k-gap-2 k-align-items-center">
             <p className="k-d-flex k-align-items-center" style={{ gap: '10px' }}>
               <SvgIcon icon={facebookIcon} size="xlarge" /> Facebook
@@ -47,31 +50,27 @@ const Footer: React.FC = () => {
         </div>
 
         <div className="k-flex-basis-200 k-flex-grow-1 k-d-flex k-flex-col k-gap-4 k-mt-6 k-text-align-center">  
-          <h4 className="k-color-primary k-font-bold">Customer Care</h4>
-          <a href="#" className="k-link">Contact Us</a>
-          <a href="#" className="k-link">Shopping Online</a>
-          <a href="#" className="k-link">Track Your Order</a>
-          <a href="#" className="k-link">Shipping & Delivery</a>
-          <a href="#" className="k-link">Orders & Payment</a>
-          <a href="#" className="k-link">Help</a>
+          <h4 className="k-color-primary k-font-bold">{t.customerCareTitle}</h4>
+          {Array.isArray(t.customerCareLinks) &&
+            t.customerCareLinks.map((link: string, index: number) => (
+              <a key={index} href="#" className="k-link">{link}</a>
+            ))}
         </div>
 
         <div className="k-flex-basis-200 k-flex-grow-1 k-d-flex k-flex-col k-gap-4 k-mt-6 k-text-align-center">  
-          <h4 className="k-color-primary k-font-bold">Our Company</h4>
-          <a href="#" className="k-link">Prominent Locations</a>
-          <a href="#" className="k-link">Careers</a>
-          <a href="#" className="k-link">Corporate Responsibility</a>
-          <a href="#" className="k-link">Sustainability</a>
-          <a href="#" className="k-link">Society Care</a>
+          <h4 className="k-color-primary k-font-bold">{t.ourCompanyTitle}</h4>
+          {Array.isArray(t.ourCompanyLinks) &&
+            t.ourCompanyLinks.map((link: string, index: number) => (
+              <a key={index} href="#" className="k-link">{link}</a>
+            ))}
         </div>
 
-        <div className="k-flex-basis-200 k-flex-grow-1 k-d-flex k-flex-col k-gap-4 k-mt-6 k-text-align-center" style={{marginRight: '150px'}}>  
-          <h4 className="k-color-primary k-font-bold">Legal & Privacy</h4>
-          <a href="#" className="k-link">Terms of Use</a>
-          <a href="#" className="k-link">Conditions of Sale</a>
-          <a href="#" className="k-link">Return Policy</a>
-          <a href="#" className="k-link">Privacy Policy</a>
-          <a href="#" className="k-link">Cookie Policy</a>
+        <div className="k-flex-basis-200 k-flex-grow-1 k-d-flex k-flex-col k-gap-4 k-mt-6 k-text-align-center" style={{ marginRight: '150px' }}>  
+          <h4 className="k-color-primary k-font-bold">{t.legalPrivacyTitle}</h4>
+          {Array.isArray(t.legalPrivacyLinks) &&
+            t.legalPrivacyLinks.map((link: string, index: number) => (
+              <a key={index} href="#" className="k-link">{link}</a>
+            ))}
         </div>
       </div>
     </section>
diff --git a/examples/ecommerce-jewellery-store/src/components/Header.tsx b/examples/ecommerce-jewellery-store/src/components/Header.tsx
index ab896d44..6fed5c85 100644
--- a/examples/ecommerce-jewellery-store/src/components/Header.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/Header.tsx
@@ -12,9 +12,11 @@ import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 import { useAdminContext } from "../helpers/AdminContext";
 import { useCategoriesContext } from "../helpers/CategoriesContext";
 import { useThemeContext } from "../helpers/ThemeContext";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 interface CustomMenuItemModel extends MenuItemModel {
   page?: string;
+  id?: string;
 }
 
 const Header: React.FC = () => {
@@ -22,6 +24,7 @@ const Header: React.FC = () => {
   const { toggleRole } = useAdminContext();
   const { setSelectedCategory } = useCategoriesContext();
   const { theme, setTheme } = useThemeContext();
+  const { setLanguage, t } = useLanguageContext();
 
   const handleThemeChange = (event: any) => {
     const selectedTheme = themeItems.find((item) => item.themeName === event.item.themeName);
@@ -50,7 +53,7 @@ const Header: React.FC = () => {
     }
 
     const selectedCategory = selectedItem.text;
-    if (selectedCategory === "All") {
+    if (selectedCategory === t.all) {
       setSelectedCategory(null);
     } else {
       setSelectedCategory(selectedCategory ?? null);
@@ -58,19 +61,53 @@ const Header: React.FC = () => {
     }
   };
 
+  const handleLanguageMenuSelect = (event: MenuSelectEvent) => {
+    const selectedLanguage = event.item.id?.replace("lang-", "");
+    if (selectedLanguage) {
+      setLanguage(selectedLanguage);
+      console.log(`Language changed to: ${selectedLanguage}`);
+    } else {
+      console.error(`Invalid language selected: ${selectedLanguage}`);
+    }
+  };
+
+  const translatedItems = items.map((item) => ({
+    ...item,
+    text: t[`menu${item.text}`] || item.text,
+    items: item.items?.map((subItem) => ({
+      ...subItem,
+      text: t[`menu${subItem.text}`] || subItem.text,
+    })),
+  }));
+
+  const languageMenu = [
+    {
+      text: t.languageMenuTitle,
+      items: [
+        { text: t.languageEnglish, id: "lang-en" },
+        { text: t.languageFrench, id: "lang-fr" },
+        { text: t.languageSpanish, id: "lang-es" },
+      ],
+    },
+  ];
+
   return (
     <>
       <link id="theme-link" rel="stylesheet" href={theme} />
       <AppBar themeColor="inherit">
-        <AppBarSection className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center" style={{ paddingLeft: "50px" }}>
+        <AppBarSection
+          className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
+          style={{ paddingLeft: "50px" }}
+        >
           <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
             <img src={viloraLogo} alt="Logo" />
           </a>
-          <Menu items={items} onSelect={handleMenuSelect} />
+          <Menu items={translatedItems} onSelect={handleMenuSelect} />
         </AppBarSection>
+
         <AppBarSection className="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
           <TextBox
-            placeholder="Search"
+            placeholder={t.searchPlaceholder}
             prefix={() => (
               <>
                 <InputPrefix orientation="horizontal">
@@ -92,7 +129,13 @@ const Header: React.FC = () => {
             fillMode="flat"
             onItemClick={handleThemeChange}
           />
-          <Switch className="switch-width" onLabel="Admin" offLabel="Client" onChange={handleSwitchChange} />
+          <Switch
+            className="switch-width"
+            onLabel={t.adminLabel}
+            offLabel={t.clientLabel}
+            onChange={handleSwitchChange}
+          />
+          <Menu items={languageMenu} onSelect={handleLanguageMenuSelect} />
         </AppBarSection>
       </AppBar>
     </>
diff --git a/examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx b/examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx
index df6a60ee..ec07c9d4 100644
--- a/examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx
@@ -17,14 +17,13 @@ import { Error } from "@progress/kendo-react-labels";
 import { Input } from "@progress/kendo-react-inputs";
 import { Button } from "@progress/kendo-react-buttons";
 import { useCart } from "../helpers/CartContext";
-import {
-  NumericTextBox
-} from "@progress/kendo-react-inputs";
+import { NumericTextBox } from "@progress/kendo-react-inputs";
 import { useNavigate } from "react-router-dom";
 import { Layout } from "./Layout";
 import shoppingCartImage from "../assets/shoppingCartImg.png";
 import { Avatar } from "@progress/kendo-react-layout";
 import { SvgIcon } from "@progress/kendo-react-common";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 const EmailInput = (fieldRenderProps: FieldRenderProps) => {
   const { validationMessage, visited, ...others } = fieldRenderProps;
@@ -39,6 +38,7 @@ const EmailInput = (fieldRenderProps: FieldRenderProps) => {
 export const ShoppingCartList: React.FC = () => {
   const { cart, updateIndividualCartItem } = useCart();
   const navigate = useNavigate();
+  const { t } = useLanguageContext();
 
   const onBackClick = () => {
     navigate("/products");
@@ -58,8 +58,8 @@ export const ShoppingCartList: React.FC = () => {
   return (
     <>
       <Layout>
-        <div className="k-h2 k-font-bold k-text-black k-col-span-12 k-pt-5 ">
-          Shopping Cart
+        <div className="k-h2 k-font-bold k-text-black k-col-span-12 k-pt-5">
+          {t.shoppingCartTitle}
         </div>
         <div className="k-pb-5">
           <Button
@@ -67,7 +67,7 @@ export const ShoppingCartList: React.FC = () => {
             fillMode={"flat"}
             onClick={onBackClick}
           >
-            Back
+            {t.backButtonText}
           </Button>
         </div>
 
@@ -92,9 +92,7 @@ export const ShoppingCartList: React.FC = () => {
               />
               <div className="k-d-flex k-justify-content-between k-w-full">
                 <span>{isCartItem ? item.product.title : null}</span>
-                <span>{`$${
-                  isCartItem ? item.product.newPrice.toLocaleString() : null
-                }`}</span>
+                <span>{`$${isCartItem ? item.product.newPrice.toLocaleString() : null}`}</span>
                 <span>
                   {isCartItem ? (
                     <NumericTextBox
@@ -105,7 +103,7 @@ export const ShoppingCartList: React.FC = () => {
                       fillMode={"flat"}
                     />
                   ) : (
-                    <span>Quantity not available</span>
+                    <span>{t.emptyCartMessage}</span>
                   )}
                   <Button svgIcon={trashIcon} fillMode={"flat"}></Button>
                 </span>
@@ -127,14 +125,14 @@ export const ShoppingCartList: React.FC = () => {
                 render={() => (
                   <FormElement style={{ maxWidth: 650 }}>
                     <fieldset className={"k-form-fieldset"}>
-                      <legend className={"k-h2"}>Order Details</legend>
-                      <span>Please, insert your details</span>
+                      <legend className={"k-h2"}>{t.paymentDetailsTitle}</legend>
+                      <span>{t.paymentDetailsSubtitle}</span>
                       <FieldWrapper>
                         <Field
                           name={"firstName"}
                           component={Input}
                           labelClassName={"k-form-label"}
-                          label={"Full Name"}
+                          label={t.fullNameLabel}
                         />
                       </FieldWrapper>
 
@@ -143,7 +141,7 @@ export const ShoppingCartList: React.FC = () => {
                           name={"email"}
                           type={"email"}
                           component={EmailInput}
-                          label={"Email Address"}
+                          label={t.emailLabel}
                         />
                       </FieldWrapper>
 
@@ -152,25 +150,7 @@ export const ShoppingCartList: React.FC = () => {
                           name={"phone"}
                           component={Input}
                           labelClassName={"k-form-label"}
-                          label={"Phone Number"}
-                        />
-                      </FieldWrapper>
-
-                      <FieldWrapper>
-                        <Field
-                          name={"country"}
-                          component={Input}
-                          labelClassName={"k-form-label"}
-                          label={"Country"}
-                        />
-                      </FieldWrapper>
-
-                      <FieldWrapper>
-                        <Field
-                          name={"street"}
-                          component={Input}
-                          labelClassName={"k-form-label"}
-                          label={"Street Address"}
+                          label={t.phoneNumberLabel}
                         />
                       </FieldWrapper>
                     </fieldset>
@@ -180,7 +160,7 @@ export const ShoppingCartList: React.FC = () => {
                         size={"large"}
                         onClick={onProceedClick}
                       >
-                        Proceed to Checkout
+                        {t.proceedToCheckoutButtonText}
                       </Button>
                     </div>
                   </FormElement>
@@ -202,63 +182,31 @@ export const ShoppingCartList: React.FC = () => {
         </Layout>
       ) : null}
       <Layout>
-        <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-4.5 k-px-sm-6 k-px-md-4 k-px-lg-7.5 k-px-xl-10 k-gap-10">
-          <div className="k-d-flex k-flex-col k-align-items-center k-gap-4 k-text-center">
-            <h2 className="k-h2 !k-mb-0">Why people choose us?</h2>
-          </div>
+        <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-gap-10">
+          <h2 className="k-h2 !k-mb-0">{t.whyChooseUs}</h2>
           <div className="k-d-grid k-grid-cols-1 k-grid-cols-md-3 k-gap-5">
             <div className="k-d-flex k-flex-col k-align-items-center">
-              <Avatar
-                rounded="full"
-                type="icon"
-                themeColor="primary"
-                size="large"
-              >
+              <Avatar rounded="full" themeColor="primary" size="large">
                 <SvgIcon icon={walletSolidIcon} size="xxlarge" />
               </Avatar>
-              <p className="k-font-size-xl k-font-bold k-px-4 k-py-3 !k-mb-0">
-                Return Policy
-              </p>
-              <p className="k-p-4 !k-mb-0 k-text-center">
-                You can return your items within 30 days for a full refund or
-                exchange.
-              </p>
+              <p className="k-font-size-xl k-font-bold">{t.returnPolicyTitle}</p>
+              <p>{t.returnPolicyContent}</p>
             </div>
-
             <div className="k-d-flex k-flex-col k-align-items-center">
-              <Avatar
-                rounded="full"
-                type="icon"
-                themeColor="primary"
-                size="large"
-              >
+              <Avatar rounded="full" themeColor="primary" size="large">
                 <SvgIcon icon={heartIcon} size="xxlarge" />
               </Avatar>
-              <p className="k-font-size-xl k-font-bold k-px-4 k-py-3 !k-mb-0">
-                Included Gift Wrapping
-              </p>
-              <p className="k-p-4 !k-mb-0 k-text-center">
-                Apply your discount code at checkout to enjoy exclusive savings
-                on your order.
+              <p className="k-font-size-xl k-font-bold">
+                {t.includedGiftWrappingTitle}
               </p>
+              <p>{t.includedGiftWrappingContent}</p>
             </div>
-
             <div className="k-d-flex k-flex-col k-align-items-center">
-              <Avatar
-                rounded="full"
-                type="icon"
-                themeColor="primary"
-                size="large"
-              >
+              <Avatar rounded="full" themeColor="primary" size="large">
                 <SvgIcon icon={percentIcon} size="xxlarge" />
               </Avatar>
-              <p className="k-font-size-xl k-font-bold k-px-4 k-py-3 !k-mb-0 k-text-center">
-                Discount Code Available
-              </p>
-              <p className="k-p-4 !k-mb-0 k-text-center">
-                Add gift wrapping for a special touch, along with a personalized
-                message for your loved ones.
-              </p>
+              <p className="k-font-size-xl k-font-bold">{t.discountCodeTitle}</p>
+              <p>{t.discountCodeContent}</p>
             </div>
           </div>
         </div>
diff --git a/examples/ecommerce-jewellery-store/src/components/Testemonials.tsx b/examples/ecommerce-jewellery-store/src/components/Testemonials.tsx
index 03245300..2a8f47b4 100644
--- a/examples/ecommerce-jewellery-store/src/components/Testemonials.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/Testemonials.tsx
@@ -1,66 +1,70 @@
-import { Avatar } from '@progress/kendo-react-layout';
-import { Rating } from '@progress/kendo-react-inputs';
-import { TestemonialsDataDescriptor } from '../data/types';
-import testemonials1 from "../assets/testemonials1.jpg"
-import testemonials2 from "../assets/testemonials2.jpg"
-import testemonials3 from "../assets/testemonials3.jpg"
+import { Avatar } from "@progress/kendo-react-layout";
+import { Rating } from "@progress/kendo-react-inputs";
+import testemonials1 from "../assets/testemonials1.jpg";
+import testemonials2 from "../assets/testemonials2.jpg";
+import testemonials3 from "../assets/testemonials3.jpg";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
+export const Testemonials = () => {
+  const { t } = useLanguageContext();
 
-const testemonialsData: TestemonialsDataDescriptor[] = [
+  const testemonialsData = [
     {
-        image: testemonials1,
-        name: "Erica Moore",
-        rating: 5,
-        description: "Vilora exceeded all my expectations! The craftsmanship of my diamond necklace is absolutely stunning, and the attention to detail is unparalleled. From the moment I placed my order to the day it arrived, the entire experience was flawless."
+      image: testemonials1,
+      name: t.testimonialsData[0].name,
+      rating: t.testimonialsData[0].rating,
+      description: t.testimonialsData[0].description,
     },
     {
-        image: testemonials2,
-        name: "Kelvin Hettinger",
-        rating: 4.5,
-        description: "I couldn't be happier with my custom engagement ring from Vilora. The team helped me design the perfect piece, and the final result was even more beautiful than I imagined. Their service, quality, and dedication to excellence make Vilora my go-to for all fine jewelry."
+      image: testemonials2,
+      name: t.testimonialsData[1].name,
+      rating: t.testimonialsData[1].rating,
+      description: t.testimonialsData[1].description,
     },
     {
-        image: testemonials3,
-        name: "Karen Brooks",
-        rating: 5,
-        description: "Vilora’s collection is nothing short of breathtaking. I recently purchased a white sapphire ring, and it’s become my favorite piece. The elegance and brilliance of the jewelry reflect their impeccable taste and high standards. Highly recommend!"
-    }
-];
+      image: testemonials3,
+      name: t.testimonialsData[2].name,
+      rating: t.testimonialsData[2].rating,
+      description: t.testimonialsData[2].description,
+    },
+  ];
 
-export const Testemonials = () => {
-    return (
-        <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-10 k-mx-auto">
-            <div className="k-d-flex k-flex-col k-align-items-center k-gap-4 k-mb-10">
-                <h2 className="k-h2">Customers words</h2>
-                <p className="k-font-size-xl k-color-subtle">
-                    What do they say about us?
-                </p>
+  return (
+    <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-10 k-mx-auto">
+      <div className="k-d-flex k-flex-col k-align-items-center k-gap-4 k-mb-10">
+        <h2 className="k-h2">{t.testimonialsTitle}</h2>
+        <p className="k-font-size-xl k-color-subtle">{t.testimonialsSubtitle}</p>
+      </div>
+      <div className="k-d-grid k-grid-cols-3 k-gap-5 k-mb-6">
+        {testemonialsData.map((item, index) => (
+          <div
+            key={index}
+            className="k-d-flex k-flex-col k-border-solid k-border k-bg-surface k-bg-app-surface k-rounded-lg k-border-border"
+          >
+            <div className="k-d-grid k-grid-cols-3 k-justify-items-center k-px-4 k-py-3 k-gap-y-3">
+              <div className="k-col-start-1 k-col-end-4 k-d-grid k-grid-cols-3 k-justify-items-center k-w-full">
+                <Avatar
+                  themeColor="primary"
+                  size="large"
+                  className="k-col-start-2 k-col-end-3"
+                  type="image"
+                >
+                  <img src={item.image} className="k-bg-cover" />
+                </Avatar>
+              </div>
+              <p className="k-paragraph k-col-start-1 k-col-end-4">{item.name}</p>
+              <Rating
+                value={item.rating}
+                precision="half"
+                className="k-col-start-1 k-col-end-4"
+              />
             </div>
-            <div className="k-d-grid k-grid-cols-3 k-gap-5 k-mb-6">
-                {testemonialsData.map((item, index) => (
-                    <div key={index} className="k-d-flex k-flex-col k-border-solid k-border k-bg-surface k-bg-app-surface k-rounded-lg k-border-border">
-                        <div className="k-d-grid k-grid-cols-3 k-justify-items-center k-px-4 k-py-3 k-gap-y-3">
-                            <div className="k-col-start-1 k-col-end-4 k-d-grid k-grid-cols-3 k-justify-items-center k-w-full">
-                                <Avatar
-                                    themeColor="primary"
-                                    size="large"
-                                    className="k-col-start-2 k-col-end-3"
-                                    type='image'
-                                >
-                                    <img src={item.image} className='k-bg-cover' />
-                                </Avatar>
-                            </div>
-                            <p className="k-paragraph k-col-start-1 k-col-end-4">{item.name}</p>
-                            <Rating value={item.rating} precision='half' className="k-col-start-1 k-col-end-4" />
-                        </div>
-                        <div className="k-p-4">
-                            <p className="k-paragraph">
-                                {item.description}
-                            </p>
-                        </div>
-                    </div>
-                ))}
+            <div className="k-p-4">
+              <p className="k-paragraph">{item.description}</p>
             </div>
-        </div>
-    );
-}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/examples/ecommerce-jewellery-store/src/data/languageItems.ts b/examples/ecommerce-jewellery-store/src/data/languageItems.ts
new file mode 100644
index 00000000..9edcfc53
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/languageItems.ts
@@ -0,0 +1,13 @@
+const languageItems = [
+    {
+      text: "Language",
+      items: [
+        { text: "English" },
+        { text: "French" },
+        { text: "Spanish" },
+      ],
+    },
+  ];
+  
+  export default languageItems;
+  
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/data/listData.ts b/examples/ecommerce-jewellery-store/src/data/listData.ts
index f1d974f6..aef83130 100644
--- a/examples/ecommerce-jewellery-store/src/data/listData.ts
+++ b/examples/ecommerce-jewellery-store/src/data/listData.ts
@@ -19,166 +19,195 @@ import diamondRingRuby from "../assets/listViewImages/diamondRingRuby.png";
 import stainlessSteelWatch from "../assets/listViewImages/stainlessSteelWatch.png";
 import goldEarringsGarnet from "../assets/listViewImages/goldEarringsGarnet.png";
 import { ListDataDescriptor } from "./types";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
-export const listData: ListDataDescriptor[] = [{
-    img: diamongWeddingRing,
-    status: "sale",
-    title: "Diamond Wedding Ring",
-    category: "Rings",
-    material: "Silver",
-    oldPrice: 990,
-    newPrice: 890
-}, {
-    img: silverBraceletCross,
-    status: "recommended",
-    category: "Bracelets",
-    material: "Silver",
-    title: "Silver Bracelet with Cross",
-    oldPrice: null,
-    newPrice: 270
-},
-{
-    img: pinkSilverBracelet,
-    status: null,
-    category: "Bracelets",
-    material: "Silver",
-    title: "Pink Silver Bracelet",
-    oldPrice: null,
-    newPrice: 460
-}, {
-    img: yellowGoldEarrings,
-    status: "sale",
-    category: "Earrings",
-    material: "Silver",
-    title: "Yellow Gold Earrings",
-    oldPrice: 500,
-    newPrice: 380
-}, {
-    img: silverHeartNecklace,
-    status: null,
-    category: "Necklaces",
-    material: "Silver",
-    title: "Silver Heart Necklace",
-    oldPrice: null,
-    newPrice: 400
-}, {
-    img: homemadeSilverEarrings,
-    status: null,
-    category: "Earrings",
-    material: "Silver",
-    title: "Handmade Silver Earrings",
-    oldPrice: null,
-    newPrice: 650
-}, {
-    img: diamondWeddingBands,
-    status: "recommended",
-    title: "Diamond Wedding Bands",
-    material: "Gold",
-    category: "Rings",
-    oldPrice: null,
-    newPrice: 4290
-}, {
-    img: casualSilverWatch,
-    status: null,
-    title: "Casual Silver Watch",
-    category: "Watches",
-    material: "Silver",
-    oldPrice: null,
-    newPrice: 390
-}, {
-    img: silverBraceletOnyx,
-    status: "sale",
-    title: "Silver Bracelet with Onyx",
-    material: "Silver",
-    category: "Bracelets",
-    oldPrice: 950,
-    newPrice: 770
-}, {
-    img: weddingBandsPearl,
-    status: "must have",
-    title: "Wedding Bands with Pearls",
-    material: "Gold",
-    category: "Rings",
-    oldPrice: null,
-    newPrice: 900
-}, {
-    img: silverWeddingBands,
-    status: null,
-    title: "Silver Wedding Bands",
-    material: "Silver",
-    category: "Rings",
-    oldPrice: null,
-    newPrice: 250
-}, {
-    img: handmadeYellowGoldRing,
-    status: null,
-    category: "Rings",
-    material: "Silver",
-    title: "Handmade Yellow Gold Ring",
-    oldPrice: null,
-    newPrice: 560
-}, {
-    img: diamondRingSapphire,
-    status: "must have",
-    title: "Diamond Ring with Sapphire",
-    category: "Rings",
-    material: "Gold",
-    oldPrice: null,
-    newPrice: 3590
-}, {
-    img: silverHeartBracelet,
-    status: null,
-    title: "Silver Heart Bracelet",
-    category: "Bracelets",
-    material: "Silver",
-    oldPrice: null,
-    newPrice: 430
-}, {
-    img: roseGoldEarringsOpal,
-    status: "Sale",
-    title: "Rose Gold Earrings with Opal",
-    category: "Earrings",
-    material: "Gold",
-    oldPrice: 850,
-    newPrice: 690
-},{
-    img: silverBraceletTopaz,
-    status: null,
-    category: "Bracelets",
-    material: "Silver",
-    title: "Silver Bracelet with Topaz",
-    oldPrice: null,
-    newPrice: 580
-},{
-    img: handmadeDiamongRing,
-    status: null,
-    category: "Rings",
-    material: "Gold",
-    title: "Handmade Diamond Ring",
-    oldPrice: null,
-    newPrice: 1100
-},{
-    img: diamondRingRuby,
-    status: "must have",
-    category: "Rings",
-    material: "Gold",
-    title: "Diamong Ring with Ruby",
-    oldPrice: null,
-    newPrice: 5560
-},{
-    img: stainlessSteelWatch,
-    status: null,
-    material: "Silver",
-    category: "Watches",
-    title: "Silver Watch",
-    oldPrice: null,
-    newPrice: 270
-}, {
-    img: goldEarringsGarnet,
-    status: null,
-    category: "Earrings",
-    material: "Gold",
-    title: "Gold Earrings with Garnet",
-    oldPrice: null,
-    newPrice: 270
-},].map((item, index) => ({ ...item, id: index + 1, rating: Math.floor(Math.random() * 5) + 3 }));
\ No newline at end of file
+export const useTranslatedListData = (): ListDataDescriptor[] => {
+  const { t } = useLanguageContext();
+
+  return [
+    {
+      img: diamongWeddingRing,
+      status: t.statuses.statusSale,
+      title: t.diamondWeddingRing,
+      category: t.categories.Rings,
+      material: t.materials.materialSilver,
+      oldPrice: 990,
+      newPrice: 890,
+    },
+    {
+      img: silverBraceletCross,
+      status: t.statuses.statusRecommended,
+      title: t.silverBraceletWithCross,
+      category: t.categories.Bracelets,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 270,
+    },
+    {
+      img: pinkSilverBracelet,
+      status: null,
+      title: t.pinkSilverBracelet,
+      category: t.categories.Bracelets,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 460,
+    },
+    {
+      img: yellowGoldEarrings,
+      status: t.statuses.statusSale,
+      title: t.yellowGoldEarrings,
+      category: t.categories.Earrings,
+      material: t.materials.materialSilver,
+      oldPrice: 500,
+      newPrice: 380,
+    },
+    {
+      img: silverHeartNecklace,
+      status: null,
+      title: t.silverHeartNecklace,
+      category: t.categories.Necklaces,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 400,
+    },
+    {
+      img: homemadeSilverEarrings,
+      status: null,
+      title: t.handmadeSilverEarrings,
+      category: t.categories.Earrings,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 650,
+    },
+    {
+      img: diamondWeddingBands,
+      status: t.statuses.statusRecommended,
+      title: t.diamondWeddingBands,
+      category: t.categories.Rings,
+      material: t.materials.materialGold,
+      oldPrice: null,
+      newPrice: 4290,
+    },
+    {
+      img: casualSilverWatch,
+      status: null,
+      title: t.casualSilverWatch,
+      category: t.categories.Watches,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 390,
+    },
+    {
+      img: silverBraceletOnyx,
+      status: t.statuses.statusSale,
+      title: t.silverBraceletWithOnyx,
+      category: t.categories.Bracelets,
+      material: t.materials.materialSilver,
+      oldPrice: 950,
+      newPrice: 770,
+    },
+    {
+      img: weddingBandsPearl,
+      status: t.statuses.statusMustHave,
+      title: t.weddingBandsWithPearls,
+      category: t.categories.Rings,
+      material: t.materials.materialGold,
+      oldPrice: null,
+      newPrice: 900,
+    },
+    {
+      img: silverWeddingBands,
+      status: null,
+      title: t.silverWeddingBands,
+      category: t.categories.Rings,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 250,
+    },
+    {
+      img: handmadeYellowGoldRing,
+      status: null,
+      title: t.handmadeYellowGoldRing,
+      category: t.categories.Rings,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 560,
+    },
+    {
+      img: diamondRingSapphire,
+      status: t.statuses.statusMustHave,
+      title: t.diamondRingWithSapphire,
+      category: t.categories.Rings,
+      material: t.materials.materialGold,
+      oldPrice: null,
+      newPrice: 3590,
+    },
+    {
+      img: silverHeartBracelet,
+      status: null,
+      title: t.silverHeartBracelet,
+      category: t.categories.Bracelets,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 430,
+    },
+    {
+      img: roseGoldEarringsOpal,
+      status: t.statuses.statusSale,
+      title: t.roseGoldEarringsWithOpal,
+      category: t.categories.Earrings,
+      material: t.materials.materialGold,
+      oldPrice: 850,
+      newPrice: 690,
+    },
+    {
+      img: silverBraceletTopaz,
+      status: null,
+      title: t.silverBraceletWithTopaz,
+      category: t.categories.Bracelets,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 580,
+    },
+    {
+      img: handmadeDiamongRing,
+      status: null,
+      title: t.handmadeDiamondRing,
+      category: t.categories.Rings,
+      material: t.materials.materialGold,
+      oldPrice: null,
+      newPrice: 1100,
+    },
+    {
+      img: diamondRingRuby,
+      status: t.statuses.statusMustHave,
+      title: t.diamondRingWithRuby,
+      category: t.categories.Rings,
+      material: t.materials.materialGold,
+      oldPrice: null,
+      newPrice: 5560,
+    },
+    {
+      img: stainlessSteelWatch,
+      status: null,
+      title: t.silverWatch,
+      category: t.categories.Watches,
+      material: t.materials.materialSilver,
+      oldPrice: null,
+      newPrice: 270,
+    },
+    {
+      img: goldEarringsGarnet,
+      status: null,
+      title: t.goldEarringsWithGarnet,
+      category: t.categories.Earrings,
+      material: t.materials.materialGold,
+      oldPrice: null,
+      newPrice: 270,
+    },
+  ].map((item, index) => ({
+    ...item,
+    id: index + 1,
+    rating: Math.floor(Math.random() * 5) + 3,
+  }));
+};
diff --git a/examples/ecommerce-jewellery-store/src/data/messages/en.ts b/examples/ecommerce-jewellery-store/src/data/messages/en.ts
new file mode 100644
index 00000000..6acd61d9
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/messages/en.ts
@@ -0,0 +1,494 @@
+export const en = {
+    title: "Vilora Jewelry",
+    subtitle: "We offer exquisite jewelry, each showcasing timeless elegance",
+    buttonText: "See Collections",
+    searchPlaceholder: "Search",
+    addToCartButtonText: "Add to Cart",
+    adminLabel: "Admin",
+    clientLabel: "Client",
+    "aureliaContent": "Rings are versatile jewelry pieces that symbolize personal style, suitable for both special occasions and everyday wear.",
+    languageMenuTitle: "Language",
+    "aureliaSubtitle": "Unique handmade rings",
+    languageEnglish: "English",
+    languageFrench: "French",
+    languageSpanish: "Spanish",
+    cookiesText: "We use cookies to improve your experience.",
+    rightsReservedText: "All rights reserved.",
+    subscribeText: "Subscribe to our Newsletter:",
+    emailPlaceholder: "Email",
+    subscribeButtonText: "Subscribe",
+    filterLabel: "Filter:",
+    sortByLabel: "Sort by:",
+    clearFiltersButton: "Clear Filters",
+    categoryPlaceholder: "Category",
+    materialPlaceholder: "Material",
+    categoriesData: ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"],
+    statusesData: ["Sale", "Recommended", "Must Have"],
+    materialsData: ["Gold", "Silver"],
+    followUsText: "Follow us:",
+    shoppingCartTitle: "Shopping Cart",
+    backButtonText: "Back",
+    whyChooseUs: "Why people choose us?",
+    returnPolicyTitle: "Return Policy",
+    returnPolicyContent: "You can return your items within 30 days for a full refund or exchange.",
+    includedGiftWrappingTitle: "Included Gift Wrapping",
+    includedGiftWrappingContent: "Add gift wrapping for a special touch, along with a personalized message for your loved ones.",
+    discountCodeTitle: "Discount Code Available",
+    discountCodeContent: "Apply your discount code at checkout to enjoy exclusive savings on your order.",
+    removeButtonText: "Remove",
+    emptyCartMessage: "Your shopping cart is empty.",
+    proceedToCheckoutButtonText: "Proceed to Checkout",
+    customerCareTitle: "Customer Care",
+    customerCareLinks: [
+      "Contact Us",
+      "Shopping Online",
+      "Track Your Order",
+      "Shipping & Delivery",
+      "Orders & Payment",
+      "Help",
+    ],
+    ourCompanyTitle: "Our Company",
+    ourCompanyLinks: [
+      "Prominent Locations",
+      "Careers",
+      "Corporate Responsibility",
+      "Sustainability",
+      "Society Care",
+    ],
+    legalPrivacyTitle: "Legal & Privacy",
+    legalPrivacyLinks: [
+      "Terms of Use",
+      "Conditions of Sale",
+      "Return Policy",
+      "Privacy Policy",
+      "Cookie Policy",
+    ],
+    // Menu Translations
+    menuHome: "Home",
+    menuJewelry: "Jewelry",
+    menuContacts: "Contacts",
+    menuBracelets: "Bracelets",
+    menuRings: "Rings",
+    menuEarrings: "Earrings",
+    menuWatches: "Watches",
+    menuAll: "All",
+    // Other Translations
+    bestsellersTitle: "Our Bestsellers",
+    bestsellersSubtitle: "Enjoy an excellent selection of fine jewelry",
+    buyNowButtonText: "Buy Now",
+    timelessTitle: "Timeless Classics",
+    timelessSubtitle: "Get our unique handmade collections",
+    timelessContent:
+      "Jewelry enhances style and adds elegance, with each piece telling a unique story.",
+    fineJewelryTitle: "Fine Jewelry",
+    fineJewelrySubtitle: "Get our unique handmade collections",
+    fineJewelryContent:
+      "Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale.",
+    ringsTitle: "Our Rings",
+    ringsSubtitle: "Enjoy an excellent selection of fine rings",
+    watchesTitle: "Our Watches",
+    watchesSubtitle: "Enjoy an excellent selection of watches",
+    watchesContent:
+      "High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.",
+    servicesTitle: "Services",
+    servicesSubtitle: "Explore expert repairs to elevate your experience",
+    servicesContent:
+      "Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.",
+    testimonialsTitle: "Customer Words",
+    testimonialsSubtitle: "What do they say about us?",
+    testimonialsData: [
+      {
+        image: "/testemonials1.jpg",
+        name: "Erica Moore",
+        rating: 5,
+        description:
+          "Vilora exceeded all my expectations! The craftsmanship of my diamond necklace is absolutely stunning, and the attention to detail is unparalleled. From the moment I placed my order to the day it arrived, the entire experience was flawless.",
+      },
+      {
+        image: "/testemonials2.jpg",
+        name: "Kelvin Hettinger",
+        rating: 4.5,
+        description:
+          "I couldn't be happier with my custom engagement ring from Vilora. The team helped me design the perfect piece, and the final result was even more beautiful than I imagined. Their service, quality, and dedication to excellence make Vilora my go-to for all fine jewelry.",
+      },
+      {
+        image: "/testemonials3.jpg",
+        name: "Karen Brooks",
+        rating: 5,
+        description:
+          "Vilora’s collection is nothing short of breathtaking. I recently purchased a white sapphire ring, and it’s become my favorite piece. The elegance and brilliance of the jewelry reflect their impeccable taste and high standards. Highly recommend!",
+      },
+    ],
+    // Contacts Page Translations
+    getInTouchTitle: "Get in touch",
+    getInTouchSubtitle: "If you have any questions, contact us",
+    fullNameLabel: "Full Name",
+    fullNamePlaceholder: "Enter your full name",
+    emailLabel: "Email",
+    phoneNumberLabel: "Phone Number",
+    typeOfCustomerLabel: "Type of customer",
+    dateLabel: "Date",
+    bookSlotButton: "Book a Slot",
+    contactsImageAlt: "Contacts",
+    thankYou: {
+      title: "Thank You!",
+      subtitle: "Your order has been placed successfully.",
+      thankYouMessage: "Thank You For Your Order!",
+      orderSubmittedMessage: "You have submitted your order.",
+      backToShopping: "Back to Shopping",
+    },
+    thankYouTitle: "Thank You For Your Order!",
+    thankYouSubtitle: "You have submitted your order",
+    backToShoppingButton: "Back to Shopping",
+    allProductsTitle: "Fine Selection",
+    allProductsSubtitle: "Enjoy the real craftsmanship",
+    allProductsContentText:
+      "Jewelry is a meaningful form of self-expression that enhances personal style and adds beauty to any occasion.",
+    collectionSerene: 'Collection "SERENE"',
+    collectionAurelia: 'Collection "AURELIA"',
+    chartSelectedDataButton: "Chart of Selected Data",
+    top3SalesButton: "Top 3 Sales per Category",
+    collectionRavina: 'Collection "RAVINA"',
+    ourCollectionsTitle: "Our Collections",
+    ourCollectionsSubtitle: "Enjoy an excellent selection of fine jewelry",
+    breadcrumbHome: "Home",
+    breadcrumbJewelry: "Jewelry",
+    buyButtonText: "Buy",
+    handmadePinkDiamondRing: "Handmade Pink Diamond Ring",
+    diamondRingWithPinkRuby: "Diamond Ring with Pink Ruby",
+    whiteSandDiamondRing: "White Sand Diamond Ring",
+    productSubtitle: "In Platinum with Natural Diamond",
+    productDescription: "Elegant wedding bands featuring lustrous pearls.",
+    reviewsText: "{0} reviews",
+    youMayAlsoLikeTitle: "You May Also Like",
+    youMayAlsoLikeSubtitle: "Enjoy an excellent selection of fine jewelry",
+    categories: {
+      Bracelets: "Bracelets",
+      Rings: "Rings",
+      Earrings: "Earrings",
+      Watches: "Watches",
+      Necklaces: "Necklaces",
+    },
+    diamondWeddingRing: "Diamond Wedding Ring",
+    silverBraceletWithCross: "Silver Bracelet with Cross",
+    pinkSilverBracelet: "Pink Silver Bracelet",
+    yellowGoldEarrings: "Yellow Gold Earrings",
+    silverHeartNecklace: "Silver Heart Necklace",
+    handmadeSilverEarrings: "Handmade Silver Earrings",
+    diamondWeddingBands: "Diamond Wedding Bands",
+    casualSilverWatch: "Casual Silver Watch",
+    silverBraceletWithOnyx: "Silver Bracelet with Onyx",
+    weddingBandsWithPearls: "Wedding Bands with Pearls",
+    silverWeddingBands: "Silver Wedding Bands",
+    handmadeYellowGoldRing: "Handmade Yellow Gold Ring",
+    diamondRingWithSapphire: "Diamond Ring with Sapphire",
+    silverHeartBracelet: "Silver Heart Bracelet",
+    roseGoldEarringsWithOpal: "Rose Gold Earrings with Opal",
+    silverBraceletWithTopaz: "Silver Bracelet with Topaz",
+    handmadeDiamondRing: "Handmade Diamond Ring",
+    diamondRingWithRuby: "Diamond Ring with Ruby",
+    silverWatch: "Silver Watch",
+    goldEarringsWithGarnet: "Gold Earrings with Garnet",
+    statuses: {
+      statusSale: "Sale",
+      statusRecommended: "Recommended",
+      statusMustHave: "Must Have",
+    },
+    materials: {
+      materialGold: "Gold",
+      materialSilver: "Silver",
+    },
+    paymentDetailsTitle: "Payment Details",
+    paymentDetailsSubtitle: "Please, submit your payment details",
+    paymentMethodCreditCard: "Credit Card",
+    paymentMethodBankTransfer: "Bank Transfer",
+    paymentMethodApplePay: "Apple Pay",
+    cardNumberLabel: "Card Number",
+    expiryDateLabel: "Expiry Date",
+    cvvLabel: "CVV*",
+    cardHolderLabel: "Cardholder",
+    submitOrderButton: "Submit Order",
+    subTotalLabel: "Sub total",
+    usDollarsLabel: "US Dollars",
+    vatLabel: "VAT",
+    shippingMethodLabel: "Shipping Method",
+    standardFreeDeliveryLabel: "Standard Free Delivery",
+    giftWrappingLabel: "Gift Wrapping",
+    includedGiftWrappingLabel: "Included Gift Wrapping",
+    totalLabel: "Total",
+    grid: {
+      groupPanelEmpty: "Drag a column header and drop it here to group by that column",
+      noRecords: "No records available.",
+      pagerFirstPage: "Go to the first page",
+      pagerPreviousPage: "Go to the previous page",
+      productTitle: "Product",
+      nameTitle: "Name",
+      skuTitle: "SKU",
+      categoryTitle: "Category",
+      priceTitle: "Price",
+      quantityTitle: "Quantity",
+      totalSalesTitle: "Total Sales",
+      pagerNextPage: "Go to the next page",
+      pagerLastPage: "Go to the last page",
+      pagerPage: "Page",
+      pagerOf: "of",
+      pagerTotalPages: "{0}",
+      pagerItems: "items",
+      pagerInfo: "{0} - {1} of {2} items",
+      pagerItemsPerPage: "items per page",
+      filterEqOperator: "Is equal to",
+      filterNotEqOperator: "Is not equal to",
+      filterIsNullOperator: "Is null",
+      filterIsNotNullOperator: "Is not null",
+      filterIsEmptyOperator: "Is empty",
+      filterIsNotEmptyOperator: "Is not empty",
+      filterStartsWithOperator: "Starts with",
+      filterContainsOperator: "Contains",
+      filterNotContainsOperator: "Does not contain",
+      filterEndsWithOperator: "Ends with",
+      filterGteOperator: "Is greater than or equal to",
+      filterGtOperator: "Is greater than",
+      filterLteOperator: "Is less than or equal to",
+      filterLtOperator: "Is less than",
+      filterIsTrue: "Yes",
+      filterIsFalse: "No",
+      filterBooleanAll: "(All)",
+      filterAfterOrEqualOperator: "Is after or equal to",
+      filterAfterOperator: "Is after",
+      filterBeforeOperator: "Is before",
+      filterBeforeOrEqualOperator: "Is before or equal to",
+      filterSubmitButton: "Filter",
+      filterClearButton: "Clear filters",
+      filterAndLogic: "And",
+      filterOrLogic: "Or",
+      filterTitle: "Filter",
+      sortAscending: "Sort ascending",
+      sortDescending: "Sort descending",
+      searchPlaceholder: "Search",
+      filterCheckAll: "Check all",
+      pagerItemPerPage: "Items per page",
+      filterChooseOperator: "Choose operator",
+      filterSelectedItems: "selected items",
+      filterAriaLabel: "Filter",
+      sortAriaLabel: "Sortable",
+      groupColumn: "Group column",
+      groupExpand: "Expand group",
+      groupCollapse: "Collapse group",
+      groupPanelAriaLabel: "group panel",
+      ungroupColumn: "Ungroup column",
+      detailExpand: "Expand detail row",
+      detailCollapse: "Collapse detail row",
+      wizard: {
+        windowTitle: "Chart Preview",
+        exportButton: "Export",
+        exportPDF: "PDF File",
+        exportSVG: "SVG File",
+        exportPNG: "PNG File",
+        tabChart: "Chart",
+        tabData: "Data",
+        tabFormat: "Format",
+        barChart: "Bar Chart",
+        bar: "Bar",
+        stackedBar: "Stacked Bar",
+        "100stackedBar": "100% Stacked Bar",
+        pieChart: "Pie Chart",
+        pie: "Pie",
+        columnChart: "Column Chart",
+        column: "Column",
+        stackedColumn: "Stacked Column",
+        "100stackedColumn": "100% Stacked Column",
+        lineChart: "Line Chart",
+        line: "Line",
+        stackedLine: "Stacked Line",
+        "100stackedLine": "100% Stacked Line",
+        scatterChart: "Scatter Chart",
+        scatter: "Scatter",
+        configuration: "Configuration",
+        categoryAxis: "Category Axis",
+        xAxis: "X Axis",
+        valueAxis: "Value Axis",
+        series: "Series",
+        add: "Add",
+        chartArea: "Chart Area",
+        margins: "Margins",
+        auto: "Auto",
+        left: "Left",
+        right: "Right",
+        top: "Top",
+        bottom: "Bottom",
+        background: "Background Color",
+        title: "Title",
+        applyTo: "Apply to",
+        chartTitle: "Chart Title",
+        chartSubtitle: "Chart Subtitle",
+        font: "Font",
+        size: "Size",
+        color: "Color",
+        legend: "Legend",
+        showLegend: "Show Legend",
+        position: "Position",
+        labels: "Labels",
+        rotation: "Rotation",
+        reverseOrder: "Reverse Order",
+        valueAxisTitle: "Value Axis Title",
+        categoryAxisTitle: "Category Axis Title",
+      },
+      chartWizard: {
+        window: {
+          title: "Chart Preview",
+        },
+        export: {
+          button: "Export",
+          PDF: "PDF File",
+          SVG: "SVG File",
+          PNG: "PNG File",
+        },
+        tab: {
+          chart: "Chart",
+          data: "Data",
+          format: "Format",
+        },
+        chart: {
+          barChart: {
+            expandText: "Bar Chart",
+            bar: "Bar",
+            stackedBar: "Stacked Bar",
+            "100%stackedBar": "100% Stacked Bar",
+          },
+          pieChart: {
+            expandText: "Pie Chart",
+            pie: "Pie",
+          },
+          columnChart: {
+            expandText: "Column Chart",
+            column: "Column",
+            stackedColumn: "Stacked Column",
+            "100%stackedColumn": "100% Stacked Column",
+          },
+          lineChart: {
+            expandText: "Line Chart",
+            line: "Line",
+            stackedLine: "Stacked Line",
+            "100%stackedLine": "100% Stacked Line",
+          },
+          scatterChart: {
+            expandText: "Scatter Chart",
+            scatter: "Scatter",
+          },
+        },
+        data: {
+          configuration: {
+            expandText: "Configuration",
+            categoryAxis: "Category Axis",
+            xAxis: "X Axis",
+            valueAxis: "Value Axis",
+            series: {
+              title: "Series",
+              add: "Add",
+            },
+          },
+        },
+        format: {
+          chartArea: {
+            expandText: "Chart Area",
+            margins: {
+              auto: "Auto",
+              left: "Left",
+              right: "Right",
+              top: "Top",
+              bottom: "Bottom",
+            },
+            background: {
+              color: "Color",
+            },
+          },
+          title: {
+            expandText: "Title",
+            applyTo: "Apply to",
+            chartTitle: "Chart Title",
+            chartSubtitle: "Chart Subtitle",
+            label: "Title",
+            font: "Font",
+            fontPlaceholder: "(inherited font)",
+            size: "Size",
+            sizePlaceholder: "px",
+            color: "Color",
+          },
+          series: {
+            expandText: "Series",
+            applyTo: "Apply to",
+            allSeries: "All Series",
+            color: "Color",
+            showLabels: "Show Labels",
+          },
+          legend: {
+            expandText: "Legend",
+            showLegend: "Show Legend",
+            font: "Font",
+            fontPlaceholder: "(inherited font)",
+            size: "Size",
+            sizePlaceholder: "px",
+            color: "Color",
+            position: {
+              top: "Top",
+              bottom: "Bottom",
+              left: "Left",
+              right: "Right",
+            },
+          },
+          categoryAxis: {
+            expandText: "Category Axis",
+            title: {
+              expandText: "Title",
+              placeholder: "Axis Title",
+              font: "Font",
+              fontPlaceholder: "(inherited font)",
+              size: "Size",
+              sizePlaceholder: "px",
+              color: "Color",
+            },
+            labels: {
+              text: "Labels",
+              font: "Font",
+              fontPlaceholder: "(inherited font)",
+              size: "Size",
+              sizePlaceholder: "px",
+              color: "Color",
+              rotation: {
+                text: "Rotation",
+                auto: "Auto",
+              },
+              reverseOrder: "Reverse Order",
+            },
+          },
+          valueAxis: {
+            expandText: "Value Axis",
+            title: {
+              text: "Title",
+              placeholder: "Axis Title",
+              font: "Font",
+              fontPlaceholder: "(inherited font)",
+              size: "Size",
+              sizePlaceholder: "px",
+              color: "Color",
+            },
+            labels: {
+              text: "Labels",
+              font: "Font",
+              fontPlaceholder: "(inherited font)",
+              size: "Size",
+              sizePlaceholder: "px",
+              color: "Color",
+              rotation: {
+                text: "Rotation",
+                auto: "Auto",
+              },
+            },
+          },
+        },
+      },
+    },
+  }
+
+
+export default en
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/data/messages/es.ts b/examples/ecommerce-jewellery-store/src/data/messages/es.ts
new file mode 100644
index 00000000..8cc59697
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/messages/es.ts
@@ -0,0 +1,493 @@
+export const es = {
+    // General Translations
+    title: "Joyería Vilora",
+    subtitle:
+      "Ofrecemos joyería exquisita, cada una mostrando elegancia atemporal",
+    buttonText: "Ver Colecciones",
+    searchPlaceholder: "Buscar",
+    addToCartButtonText: "Agregar al Carrito",
+    adminLabel: "Admin",
+    clientLabel: "Cliente",
+    languageMenuTitle: "Idioma",
+    languageEnglish: "Inglés",
+    languageFrench: "Francés",
+    languageSpanish: "Español",
+    cookiesText: "Usamos cookies para mejorar tu experiencia.",
+    rightsReservedText: "Todos los derechos reservados.",
+    subscribeText: "Suscríbete a nuestro boletín:",
+    emailPlaceholder: "Correo electrónico",
+    subscribeButtonText: "Suscribirse",
+    filterLabel: "Filtrar:",
+    sortByLabel: "Ordenar por:",
+    clearFiltersButton: "Borrar filtros",
+    categoryPlaceholder: "Categoría",
+    materialPlaceholder: "Material",
+    categoriesData: ["Pulseras", "Anillos", "Pendientes", "Relojes", "Collares"],
+    statusesData: ["Oferta", "Recomendado", "Imprescindible"],
+    materialsData: ["Oro", "Plata"],
+    whyChooseUs: "¿Por qué elegirnos?",
+    returnPolicyTitle: "Política de Devoluciones",
+    returnPolicyContent: "Puede devolver sus artículos dentro de los 30 días para obtener un reembolso completo o un cambio.",
+    includedGiftWrappingTitle: "Envoltorio de Regalo Incluido",
+    includedGiftWrappingContent: "Agregue un envoltorio de regalo para un toque especial, junto con un mensaje personalizado para sus seres queridos.",
+    discountCodeTitle: "Código de Descuento Disponible",
+    discountCodeContent: "Aplique su código de descuento al finalizar la compra para disfrutar de ahorros exclusivos en su pedido.",
+    followUsText: "Síguenos en:",
+    shoppingCartTitle: "Carrito de Compras",
+    backButtonText: "Volver",
+    removeButtonText: "Eliminar",
+    emptyCartMessage: "Tu carrito está vacío.",
+    proceedToCheckoutButtonText: "Proceder al Pago",
+    customerCareTitle: "Atención al Cliente",
+    customerCareLinks: [
+      "Contáctanos",
+      "Compras en Línea",
+      "Rastrea tu Pedido",
+      "Envío y Entrega",
+      "Pedidos y Pago",
+      "Ayuda",
+    ],
+    ourCompanyTitle: "Nuestra Empresa",
+    ourCompanyLinks: [
+      "Ubicaciones Destacadas",
+      "Carreras",
+      "Responsabilidad Corporativa",
+      "Sostenibilidad",
+      "Cuidado de la Sociedad",
+    ],
+    legalPrivacyTitle: "Legal y Privacidad",
+    legalPrivacyLinks: [
+      "Términos de Uso",
+      "Condiciones de Venta",
+      "Política de Devoluciones",
+      "Política de Privacidad",
+      "Política de Cookies",
+    ],
+    // Menu Translations
+    menuHome: "Inicio",
+    menuJewelry: "Joyería",
+    menuContacts: "Contactos",
+    menuBracelets: "Pulseras",
+    menuRings: "Anillos",
+    menuEarrings: "Pendientes",
+    menuWatches: "Relojes",
+    menuAll: "Todo",
+    // Other Translations
+    bestsellersTitle: "Nuestros Más Vendidos",
+    bestsellersSubtitle: "Disfruta de una excelente selección de joyas finas",
+    buyNowButtonText: "Comprar Ahora",
+    timelessTitle: "Clásicos Atemporales",
+    timelessSubtitle: "Obtén nuestras colecciones únicas hechas a mano",
+    timelessContent:
+      "Las joyas mejoran el estilo y agregan elegancia, cada pieza cuenta una historia única.",
+    fineJewelryTitle: "Joyería Fina",
+    fineJewelrySubtitle: "Obtén nuestras colecciones únicas hechas a mano",
+    fineJewelryContent:
+      "Las joyas elevan el estilo y aportan sofisticación, cada pieza narra una historia distinta.",
+    ringsTitle: "Nuestros Anillos",
+    ringsSubtitle: "Disfruta de una excelente selección de anillos finos",
+    watchesTitle: "Nuestros Relojes",
+    watchesSubtitle: "Disfruta de una excelente selección de relojes",
+    watchesContent:
+      "Los relojes de oro de alta gama para hombres son el epítome del lujo, combinando precisión con una artesanía sofisticada.",
+    servicesTitle: "Servicios",
+    servicesSubtitle: "Explora reparaciones expertas para mejorar tu experiencia",
+    servicesContent:
+      "Vilora ofrece servicios como diseños personalizados, reparaciones y tasaciones para mejorar la experiencia del cliente.",
+    testimonialsTitle: "Palabras de los Clientes",
+    testimonialsSubtitle: "¿Qué dicen de nosotros?",
+    testimonialsData: [
+      {
+        image: "/testemonials1.jpg",
+        name: "Erica Moore",
+        rating: 5,
+        description:
+          "¡Vilora superó todas mis expectativas! La artesanía de mi collar de diamantes es absolutamente impresionante, y la atención al detalle es inigualable. Desde el momento en que realicé mi pedido hasta el día que llegó, toda la experiencia fue impecable.",
+      },
+      {
+        image: "/testemonials2.jpg",
+        name: "Kelvin Hettinger",
+        rating: 4.5,
+        description:
+          "No podría estar más feliz con mi anillo de compromiso personalizado de Vilora. El equipo me ayudó a diseñar la pieza perfecta, y el resultado final fue aún más hermoso de lo que imaginé. Su servicio, calidad y dedicación a la excelencia hacen de Vilora mi opción para todas las joyas finas.",
+      },
+      {
+        image: "/testemonials3.jpg",
+        name: "Karen Brooks",
+        rating: 5,
+        description:
+          "La colección de Vilora es simplemente impresionante. Recientemente compré un anillo de zafiro blanco, y se ha convertido en mi pieza favorita. La elegancia y el brillo de las joyas reflejan su impecable gusto y altos estándares. ¡Altamente recomendado!",
+      },
+    ],
+    // Contacts Page Translations
+    getInTouchTitle: "Ponte en contacto",
+    getInTouchSubtitle: "Si tienes alguna pregunta, contáctanos",
+    fullNameLabel: "Nombre completo",
+    fullNamePlaceholder: "Ingresa tu nombre completo",
+    emailLabel: "Correo electrónico",
+    phoneNumberLabel: "Número de teléfono",
+    typeOfCustomerLabel: "Tipo de cliente",
+    dateLabel: "Fecha",
+    bookSlotButton: "Reservar una cita",
+    contactsImageAlt: "Contactos",
+    // Thank You Page Translations
+    thankYouTitle: "¡Gracias por su pedido!",
+    thankYouSubtitle: "Ha enviado su pedido",
+    backToShoppingButton: "Volver a comprar",
+    allProductsTitle: "Selección Fina",
+    allProductsSubtitle: "Disfruta de la verdadera artesanía",
+    allProductsContentText:
+      "La joyería es una forma significativa de autoexpresión que mejora el estilo personal y agrega belleza a cualquier ocasión.",
+    collectionSerene: 'Colección "SERENE"',
+    chartSelectedDataButton: "Gráfico de datos seleccionados",
+    top3SalesButton: "Top 3 de ventas por categoría",
+    collectionAurelia: 'Colección "AURELIA"',
+    collectionRavina: 'Colección "RAVINA"',
+    ourCollectionsTitle: "Nuestras Colecciones",
+    ourCollectionsSubtitle: "Disfruta de una excelente selección de joyería fina",
+    breadcrumbHome: "Inicio",
+    breadcrumbJewelry: "Joyería",
+    buyButtonText: "Comprar",
+    handmadePinkDiamondRing: "Anillo de diamante rosa hecho a mano",
+    diamondRingWithPinkRuby: "Anillo de diamante con rubí rosa",
+    whiteSandDiamondRing: "Anillo de diamante de arena blanca",
+    productSubtitle: "En platino con diamante natural",
+    productDescription: "Elegantes alianzas con perlas lustrosas.",
+    reviewsText: "{0} reseñas",
+    youMayAlsoLikeTitle: "También te puede interesar",
+    "aureliaSubtitle": "Anillos hechos a mano únicos",
+    "aureliaContent": "Los anillos son piezas de joyería versátiles que simbolizan el estilo personal, adecuados tanto para ocasiones especiales como para el uso diario.",
+    youMayAlsoLikeSubtitle: "Disfruta de una excelente selección de joyería fina",
+    thankYou: {
+      title: "¡Gracias!",
+      subtitle: "Su pedido ha sido realizado con éxito.",
+      thankYouMessage: "¡Gracias por su pedido!",
+      orderSubmittedMessage: "Ha enviado su pedido.",
+      backToShopping: "Volver a comprar",
+    },
+    categories: {
+      Bracelets: "Pulseras",
+      Rings: "Anillos",
+      Earrings: "Pendientes",
+      Watches: "Relojes",
+      Necklaces: "Collares",
+    },
+    diamondWeddingRing: "Anillo de boda de diamante",
+    silverBraceletWithCross: "Pulsera de plata con cruz",
+    pinkSilverBracelet: "Pulsera de plata rosa",
+    yellowGoldEarrings: "Pendientes de oro amarillo",
+    silverHeartNecklace: "Collar de corazón de plata",
+    handmadeSilverEarrings: "Pendientes de plata hechos a mano",
+    diamondWeddingBands: "Anillos de boda de diamante",
+    casualSilverWatch: "Reloj casual de plata",
+    silverBraceletWithOnyx: "Pulsera de plata con ónix",
+    weddingBandsWithPearls: "Anillos de boda con perlas",
+    silverWeddingBands: "Anillos de boda de plata",
+    handmadeYellowGoldRing: "Anillo de oro amarillo hecho a mano",
+    diamondRingWithSapphire: "Anillo de diamante con zafiro",
+    silverHeartBracelet: "Pulsera de corazón de plata",
+    roseGoldEarringsWithOpal: "Pendientes de oro rosa con ópalo",
+    silverBraceletWithTopaz: "Pulsera de plata con topacio",
+    handmadeDiamondRing: "Anillo de diamante hecho a mano",
+    diamondRingWithRuby: "Anillo de diamante con rubí",
+    silverWatch: "Reloj de plata",
+    goldEarringsWithGarnet: "Pendientes de oro con granate",
+    statuses: {
+      statusSale: "Oferta",
+      statusRecommended: "Recomendado",
+      statusMustHave: "Imprescindible",
+    },
+    materials: {
+      materialGold: "Oro",
+      materialSilver: "Plata",
+    },
+    paymentDetailsTitle: "Detalles de Pago",
+    paymentDetailsSubtitle: "Por favor, ingrese sus detalles de pago",
+    paymentMethodCreditCard: "Tarjeta de Crédito",
+    paymentMethodBankTransfer: "Transferencia Bancaria",
+    paymentMethodApplePay: "Apple Pay",
+    cardNumberLabel: "Número de Tarjeta",
+    expiryDateLabel: "Fecha de Expiración",
+    cvvLabel: "CVV*",
+    cardHolderLabel: "Titular de la Tarjeta",
+    submitOrderButton: "Enviar Pedido",
+    subTotalLabel: "Subtotal",
+    usDollarsLabel: "Dólares EE.UU.",
+    vatLabel: "IVA",
+    shippingMethodLabel: "Método de Envío",
+    standardFreeDeliveryLabel: "Envío Estándar Gratuito",
+    giftWrappingLabel: "Envoltura de Regalo",
+    includedGiftWrappingLabel: "Envoltura de Regalo Incluida",
+    totalLabel: "Total",
+    grid: {
+      groupPanelEmpty: "Arrastra el encabezado de una columna y suéltalo aquí para agrupar por esa columna",
+      noRecords: "No hay registros disponibles.",
+      pagerFirstPage: "Ir a la primera página",
+      pagerPreviousPage: "Ir a la página anterior",
+      pagerNextPage: "Ir a la página siguiente",
+      pagerLastPage: "Ir a la última página",
+      pagerPage: "Página",
+      pagerOf: "de",
+      pagerTotalPages: "{0}",
+      pagerItems: "artículos",
+      productTitle: "Producto",
+      nameTitle: "Nombre",
+      skuTitle: "SKU",
+      categoryTitle: "Categoría",
+      priceTitle: "Precio",
+      quantityTitle: "Cantidad",
+      totalSalesTitle: "Ventas Totales",
+      pagerInfo: "{0} - {1} de {2} artículos",
+      pagerItemsPerPage: "artículos por página",
+      filterEqOperator: "Es igual a",
+      filterNotEqOperator: "No es igual a",
+      filterIsNullOperator: "Es nulo",
+      filterIsNotNullOperator: "No es nulo",
+      filterIsEmptyOperator: "Está vacío",
+      filterIsNotEmptyOperator: "No está vacío",
+      filterStartsWithOperator: "Comienza con",
+      filterContainsOperator: "Contiene",
+      filterNotContainsOperator: "No contiene",
+      filterEndsWithOperator: "Termina con",
+      filterGteOperator: "Mayor o igual que",
+      filterGtOperator: "Mayor que",
+      filterLteOperator: "Menor o igual que",
+      filterLtOperator: "Menor que",
+      filterIsTrue: "Sí",
+      filterIsFalse: "No",
+      filterBooleanAll: "(Todos)",
+      filterAfterOrEqualOperator: "Es posterior o igual a",
+      filterAfterOperator: "Es posterior a",
+      filterBeforeOperator: "Es anterior a",
+      filterBeforeOrEqualOperator: "Es anterior o igual a",
+      filterSubmitButton: "Filtrar",
+      filterClearButton: "Borrar filtros",
+      filterAndLogic: "Y",
+      filterOrLogic: "O",
+      filterTitle: "Filtrar",
+      sortAscending: "Orden ascendente",
+      sortDescending: "Orden descendente",
+      searchPlaceholder: "Buscar",
+      filterCheckAll: "Seleccionar todo",
+      filterAriaLabel: "Filtrar",
+      sortAriaLabel: "Ordenar",
+      groupColumn: "Columna de grupo",
+      groupExpand: "Expandir grupo",
+      groupCollapse: "Contraer grupo",
+      groupPanelAriaLabel: "Panel de agrupación",
+      ungroupColumn: "Desagrupar columna",
+      detailExpand: "Expandir detalle",
+      detailCollapse: "Contraer detalle",
+    },
+     wizard: {
+       windowTitle: "Vista previa del gráfico",
+       exportButton: "Exportar",
+       exportPDF: "Archivo PDF",
+       exportSVG: "Archivo SVG",
+       exportPNG: "Archivo PNG",
+       tabChart: "Gráfico",
+       tabData: "Datos",
+       tabFormat: "Formato",
+       barChart: "Gráfico de barras",
+       bar: "Barra",
+       stackedBar: "Barras apiladas",
+       "100stackedBar": "Barras apiladas al 100%",
+       pieChart: "Gráfico circular",
+       pie: "Circular",
+       columnChart: "Gráfico de columnas",
+       column: "Columna",
+       stackedColumn: "Columnas apiladas",
+       "100stackedColumn": "Columnas apiladas al 100%",
+       lineChart: "Gráfico de líneas",
+       line: "Línea",
+       stackedLine: "Líneas apiladas",
+       "100stackedLine": "Líneas apiladas al 100%",
+       scatterChart: "Gráfico de dispersión",
+       scatter: "Dispersión",
+       configuration: "Configuración",
+       categoryAxis: "Eje de categorías",
+       xAxis: "Eje X",
+       valueAxis: "Eje de valores",
+       series: "Series",
+       add: "Agregar",
+       chartArea: "Área del gráfico",
+       margins: "Márgenes",
+       auto: "Auto",
+       left: "Izquierda",
+       right: "Derecha",
+       top: "Superior",
+       bottom: "Inferior",
+       background: "Color de fondo",
+       title: "Título",
+       applyTo: "Aplicar a",
+       chartTitle: "Título del gráfico",
+       chartSubtitle: "Subtítulo del gráfico",
+       font: "Fuente",
+       size: "Tamaño",
+       color: "Color",
+       legend: "Leyenda",
+       showLegend: "Mostrar leyenda",
+       position: "Posición",
+       labels: "Etiquetas",
+       rotation: "Rotación",
+       reverseOrder: "Orden inverso",
+       valueAxisTitle: "Título del eje de valores",
+       categoryAxisTitle: "Título del eje de categorías",
+     },
+     chartWizard: {
+      window: {
+        title: "Vista previa del gráfico",
+      },
+      export: {
+        button: "Exportar",
+        PDF: "Archivo PDF",
+        SVG: "Archivo SVG",
+        PNG: "Archivo PNG",
+      },
+      tab: {
+        chart: "Gráfico",
+        data: "Datos",
+        format: "Formato",
+      },
+      chart: {
+        barChart: {
+          expandText: "Gráfico de barras",
+          bar: "Barra",
+          stackedBar: "Barras apiladas",
+          "100%stackedBar": "Barras apiladas al 100%",
+        },
+        pieChart: {
+          expandText: "Gráfico de pastel",
+          pie: "Pastel",
+        },
+        columnChart: {
+          expandText: "Gráfico de columnas",
+          column: "Columna",
+          stackedColumn: "Columnas apiladas",
+          "100%stackedColumn": "Columnas apiladas al 100%",
+        },
+        lineChart: {
+          expandText: "Gráfico de líneas",
+          line: "Línea",
+          stackedLine: "Líneas apiladas",
+          "100%stackedLine": "Líneas apiladas al 100%",
+        },
+        scatterChart: {
+          expandText: "Gráfico de dispersión",
+          scatter: "Dispersión",
+        },
+      },
+      data: {
+        configuration: {
+          expandText: "Configuración",
+          categoryAxis: "Eje de categorías",
+          xAxis: "Eje X",
+          valueAxis: "Eje de valores",
+          series: {
+            title: "Series",
+            add: "Agregar",
+          },
+        },
+      },
+      format: {
+        chartArea: {
+          expandText: "Área del gráfico",
+          margins: {
+            auto: "Auto",
+            left: "Izquierda",
+            right: "Derecha",
+            top: "Arriba",
+            bottom: "Abajo",
+          },
+          background: {
+            color: "Color",
+          },
+        },
+        title: {
+          expandText: "Título",
+          applyTo: "Aplicar a",
+          chartTitle: "Título del gráfico",
+          chartSubtitle: "Subtítulo del gráfico",
+          label: "Título",
+          font: "Fuente",
+          fontPlaceholder: "(fuente heredada)",
+          size: "Tamaño",
+          sizePlaceholder: "px",
+          color: "Color",
+        },
+        series: {
+          expandText: "Series",
+          applyTo: "Aplicar a",
+          allSeries: "Todas las series",
+          color: "Color",
+          showLabels: "Mostrar etiquetas",
+        },
+        legend: {
+          expandText: "Leyenda",
+          showLegend: "Mostrar leyenda",
+          font: "Fuente",
+          fontPlaceholder: "(fuente heredada)",
+          size: "Tamaño",
+          sizePlaceholder: "px",
+          color: "Color",
+          position: {
+            top: "Arriba",
+            bottom: "Abajo",
+            left: "Izquierda",
+            right: "Derecha",
+          },
+        },
+        categoryAxis: {
+          expandText: "Eje de categorías",
+          title: {
+            expandText: "Título",
+            placeholder: "Título del eje",
+            font: "Fuente",
+            fontPlaceholder: "(fuente heredada)",
+            size: "Tamaño",
+            sizePlaceholder: "px",
+            color: "Color",
+          },
+          labels: {
+            text: "Etiquetas",
+            font: "Fuente",
+            fontPlaceholder: "(fuente heredada)",
+            size: "Tamaño",
+            sizePlaceholder: "px",
+            color: "Color",
+            rotation: {
+              text: "Rotación",
+              auto: "Auto",
+            },
+            reverseOrder: "Orden inverso",
+          },
+        },
+        valueAxis: {
+          expandText: "Eje de valores",
+          title: {
+            text: "Título",
+            placeholder: "Título del eje",
+            font: "Fuente",
+            fontPlaceholder: "(fuente heredada)",
+            size: "Tamaño",
+            sizePlaceholder: "px",
+            color: "Color",
+          },
+          labels: {
+            text: "Etiquetas",
+            font: "Fuente",
+            fontPlaceholder: "(fuente heredada)",
+            size: "Tamaño",
+            sizePlaceholder: "px",
+            color: "Color",
+            rotation: {
+              text: "Rotación",
+              auto: "Auto",
+            },
+          },
+        },
+      },
+    }
+  }
+
+  export default es
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/data/messages/fr.ts b/examples/ecommerce-jewellery-store/src/data/messages/fr.ts
new file mode 100644
index 00000000..8a647cc2
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/messages/fr.ts
@@ -0,0 +1,445 @@
+export const fr = {
+    // General Translations
+    title: "Bijoux Vilora",
+    subtitle:
+      "Nous proposons des bijoux exquis, chacun illustrant une élégance intemporelle",
+    buttonText: "Voir les Collections",
+    searchPlaceholder: "Rechercher",
+    addToCartButtonText: "Ajouter au Panier",
+    adminLabel: "Admin",
+    clientLabel: "Client",
+    languageMenuTitle: "Langue",
+    languageEnglish: "Anglais",
+    languageFrench: "Français",
+    languageSpanish: "Espagnol",
+    cookiesText:
+      "Nous utilisons des cookies pour améliorer votre expérience.",
+    rightsReservedText: "Tous droits réservés.",
+    subscribeText: "Abonnez-vous à notre newsletter :",
+    emailPlaceholder: "Email",
+    subscribeButtonText: "S'abonner",
+    filterLabel: "Filtrer :",
+    sortByLabel: "Trier par :",
+    clearFiltersButton: "Effacer les filtres",
+    categoryPlaceholder: "Catégorie",
+    materialPlaceholder: "Matériau",
+    categoriesData: ["Bracelets", "Bagues", "Boucles d'oreilles", "Montres", "Colliers"],
+    statusesData: ["Vente", "Recommandé", "Indispensable"],
+    materialsData: ["Or", "Argent"],
+    followUsText: "Suivez-nous :",
+    shoppingCartTitle: "Panier",
+    backButtonText: "Retour",
+    whyChooseUs: "Pourquoi nous choisir ?",
+    returnPolicyTitle: "Politique de Retour",
+    returnPolicyContent: "Vous pouvez retourner vos articles sous 30 jours pour un remboursement ou un échange complet.",
+    includedGiftWrappingTitle: "Emballage Cadeau Inclus",
+    includedGiftWrappingContent: "Ajoutez un emballage cadeau pour une touche spéciale, accompagné d'un message personnalisé pour vos proches.",
+    discountCodeTitle: "Code Promo Disponible",
+    discountCodeContent: "Appliquez votre code promo lors du paiement pour profiter d'économies exclusives sur votre commande.",
+    removeButtonText: "Supprimer",
+    emptyCartMessage: "Votre panier est vide.",
+    "aureliaContent": "Les bagues sont des pièces de bijouterie polyvalentes qui symbolisent le style personnel, adaptées à la fois pour les occasions spéciales et le quotidien.",
+    proceedToCheckoutButtonText: "Passer à la caisse",
+    "aureliaSubtitle": "Bagues artisanales uniques",
+    customerCareTitle: "Service Client",
+    thankYou: {
+      title: "Merci !",
+      subtitle: "Votre commande a été passée avec succès.",
+      thankYouMessage: "Merci pour votre commande !",
+      orderSubmittedMessage: "Vous avez soumis votre commande",
+      backToShopping: "Retour au shopping"
+    },
+    customerCareLinks: [
+      "Nous Contacter",
+      "Achats en Ligne",
+      "Suivre Votre Commande",
+      "Livraison",
+      "Commandes & Paiement",
+      "Aide",
+    ],
+    ourCompanyTitle: "Notre Entreprise",
+    ourCompanyLinks: [
+      "Emplacements Importants",
+      "Carrières",
+      "Responsabilité d'Entreprise",
+      "Durabilité",
+      "Soins de la Société",
+    ],
+    legalPrivacyTitle: "Légal & Confidentialité",
+    legalPrivacyLinks: [
+      "Conditions d'Utilisation",
+      "Conditions de Vente",
+      "Politique de Retour",
+      "Politique de Confidentialité",
+      "Politique de Cookies",
+    ],
+    // Menu Translations
+    menuHome: "Accueil",
+    menuJewelry: "Bijoux",
+    menuContacts: "Contacts",
+    menuBracelets: "Bracelets",
+    menuRings: "Bagues",
+    menuEarrings: "Boucles d'oreilles",
+    menuWatches: "Montres",
+    menuAll: "Tout",
+    // Other Translations
+    bestsellersTitle: "Nos Meilleures Ventes",
+    bestsellersSubtitle:
+      "Profitez d'une excellente sélection de bijoux fins",
+    buyNowButtonText: "Acheter Maintenant",
+    timelessTitle: "Classiques Intemporels",
+    timelessSubtitle: "Découvrez nos collections artisanales uniques",
+    timelessContent:
+      "Les bijoux subliment le style et ajoutent de l'élégance, chaque pièce raconte une histoire unique.",
+    fineJewelryTitle: "Bijoux Fins",
+    fineJewelrySubtitle: "Découvrez nos collections artisanales uniques",
+    fineJewelryContent:
+      "Les bijoux rehaussent le style et apportent de la sophistication, chaque pièce raconte une histoire distincte.",
+    ringsTitle: "Nos Bagues",
+    ringsSubtitle: "Profitez d'une excellente sélection de bagues fines",
+    watchesTitle: "Nos Montres",
+    watchesSubtitle: "Profitez d'une excellente sélection de montres",
+    watchesContent:
+      "Les montres en or haut de gamme pour hommes sont le summum du luxe, alliant précision et savoir-faire sophistiqué.",
+    servicesTitle: "Services",
+    servicesSubtitle:
+      "Explorez des réparations expertes pour enrichir votre expérience",
+    servicesContent:
+      "Vilora propose des services tels que des designs personnalisés, des réparations et des expertises pour enrichir l'expérience client.",
+    testimonialsTitle: "Mots des Clients",
+    testimonialsSubtitle: "Que disent-ils de nous ?",
+    testimonialsData: [
+      {
+        image: "/testemonials1.jpg",
+        name: "Erica Moore",
+        rating: 5,
+        description:
+          "Vilora a dépassé toutes mes attentes ! Le savoir-faire de mon collier en diamant est absolument époustouflant, et l'attention aux détails est sans égale. Du moment où j'ai passé ma commande jusqu'au jour où elle est arrivée, toute l'expérience a été parfaite.",
+      },
+      {
+        image: "/testemonials2.jpg",
+        name: "Kelvin Hettinger",
+        rating: 4.5,
+        description:
+          "Je ne pourrais pas être plus heureux avec ma bague de fiançailles personnalisée de chez Vilora. L'équipe m'a aidé à concevoir la pièce parfaite, et le résultat final était encore plus beau que ce que j'avais imaginé. Leur service, qualité et dévouement à l'excellence font de Vilora mon choix pour tous les bijoux de luxe.",
+      },
+      {
+        image: "/testemonials3.jpg",
+        name: "Karen Brooks",
+        rating: 5,
+        description:
+          "La collection de Vilora est tout simplement à couper le souffle. J'ai récemment acheté une bague en saphir blanc, et c'est devenu ma pièce préférée. L'élégance et la brillance des bijoux reflètent leur goût impeccable et leurs normes élevées. Je recommande vivement !",
+      },
+    ],
+    // Contacts Page Translations
+    getInTouchTitle: "Contactez-nous",
+    getInTouchSubtitle: "Si vous avez des questions, contactez-nous",
+    fullNameLabel: "Nom complet",
+    fullNamePlaceholder: "Entrez votre nom complet",
+    emailLabel: "Email",
+    phoneNumberLabel: "Numéro de téléphone",
+    typeOfCustomerLabel: "Type de client",
+    dateLabel: "Date",
+    bookSlotButton: "Réserver un créneau",
+    contactsImageAlt: "Contacts",
+    // Thank You Page Translations
+    thankYouTitle: "Merci pour votre commande!",
+    thankYouSubtitle: "Vous avez soumis votre commande",
+    backToShoppingButton: "Retour aux achats",
+    allProductsTitle: "Sélection Fine",
+    allProductsSubtitle: "Appréciez le véritable artisanat",
+    chartSelectedDataButton: "Graphique des données sélectionnées",
+    top3SalesButton: "Top 3 des ventes par catégorie",
+    allProductsContentText:
+      "Les bijoux sont une forme significative d'expression de soi qui améliore le style personnel et ajoute de la beauté à toute occasion.",
+    collectionSerene: 'Collection "SERENE"',
+    collectionAurelia: 'Collection "AURELIA"',
+    collectionRavina: 'Collection "RAVINA"',
+    ourCollectionsTitle: "Nos Collections",
+    ourCollectionsSubtitle: "Profitez d'une excellente sélection de bijoux fins",
+    breadcrumbHome: "Accueil",
+    breadcrumbJewelry: "Bijoux",
+    buyButtonText: "Acheter",
+    handmadePinkDiamondRing: "Bague en diamant rose faite à la main",
+    diamondRingWithPinkRuby: "Bague en diamant avec rubis rose",
+    whiteSandDiamondRing: "Bague en diamant sable blanc",
+    productSubtitle: "En platine avec diamant naturel",
+    productDescription: "Alliances élégantes avec des perles lustrées.",
+    reviewsText: "{0} avis",
+    youMayAlsoLikeTitle: "Vous aimerez aussi",
+    youMayAlsoLikeSubtitle: "Profitez d'une excellente sélection de bijoux fins",
+    categories: {
+      Bracelets: "Bracelets",
+      Rings: "Bagues",
+      Earrings: "Boucles d'oreilles",
+      Watches: "Montres",
+      Necklaces: "Colliers",
+    },
+    diamondWeddingRing: "Bague de mariage en diamant",
+    silverBraceletWithCross: "Bracelet en argent avec croix",
+    pinkSilverBracelet: "Bracelet en argent rose",
+    yellowGoldEarrings: "Boucles d'oreilles en or jaune",
+    silverHeartNecklace: "Collier cœur en argent",
+    handmadeSilverEarrings: "Boucles d'oreilles en argent faites à la main",
+    diamondWeddingBands: "Alliances en diamant",
+    casualSilverWatch: "Montre décontractée en argent",
+    silverBraceletWithOnyx: "Bracelet en argent avec onyx",
+    weddingBandsWithPearls: "Alliances avec perles",
+    silverWeddingBands: "Alliances en argent",
+    handmadeYellowGoldRing: "Bague en or jaune faite à la main",
+    diamondRingWithSapphire: "Bague en diamant avec saphir",
+    silverHeartBracelet: "Bracelet cœur en argent",
+    roseGoldEarringsWithOpal: "Boucles d'oreilles en or rose avec opale",
+    silverBraceletWithTopaz: "Bracelet en argent avec topaze",
+    handmadeDiamondRing: "Bague en diamant faite à la main",
+    diamondRingWithRuby: "Bague en diamant avec rubis",
+    silverWatch: "Montre en argent",
+    goldEarringsWithGarnet: "Boucles d'oreilles en or avec grenat",
+    statuses: {
+      statusSale: "Vente",
+      statusRecommended: "Recommandé",
+      statusMustHave: "Indispensable",
+    },
+    materials: {
+      materialGold: "Or",
+      materialSilver: "Argent",
+    },
+    paymentDetailsTitle: "Détails du paiement",
+    paymentDetailsSubtitle: "Veuillez soumettre vos détails de paiement",
+    paymentMethodCreditCard: "Carte de Crédit",
+    paymentMethodBankTransfer: "Virement Bancaire",
+    paymentMethodApplePay: "Apple Pay",
+    cardNumberLabel: "Numéro de carte",
+    expiryDateLabel: "Date d'expiration",
+    cvvLabel: "CVV*",
+    cardHolderLabel: "Titulaire de la carte",
+    submitOrderButton: "Valider la commande",
+    subTotalLabel: "Sous-total",
+    usDollarsLabel: "Dollars US",
+    vatLabel: "TVA",
+    shippingMethodLabel: "Mode de livraison",
+    standardFreeDeliveryLabel: "Livraison standard gratuite",
+    giftWrappingLabel: "Emballage cadeau",
+    includedGiftWrappingLabel: "Emballage cadeau inclus",
+    totalLabel: "Total",
+    grid: {
+      groupPanelEmpty: "Faites glisser un en-tête de colonne et déposez-le ici pour regrouper par cette colonne",
+      noRecords: "Aucun enregistrement disponible.",
+      pagerFirstPage: "Aller à la première page",
+      pagerPreviousPage: "Aller à la page précédente",
+      pagerNextPage: "Aller à la page suivante",
+      pagerLastPage: "Aller à la dernière page",
+      pagerPage: "Page",
+      pagerOf: "de",
+      pagerTotalPages: "{0}",
+      pagerItems: "articles",
+      pagerInfo: "{0} - {1} sur {2} articles",
+      pagerItemsPerPage: "articles par page",
+      filterEqOperator: "Est égal à",
+      filterNotEqOperator: "N'est pas égal à",
+      filterIsNullOperator: "Est nul",
+      filterIsNotNullOperator: "N'est pas nul",
+      filterIsEmptyOperator: "Est vide",
+      filterIsNotEmptyOperator: "N'est pas vide",
+      filterStartsWithOperator: "Commence par",
+      productTitle: "Produit",
+      nameTitle: "Nom",
+      skuTitle: "SKU",
+      categoryTitle: "Catégorie",
+      priceTitle: "Prix",
+      quantityTitle: "Quantité",
+      totalSalesTitle: "Ventes Totales",
+      filterContainsOperator: "Contient",
+      filterNotContainsOperator: "Ne contient pas",
+      filterEndsWithOperator: "Se termine par",
+      filterGteOperator: "Est supérieur ou égal à",
+      filterGtOperator: "Est supérieur à",
+      filterLteOperator: "Est inférieur ou égal à",
+      filterLtOperator: "Est inférieur à",
+      filterIsTrue: "Oui",
+      filterIsFalse: "Non",
+      filterBooleanAll: "(Tous)",
+      filterAfterOrEqualOperator: "Est après ou égal à",
+      filterAfterOperator: "Est après",
+      filterBeforeOperator: "Est avant",
+      filterBeforeOrEqualOperator: "Est avant ou égal à",
+      filterSubmitButton: "Filtrer",
+      filterClearButton: "Effacer les filtres",
+      filterAndLogic: "Et",
+      filterOrLogic: "Ou",
+      filterTitle: "Filtrer",
+      sortAscending: "Tri croissant",
+      sortDescending: "Tri décroissant",
+      searchPlaceholder: "Chercher",
+      filterCheckAll: "Tout vérifier",
+      pagerItemPerPage: "Articles par page",
+      filterChooseOperator: "Choisir un opérateur",
+      filterSelectedItems: "articles sélectionnés",
+      filterAriaLabel: "Filtrer",
+      sortAriaLabel: "Triable",
+      groupColumn: "Colonne de groupe",
+      groupExpand: "Développer le groupe",
+      groupCollapse: "Réduire le groupe",
+      groupPanelAriaLabel: "panneau de groupe",
+      ungroupColumn: "Dissocier la colonne",
+      detailExpand: "Développer la ligne de détail",
+      detailCollapse: "Réduire la ligne de détail",
+
+    },
+    chartWizard: {
+      window: {
+        title: "Aperçu du graphique",
+      },
+      export: {
+        button: "Exporter",
+        PDF: "Fichier PDF",
+        SVG: "Fichier SVG",
+        PNG: "Fichier PNG",
+      },
+      tab: {
+        chart: "Graphique",
+        data: "Données",
+        format: "Format",
+      },
+      chart: {
+        barChart: {
+          expandText: "Graphique à barres",
+          bar: "Barre",
+          stackedBar: "Barres empilées",
+          "100%stackedBar": "Barres empilées à 100%",
+        },
+        pieChart: {
+          expandText: "Graphique en secteur",
+          pie: "Secteur",
+        },
+        columnChart: {
+          expandText: "Graphique en colonnes",
+          column: "Colonne",
+          stackedColumn: "Colonnes empilées",
+          "100%stackedColumn": "Colonnes empilées à 100%",
+        },
+        lineChart: {
+          expandText: "Graphique en lignes",
+          line: "Ligne",
+          stackedLine: "Lignes empilées",
+          "100%stackedLine": "Lignes empilées à 100%",
+        },
+        scatterChart: {
+          expandText: "Graphique de dispersion",
+          scatter: "Dispersion",
+        },
+      },
+      data: {
+        configuration: {
+          expandText: "Configuration",
+          categoryAxis: "Axe des catégories",
+          xAxis: "Axe X",
+          valueAxis: "Axe des valeurs",
+          series: {
+            title: "Séries",
+            add: "Ajouter",
+          },
+        },
+      },
+      format: {
+        chartArea: {
+          expandText: "Zone du graphique",
+          margins: {
+            auto: "Auto",
+            left: "Gauche",
+            right: "Droite",
+            top: "Haut",
+            bottom: "Bas",
+          },
+          background: {
+            color: "Couleur",
+          },
+        },
+        title: {
+          expandText: "Titre",
+          applyTo: "Appliquer à",
+          chartTitle: "Titre du graphique",
+          chartSubtitle: "Sous-titre du graphique",
+          label: "Titre",
+          font: "Police",
+          fontPlaceholder: "(police héritée)",
+          size: "Taille",
+          sizePlaceholder: "px",
+          color: "Couleur",
+        },
+        series: {
+          expandText: "Séries",
+          applyTo: "Appliquer à",
+          allSeries: "Toutes les séries",
+          color: "Couleur",
+          showLabels: "Afficher les étiquettes",
+        },
+        legend: {
+          expandText: "Légende",
+          showLegend: "Afficher la légende",
+          font: "Police",
+          fontPlaceholder: "(police héritée)",
+          size: "Taille",
+          sizePlaceholder: "px",
+          color: "Couleur",
+          position: {
+            top: "Haut",
+            bottom: "Bas",
+            left: "Gauche",
+            right: "Droite",
+          },
+        },
+        categoryAxis: {
+          expandText: "Axe des catégories",
+          title: {
+            expandText: "Titre",
+            placeholder: "Titre de l'axe",
+            font: "Police",
+            fontPlaceholder: "(police héritée)",
+            size: "Taille",
+            sizePlaceholder: "px",
+            color: "Couleur",
+          },
+          labels: {
+            text: "Étiquettes",
+            font: "Police",
+            fontPlaceholder: "(police héritée)",
+            size: "Taille",
+            sizePlaceholder: "px",
+            color: "Couleur",
+            rotation: {
+              text: "Rotation",
+              auto: "Auto",
+            },
+            reverseOrder: "Ordre inversé",
+          },
+        },
+        valueAxis: {
+          expandText: "Axe des valeurs",
+          title: {
+            text: "Titre",
+            placeholder: "Titre de l'axe",
+            font: "Police",
+            fontPlaceholder: "(police héritée)",
+            size: "Taille",
+            sizePlaceholder: "px",
+            color: "Couleur",
+          },
+          labels: {
+            text: "Étiquettes",
+            font: "Police",
+            fontPlaceholder: "(police héritée)",
+            size: "Taille",
+            sizePlaceholder: "px",
+            color: "Couleur",
+            rotation: {
+              text: "Rotation",
+              auto: "Auto",
+            },
+          },
+        },
+      },
+    },
+  }
+
+  export default fr
diff --git a/examples/ecommerce-jewellery-store/src/data/types.ts b/examples/ecommerce-jewellery-store/src/data/types.ts
index 6de34d0b..9b176e5a 100644
--- a/examples/ecommerce-jewellery-store/src/data/types.ts
+++ b/examples/ecommerce-jewellery-store/src/data/types.ts
@@ -26,10 +26,63 @@ export type BackgroundImageProps = {
     img: string;
 };
 
+export interface GridTranslations {
+    productTitle: string;
+    nameTitle: string;
+    skuTitle: string;
+    categoryTitle: string;
+    priceTitle: string;
+    quantityTitle: string;
+    totalSalesTitle: string;
+  }
+  
+  export interface Translations {
+    grid: GridTranslations;
+    chartSelectedDataButton: string;
+    top3SalesButton: string;
+    languageSpanish: string;
+    searchPlaceholder: string;
+    adminLabel: string;
+    clientLabel: string;
+    shoppingCartTitle: string;
+    backButtonText: string;
+    emptyCartMessage: string;
+    paymentDetailsTitle: string;
+    paymentDetailsSubtitle: string;
+    fullNameLabel: string;
+    emailLabel: string;
+    phoneNumberLabel: string;
+    proceedToCheckoutButtonText: string;
+    whyChooseUs: string;
+    returnPolicyTitle: string;
+    returnPolicyContent: string;
+    includedGiftWrappingTitle: string;
+    includedGiftWrappingContent: string;
+    discountCodeTitle: string;
+    discountCodeContent: string;
+    testimonialsData: { name: string; rating: number; description: string }[];
+    testimonialsTitle: string;
+    testimonialsSubtitle: string;
+    statuses: { [key: string]: string };
+    categories: { [key: string]: string };
+    materials: { [key: string]: string };
+    diamondWeddingRing: string;
+    silverBraceletWithCross: string;
+    [key: string]: any; 
+  }
+  
+  export type LanguageContextType = {
+    t: Translations;
+    language: "en" | "fr" | "es";
+    setLanguage: React.Dispatch<React.SetStateAction<"en" | "fr" | "es">>;
+  };
+
 export type CardListProps = {
     data: any[];
+    layout: "grid" | "list";
 }
 
+
 export type SectionProps = {
     children: React.ReactNode
 }
diff --git a/examples/ecommerce-jewellery-store/src/helpers/LanguageContext.tsx b/examples/ecommerce-jewellery-store/src/helpers/LanguageContext.tsx
new file mode 100644
index 00000000..6f805378
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/helpers/LanguageContext.tsx
@@ -0,0 +1,33 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import enMessages from "../data/messages/en";
+import frMessages from "../data/messages/fr";
+import esMessages from "../data/messages/es";
+import { LanguageContextType, Translations } from "../data/types";
+
+const translations = {
+  en: enMessages,
+  fr: frMessages,
+  es: esMessages,
+};
+
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+export const LanguageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [language, setLanguage] = useState<"en" | "fr" | "es">("en"); 
+  const t: Translations = translations[language]; 
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage, t }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguageContext = (): LanguageContextType => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error("useLanguageContext must be used within a LanguageProvider");
+  }
+  return context;
+};
diff --git a/examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx b/examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx
index 866fa47e..3dda0cdb 100644
--- a/examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx
+++ b/examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import bracelets from "@/assets/bracelets.png?url";
 import necklace from "@/assets/necklace_1.jfif?url";
 import ring from "@/assets/ring_1.jfif?url";
@@ -7,92 +6,105 @@ import jewel from "@/assets/1111.jfif?url";
 import { Layout } from "../components/Layout";
 import { OrderedImgText } from "../components/OrderedImageCard";
 import { CustomSection } from "../components/CustomizedSection";
-import { listData } from "../data/listData";
 import { FilterComponent } from "../components/FilterComponent";
 import { CardsList } from "../components/CardsList";
 import { CategoryList } from "../components/CategoryList";
-import { CardDescriptor } from "../data/types";
-import { DataModel } from "../data/types";
-
 import { Breadcrumb } from "@progress/kendo-react-layout";
 import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
 import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons";
 import { process, State } from "@progress/kendo-data-query";
+import { useLanguageContext } from "../helpers/LanguageContext";
+import { useTranslatedListData } from "../data/listData";
+import { CardDescriptor, DataModel } from "../data/types";
 
 export const AllProductsListView = () => {
-  const title = "Fine Selection";
-  const subtitle = "Enjoy the real craftsmanship";
-  const contentText =
-    "Jewelry is a meaningful form of self-expression that enhances personal style and adds beauty to any occasion.";
-  const order = "first";
+  const { t } = useLanguageContext();
+  const translatedListData = useTranslatedListData();
+
+  const [data, setData] = React.useState(translatedListData);
+  const [currentLayout, setCurrentLayout] = React.useState<"grid" | "list">("grid");
 
-  const [data, setData] = React.useState(listData);
-  
   const updateUI = (newState: State) => {
-    const newData = process(listData, newState)
-    setData(newData.data)
+    const newData = process(translatedListData, newState);
+    setData(newData.data);
   };
 
+  const BreakcrumbData: DataModel[] = [
+    { text: t.breadcrumbHome },
+    { text: t.breadcrumbJewelry },
+  ];
+
   const cards: CardDescriptor[] = [
     {
       img: necklace,
-      collectionText: 'Collection "SERENE"',
+      collectionText: t.collectionSerene,
     },
     {
       img: ring,
-      collectionText: 'Collection "AURELIA"',
+      collectionText: t.collectionAurelia,
     },
     {
       img: jewel,
-      collectionText: 'Collection "RAVINA"',
+      collectionText: t.collectionRavina,
     },
   ];
 
-  const BreakcrumbData: DataModel[] = [{
-    text: "Home"
-  },
-  {
-    text: "Jewelry"
-  }]
+  
 
   return (
     <>
       <Layout>
         <section
           className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
-          style={{
-            paddingTop: "60px",
-          }}
+          style={{ paddingTop: "60px" }}
         >
           <OrderedImgText
-            title={title}
-            subtitle={subtitle}
-            contentText={contentText}
+            title={t.allProductsTitle}
+            subtitle={t.allProductsSubtitle}
+            contentText={t.allProductsContentText}
             img={bracelets}
-            order={order}
+            order="first"
             link={null}
           />
         </section>
       </Layout>
+
       <Layout>
         <CustomSection>
-          <CategoryList title="Our Collections" subtitle="Enjoy an excellent selection of fine jewelry" data={cards}></CategoryList>
+          <CategoryList
+            title={t.ourCollectionsTitle}
+            subtitle={t.ourCollectionsSubtitle}
+            data={cards}
+          />
         </CustomSection>
       </Layout>
+
       <Layout>
-        <section className="k-d-flex k-justify-content-between">
-          <Breadcrumb data={BreakcrumbData}></Breadcrumb>
+        <section className="k-d-flex k-justify-content-between k-align-items-center k-py-4">
+          <Breadcrumb data={BreakcrumbData} />
           <ButtonGroup>
-            <Button fillMode={"flat"} svgIcon={gridLayoutIcon}></Button>
-            <Button fillMode={"flat"} svgIcon={layout2By2Icon}></Button>
+            <Button
+              fillMode="flat"
+              svgIcon={gridLayoutIcon}
+              selected={currentLayout === "grid"}
+              onClick={() => setCurrentLayout("grid")}
+            />
+            <Button
+              fillMode="flat"
+              svgIcon={layout2By2Icon}
+              selected={currentLayout === "list"}
+              onClick={() => setCurrentLayout("list")}
+            />
           </ButtonGroup>
         </section>
       </Layout>
+
       <Layout>
-        <FilterComponent updateUI={updateUI}></FilterComponent>
+        <FilterComponent updateUI={updateUI} />
       </Layout>
+
       <Layout>
-        <CardsList data={data}></CardsList>
+        <CardsList data={data} layout={currentLayout} />
       </Layout>
     </>
   );
diff --git a/examples/ecommerce-jewellery-store/src/pages/Contacts.tsx b/examples/ecommerce-jewellery-store/src/pages/Contacts.tsx
index 5fe9e5ac..a4dad81d 100644
--- a/examples/ecommerce-jewellery-store/src/pages/Contacts.tsx
+++ b/examples/ecommerce-jewellery-store/src/pages/Contacts.tsx
@@ -6,7 +6,7 @@ import CityInput from '../components/CityInput';
 import PhoneInput from '../components/PhoneInput';
 import AppointmentInput from '../components/AppointmentInput';
 import DateChooserInput from '../components/DateChooserInput';
-import ContactsRadioButtons from '../components/ContactsRadioButtons'
+import ContactsRadioButtons from '../components/ContactsRadioButtons';
 import contactsImage from '@/assets/contactsImage.png';
 import { Button } from '@progress/kendo-react-buttons';
 import { useNavigate } from 'react-router-dom';
@@ -18,9 +18,11 @@ import {
   FieldWrapper,
 } from '@progress/kendo-react-form';
 import { Label } from '@progress/kendo-react-labels';
+import { useLanguageContext } from '../helpers/LanguageContext';
 
 const Contacts: React.FC = () => {
   const navigate = useNavigate();
+  const { t } = useLanguageContext();
 
   const onSubmitClick = () => {
     navigate('/thankyou');
@@ -31,27 +33,27 @@ const Contacts: React.FC = () => {
       <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-4 k-gap-10">
         <div className="k-d-grid k-grid-cols-12 k-gap-8 k-w-full">
           <div className="k-col-span-6 k-col-start-1">
-            <h1>Get in touch</h1>
-            <p>If you have any questions, contact us</p>
+            <h1>{t.getInTouchTitle}</h1>
+            <p>{t.getInTouchSubtitle}</p>
             <Form
               render={() => (
                 <FormElement>
                   <div className="k-form-layout k-d-grid k-gap-y-6 k-gap-x-4">
                     <FieldWrapper className="k-col-span-1">
-                      <Label> Full Name </Label>
+                      <Label>{t.fullNameLabel}</Label>
                       <Field name="fullName" component={CardHolder} />
                     </FieldWrapper>
                     <FieldWrapper className="k-col-span-1">
-                      <Label> Email </Label>
+                      <Label>{t.emailLabel}</Label>
                       <Field name="email" component={EmailInput} />
                     </FieldWrapper>
                     <FieldWrapper className="k-col-span-1">
-                      <Label> Phone Number </Label>
+                      <Label>{t.phoneNumberLabel}</Label>
                       <Field name="phoneNumber" component={PhoneInput} />
                     </FieldWrapper>
                     <div className="k-d-flex k-flex-col k-align-items-start k-gap-4">
-                      <p>Type of customer</p>
-                      <ContactsRadioButtons/>
+                      <p>{t.typeOfCustomerLabel}</p>
+                      <ContactsRadioButtons />
                     </div>
                     <FieldWrapper className="k-col-span-1">
                       <Field name="city" component={CityInput} />
@@ -60,7 +62,7 @@ const Contacts: React.FC = () => {
                       <Field name="appointment" component={AppointmentInput} />
                     </FieldWrapper>
                     <FieldWrapper className="k-col-span-1">
-                      <Label> Date </Label>
+                      <Label>{t.dateLabel}</Label>
                       <Field name="date" component={DateChooserInput} />
                     </FieldWrapper>
                   </div>
@@ -72,13 +74,13 @@ const Contacts: React.FC = () => {
               onClick={onSubmitClick}
               themeColor={'primary'}
             >
-              Book a Slot
+              {t.bookSlotButton}
             </Button>
           </div>
           <div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
             <img
               src={contactsImage}
-              alt="Contacts"
+              alt={t.contactsImageAlt}
               style={{
                 maxWidth: '630px',
                 maxHeight: '580px',
diff --git a/examples/ecommerce-jewellery-store/src/pages/DetailedCategory.tsx b/examples/ecommerce-jewellery-store/src/pages/DetailedCategory.tsx
index 22fcdeed..fb52e579 100644
--- a/examples/ecommerce-jewellery-store/src/pages/DetailedCategory.tsx
+++ b/examples/ecommerce-jewellery-store/src/pages/DetailedCategory.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
+import * as React from "react";
 import { Layout } from "../components/Layout";
 import { OrderedImgText } from "../components/OrderedImageCard";
 import aureliaImg from "../assets/aurelia-detail-page.png";
 import { CustomSection } from "../components/CustomizedSection";
 import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
 import { Breadcrumb } from "@progress/kendo-react-layout";
-import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons"
+import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons";
 
 import necklace from "../assets/necklace_1.jfif?url";
 import jewel from "../assets/1111.jfif?url";
@@ -13,50 +13,48 @@ import tolos from "../assets/tolosCollection.jfif";
 import { CategoryList } from "../components/CategoryList";
 import { FilterComponent } from "../components/FilterComponent";
 import { CardsList } from "../components/CardsList";
-import { listData } from '../data/listData';
-import { process, State } from '@progress/kendo-data-query';
-import { CardDescriptor } from '../data/types';
-import { DataModel } from '../data/types';
+import { useTranslatedListData } from "../data/listData";
+import { process, State } from "@progress/kendo-data-query";
+import { CardDescriptor } from "../data/types";
+import { DataModel } from "../data/types";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
-const cards: CardDescriptor[] = [
-  {
-    img: necklace,
-    collectionText: "SERENE",
-  },
-  {
-    img: jewel,
-    collectionText: "RAVINA",
-  },
-  {
-    img: tolos,
-    collectionText: "TOLOS",
-  },
-];
-
-const BreakcrumbData: DataModel[] = [
-  {
-    text: "Home",
-  },
-  {
-    text: "Jewelry",
-  },
-  {
-    text: "Rings"
-  }
-];
+export const DetailedCategory = () => {
+  const { t } = useLanguageContext();
+  const translatedListData = useTranslatedListData();
+  const order = 'first'
+  const [data, setData] = React.useState(translatedListData);
 
+  const cards: CardDescriptor[] = [
+    {
+      img: necklace,
+      collectionText: t.collectionSerene,
+    },
+    {
+      img: jewel,
+      collectionText: t.collectionRavina,
+    },
+    {
+      img: tolos,
+      collectionText: "TOLOS",
+    },
+  ];
 
-export const DetailedCategory = () => {
-  const [data, setData] = React.useState(listData);
-  const title = "AURELIA Collection";
-  const subtitle = "Unique handmade rings";
-  const contentText =
-    "Rings are versatile jewelry pieces that symbolize personal style, suitable for both special occasions and everyday wear.";
-  const order = "first";
+  const BreakcrumbData: DataModel[] = [
+    {
+      text: t.breadcrumbHome,
+    },
+    {
+      text: t.breadcrumbJewelry,
+    },
+    {
+      text: t.categories.Rings,
+    },
+  ];
 
   const updateUI = (newState: State) => {
-    const newData = process(listData, newState)
-    setData(newData.data)
+    const newData = process(translatedListData, newState);
+    setData(newData.data);
   };
 
   return (
@@ -69,9 +67,12 @@ export const DetailedCategory = () => {
           }}
         >
           <OrderedImgText
-            title={title}
-            subtitle={subtitle}
-            contentText={contentText}
+            title={t.aureliaTitle || "AURELIA Collection"}
+            subtitle={t.aureliaSubtitle || "Unique handmade rings"}
+            contentText={
+              t.aureliaContent ||
+              "Rings are versatile jewelry pieces that symbolize personal style, suitable for both special occasions and everyday wear."
+            }
             img={aureliaImg}
             order={order}
             link={null}
@@ -80,12 +81,16 @@ export const DetailedCategory = () => {
       </Layout>
       <Layout>
         <CustomSection>
-          <CategoryList title="Our Collections" subtitle='Enjoy an excellent selection of fine jewelry' data={cards}></CategoryList>
+          <CategoryList
+            title={t.ourCollectionsTitle}
+            subtitle={t.ourCollectionsSubtitle}
+            data={cards}
+          />
         </CustomSection>
       </Layout>
       <Layout>
         <section className="k-d-flex k-justify-content-between">
-          <Breadcrumb data={BreakcrumbData}></Breadcrumb>
+          <Breadcrumb data={BreakcrumbData} />
           <ButtonGroup>
             <Button fillMode={"flat"} svgIcon={gridLayoutIcon}></Button>
             <Button fillMode={"flat"} svgIcon={layout2By2Icon}></Button>
@@ -93,10 +98,10 @@ export const DetailedCategory = () => {
         </section>
       </Layout>
       <Layout>
-        <FilterComponent updateUI={updateUI}></FilterComponent>
+        <FilterComponent updateUI={updateUI} />
       </Layout>
       <Layout>
-        <CardsList data={data}></CardsList>
+        <CardsList data={data} layout="grid"/>
       </Layout>
     </>
   );
diff --git a/examples/ecommerce-jewellery-store/src/pages/Home.tsx b/examples/ecommerce-jewellery-store/src/pages/Home.tsx
index 03d8d584..1acf0bc0 100644
--- a/examples/ecommerce-jewellery-store/src/pages/Home.tsx
+++ b/examples/ecommerce-jewellery-store/src/pages/Home.tsx
@@ -21,6 +21,7 @@ import homeServicesImage from '../assets/homeServicesImage.png';
 import { Testemonials } from '../components/Testemonials';
 import { useAdminContext } from "../helpers/AdminContext";
 import AdminView from "../components/AdminView";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 const data: CardDescriptor[] = [
   { img: silverBraceletOnyx, collectionText: "Silver Bracelet with Onyx" },
@@ -41,16 +42,14 @@ const watchData: CardDescriptor[] = [
 
 const Home: React.FC = () => {
   const { isAdmin } = useAdminContext();
-  const title = "Vilora Jewelry";
-  const subtitle = "we offer exquisite jewelry, each showcasing timeless elegance";
-  const buttonText = "See Collections";
+  const { t } = useLanguageContext(); // Access translations
 
   return (
     <>
       <BackgroundImage
-        title={title}
-        subtitle={subtitle}
-        buttonText={buttonText}
+        title={t.title}
+        subtitle={t.subtitle}
+        buttonText={t.buttonText}
         img={model}
       />
 
@@ -67,65 +66,77 @@ const Home: React.FC = () => {
               className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
               style={{ paddingTop: "60px" }}
             >
-              <CategoryList title='Our Bestsellers' subtitle='Enjoy an excellent selection of fine jewelry' data={data} />
+              <CategoryList
+                title={t.bestsellersTitle}
+                subtitle={t.bestsellersSubtitle}
+                data={data}
+              />
             </section>
           </Layout>
           <Layout>
             <CustomSection>
               <OrderedImgText
-                title='Timeless Classics'
-                subtitle='Get our unique handmade collections'
-                contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
+                title={t.timelessTitle}
+                subtitle={t.timelessSubtitle}
+                contentText={t.timelessContent}
                 img={homeModel2}
-                order='first'
-                link="Shop Now"
-                
+                order="first"
+                link={t.buyNowButtonText}
               />
             </CustomSection>
           </Layout>
           <Layout>
             <CustomSection>
               <OrderedImgText
-                title='Fine Jewelry'
-                subtitle='Get our unique handmade collections'
-                contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
+                title={t.fineJewelryTitle}
+                subtitle={t.fineJewelrySubtitle}
+                contentText={t.fineJewelryContent}
                 img={homeModel3}
-                order='last'
-                link="Shop Now"
+                order="last"
+                link={t.buyNowButtonText}
               />
             </CustomSection>
           </Layout>
           <Layout>
             <CustomSection>
-              <CategoryList colSpan={6} title='Our Rings' subtitle='Enjoy an excellent selection of fine rings' data={ringsData} />
+              <CategoryList
+                colSpan={6}
+                title={t.ringsTitle}
+                subtitle={t.ringsSubtitle}
+                data={ringsData}
+              />
             </CustomSection>
           </Layout>
           <Layout>
             <CustomSection>
               <OrderedImgText
-                title='Always On Time'
-                subtitle='Get our unique watches'
-                contentText='High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.'
+                title={t.alwaysOnTimeTitle}
+                subtitle={t.alwaysOnTimeSubtitle}
+                contentText={t.alwaysOnTimeContent}
                 img={homeWatch1}
-                order='first'
-                link="Shop Now"
+                order="first"
+                link={t.buyNowButtonText}
               />
             </CustomSection>
           </Layout>
           <Layout>
             <CustomSection>
-              <CategoryList title='Our Watches' subtitle='Enjoy an excellent selection of watches' data={watchData} />
+              <CategoryList
+                title={t.watchesTitle}
+                subtitle={t.watchesSubtitle}
+                data={watchData}
+              />
             </CustomSection>
           </Layout>
           <Layout>
             <CustomSection>
               <OrderedImgText
-                title='Services'
-                subtitle='Explore expert repairs to elevate your experience'
-                contentText='Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.'
+                title={t.servicesTitle}
+                subtitle={t.servicesSubtitle}
+                contentText={t.servicesContent}
                 img={homeServicesImage}
-                order='last'
-                link="Learn More"
+                order="last"
+                link={t.learnMoreButtonText}
               />
             </CustomSection>
           </Layout>
diff --git a/examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx b/examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx
index 5abba0d5..ede7bf40 100644
--- a/examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx
+++ b/examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx
@@ -21,9 +21,11 @@ import {
 } from "@progress/kendo-react-labels";
 
 import creditCards from '../assets/creditCards.png';
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 const PaymentDetails: React.FC = () => {
   const navigate = useNavigate();
+  const { t } = useLanguageContext();
 
   const onSubmitClick = () => {
     navigate("/thankyou")
@@ -34,18 +36,18 @@ const PaymentDetails: React.FC = () => {
       <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-4 k-gap-10">
         <div className="k-d-grid k-grid-cols-12 k-gap-8 k-w-full">
           <div className="k-col-span-6 k-col-start-1">
-            <h1>Payment Details</h1>
-            <p>Please, submit your payment details</p>
+            <h1>{t.paymentDetailsTitle}</h1>
+            <p>{t.paymentDetailsSubtitle}</p>
             <div className="k-d-flex k-flex-col k-align-items-start k-gap-4">
               <div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
-                <RadioButton value="creditCard" label="Credit Card" />
+                <RadioButton value="creditCard" label={t.paymentMethodCreditCard} />
               </div>
-              <img src={creditCards} alt="Credit card options" className="k-mb-4" style={{ width: 'auto', height: 'auto', maxWidth: '100%' }} />
+              <img src={creditCards} alt={t.cardNumberLabel} className="k-mb-4" style={{ width: 'auto', height: 'auto', maxWidth: '100%' }} />
               <div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
-                <RadioButton value="bankTransfer" label="Bank Transfer" />
+                <RadioButton value="bankTransfer" label={t.paymentMethodBankTransfer} />
               </div>
               <div className="k-display-flex k-align-items-center k-mb-4" style={{ width: '200px' }}>
-                <RadioButton value="applePay" label="Apple Pay" />
+                <RadioButton value="applePay" label={t.paymentMethodApplePay} />
               </div>
             </div>
             <Form
@@ -53,40 +55,40 @@ const PaymentDetails: React.FC = () => {
                 <FormElement>
                   <div className="k-form-layout k-d-grid k-gap-y-6 k-gap-x-4">
                     <FieldWrapper className="k-col-span-1">
-                      <Label> Card Number </Label>
+                      <Label> {t.cardNumberLabel} </Label>
                       <Field name="cardNumber" component={CardNumber} />
                     </FieldWrapper>
                     <div className="k-d-flex k-gap-4 k-w-full">
                       <FieldWrapper className="k-col-span-1 k-w-1/2">
-                        <Label> Expiry Date </Label>
+                        <Label> {t.expiryDateLabel} </Label>
                         <Field name="expiryDate" component={ExpiryDate} />
                       </FieldWrapper>
                       <FieldWrapper className="k-col-span-1 k-w-1/2">
-                        <Label> CVV* </Label>
+                        <Label> {t.cvvLabel} </Label>
                         <Field name="cvv" component={PasswordInput} />
                       </FieldWrapper>
                     </div>
                     <FieldWrapper className="k-col-span-1">
-                      <Label> Cardholder </Label>
+                      <Label> {t.cardHolderLabel} </Label>
                       <Field name="cardHolder" component={CardHolder} />
                     </FieldWrapper>
                   </div>
                 </FormElement>
               )}
             />
-            <Button className="k-mt-6" onClick={onSubmitClick} themeColor={"primary"}>Submit Order</Button>
+            <Button className="k-mt-6" onClick={onSubmitClick} themeColor={"primary"}>{t.submitOrderButton}</Button>
           </div>
           <div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
-            <h2 className="k-mb-4">Sub total</h2>
-            <p>US Dollars</p>
-            <h3 className="k-mb-2">VAT</h3>
-            <p>US Dollars</p>
-            <h3 className="k-mb-2 k-mt-4">Shipping Method</h3>
-            <p>Standard Free Delivery</p>
-            <h3 className="k-mb-2 k-mt-4">Gift Wrapping</h3>
-            <p>Included Gift Wrapping</p>
-            <h3 className="k-mb-2 k-mt-4">Total</h3>
-            <p>US Dollars</p>
+            <h2 className="k-mb-4">{t.subTotalLabel}</h2>
+            <p>{t.usDollarsLabel}</p>
+            <h3 className="k-mb-2">{t.vatLabel}</h3>
+            <p>{t.usDollarsLabel}</p>
+            <h3 className="k-mb-2 k-mt-4">{t.shippingMethodLabel}</h3>
+            <p>{t.standardFreeDeliveryLabel}</p>
+            <h3 className="k-mb-2 k-mt-4">{t.giftWrappingLabel}</h3>
+            <p>{t.includedGiftWrappingLabel}</p>
+            <h3 className="k-mb-2 k-mt-4">{t.totalLabel}</h3>
+            <p>{t.usDollarsLabel}</p>
           </div>
         </div>
       </div>
diff --git a/examples/ecommerce-jewellery-store/src/pages/ProductsDetails.tsx b/examples/ecommerce-jewellery-store/src/pages/ProductsDetails.tsx
index dda3ea55..3527bbc7 100644
--- a/examples/ecommerce-jewellery-store/src/pages/ProductsDetails.tsx
+++ b/examples/ecommerce-jewellery-store/src/pages/ProductsDetails.tsx
@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom";
 import { ProductCard } from "../components/ProductCard";
-import { listData } from "../data/listData";
+import { useTranslatedListData } from "../data/listData";
 import { DataModel } from "../data/types";
 import { Layout } from "../components/Layout";
 import { CategoryList } from "../components/CategoryList";
@@ -11,15 +11,18 @@ import whiteSandDiamondRing from "../assets/whiteSandDiamondRing.jpg";
 import { CustomSection } from "../components/CustomizedSection";
 import { useCart } from "../helpers/CartContext";
 import { useNavigate } from "react-router-dom";
+import { useLanguageContext } from "../helpers/LanguageContext";
 
 export const ProductDetails = () => {
   const { id } = useParams();
   const productId = id ? parseInt(id, 10) : null;
 
-  const descriptionText =
-    "Elegant wedding bands featuring lustrous pearls, beautifully set in sleek, timeless bands. These rings offer a unique blend of classic charm and modern sophistication, making them a perfect symbol of everlasting love. The delicate pearls add a touch of grace, creating a refined and distinctive look that’s perfect for a memorable occasion.";
+  const { t } = useLanguageContext();
+  const translatedListData = useTranslatedListData();
+
+  const descriptionText = t.productDescription;
   const { addItemToCart } = useCart();
-  const productToAdd = listData.find((item) => item.id === productId);
+  const productToAdd = translatedListData.find((item) => item.id === productId);
   const navigate = useNavigate();
 
   const addToCart = () => {
@@ -32,27 +35,29 @@ export const ProductDetails = () => {
   const data: CardDescriptor[] = [
     {
       img: diamondRingPinkRuby,
-      collectionText: "Diamond Ring with Pink Ruby",
+      collectionText: t.diamondRingWithPinkRuby,
     },
     {
       img: whiteSandDiamondRing,
-      collectionText: "White Sand Diamond Ring",
+      collectionText: t.whiteSandDiamondRing,
     },
     {
       img: homemadePinkDiamondRing,
-      collectionText: "Handmade Pink Diamond Ring",
+      collectionText: t.handmadePinkDiamondRing,
     },
   ];
 
   const BreakcrumbData: DataModel[] = [
     {
-      text: "Home",
+      text: t.breadcrumbHome,
     },
     {
-      text: "Jewelry",
+      text: t.breadcrumbJewelry,
     },
     {
-      text: productToAdd?.category,
+      text: productToAdd?.category
+        ? t.categories[productToAdd.category as keyof typeof t.categories]
+        : "",
     },
   ];
 
@@ -62,22 +67,22 @@ export const ProductDetails = () => {
         <ProductCard
           title={productToAdd?.title}
           image={productToAdd?.img}
-          subtitle="In Platinum with Natural Diamond"
+          subtitle={t.productSubtitle}
           breadCrumbItem={BreakcrumbData}
           rating={productToAdd?.rating}
-          reviews="208 reviews"
+          reviews={t.reviewsText.replace("{0}", "208")}
           price={productToAdd?.newPrice}
           description={descriptionText}
           addToCart={addToCart}
-        ></ProductCard>
+        />
       </Layout>
       <Layout>
         <CustomSection>
           <CategoryList
-            title="You May Also Like"
-            subtitle="Enjoy an excellent selection of fine jewelry"
+            title={t.youMayAlsoLikeTitle}
+            subtitle={t.youMayAlsoLikeSubtitle}
             data={data}
-          ></CategoryList>
+          />
         </CustomSection>
       </Layout>
     </>
diff --git a/examples/ecommerce-jewellery-store/src/pages/ThankYou.tsx b/examples/ecommerce-jewellery-store/src/pages/ThankYou.tsx
index e3691f01..253fd172 100644
--- a/examples/ecommerce-jewellery-store/src/pages/ThankYou.tsx
+++ b/examples/ecommerce-jewellery-store/src/pages/ThankYou.tsx
@@ -4,21 +4,35 @@ import { BackgroundImage } from '../components/BackgroundImage';
 import present from "@/assets/present.png";
 import { Button } from "@progress/kendo-react-buttons";
 import { useNavigate } from 'react-router-dom';
+import { useLanguageContext } from '../helpers/LanguageContext';
 
 const ThankYou: React.FC = () => {
   const navigate = useNavigate();
+  const { t } = useLanguageContext();
 
   const onBacktoShoppingClick = () => {
     navigate("/products");
-  }
+  };
+
   return (
     <>
-      <BackgroundImage img={present} title="" subtitle="" />
+      <BackgroundImage
+        img={present}
+        title={t?.thankYou?.title}
+        subtitle={t?.thankYou?.subtitle}
+      />
       <Layout>
         <div className="k-d-flex k-flex-col k-justify-content-center k-align-items-center k-h-100 k-text-center">
-          <h1>Thank You For Your Order!</h1>
-          <p>You have submitted your order</p>
-          <Button className="k-mt-6" onClick={onBacktoShoppingClick} themeColor={"primary"} size={"large"}>Back to Shopping</Button>
+          <h1>{t?.thankYou?.thankYouMessage}</h1>
+          <p>{t?.thankYou?.orderSubmittedMessage}</p>
+          <Button
+            className="k-mt-6"
+            onClick={onBacktoShoppingClick}
+            themeColor={"primary"}
+            size={"large"}
+          >
+            {t?.thankYou?.backToShopping}
+          </Button>
         </div>
       </Layout>
     </>