feat: add illustrations to HomePage

1 files changed, 39 insertions, 6 deletions

diff --git a/src/containers/Home.tsx b/src/containers/Home.tsx
index 0deefd1..82fbf25 100644
--- a/src/containers/Home.tsx
+++ b/src/containers/Home.tsx
@@ -1,14 +1,47 @@
 import React from 'react';
 import Page from './Page';
 import Button from '../components/Button';
+import Paper from '../components/Paper';
+import waybill from '../assets/waybill.svg';
+import product from '../assets/product.svg';
+import contractors from '../assets/contractors.svg';
+
+const cards = [
+  {
+    name: 'Товары',
+    route: '/products',
+    src: product,
+    text: 'Веди учёт товаров для бухгалтерии и интернет-магазина в одном месте',
+  },
+  {
+    name: 'Контрагенты',
+    route: '/contractors',
+    src: contractors,
+    text: 'Сохраняй историю платежей и переводов от своих партнёров',
+  },
+  {
+    name: 'Накладные',
+    route: '/waybills',
+    src: waybill,
+    text: 'Проводи накладные в один клик и формируй отчёты',
+  },
+];
 
 const Home: React.FC = () => (
-  <Page title="Главная">
-    <p>
-      Привет, мир!
-      <Button>Нажми меня</Button>
-      <Button variant="outlined">Отменить</Button>
-    </p>
+  <Page title="Главная" actions={[{ name: 'Do nothing' }]}>
+    <div className="grid grid-flow-row grid-cols-3">
+      {cards.map(card => (
+        <Paper variant="outlined">
+          <div className="h-full flex flex-col justify-between">
+            <img className="h-60" src={card.src} alt="Накладная" />
+            <div className="flex flex-col text-center">
+              <p className="m-5 text-lg">{card.text}</p>
+              <Button size="lg" route="/waybills">{card.name}</Button>
+            </div>
+          </div>
+        </Paper>
+      ))}
+    </div>
   </Page>
 );