feat(landing-page): add three steps section

trompamusic · Mar 12, 2020 · c95df10 · c95df10
1 parent 93397b8
commit c95df10
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 10 deletions.
diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json
@@ -1,5 +1,7 @@
 {
+  "algorithms_will_distribute": "Our algorithms will distribute tasks to everyone",
   "create_modern_classics": "Create modern, playable scores from known and unknown classics.",
+  "every_collaborator": "Every collaborator can contribute to a better score",
   "go_to_demo_campaign": "Go to demo campaign",
   "great_scores_alt": "Great scores are expensive. Photo by Marius Masalar.",
   "great_scores_title": "Great scores are expensive",
@@ -12,6 +14,7 @@
   "scores_available_online": "Scores available online ",
   "title": "$t(common:website_name)",
   "make_more_memorable": "Make even Mozart more memorable",
+  "pick_a_score": "Pick a score and invite your collaborators",
   "trompa_collaboration_campaign_manager": "Trompa collaboration campaign manager",
   "welcome_message": "Welcome to Trompa's campaign manager!"
 }
diff --git a/src/screens/Home/Home.jsx b/src/screens/Home/Home.jsx
@@ -91,6 +91,79 @@ export default function Home() {
             </div>
           </section>
         </Grid>
+        <Grid xs={12} item>
+          <section>
+            <Grid
+              direction="row"
+              justify="center"
+              alignItems="center"
+              container
+            >
+              <Grid className={classes.stepsTextContainer} xs={12} sm={6} item>
+                <div className={classes.stepsTextContent}>
+                  <span className={classes.number}>
+                    1
+                  </span>
+                  <Typography variant="h1">
+                    {t('pick_a_score')}
+                  </Typography>
+                </div>
+              </Grid>
+              <Grid xs={12} sm={6} item>
+                <img src={images.pickAScore} alt={t('pick_a_score')} />
+              </Grid>
+            </Grid>
+          </section>
+        </Grid>
+        <Grid xs={12} item>
+          <section>
+            <Grid
+              className={classes.stepWithGradient}
+              direction="row"
+              justify="center"
+              alignItems="center"
+              container
+            >
+              <Grid xs={12} sm={6} item>
+                <img src={images.algorithmsWillDistribute} alt={t('algorithms_will_distribute')} />
+              </Grid>
+              <Grid className={classes.stepsTextContainer} xs={12} sm={6} item>
+                <div className={classes.stepsTextContent}>
+                  <span className={classes.number}>
+                    2
+                  </span>
+                  <Typography variant="h1">
+                    {t('algorithms_will_distribute')}
+                  </Typography>
+                </div>
+              </Grid>
+            </Grid>
+          </section>
+        </Grid>
+        <Grid xs={12} item>
+          <section>
+            <Grid
+              direction="row"
+              justify="center"
+              alignItems="center"
+              container
+            >
+              <Grid className={classes.stepsTextContainer} xs={12} sm={6} item>
+                <div className={classes.stepsTextContent}>
+                  <span className={classes.number}>
+                    3
+                  </span>
+                  <Typography variant="h1">
+                    {t('every_collaborator')}
+                  </Typography>
+                </div>
+              </Grid>
+              <Grid xs={12} sm={6} item>
+                <img src={images.everyCollaborator} alt={t('every_collaborator')} />
+              </Grid>
+            </Grid>
+          </section>
+        </Grid>
       </Grid>
       <footer />
     </div>

diff --git a/src/screens/Home/Home.styles.js b/src/screens/Home/Home.styles.js
@@ -1,6 +1,6 @@
 import { createStyles } from '@material-ui/styles';
 
-export default ({ spacing, typography, palette }) => createStyles({
+export default ({ spacing, typography, palette, shape }) => createStyles({
   relative: {
     position: 'relative',
   },
@@ -71,4 +71,42 @@ export default ({ spacing, typography, palette }) => createStyles({
       },
     },
   },
+  stepsTextContainer: {
+    display       : 'flex',
+    justifyContent: 'flex-end',
+    alignItems    : 'center',
+    height        : 511,
+  },
+  stepsTextContent: {
+    width     : 566,
+    display   : 'flex',
+    alignItems: 'flex-start',
+    '& h1'    : {
+      marginTop : spacing(1.5),
+      marginLeft: spacing(3),
+      color     : palette.text.purpleBlack,
+    },
+  },
+  number: {
+    height         : 65,
+    width          : 65,
+    minWidth       : 65,
+    borderRadius   : '50%',
+    backgroundColor: palette.primary.main,
+    fontFamily     : typography.fontFamilyAvenir,
+    color          : palette.common.white,
+    fontSize       : 50,
+    fontWeight     : 900,
+    textAlign      : 'center',
+  },
+  stepWithGradient: {
+    background : 'linear-gradient(90deg, rgba(255,140,2,1) 50%, rgba(244,87,49,1) 100%)',
+    '& $number': {
+      backgroundColor: palette.common.white,
+      color          : palette.text.purpleBlack,
+    },
+    '& $stepsTextContainer': {
+      justifyContent: 'flex-start',
+    },
+  },
 });
diff --git a/src/theme/images.js b/src/theme/images.js
@@ -1,7 +1,10 @@
 export default {
-  logo           : require('./images/logo.png'),
-  logoIcon       : require('./images/logo_icon.svg'),
-  collaborateHero: require('./images/collaborate_hero.png'),
-  greatScores    : require('./images/great_scores.png'),
-  unlockClassics : require('./images/unlock_classics.png'),
+  algorithmsWillDistribute: require('./images/algorithms_will_distribute.png'),
+  everyCollaborator       : require('./images/every_collaborator.png'),
+  logo                    : require('./images/logo.png'),
+  logoIcon                : require('./images/logo_icon.svg'),
+  collaborateHero         : require('./images/collaborate_hero.png'),
+  greatScores             : require('./images/great_scores.png'),
+  pickAScore              : require('./images/pick_a_score.png'),
+  unlockClassics          : require('./images/unlock_classics.png'),
 };
diff --git a/src/theme/images/algorithms_will_distribute.png b/src/theme/images/algorithms_will_distribute.png
diff --git a/src/theme/images/every_collaborator.png b/src/theme/images/every_collaborator.png
diff --git a/src/theme/images/pick_a_score.png b/src/theme/images/pick_a_score.png
diff --git a/src/theme/palette.js b/src/theme/palette.js
@@ -7,10 +7,11 @@ export default {
     darkBlack : 'rgba(0, 0, 0, 0.7)',
   },
   text: {
-    primary   : 'rgba(0, 0, 0, 0.7)',
-    lightBlack: '#3A3A3A',
-    darkGrey  : '#333333',
-    blue      : '#005AA3',
+    primary    : 'rgba(0, 0, 0, 0.7)',
+    lightBlack : '#3A3A3A',
+    purpleBlack: '#191847',
+    darkGrey   : '#333333',
+    blue       : '#005AA3',
   },
   primary: {
     main: '#2B44FF',