Sammy/t 392 aau i can drag and drop opportunities (#257)

* refactor: extract data from Board component

* feature: display board on opportunities page

* test: add strict mode in storybook

* chore: replace dnd to make it work with React 18 and strict mode

Atlassion has not fixed this issue in a year so we use the fork @hello-pangea/dnd
https://github.com/atlassian/react-beautiful-dnd/issues/2350

* refactor: move mocked-data in a file

* chore: use real column names in mock data

* feature: design columns

* feature: add New button at bottum of columns

* bugfix: move header out of dragable so the cards does not flicker on drop

* lint: remove useless imports

* refactor: rename board item key

front/src/modules/ui/components/board/BoardNewButton.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import { IconPlus } from '@tabler/icons-react';
+
+const StyledButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.primaryBackground};
+  color: ${({ theme }) => theme.text40};
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  align-self: baseline;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.secondaryBackground};
+  }
+`;
+
+export const NewButton = () => {
+  return (
+    <StyledButton>
+      <IconPlus size={16} />
+      New
+    </StyledButton>
+  );
+};