Add AccountCreation component and product list functionality; update routing and translations

src/components/ProductListTable.jsx

@@ -0,0 +1,74 @@
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+function ProductListTable({ productInfo, onSelectProduct }) {
+  return (
+    <table className="w-11/12 border-separate border-spacing-0 rounded-2xl overflow-hidden">
+      <thead>
+        <tr>
+          <th className="border border-t-2 border-l-2 border-primary bg-secondary rounded-ss-2xl font-medium text-[#111]">
+            Product Code
+          </th>
+          <th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
+            Description
+          </th>
+          <th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
+            Interest Category
+          </th>
+          <th className="border border-t-2 border-r-2 p-2 border-primary bg-secondary rounded-se-2xl font-medium text-[#111]">
+            Description
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {productInfo.map((prod, idx) => (
+          <tr
+            key={idx}
+            className="cursor-pointer hover:bg-grey/[0.2] border-b"
+            onClick={() => onSelectProduct(prod)}
+          >
+            <td
+              className={clsx(
+                "border border-l-2 border-primary p-2",
+                idx === productInfo.length - 1 && "rounded-bl-2xl border-b-2"
+              )}
+            >
+              {prod.productCode}
+            </td>
+            <td
+              className={clsx(
+                "border border-primary p-2",
+                idx === productInfo.length - 1 && "border-b-2"
+              )}
+            >
+              {prod.productCodeDescription}
+            </td>
+            <td
+              className={clsx(
+                "border border-primary p-2",
+                idx === productInfo.length - 1 && "border-b-2"
+              )}
+            >
+              {prod.interestCategory}
+            </td>
+            <td
+              className={clsx(
+                "border border-r-2 border-primary p-2",
+                idx === productInfo.length - 1 && "rounded-br-2xl border-b-2"
+              )}
+            >
+              {prod.interestCategoryDescription}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+ProductListTable.propTypes = {
+  productInfo: PropTypes.array.isRequired,
+  onSelectProduct: PropTypes.func.isRequired,
+};
+
+export default ProductListTable;