Implement #5218

Author: kkartunov

src/shared/components/HallOfFamePage/HoF.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import PT from 'prop-types';
 import ContentfulLoader from 'containers/ContentfulLoader';
 import { PrimaryButton, Button } from 'topcoder-react-ui-kit';
+import ContentBlock from 'components/Contentful/ContentBlock';
 
 import Error404 from 'components/Error404';
 
@@ -239,6 +240,21 @@ const HallOfFamePage = ({ eventId, hallOfFame }) => {
                                   </div>
                                   )
                                 }
+                                {
+                                  data.fields.spiritAwardWinners && (
+                                    <div styleName="spirit-awards">
+                                      <h3>Spirit Award</h3>
+                                      <div styleName="spirit-awards-wrap">
+                                        {
+                                          _.map(
+                                            data.fields.spiritAwardWinners,
+                                            sA => <ContentBlock id={sA.sys.id} />,
+                                          )
+                                        }
+                                      </div>
+                                    </div>
+                                  )
+                                }
                                 {
                                   tripWinnersBoard.data.length > 0 && (
                                     <div styleName="trip-winners">

src/shared/components/HallOfFamePage/styles.scss

@@ -372,3 +372,23 @@
     background-color: #5cc900;
   }
 }
+
+.spirit-awards {
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h3 {
+    margin-bottom: 20px;
+  }
+
+  .spirit-awards-wrap {
+    display: flex;
+    justify-content: center;
+
+    a {
+      font-size: 16px;
+    }
+  }
+}