Updates

pages/index.js

@@ -1,16 +1,18 @@
 // @generated: @expo/next-adapter@2.1.52
 import React from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native-web';
-import {AccordionDetails, AccordionSummary, Container, Link, Typography} from "@mui/material";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import AppStoreSvg from "../src/components/illustrations/AppStoreSvg";
+import {Image, StyleSheet, TouchableOpacity, View} from 'react-native-web';
+import {AccordionDetails, AccordionSummary, Container, Link, Typography, useMediaQuery, useTheme} from "@mui/material";
 import {styled} from '@mui/material/styles';
 import MuiAccordion from '@mui/material/Accordion';
 import FittrIconBig from "../src/components/illustrations/FittrIconBig";
-
+import AppStoreSvg from "../src/components/illustrations/AppStoreSvg";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function App() {
 
+    const theme = useTheme();
+    const isBigScreen = useMediaQuery(theme.breakpoints.up('sm'));
+
     const Accordion = styled((props) => (
         <MuiAccordion disableGutters elevation={0} square {...props} />
     ))(({theme}) => ({
@@ -54,6 +56,12 @@ export default function App() {
 
     const downloadText = `Are you a fitness influencer\nor creator with a brand to\nbuild? Then claim your\nFittree link here`;
 
+    const fittreeStepLine1 = `Create 5 seconds\nexercise videos`;
+
+    const fittreeStepLine2 = `Curate exercises\ninto workouts`;
+
+    const fittreeStepLine3 = `Go live`;
+
     return (
         <View>
 
@@ -80,10 +88,46 @@ export default function App() {
                 <TouchableOpacity
                     activeOpacity={0.5}
                     style={styles.btnStyle}>
-                    <Typography style={{color: 'white', fontFamily: 'Montserrat', fontWeight: '600'}}>
+                    <Typography style={{color: 'white', fontFamily: 'Montserrat', fontWeight: '500'}}>
                         START FOR FREE
                     </Typography>
                 </TouchableOpacity>
+                <View style={[isBigScreen ? styles.container : styles.containerSmall]}>
+                    <Typography variant='h6'
+                                sx={{textAlign: 'center', fontWeight: '500', fontFamily: 'Montserrat'}}
+                                style={{whiteSpace: 'pre-line'}}>
+                        {fittreeStepLine1}
+                    </Typography>
+                    <Image
+                        source={require('../src/components/illustrations/Frame 22.png')}
+                        style={{height: '100%', width: 300, resizeMode: 'contain'}}
+                    />
+                </View>
+                <View style={[isBigScreen ? styles.container : styles.containerSmall]}>
+                    <Typography variant='h6'
+                                sx={{textAlign: 'center', fontWeight: '500', fontFamily: 'Montserrat'}}
+                                style={{whiteSpace: 'pre-line'}}>
+                        {fittreeStepLine2}
+                    </Typography>
+                    <Image
+                        source={require('../src/components/illustrations/Frame 24.jpg')}
+                        style={{height: '100%', width: 300, resizeMode: 'contain'}}
+                    />
+                </View>
+                <View style={[isBigScreen ? styles.container : styles.containerSmall]}>
+                    <Typography variant='h6'
+                                sx={{textAlign: 'center', fontWeight: '500', fontFamily: 'Montserrat'}}
+                                style={{whiteSpace: 'pre-line'}}>
+                        {fittreeStepLine3}
+                    </Typography>
+                    <Image
+                        source={require('../src/components/illustrations/Frame 23.png')}
+                        style={{height: '100%', width: 300, resizeMode: 'contain'}}
+                    />
+                </View>
+            </Container>
+
+            <Container maxWidth="md" sx={{px: 4}}>
 
 
                 <Typography color='#ef7a75' variant='h4'
@@ -197,7 +241,7 @@ export default function App() {
                     </AccordionDetails>
                 </Accordion>
 
-                <Typography variant='h5' sx={{textAlign: 'center', my: 5, fontFamily: 'Montserrat', fontWeight: '400'}} style={{whiteSpace: 'pre-line'}}>
+                <Typography variant='h6' sx={{textAlign: 'center', my: 5, fontFamily: 'Montserrat', fontWeight: '400'}} style={{whiteSpace: 'pre-line'}}>
                     {downloadText}
                 </Typography>
 
@@ -219,9 +263,21 @@ export default function App() {
 
 const styles = StyleSheet.create({
     container: {
-        height: 300,
-        width: 300,
-        borderWidth: 1
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: 'auto',
+        height: 400,
+        marginVertical: 40
+    },
+    containerSmall: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 600,
+        marginVertical: 100
     },
     text: {
         fontSize: 16,

src/components/illustrations/FittrIconLight.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, {Path} from 'react-native-svg';
+
+const FittrIconLight = (props) => (
+    <svg
+        width={60}
+        height={60}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M9.608 37.856h3.169v-6.34h5.2v-2.782h-5.2V24.95h5.26v-2.805H9.609v15.712ZM22.312 27.207h-2.988v10.65h2.988v-10.65ZM29.918 22.144h-2.986v2.493c.899.692 1.91 1.206 2.986 1.526v-4.019ZM38.128 22.144h-2.986v4.04a9.181 9.181 0 0 0 2.986-1.493v-2.547ZM48.704 26.933c-1.322 0-2.53.775-3.123 2.553v-2.28h-2.965v10.65h2.988v-3.648c0-3.033 1.049-4.47 2.576-4.47.366 0 .89.046 1.529.387l.684-2.85c-.48-.25-1.118-.342-1.689-.342Z"
+            fill="#F5EDE8"
+        />
+        <path
+            d="M39.717 24.434a10.257 10.257 0 0 1-4.577 2.527 10.52 10.52 0 0 1-5.223-.02 10.238 10.238 0 0 1-2.986-1.314 10.384 10.384 0 0 1-1.723-1.393l-2.217 2.215a13.572 13.572 0 0 0 3.94 2.746v8.66h2.987v-7.696a13.767 13.767 0 0 0 5.222.013v7.682h2.987v-8.627a13.552 13.552 0 0 0 4.012-2.779l-2.216-2.215a8.125 8.125 0 0 1-.206.2v.001ZM22.313 22.144h-2.988v2.988h2.988v-2.988Z"
+            fill="#F5EDE8"
+        />
+    </svg>
+)
+
+export default FittrIconLight;