generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
329 lines (317 loc) · 16 KB
/
index.html
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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Virtual Reality, Augmented Reality, VR training, immersive learning">
<meta name="description" content="VR and AR training solution for workforce development and transformation">
<title>Train in XR - Experts in VR and AR Learning Innovation</title>
<link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- header and navigation section -->
<header>
<nav class="navbar">
<a href="index.html">
<img src="./assets/images/txr_logo.svg" alt="logo" class="logo" aria-label="Train in XR logo">
</a>
<button class="hamburger-icon" id="hamburger" aria-label="menu">
<i class="fas fa-bars"></i>
</button>
<ul class="navbar-ul" id="navbar-ul">
<li><a href="services.html">Our Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="contact.html" class="link-demo">Get demo</a></li>
</ul>
<a href="login.html" class="link-login">Client Login</a>
</nav>
</header>
<!-- interactive hero section for the augmented reality feature -->
<section>
<h5 id="hero-cta">Try out Augmented Reality. Click on AR at the top right side of the page.</h5>
<div class="hero-interactive">
<iframe title="interactive augmented reality example" class="responsive-iframe" id="c807c8c6-d3b6-414b-89e0-473acdeace85"
src="https://www.vectary.com/viewer/v1/?model=c807c8c6-d3b6-414b-89e0-473acdeace85&env=redwall">
</iframe>
</div>
</section>
<!-- about us section -->
<section>
<div class="about-container">
<h1 class="about-blurb">We consult on and build award-winning
<span class="vrar-color">VR</span> and <span class="vrar-color">AR</span>
learning innovation and solutions.
</h1>
<p class="more-about">With proven, measurable results. To help your teams transform the way they work, improve the way they learn and have fun along the way.</p>
<hr class="divider">
<a href="about.html" class="btn-large">Learn More About TXR</a>
</div>
</section>
<!-- our services section -->
<section>
<div class="grid-container">
<div class="services">
<h2>Our Services</h2>
<h3 class="services-intro">Driven by humans. Powered by technology.</h3>
<hr class="divider">
</div>
<div>
<img class="woman" src="./assets/images/woman_mesh.webp" alt="digital human">
</div>
<div class="consulting">
<h3 class="consulting-text">Advisory Consulting</h3>
<p>We help safeguard your XR investments by putting all the pieces together to save you</p>
<ul>
<li>Time</li>
<li>Effort</li>
<li>Money</li>
</ul>
<p>and move your projects forward.</p>
<a href="services.html" class="btn-small">Find out more</a>
</div>
<div>
<img class="digital-woman" src="./assets/images/digital-woman.webp" alt="digital human">
</div>
<div class="tna">
<h3 class="consulting-text">Learning & Development Transformation</h3>
<p>We deep dive into your workforce training challenges and collaborate on solutions to transform the way your teams</p>
<ul>
<li>Work</li>
<li>Learn</li>
<li>Play</li>
</ul>
<p>Want to know more?</p>
<a href="contact.html" class="btn-small">Contact Us</a>
</div>
<div>
<img class="hands" src="./assets/images/hands_mesh.webp" alt="digital hands">
</div>
<div class="vrar">
<h3 class="consulting-text">VR and AR Content Creation</h3>
<p>We develop immersive learning solutions tailored for today's learners and future-proofed for tomorrow's new joiners.</p>
<ul>
<li>Virtual Reality</li>
<li>Augmented Reality</li>
</ul>
<p>Ready to get started?</p>
<a href="contact.html" class="btn-small">Let's Talk</a>
</div>
</div>
</section>
<!-- why VR section -->
<section>
<div class="why-vr">
<div class="vrar-intro">
<h2>What makes <span class="vrar-color">VR</span> great for staff learning transformation?</h2>
<h3>Here are the results of a PwC VR Soft Skills Case Study (2020)</h3>
<p><i>Virtual Reality is a computer simulated environment. Using a VR headset, learners are placed in a simulation where they can
use their sight, hearing, touch and voice to interact with the 3D objects in the scene.</i></p>
<hr class="divider">
</div>
<div class="vrar-numbers-intro">
<h3>VR Learners were:</h3>
</div>
<div class="vrar-numbers">
<h2>4x</h2>
<p>faster to train than in the classroom</p>
<h2>275%</h2>
<p>more confident to apply skills learned after training</p>
<h2>3.75x</h2>
<p>more emotionally connected to content than classroom leaners</p>
<h2>4x</h2>
<p>more focused than their e-learning peers</p>
</div>
</div>
</section>
<!-- why AR section -->
<section>
<div class="why-ar">
<div class="vrar-intro">
<h2>What makes <span class="vrar-color">AR</span> great for increased operational efficiency?</h2>
<h3>Here are the results of a CapGemini Case Study (2018)</h3>
<p><i>Augmented Reality is a computer simulation of objects that can be superimposed or layered on the physical world.
Through the use of compatible devices such as smartphones, tablets and AR glasses, these digital objects provide virtual details to the physical environment and enhance the real world experience.</i></p>
<hr class="divider">
</div>
<div class="vrar-numbers-intro">
<h3>AR Users were:</h3>
</div>
<div class="vrar-numbers">
<h2>70%</h2>
<p>drop in employee injuries at Ford's assembly lines</p>
<h2>40%</h2>
<p>increased productivity by technicians at Boeing</p>
<h2>25%</h2>
<p>reduction in wiring production time of technicians at Boeing</p>
<h2>90%</h2>
<p>reduction in ergonomic issues at Ford and eliminates error rates</p>
</div>
</div>
</section>
<!-- some of our work section using cards -->
<section>
<div class="work-intro">
<h2>See some of the projects we delivered</h2>
<hr class="divider">
</div>
<div class="work-container">
<div class="work-card work-one">
<div class="img-one"></div>
<h3>Tailored Workshops</h3>
<p>Our in-depth workshops help demystify XR and provide clear directions to help future-proof your XR investments.</p>
<a href="contact.html" class="btn-small">Let's Talk</a>
</div>
<div class="work-card work-two">
<div class="img-two"></div>
<h3>3D Environments</h3>
<p>We create a realistic and interactive digital twin of your work environments that can be reused for other modules.</p>
<a href="contact.html" class="btn-small">Book a demo</a>
</div>
<div class="work-card work-three">
<div class="video">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Rnk_akgSjqg"
title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<h3>VR Scenarios</h3>
<p>Our VR scenarios are tailored to your current requirements; but they can also be reused for other training modules.</p>
<a href="contact.html" class="btn-small">Book a Demo</a>
</div>
<div class="work-card work-four">
<div class="video">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WxzcD04rwc8"
title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<h3>AR Apps</h3>
<p>Our AR Apps allow for multi-user and remote collaboration between the learners, trainers and other participants.</p>
<a href="contact.html" class="btn-small">Book a demo</a>
</div>
</div>
</section>
<!-- our clients section -->
<section>
<div class="clients">
<div class="clients-intro">
<h2>We're so glad to be in great company!</h2>
<hr class="divider">
</div>
<div class="clients-logo">
<img src="./assets/images/enterprise.png" alt="logo of a mock enterprise client">
<img src="./assets/images/hospital.png" alt="logo of a mock public health client">
<img src="./assets/images/technology.png" alt="logo of a mock technology company client">
<img src="./assets/images/cola.png" alt="logo of a mock food and drinks manufacturing client">
<img src="./assets/images/mining.png" alt="logo of a mock mining client">
<img src="./assets/images/telco.png" alt="logo of a mock telco client">
</div>
</div>
</section>
<!-- testimonials section -->
<section>
<div class="quote">
<div class="quote-intro">
<h2>What our clients say about us</h2>
<hr class="divider">
</div>
</div>
<div>
<h3 class=quote-mark>"</h3>
</div>
<div class="testimonials-container">
<div class="testimonials">
<p>
<i>"The teams at Train in XR have been instrumental in helping us rethink our learning strategies to promptly train our workforce
on rapidly changing safety procedures during the time of the pandemic. Thanks team TXR!"</i>
</p>
<h4>Jane Milano, Chief People Officer, Andes</h4>
</div>
<div class="testimonials">
<p>
<i>"We've managed to deliver just-in-time training for our colleagues during COVID and save more than 30% on our XR budget, thanks to
TXR's access to a network of VR vendors!"</i>
</p>
<h4>Allan Harris, Chief Procurement Officer, NFS</h4>
</div>
</div>
<div>
<h3 class=quote-mark>"</h3>
</div>
</section>
<!-- signup section -->
<section class="subscribe">
<div class="subscribe-container">
<h3>Subscribe to Receive Updates</h3>
<p>Please fill in this form to create an account.</p>
<form action="thankyou.html" method="get" class="subscribe-short">
<label for="fname">First Name</label>
<input class="contact-input" id="fname" type="text" name="first_name" required>
<label for="lname">Last Name</label>
<input class="contact-input" id="lname" type="text" name="last_name" required>
<label for="company">Company</label>
<input class="contact-input" id="company" type="text" name="company_name" required>
<label for="email">Work Email</label>
<input class="contact-input" id="email" type="email" name="email_address" required>
<input class="btn-small" type="submit" value="Sign Up to TXR">
</form>
<p><i>By creating an account, you agree to our Terms & Privacy Policy.</i></p>
</div>
</section>
<!-- footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-about">
<a href="index.html">
<img src="./assets/images/txr_logo_footer.svg" class="footer-logo" alt="Train in XR logo" aria-label="Train in XR logo">
</a>
<div>
<p>
We are a team of software developers, 3D modellers and learning professionals.
We're here to help solve your workforce training challenges through learning innovation.
</p>
</div>
<div class="social-networks">
<a href="https://uk.linkedin.com/" target="_blank" rel="noopener" aria-label="link to LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="https://twitter.com/" target="_blank" rel="noopener" aria-label="link to Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://en-gb.facebook.com/" target="_blank" rel="noopener" aria-label="link to Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.instagram.com/?hl=en" target="_blank" rel="noopener" aria-label="link to Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="link to YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-services">
<h3>Services</h3>
<div>
<ul>
<li><a href="services.html">Advisory Consulting</a></li>
<li><a href="services.html">Learning & Development Transformation</a></li>
<li><a href="services.html">Virtual Reality</a></li>
<li><a href="services.html">Augmented Reality</a></li>
</ul>
</div>
</div>
<div class="footer-contact">
<h3>Address</h3>
<div>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 123 Excel Street, London, EC2A 1BN, UK</li>
<li><i class="fas fa-phone"></i> +44 020 1234 5678</li>
<li><a href="mailto:[email protected]" target="_blank"><i class="fas fa-at"></i> [email protected]</a></li>
</ul>
<p class="copyright"><i>Copyright © Joy Zadan (2021)</i></p>
</div>
</div>
</div>
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>