diff --git a/src/common/assets/images/footer-icon.svg b/src/common/assets/images/footer-icon.svg new file mode 100644 index 0000000..704a3ac --- /dev/null +++ b/src/common/assets/images/footer-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/modules/Footer/Footer.jsx b/src/modules/Footer/Footer.jsx index 4f6d022..a25a8ef 100644 --- a/src/modules/Footer/Footer.jsx +++ b/src/modules/Footer/Footer.jsx @@ -1,6 +1,40 @@ import React from 'react' import styles from './Footer.module.scss' +import icon from '../../common/assets/images/icon.svg' -const Footer = () =>
Footer
+const Footer = () => ( +
+
+ Join the DApp community chat +
+

Join the DApp community chat

+

+ Status is a community of people all over the world connected by a set + of values and principles. +

+
+
+
+ Submit a DApp +
+

Submit a DApp

+

+ Status is a community of people all over the world connected by a set + of values and principles. +

+
+
+
+ Support +
+

Support

+

+ Status is a community of people all over the world connected by a set + of values and principles. +

+
+
+
+) export default Footer diff --git a/src/modules/Footer/Footer.module.scss b/src/modules/Footer/Footer.module.scss index 4927d9c..25251c9 100644 --- a/src/modules/Footer/Footer.module.scss +++ b/src/modules/Footer/Footer.module.scss @@ -3,6 +3,38 @@ .footer { background-color: #eef2f5; font-family: $font; - padding: calculateRem(40) calculateRem(16); + padding: calculateRem(40) calculateRem(16) calculateRem(32) calculateRem(16); margin-top: calculateRem(24); } + +.footerItem { + display: flex; + align-items: flex-start; + margin-bottom: calculateRem(24); + + :last-of-type { + margin-bottom: 0; + } + + img { + margin-top: calculateRem(15); + margin-right: calculateRem(16); + } + + h2 { + color: $headline-color; + font-size: calculateRem(15); + line-height: calculateRem(22); + margin-bottom: calculateRem(2); + margin-top: calculateRem(12); + font-weight: 500; + } + + p { + color: $text-color; + font-size: calculateRem(13); + line-height: calculateRem(18); + margin-bottom: calculateRem(2); + margin-top: 0; + } +}