feat: division between mobile and desktop components, boards for mobile

src/app/deals/components/shared/DealCard/DealCard.module.css

@@ -0,0 +1,8 @@
+
+.container {
+    background-color: #e0f0f4;
+
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7);
+    }
+}

src/app/deals/components/shared/DealCard/DealCard.tsx

@@ -0,0 +1,13 @@
+import { Card } from "@mantine/core";
+import { DealSchema } from "@/lib/client";
+import styles from "./DealCard.module.css";
+
+type Props = {
+    deal: DealSchema;
+};
+
+const DealCard = ({ deal }: Props) => {
+    return <Card className={styles.container}>{deal.name}</Card>;
+};
+
+export default DealCard;