add base front

frontend/src/pages/ContractForm/index.tsx

@@ -0,0 +1,74 @@
+import { Flex, Grid, Select, Stack, Text, TextInput, Title } from "@mantine/core";
+import { t } from "../../config/i18n";
+import { IconUser } from "@tabler/icons-react";
+import ShipmentCard from "../../components/ShipmentCard";
+
+export function ContractForm() {
+    return (
+        <Flex
+            w={{base: "100%", sm: "50%", lg: "60%"}}
+            justify={"start"}
+            align={"flex-start"}
+            direction={"column"}
+        >
+            <Stack>
+                <Title>{t("form contract")}</Title>
+                <Text>{t("contract description that is rather long to show how text will be displayed even with unnecessary elements like this end of sentence")}</Text>
+            </Stack>
+            <Stack>
+                <Text>{t("contact phase")}</Text>
+                <Grid>
+                    <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                        <TextInput
+                            radius="sm"
+                            label={t("firstname")}
+                            placeholder={t("firstname")}
+                            leftSection={<IconUser/>}
+                        />
+                        <TextInput
+                            radius="sm"
+                            label={t("lastname")}
+                            placeholder={t("lastname")}
+                            leftSection={<IconUser/>}
+                        />
+                    </Grid.Col>
+                    <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                        <TextInput
+                            radius="sm"
+                            label={t("email")}
+                            placeholder={t("email")}
+                            leftSection={<IconUser/>}
+                        />
+                        <TextInput
+                            radius="sm"
+                            label={t("phone")}
+                            placeholder={t("phone")}
+                            leftSection={<IconUser/>}
+                        />
+                    </Grid.Col>
+                </Grid>
+            </Stack>
+            <Stack>
+                <Text>{t("products reccurent phase")}</Text>
+                <Select
+                    label={`${t("select reccurent product")} (${t("this product will be distributed for all shipments")})`}
+                    placeholder={t("select reccurent product")}
+                    data={["qwe", "qweqwe", "qweqweqwe"]}
+                />
+            </Stack>
+            <Stack>
+                <Text>{t("products planned phase")}</Text>
+                <ShipmentCard
+                    title="Shipment 1"
+                    date="2025-10-10"
+                    product={{
+                        name: "rognons de veau",
+                        price: 1.20,
+                        priceKg: 10.9,
+                        unit: "piece"
+                    }}
+                />
+            </Stack>
+        </Flex>
+    );
+}

frontend/src/pages/Home/index.tsx

@@ -0,0 +1,8 @@
+import { Text } from "@mantine/core";
+import { t } from "../../config/i18n";
+
+export function Home() {
+    return (
+        <Text>{t("test")}</Text>
+    );
+}