fix(frontend): fix various typo, capfirst, use a grid for home page

frontend/src/components/PaymentMethods/Cheque/index.tsx

@@ -46,20 +46,24 @@ export function ContractCheque({ inputForm, price, productor }: ContractChequePr
         return productor?.payment_methods.find((el) => el.name === "cheque");
     }, [productor]);
 
+
+    const maxCheques = useMemo(() => {
+        return paymentMethod?.max && paymentMethod?.max !== "" ? Number(paymentMethod?.max) : 3
+    }, [paymentMethod])
+
     return (
         <Stack>
-            <Title order={4}>{`${t("order name")} : ${paymentMethod?.details}`}</Title>
+            <Title order={4}>{`${t("order name", {capfirst: true})} : ${paymentMethod?.details}`}</Title>
             <NumberInput
+                clampBehavior="strict"
                 label={t("cheque quantity", { capfirst: true })}
                 placeholder={t("enter cheque quantity", { capfirst: true })}
                 description={t(
                     "number of cheques between 1 and 3 cheques also enter your cheques identifiers, value is calculated automatically",
-                    { capfirst: true },
+                    { capfirst: true, max: maxCheques },
                 )}
                 min={1}
-                max={
-                    paymentMethod?.max && paymentMethod?.max !== "" ? Number(paymentMethod?.max) : 3
-                }
+                max={maxCheques}
                 {...inputForm.getInputProps(`cheque_quantity`)}
             />
             <Group grow>