Improve and update visuals of timeline on about project page

Closes #141
podkrepi-bg · May 7, 2021 · 4b9bbbc · 4b9bbbc
1 parent 902d82c
commit 4b9bbbc
Show file tree

Hide file tree

Showing 9 changed files with 226 additions and 29 deletions.
diff --git a/frontend/public/locales/bg/about-project.json b/frontend/public/locales/bg/about-project.json
@@ -19,7 +19,7 @@
   "featuresList": "Създадохме user stories и списък с функционалностите (features list)",
   "trademark": "Запазихме търговската марка",
   "association": "Регистрирахме сдружение в обществена полза (19.02.2021)",
-  "timeline": "Какво предстои",
+  "timeline": "Нашата история",
   "mvpLaunch": "MVP launch - Април 2021",
   "betaLaunch": "Beta Launch - Юни 2021",
   "officialLaunch": "Official Launch - Септември 2021",

diff --git a/frontend/public/locales/en/about-project.json b/frontend/public/locales/en/about-project.json
@@ -19,7 +19,7 @@
   "featuresList": "We created user stories + a list of functionalities (features list)",
   "trademark": "We kept the trademark (date)",
   "association": "We registered an association for public benefit (date)",
-  "timeline": "What's ahead",
+  "timeline": "Our timeline",
   "mvpLaunch": "MVP launch - April",
   "betaLaunch": "Beta Launch - June",
   "officialLaunch": "Official Launch - Sep",

diff --git a/frontend/src/common/routes.ts b/frontend/src/common/routes.ts
@@ -18,6 +18,7 @@ export const socialUrls = {
   linkedin: 'https://www.linkedin.com/company/podkrepibg',
   youtube: 'https://www.youtube.com/channel/UCt5pYR0DkOCfjlY17awY8pA',
   instagram: '/',
+  discord: 'https://discord.com/invite/nZAeCb9YzP',
 }
 
 export const routes = {

diff --git a/frontend/src/components/about-project/icons/ChecklistIcon.tsx b/frontend/src/components/about-project/icons/ChecklistIcon.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@material-ui/core'
+
+import theme from 'common/theme'
+
+export default function ChecklistIcon({ ...props }: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 55 57">
+      <g clipPath="url(#clip0)">
+        <path
+          d="M7.30664 11.3909H33.7297C34.2047 11.3909 34.5891 10.9953 34.5891 10.5147C34.5891 10.034 34.2047 9.63843 33.7297 9.63843H7.30664C6.83163 9.63843 6.44727 10.034 6.44727 10.5147C6.44727 10.9953 6.83163 11.3909 7.30664 11.3909Z"
+          fill={theme.palette.primary.main}
+        />
+        <path
+          d="M34.8066 19.2769C34.8066 18.7962 34.4186 18.4006 33.9472 18.4006H7.52051C7.04549 18.4006 6.66113 18.7962 6.66113 19.2769C6.66113 19.7575 7.04549 20.1531 7.52051 20.1531H33.9472C34.4186 20.1531 34.8066 19.7575 34.8066 19.2769Z"
+          fill={theme.palette.primary.main}
+        />
+        <path
+          d="M6.66113 45.5637C6.66113 46.0444 7.04549 46.4399 7.52051 46.4399H27.413C26.9852 45.8706 26.5972 45.3012 26.2527 44.6875H7.52051C7.04549 44.6875 6.66113 45.0831 6.66113 45.5637Z"
+          fill={theme.palette.primary.main}
+        />
+        <path
+          d="M24.0626 35.9253H7.52051C7.04549 35.9253 6.66113 36.3209 6.66113 36.8015C6.66113 37.2822 7.04549 37.6777 7.52051 37.6777H24.1061C24.0626 37.2378 24.0626 36.8015 24.0626 36.3616C24.0626 36.2322 24.0626 36.0584 24.0626 35.9253Z"
+          fill={theme.palette.primary.main}
+        />
+        <path
+          d="M26.8111 27.1631H7.52051C7.04549 27.1631 6.66113 27.5587 6.66113 28.0393C6.66113 28.5199 7.04549 28.9155 7.52051 28.9155H25.7813C26.0823 28.3018 26.4268 27.7324 26.8111 27.1631Z"
+          fill={theme.palette.primary.main}
+        />
+        <path
+          d="M3.4375 56.0784H37.8125C39.5748 56.0784 41.0361 54.7216 41.2065 53.0098C40.949 53.0098 40.6481 53.0098 40.3906 53.0098C40.0897 53.0098 39.7887 53.0098 39.4877 52.9691C39.3173 53.7566 38.6284 54.326 37.8125 54.326H3.4375C2.4911 54.326 1.71875 53.5385 1.71875 52.5735V3.5049C1.71875 2.53994 2.4911 1.75245 3.4375 1.75245H37.8125C38.7589 1.75245 39.5312 2.53994 39.5312 3.5049V19.7576C39.8322 19.7576 40.0897 19.7132 40.3906 19.7132C40.6916 19.7132 40.949 19.7132 41.25 19.7576V3.5049C41.25 1.57868 39.7017 0 37.8125 0H3.4375C1.54833 0 0 1.57868 0 3.5049V52.5735C0 54.4997 1.54833 56.0784 3.4375 56.0784Z"
+          fill={theme.palette.primary.main}
+        />
+        <path
+          d="M40.3906 21.4656C32.3553 21.4656 25.7812 28.1722 25.7812 36.3614C25.7812 44.5543 32.3553 51.2572 40.3906 51.2572C48.426 51.2572 55 44.5543 55 36.3614C55 28.1722 48.426 21.4656 40.3906 21.4656ZM40.3906 49.5048C33.3017 49.5048 27.5 43.593 27.5 36.3614C27.5 29.1335 33.3017 23.218 40.3906 23.218C47.4796 23.218 53.2812 29.1335 53.2812 36.3614C53.2812 43.593 47.4796 49.5048 40.3906 49.5048Z"
+          fill={theme.palette.primary.main}
+        />
+        <path
+          d="M44.818 27.47L44.5171 27.3369C43.0558 26.5938 41.25 27.2075 40.5212 28.6975L35.3214 39.1234C35.3214 39.1234 35.3214 39.1234 35.3214 39.1678C35.3214 39.2122 35.2779 39.2122 35.2779 39.2565C35.2779 39.2972 35.2779 39.2972 35.2344 39.3416C35.2344 39.3859 35.2344 39.3859 35.2344 39.4303C35.2344 39.4747 35.2344 39.4747 35.2344 39.519V39.5634L35.2779 44.6877C35.2779 45.0389 35.4483 45.3014 35.7493 45.4752C36.0502 45.6082 36.3947 45.6082 36.6522 45.3901L40.7786 42.3215C40.8221 42.2771 40.862 42.2771 40.862 42.2327C40.862 42.2327 40.862 42.2327 40.9055 42.1921C40.949 42.1477 40.9925 42.059 41.0361 42.0146L46.1923 31.633C46.5767 30.8862 46.6202 30.0543 46.3627 29.2668C46.1053 28.4756 45.5469 27.8212 44.818 27.47ZM36.9531 42.9796V40.9646L38.5848 41.7965L36.9531 42.9796ZM39.8757 40.4396L37.2541 39.1234L40.7786 32.0249L43.4002 33.3411L39.8757 40.4396ZM44.644 30.8418L44.1726 31.8068L41.551 30.4943L42.0223 29.5293C42.3233 28.8712 43.0993 28.6087 43.7411 28.96L44.0421 29.0894C44.6875 29.3519 44.9885 30.1874 44.644 30.8418Z"
+          fill={theme.palette.primary.main}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="55" height="56.0784" fill={theme.palette.primary.main} />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  )
+}
diff --git a/frontend/src/components/about-project/icons/DiscordIcon.tsx b/frontend/src/components/about-project/icons/DiscordIcon.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@material-ui/core'
+
+import theme from 'common/theme'
+
+export default function DiscordIcon({ ...props }: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <path
+        d="M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z"
+        fill={theme.palette.primary.main}
+      />
+    </SvgIcon>
+  )
+}
diff --git a/frontend/src/components/about-project/icons/GlobeIcon.tsx b/frontend/src/components/about-project/icons/GlobeIcon.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@material-ui/core'
+
+import theme from 'common/theme'
+
+export default function GlobeIcon({ ...props }: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 60 60">
+      <path
+        d="M49.4073 45.5648C46.7859 43.691 43.7967 42.2911 40.5833 41.4089C41.3628 37.4609 41.8003 33.0061 41.8701 28.5878H57.4408C57.1026 35.2882 54.073 41.2923 49.4073 45.5648ZM40.0355 43.866C42.7011 44.6024 45.1865 45.7397 47.3962 47.2271C44.3445 49.4909 40.7561 51.0731 36.8552 51.7621C38.1677 49.8445 39.2303 47.0922 40.0355 43.866ZM15.457 9.10639C18.0784 10.9729 21.0712 12.3727 24.2846 13.2549C23.5052 17.203 23.0677 21.6578 23.0015 26.0797H7.4308C7.76538 19.383 10.795 13.3789 15.457 9.10639ZM32.4358 14.3449C34.3771 14.3449 36.2926 14.159 38.1457 13.8163C38.8222 17.2394 39.2671 21.3625 39.3369 26.0797H25.531C25.6009 21.3625 26.0458 17.2321 26.7186 13.809C28.579 14.159 30.4945 14.3449 32.4358 14.3449ZM36.8552 2.90544C40.7561 3.59444 44.3445 5.17657 47.3962 7.44041C45.1865 8.93141 42.7011 10.0615 40.0428 10.8052C39.2377 7.57165 38.1677 4.82661 36.8552 2.90544ZM24.8325 10.7833C22.1816 10.0396 19.6925 8.91318 17.4865 7.42947C20.5344 5.16928 24.1229 3.59079 28.0165 2.90544C26.7039 4.82296 25.6377 7.56071 24.8325 10.7833ZM32.4358 2.50809C34.1087 2.50809 36.1676 5.69423 37.6015 11.3666C35.925 11.6728 34.1933 11.8368 32.4358 11.8368C30.6747 11.8368 28.954 11.6619 27.2738 11.3484C28.704 5.68694 30.7629 2.50809 32.4358 2.50809ZM57.4408 26.0797H41.8701C41.8003 21.6578 41.3628 17.2066 40.5833 13.2549C43.7967 12.38 46.7859 10.9729 49.4073 9.10639C54.073 13.3789 57.1026 19.383 57.4408 26.0797ZM32.4358 0C17.2328 0 4.86816 12.2634 4.86816 27.3338C4.86816 28.4456 4.93067 29.5575 5.06303 30.6402L7.57787 30.3376C7.50801 29.7616 7.46022 29.1747 7.43448 28.5878H23.0162C23.0272 29.3461 23.0309 30.1007 23.0603 30.8334L25.5899 30.735C25.5568 30.0314 25.5568 29.306 25.5457 28.5878H39.3369C39.2671 33.305 38.8222 37.4317 38.1457 40.8548C36.2926 40.5085 34.3771 40.3262 32.4358 40.3262V42.8343C34.1933 42.8343 35.925 42.9984 37.6015 43.3046C36.1676 48.9769 34.1087 52.1558 32.4358 52.1558C30.9835 52.1558 29.5349 52.0355 28.1194 51.7912L27.6892 54.2629C29.2445 54.5326 30.8401 54.6639 32.4358 54.6639C47.6315 54.6639 59.9998 42.4078 59.9998 27.3338C59.9998 12.2634 47.6315 0 32.4358 0Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M23.3144 50.7523C19.6451 54.5983 15.9464 56.0127 14.8765 56.3627C13.8102 56.0164 10.1483 54.6238 6.44586 50.7523C3.51923 47.6865 1.9015 42.6484 2.75081 39.2837C3.19569 37.5265 4.2656 36.36 5.92745 35.8059C6.80617 35.5142 7.65181 35.3648 8.43494 35.3648C12.0785 35.3648 13.6742 38.5145 13.7367 38.6421L14.8838 41.0189L16.0236 38.6421C16.0383 38.6092 17.6413 35.3648 21.3217 35.3648C22.1121 35.3648 22.9578 35.5142 23.8365 35.8059C25.4984 36.36 26.5646 37.5265 27.0131 39.2837C27.8624 42.6484 26.241 47.6865 23.3144 50.7523ZM29.4618 38.6712C28.8074 36.0684 27.1345 34.2529 24.6343 33.429C23.4946 33.0535 22.3842 32.8567 21.3217 32.8567C18.1156 32.8567 16.0383 34.53 14.8765 35.8824C13.722 34.53 11.6447 32.8567 8.43494 32.8567C7.37606 32.8567 6.26203 33.0535 5.12226 33.429C2.6258 34.2529 0.95292 36.0684 0.298472 38.6712C-0.764084 42.8562 1.08896 48.7911 4.60753 52.473C9.47911 57.5803 14.3654 58.838 14.575 58.8927L14.8765 58.9656L15.1853 58.8927C15.3875 58.838 20.2775 57.5803 25.1527 52.473C28.6676 48.7911 30.5207 42.8562 29.4618 38.6712Z"
+        fill={theme.palette.primary.main}
+      />
+    </SvgIcon>
+  )
+}
diff --git a/frontend/src/components/about-project/icons/HandIcon.tsx b/frontend/src/components/about-project/icons/HandIcon.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@material-ui/core'
+
+import theme from 'common/theme'
+
+export default function HandIcon({ ...props }: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 50 50">
+      <path
+        d="M 30.6875 0.09375 C 30.496094 0.09375 30.316406 0.148438 30.15625 0.25 C 29.160156 0.882813 25.015625 2.324219 21.34375 3.59375 C 15.789063 5.515625 13.28125 6.421875 12.5625 7.03125 C 11.320313 8.082031 5.5 16.203125 5.5 18.8125 C 5.5 19.636719 7.378906 25.347656 9.53125 29.78125 C 10.46875 26.675781 13.246094 24.289063 15.8125 22.6875 C 15.660156 21.949219 15.453125 21.34375 15.25 20.875 C 17.246094 19.996094 18.664063 18.230469 19.40625 17.125 C 20.910156 17.925781 22.847656 18.015625 24.4375 17.90625 C 23.089844 19.539063 21.605469 21.546875 21.0625 22.28125 C 20.382813 22.550781 18.648438 23.292969 16.8125 24.4375 C 13.964844 26.21875 10.875 28.976563 11.1875 32.5 C 11.207031 32.703125 11.292969 32.894531 11.34375 33.09375 C 11.378906 33.230469 11.390625 33.363281 11.4375 33.5 C 11.496094 33.660156 11.582031 33.816406 11.65625 33.96875 C 11.71875 34.097656 11.769531 34.25 11.84375 34.375 C 11.933594 34.523438 12.019531 34.636719 12.125 34.78125 C 12.210938 34.894531 12.28125 35.015625 12.375 35.125 C 12.492188 35.261719 12.648438 35.402344 12.78125 35.53125 C 12.882813 35.628906 12.984375 35.71875 13.09375 35.8125 C 13.238281 35.933594 13.375 36.046875 13.53125 36.15625 C 13.644531 36.234375 13.753906 36.335938 13.875 36.40625 C 14.046875 36.507813 14.226563 36.570313 14.40625 36.65625 C 14.523438 36.710938 14.660156 36.765625 14.78125 36.8125 C 14.984375 36.890625 15.191406 36.945313 15.40625 37 C 15.511719 37.027344 15.609375 37.070313 15.71875 37.09375 C 16.042969 37.152344 16.355469 37.1875 16.6875 37.1875 C 19.789063 37.1875 22.625 34.753906 24.6875 32.96875 C 25.230469 32.496094 25.714844 32.082031 26.125 31.78125 C 26.242188 31.691406 26.367188 31.621094 26.53125 31.53125 C 26.609375 31.488281 26.722656 31.449219 26.8125 31.40625 C 26.90625 31.359375 26.988281 31.296875 27.09375 31.25 C 27.230469 31.191406 27.378906 31.125 27.53125 31.0625 C 27.601563 31.035156 27.675781 31.027344 27.75 31 C 28.019531 30.894531 28.296875 30.769531 28.59375 30.65625 C 31.035156 29.726563 34.378906 28.457031 37.34375 25.28125 C 39.40625 23.070313 40.496094 19.863281 41.5625 16.75 C 42.707031 13.40625 43.804688 10.222656 45.875 8.8125 C 46.292969 8.527344 46.421875 7.980469 46.1875 7.53125 C 43.5 2.378906 33.882813 0.09375 30.6875 0.09375 Z M 28.1875 32.96875 C 27.796875 33.128906 27.476563 33.273438 27.34375 33.375 L 27.3125 33.375 L 27.3125 33.40625 C 26.972656 33.65625 26.535156 34.003906 26 34.46875 C 23.828125 36.347656 20.53125 39.1875 16.6875 39.1875 C 13.308594 39.1875 10.210938 36.726563 9.40625 33.625 C 8.5 35.222656 8 37.066406 8 39 C 8 45.066406 12.933594 50 19 50 C 25.066406 50 30 45.066406 30 39 C 30 36.804688 29.34375 34.730469 28.1875 32.96875 Z"
+        fill={theme.palette.primary.main}
+      />
+    </SvgIcon>
+  )
+}
diff --git a/frontend/src/components/about-project/sections/Timeline.tsx b/frontend/src/components/about-project/sections/Timeline.tsx
@@ -2,11 +2,22 @@ import React from 'react'
 import { useTranslation } from 'next-i18next'
 import { createStyles, Grid, makeStyles, Theme, Typography } from '@material-ui/core'
 import { Timeline as TimelineMaterial } from '@material-ui/lab'
-import PlayCircleFilledWhiteIcon from '@material-ui/icons/PlayCircleFilledWhite'
-import TelegramIcon from '@material-ui/icons/Telegram'
-import UpdateIcon from '@material-ui/icons/Update'
+import {
+  Folder,
+  PlayCircleFilledWhite,
+  PlaylistAddCheck,
+  Telegram,
+  Update,
+  VerifiedUser,
+} from '@material-ui/icons'
 
+import HandIcon from '../icons/HandIcon'
 import TimelineItem from './TimelineItem'
+import GlobeIcon from '../icons/GlobeIcon'
+import DiscordIcon from '../icons/DiscordIcon'
+import ChecklistIcon from '../icons/ChecklistIcon'
+import PodkrepiIcon from 'components/brand/PodkrepiIcon'
+import { routes, socialUrls } from 'common/routes'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -19,10 +30,6 @@ const useStyles = makeStyles((theme: Theme) =>
       marginBottom: theme.spacing(12),
       textAlign: 'center',
     },
-    content: {
-      fontSize: theme.typography.pxToRem(17.6),
-      maxWidth: theme.spacing(20),
-    },
   }),
 )
 
@@ -37,20 +44,72 @@ export default function Timeline() {
       </Typography>
       <Grid item>
         <TimelineMaterial align="alternate">
-          <TimelineItem Icon={PlayCircleFilledWhiteIcon}>
-            <Typography variant="body2" component="span" className={classes.content}>
-              {t('about-project:mvpLaunch')}
-            </Typography>
-          </TimelineItem>
-          <TimelineItem Icon={UpdateIcon}>
-            <Typography variant="body2" component="span" className={classes.content}>
-              {t('about-project:betaLaunch')}
-            </Typography>
-          </TimelineItem>
-          <TimelineItem Icon={TelegramIcon} lastItem={true}>
-            <Typography variant="body2" component="span" className={classes.content}>
-              {t('about-project:officialLaunch')}
-            </Typography>
+          <TimelineItem Icon={PlayCircleFilledWhite} title="Октомври 2020">
+            <ul>
+              <li>Зараждане на идеята за изграждане на дарителска платформа от доброволци.</li>
+              <li>Събиране на екип от доброволци с разнообразна експертиза и опит.</li>
+            </ul>
+          </TimelineItem>
+          <TimelineItem Icon={DiscordIcon} title="Ноември 2020">
+            <ul>
+              <li>
+                Стартиране на{' '}
+                <a href={socialUrls.discord} target="_blank" rel="noreferrer noopener">
+                  Discord
+                </a>{' '}
+                сървър за проекта.
+              </li>
+              <li>Подготовка на манифесто на ценности и работни принципи.</li>
+              <li>Срещи и дискусии с експерти.</li>
+              <li>Онлайн панел с медици и НПО представители.</li>
+            </ul>
+          </TimelineItem>
+          <TimelineItem Icon={Folder} title="Декември 2020">
+            <ul>
+              <li>Разпределение по експертни направелния и избор на лийдове.</li>
+              <li>Избор на име на платформата измежду 197 предложения.</li>
+              <li>Проучени бизнес модели за самоиздръка на платормата.</li>
+            </ul>
+          </TimelineItem>
+          <TimelineItem Icon={PodkrepiIcon} title="Януари 2021">
+            <ul>
+              <li>Подготовка на 270 User Stories за основа на платформата.</li>
+              <li>Избор на лого от предложени 150 варианта.</li>
+              <li>Запазена търговска марка.</li>
+            </ul>
+          </TimelineItem>
+          <TimelineItem Icon={VerifiedUser} title="Февруари 2021">
+            <ul>
+              <li>Регистрация на сдружението. </li>
+              <li>
+                Старт на дейността на първите три основни екипа - фронтенд, плащания и кампании.
+              </li>
+            </ul>
+          </TimelineItem>
+          <TimelineItem Icon={ChecklistIcon} title="Март 2021">
+            <ul>
+              <li>Старт на информационния сайт на проекта.</li>
+              <li>Настройка на хостинга на платформата.</li>
+            </ul>
+          </TimelineItem>
+          <TimelineItem Icon={GlobeIcon} title="Април 2021">
+            <ul>
+              <li>Старт на дейността на други основни екипи.</li>
+              <li>Откриване на банкови сметки.</li>
+              <li>Регистрация и настройка на платежни системи.</li>
+            </ul>
+          </TimelineItem>
+          <TimelineItem Icon={HandIcon} title="Май 2021">
+            Избор на бизнес модел за самоиздръжка на платформата
+          </TimelineItem>
+          <TimelineItem Icon={Update} title="Юли 2021">
+            Пускане на пилотна версия на платформата.
+          </TimelineItem>
+          <TimelineItem Icon={PlaylistAddCheck} title="Август 2021">
+            Извършване на тестове на платформата в реална среда.
+          </TimelineItem>
+          <TimelineItem Icon={Telegram} lastItem title="Септември 2021">
+            Пускане на бета версия на платформата.
           </TimelineItem>
         </TimelineMaterial>
       </Grid>