Add cookies banner as component (#148)

* Add cookies banner as component

* Add new cookies banner

* update color and comment

* Remove from App

apps/front/src/components/app/App.tsx

@@ -1,7 +1,6 @@
 import css from "./App.module.less"
 import React from "react"
 import { Link, Stack, TManageTransitions } from "@cher-ami/router"
-
 import debug from "@wbe/debug"
 import { EPages } from "~/routes"
 const log = debug(`front:App`)

apps/front/src/libs/components/cookiesBanner/CookiesBanner.module.less

@@ -0,0 +1,61 @@
+@import (reference) "../../../references.less";
+
+.root {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: auto;
+  padding: 30rem;
+
+  transform: translateY(100%);
+  transition: 400ms var(--ease-back-in);
+  transition-property: transform, opacity;
+
+  &_show {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  &_hide {
+    transform: translateY(100%);
+    pointer-events: none;
+  }
+
+  @media (min-width: @breakpoint-tablet) {
+    width: 30%;
+    right: 0;
+  }
+}
+
+.wrapper {
+  width: 100%;
+  color: var(--color-white);
+  background-color: var(--color-blue-cher-ami);
+  border-radius: 10rem;
+  padding: 28rem 19rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+}
+
+.buttons {
+  margin-top: 10rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+  gap: 10rem;
+}
+
+.button {
+  text-decoration: underline;
+  cursor: pointer;
+  opacity: 1;
+  &:hover {
+    text-decoration: none;
+  }
+}