-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathmobileapps.js
302 lines (296 loc) · 9.47 KB
/
mobileapps.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
import React from "react";
import Head from "next/head";
import Lottie from "react-lottie";
import Link from "../src/Link";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import Hidden from "@material-ui/core/Hidden";
import integrationAnimation from "../src/animations/integrationAnimation/data.json";
import CallToAction from "../src/ui/CallToAction";
const useStyles = makeStyles((theme) => ({
heading: {
maxWidth: "40em",
},
arrowContainer: {
marginTop: "0.5em",
},
rowContainer: {
paddingLeft: "5em",
paddingRight: "5em",
[theme.breakpoints.down("sm")]: {
paddingLeft: "1.5em",
paddingRight: "1.5em",
},
},
}));
export default function MobileApps(props) {
const classes = useStyles();
const theme = useTheme();
const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
const matchesSM = useMediaQuery(theme.breakpoints.down("sm"));
const matchesXS = useMediaQuery(theme.breakpoints.down("xs"));
const defaultOptions = {
loop: true,
autoplay: true,
animationData: integrationAnimation,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<Grid container direction="column">
<Head>
<title key="title">Mobile Apps Development iOS/Android - Demo</title>
<meta
name="description"
key="description"
content="Mobile Apps Made Easy | Our app development process lets you custom design your own website and mobile apps."
/>
<meta
property="og:title"
content="Bringin West Coast Technology to the Midwest | iOS/Android App Development"
key="og:title"
/>
<meta property="og:url" key="og:url" content="/mobileapps" />
<link rel="canonical" key="canonical" href="/mobileapps" />
</Head>
<Grid
item
container
direction="row"
justify="center"
className={classes.rowContainer}
style={{ marginTop: matchesXS ? "1em" : "2em" }}
>
{/* Back arrow grid */}
<Hidden mdDown>
<Grid
item
className={classes.arrowContainer}
style={{ marginRight: "1em", marginLeft: "-3.5em" }}
>
<IconButton
component={Link}
href="/customsoftware"
style={{ backgroundColor: "transparent" }}
onClick={() => props.setSelectedIndex(1)}
>
<img
src="/assets/backArrow.svg"
alt="Back to Custom Software Development Page"
/>
</IconButton>
</Grid>
</Hidden>
{/* Main Contents */}
<Grid item container direction="column" className={classes.heading}>
<Grid item>
<Typography
align={matchesMD ? "center" : undefined}
variant="h1"
style={{
lineHeight: matchesXS ? 1.1 : null,
marginBottom: matchesXS ? "0.5em" : null,
fontSize: "2.25em",
}}
>
iOS/Android App Development
</Typography>
</Grid>
<Grid item>
<Typography
align={matchesMD ? "center" : undefined}
variant="body1"
paragraph
>
Mobile apps allow you to take your tools on the go.
</Typography>
<Typography
align={matchesMD ? "center" : undefined}
variant="body1"
paragraph
>
Whether you want an app for your customers, employees, or
yourself, we can build cross-platform native solutions for any
part of your business process. This opens you up to a whole new
world of possibilities by taking advantage of phone features like
the camera, GPS, push notifications, and more.
</Typography>
<Typography
align={matchesMD ? "center" : undefined}
variant="body1"
paragraph
>
Convenience. Connection.
</Typography>
</Grid>
</Grid>
<Hidden mdDown>
<Grid item className={classes.arrowContainer}>
<IconButton
component={Link}
href="/websites"
style={{ backgroundColor: "transparent" }}
onClick={() => props.setSelectedIndex(3)}
>
<img
src="/assets/forwardArrow.svg"
alt="Forward to Website Development Page"
/>
</IconButton>
</Grid>
{/* End of Grid Container that contains arrows and content */}
</Hidden>
</Grid>
{/* Integration section */}
<Grid
item
container
direction={matchesSM ? "column" : "row"}
className={classes.rowContainer}
style={{ marginTop: "15em", marginBottom: "15em" }}
>
<Grid item container direction="column" md>
<Grid item>
<Typography
align={matchesSM ? "center" : undefined}
variant="h4"
gutterBottom
>
Integration
</Typography>
</Grid>
<Grid item>
<Typography
align={matchesSM ? "center" : undefined}
variant="body1"
paragraph
>
Our technology enables an innate interconnection between web and
mobile applications, putting everything you need right in one
convenient place.
</Typography>
<Typography
align={matchesSM ? "center" : undefined}
variant="body1"
paragraph
>
This allows you to extend your reach, reinvent interactions, and
develop a stronger relationship with your users than ever before.
</Typography>
</Grid>
</Grid>
<Grid item md>
<Lottie
options={defaultOptions}
style={{
maxWidth: matchesMD ? "15em" : "20em",
height: matchesMD ? "20em" : undefined,
}}
/>
</Grid>
{/* Simultaneous block */}
<Grid item container direction="column" md>
<Grid item>
<Typography
align={matchesSM ? "center" : "right"}
variant="h4"
gutterBottom
>
Simultaneous Platform Support
</Typography>
</Grid>
<Grid item>
<Typography
align={matchesSM ? "center" : "right"}
variant="body1"
paragraph
>
Our cutting-edge development process allows us to create apps for
iPhone, Android, and tablets — all at the same time.
</Typography>
<Typography
align={matchesSM ? "center" : "right"}
variant="body1"
paragraph
>
This significantly reduces costs and creates a more unified brand
experience across all devices.
</Typography>
</Grid>
</Grid>
</Grid>
{/* Only ICONS Block */}
<Grid
item
container
direction={matchesMD ? "column" : "row"}
className={classes.rowContainer}
style={{
marginBottom: "15em",
display: matchesMD ? "grid" : undefined,
}}
// style={{ marginBottom: "15em"}}
>
{/* Extend Functionality */}
<Grid item container direction="column" alignItems="center" md>
<Grid item>
<Typography align="center" variant="h4" gutterBottom>
Extend Functionality
</Typography>
</Grid>
<Grid item>
<img src="/assets/swissKnife.svg" alt="swiss army knife" />
</Grid>
</Grid>
{/* Extend Access */}
<Grid
item
container
direction="column"
alignItems="center"
md
style={{
marginTop: matchesMD ? "10em" : 0,
marginBottom: matchesMD ? "10em" : 0,
// marginRight: matchesMD ? 0 : "3em",
// marginLeft: matchesMD ? 0 : "3em",
}}
>
<Grid item>
<Typography align="center" variant="h4" gutterBottom>
Extend Access
</Typography>
</Grid>
<Grid item>
<img
src="/assets/extendAccess.svg"
alt="tear-one-off sign"
style={{ maxWidth: matchesXS ? "20em" : "40em" }}
/>
</Grid>
</Grid>
{/* Increase Engagement */}
<Grid item container direction="column" alignItems="center" md>
<Grid item>
<Typography align="center" variant="h4" gutterBottom>
Increase Engagement
</Typography>
</Grid>
<Grid item>
<img
src="/assets/increaseEngagement.svg"
alt="app with notificaton"
/>
</Grid>
</Grid>
</Grid>
<Grid item>
<CallToAction setValue={props.setValue} />
</Grid>
</Grid>
);
}