Ok I find a way to do it using the maskImage and linearGradient (thanks to this post: Using CSS, can you apply a gradient mask to fade to the background over text?)

Here's my new loginPage.js:

import { Box, Flex, Image, Card } from "@chakra-ui/react";
export default function LoginPage() {
  return (
    <Flex
      paddingX={0}
      marginX={0}
      width={"100%"}
      justifyContent={"space-between"}
    >
      <Box>
        <Box maskImage="linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));">
          <Image src="./img/bordeaux.png"></Image>
        </Box>
      </Box>

      <Flex direction={"column"} justifyContent={"space-evenly"}>
        <Card.Root>
          <Card.Header />
        </Card.Root>
        <Card.Root>
          <Card.Header />
        </Card.Root>
      </Flex>
    </Flex>
  );
}