feat: homeapge style.

client/src/containers/Homepage/AnnouncementList.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
+
+import { announcementLists } from 'common/homepageOptions';
+
+function AnnouncementBox({ title, description }) {
+  return (
+    <div className={'announcement-box'}>
+      <div className={'announcement-box__title'}>{title}</div>
+      <div className={'announcement-box__description'}>{description}</div>
+    </div>
+  );
+}
+
+function AnnouncementList() {
+  return (
+    <section className={'announcements-list'}>
+      <div className={'announcements-list__title'}>Announcement</div>
+
+      {announcementLists.map(({ title, description }) => (
+        <AnnouncementBox title={title} description={description} />
+      ))}
+
+      <a href={'#'} className={'btn-view-all'}>
+        <T id={'view_all'} />
+      </a>
+    </section>
+  );
+}
+
+export default AnnouncementList;

client/src/containers/Homepage/Homepage.js

@@ -1,19 +1,19 @@
 import React, { useEffect } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
+import HomepageContent from './HomepageContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 import { compose } from 'utils';
 
 function DashboardHomepage({ changePageTitle, name }) {
-
   useEffect(() => {
-    changePageTitle(name)
+    changePageTitle(name);
   }, [name, changePageTitle]);
 
   return (
     <DashboardInsider name="homepage">
-      
+      <HomepageContent />
     </DashboardInsider>
   );
 }
@@ -23,4 +23,4 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     name: organizationSettings.name,
   })),
-)(DashboardHomepage);
+)(DashboardHomepage);

client/src/containers/Homepage/HomepageContent.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ShortcutBoxes from './ShortcutBoxes';
+import AnnouncementList from './AnnouncementList';
+
+import 'style/pages/HomePage/HomePage.scss';
+
+function HomepageContent() {
+  return (
+    <div className={'homepage__container'}>
+      <ShortcutBoxes />
+      <AnnouncementList />
+    </div>
+  );
+}
+
+export default HomepageContent;

client/src/containers/Homepage/ShortcutBoxes.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { shortcutBox } from 'common/homepageOptions';
+import { Icon } from 'components';
+
+function ShortcutBox({ title, iconColor, description }) {
+  return (
+    <div className={'shortcut-box'}>
+      <div className={'shortcut-box__header'}>
+        <span
+          className={'header--icon'}
+          style={{ backgroundColor: `${iconColor}` }}
+        >
+          <Icon icon={'clock'} iconSize={24} />
+        </span>
+        <span>
+          <a href={'#'}>
+            <Icon icon={'arrow-top-right'} iconSize={24} />
+          </a>
+        </span>
+      </div>
+      <div className={'shortcut-box__title'}>{title}</div>
+      <div className={'shortcut-box__description'}>{description}</div>
+    </div>
+  );
+}
+
+function ShortcutBoxes() {
+  return (
+    <section className={'shortcut-boxes'}>
+      {shortcutBox.map(({ title, description, iconColor }) => {
+        return (
+          <ShortcutBox
+            title={title}
+            description={description}
+            iconColor={iconColor}
+          />
+        );
+      })}
+    </section>
+  );
+}
+
+export default ShortcutBoxes;