-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
480 lines (447 loc) · 28.3 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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
<title>Leapfrog Technology | Innovate better and faster</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="main">
<div id="home" class="w-full h-[1100vh]">
<!-- nav bar -->
<nav id="navbar"
class="fixed z-20 w-full h-[70px] lg:h-[120px] px-[4vw] lg:px-[8vw] flex justify-between items-center bg-white">
<div class="flex">
<img class="w-[35px] h-[30px]" src="./assets/logo.png" alt="">
<h3 class="text-2xl lg:text-4xl font-bold">leapfrog</h3>
</div>
<div class="hidden lg:flex gap-20 text-lg">
<a class="transition ease-in-out hover:text-[#038e43] hover:border-b-2 border-[#038e43]"
href="">Home</a>
<a class="transition ease-in-out hover:text-[#038e43] hover:border-b-2 border-[#038e43]"
href="">Services</a>
<a class="transition ease-in-out hover:text-[#038e43] hover:border-b-2 border-[#038e43]"
href="">Join Leapfrog</a>
<a class="transition ease-in-out hover:text-[#038e43] hover:border-b-2 border-[#038e43]"
href="">Blog</a>
<a class="transition ease-in-out hover:text-[#038e43] hover:border-b-2 border-[#038e43]"
href="">About us</a>
</div>
<div class="hidden lg:flex bg-[#038e43] px-5 py-4 text-white">
<a href="">Build With Us</a>
</div>
<div class="max-lg:flex hidden">
<img src="./assets/menu.svg" alt="hamburger menu">
</div>
</nav>
<!-- hero section -->
<div class=" w-[84vw] mx-auto h-[100vh] lg:pt-[120px] lg:px-7 grid lg:grid-cols-2">
<div class="col-span-1 flex flex-col pt-[80px]">
<h3 class="heroTitle text-4xl lg:text-8xl font-extrabold flex">
<span>I</span>
<span>n</span>
<span>n</span>
<span>o</span>
<span>v</span>
<span>a</span>
<span>t</span>
<span>e</span>
</h3>
<h3 class="heroTitle text-4xl lg:text-8xl font-extrabold flex">
<span>b</span>
<span>e</span>
<span>t</span>
<span>t</span>
<span>e</span>
<span>r</span>
<span>,</span>
</h3>
<h3 class="heroTitle text-4xl lg:text-8xl text-[#038e43] font-extrabold flex">
<span>f</span>
<span>a</span>
<span>s</span>
<span>t</span>
<span>e</span>
<span>r</span>
<span>.</span>
</h3>
<p class="heroContent lg:text-2xl lg:pt-5">We help businesses imagine and create the digital experiences of
tomorrow.
We succeed
together, through the fusion of startup agility, enterprise standards, and world-class
engineering.
</p>
<div class="heroLink hidden lg:flex items-center lg:pt-10 uppercase text-[#038e43] font-extrabold lg:gap-10">
<a href="">Build with us</a>
<a href="">join us</a>
</div>
</div>
<div id="video" class="col-span-1 flex justify-center items-center overflow-hidden">
<div class="h-[250px] lg:h-[95%] w-full lg:w-[95%] bg-slate-600 lg:rounded-es-[140px]"></div>
</div>
<!-- mobile view -->
<div class="hidden max-lg:flex items-center pt-10 uppercase text-[#038e43] font-extrabold gap-10">
<a href="">Build with us</a>
<a href="">join us</a>
</div>
</div>
<!-- enterprices and startups -->
<div class="h-[100vh] lg:h-[85vh] w-[84vw] lg:px-7 mx-auto pt-[70px] lg:pt-[120px]">
<div class="flex flex-col justify-center">
<h3 class="text-3xl lg:text-6xl text-center font-extrabold">Trusted by 150<span
class="text-[#038e43]">+</span>
enterprises, scale-ups and startups.
</h3>
<p class="text-md text-center lg:px-[18%] pt-10">
At Leapfrog, we have had the privilege of partnering with some of the most innovative and
forward-thinking companies in the tech industry. From big companies to startups that hope to be
big one day, they trust us with the expertise and support they need to bring their ideas to
life.
</p>
<div id="enterpriseImg" class="grid grid-rows-4 md:grid-rows-3 lg:grid-rows-2 grid-flow-col mt-10">
<div><img src="./assets/ms.jpg" alt=""></div>
<div><img src="./assets/pingidentity.jpg" alt=""></div>
<div><img src="./assets/laudia.jpg" alt=""></div>
<div><img class="object-center" src="./assets/ucfs.jpg" alt=""></div>
<div><img src="./assets/keller.jpg" alt=""></div>
<div><img src="./assets/phill.jpg" alt=""></div>
<div><img src="./assets/mhealth.jpg" alt=""></div>
<div><img src="./assets/macmillan.jpg" alt=""></div>
</div>
</div>
</div>
<!-- ceo message -->
<div class="h-[110vh] lg:h-[70vh] w-[84vw] mx-auto flex items-center">
<div id="ceo" class="lg:grid lg:grid-cols-3 lg:px-20">
<div class="lg:col-span-1">
<img class="sm:w-[350px] lg:w-[78%] lg:rounded-ee-[120px]" src="./assets/ceo.jpg" alt="">
</div>
<div class="col-span-2 flex flex-col justify-between gap-5">
<div class="flex flex-col gap-5">
<img class="w-[60px]" src="./assets/invertedcommas-removebg-preview.png" alt="">
<p class="lg:text-2xl text-pretty">It would have taken months to build the product team that
we
<span class="font-bold">inherited overnight</span>
with
Leapfrog. <span class="font-bold">They’re built for startup speed,</span> and they have
consistently delivered
a
well-engineered product for us.
</p>
</div>
<div class="flex max-lg:flex-col justify-between h-[60px] self-baseline">
<div id="ceoDetails">
<h3 class="lg:text-xl text-[#038e43] font-extrabold">Russ Richmond, MD</h3>
<h3 class="lg:text-lg">CEO of Laudio, recognized in KLAS 2022 Emerging Solutions</h3>
</div>
<img class="max-lg:w-[40%]" src="./assets/laudia.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- products-->
<div class="h-[110vh] lg:h-[100vh] w-[full] max-lg:bg-black">
<nav class="max-lg:hidden h-[80px] w-[80%] mx-auto grid grid-rows-1 grid-flow-col text-lg">
<h3 class="flex items-center justify-center hover:font-bold hover:bg-black hover:text-white">Product
Technology</h3>
<h3 class="flex items-center justify-center hover:font-bold hover:bg-black hover:text-white">Team
Agumentation</h3>
<h3 class="flex items-center justify-center hover:font-bold hover:bg-black hover:text-white">Design
</h3>
<h3 class="flex items-center justify-center hover:font-bold hover:bg-black hover:text-white">Data &
AI</h3>
<h3 class="flex items-center justify-center hover:font-bold hover:bg-black hover:text-white">DevOps
& Cloud</h3>
</nav>
<div class="h-[90%] w-full bg-black lg:grid grid-cols-2 px-[5%] lg:px-[10%] py-[5%]">
<div id="productContent" class="col-span-1 flex flex-col gap-10 text-white">
<h3 class="uppercase text-lg font-bold text-[#038e43]">Product & Technology</h3>
<h3 class="text-2xl lg:text-6xl font-extrabold">Deliver value, not just products.</h3>
<h3 class="text-lg lg:text-2xl">Build digital experiences people love to use. Learn how we use
battle-tested processes to
systematically design and develop software that solves problems, delights users, and
optimizes businesses.</h3>
<a href="#" class="uppercase px-2 lg:p-5 font-extrabold bg-[#038e48] w-[50%]">Explore Product
Engineering</a href="#">
</div>
<div class="max-lg:pt-10 col-span-1 flex items-center justify-center">
<img id="productImg" src="./assets/product.png" alt="">
</div>
</div>
</div>
<!-- case study -->
<div class="lg:h-[160vh] w-full bg-slate-200">
<div class="h-full lg:w-[80%] mx-auto py-[7%] flex flex-col px-5 gap-10">
<h3 class="uppercase font-bold text-lg">Case Studies</h3>
<h3 class="text-xl lg:text-5xl font-extrabold">We have <span class="text-[#038e43]">a proven track
record</span> of ambitious products in complex environments.</h3>
<h3 class="lg:text-2xl">Since 2010, we've had over 100 fast-growing companies build apps,
data-driven
products, and
cloud solutions that make an impact.</h3>
<!-- images section -->
<div id="caseStudy" class="lg:grid lg:grid-rows-1 grid-flow-col gap-10 pt-10">
<div class="flex flex-col items-center bg-white pb-10 lg:rounded-ee-[100px] max-lg:mb-10">
<img class="h-[400px] w-full max-lg:object-contain" src="./assets/signetic.jpg" alt="">
<div class="px-10 grid gap-5">
<h3 class="lg:text-2xl font-bold">We helped City of Seattle administer 1 million COVID
doese to reach 70% full
avaccination</h3>
<p class="max-lg:text-sm">We beat Salesforce and Microsoft to be selected by City of
Seattle as the end-to-end
vaccination solution that made Seattle become the 1st large US city to reach 70%
full
vaccinations. This made up king County's 82% doese.</p>
<p class="text-xl font-extrabold text-[#038e43]">Read the story</p>
</div>
</div>
<div class="flex flex-col items-center bg-white pb-10 lg:rounded-ee-[100px]">
<img class="h-[400px] max-lg:object-contain" src="./assets/laudio2.jpg" alt="">
<div class="px-10 grid gap-5">
<h3 class="lg:text-2xl font-bold">We are leveraging AI and ML to help solve staff
burnout
at 10+ large hospitals.</h3>
<p class="max-lg:text-sm">We bulid a staff relationship management platform to achieve
the vision to help
frontline
managers influence stronger staff enagement, satisfaction, and retention.</p>
<p class="text-xl font-extrabold text-[#038e43]">Read the story</p>
</div>
</div>
</div>
</div>
</div>
<!-- skills -->
<div class="lg:h-[165vh] w-full">
<div class="h-full lg:w-[80%] mx-auto py-[10%] flex flex-col items-center gap-10">
<h3 class="text-3xl lg:text-7xl font-extrabold"><span class="text-[#038e43]">Skills</span> at a
glance</h3>
<p class="lg:text-2xl text-center px-20">We support a breadth of technologies, best practices, use
cases, and industries. Here are some of them.</p>
<!-- nav -->
<div>
<nav class="max-lg:hidden h-[80px] px-[20%] grid grid-rows-1 grid-flow-col items-center gap-10">
<a class="px-5 py-5 transition ease-in-out hover:font-bold hover:border-b-4 border-[#038e43] hover:text-[#038e43]"
href="#">What we build</a>
<a class="px-5 py-5 transition ease-in-out hover:font-bold hover:border-b-4 border-[#038e43] hover:text-[#038e43]"
href="#">technologies</a>
<a class="px-5 py-5 transition ease-in-out hover:font-bold hover:border-b-4 border-[#038e43] hover:text-[#038e43]"
href="#">Practices</a>
<a class="px-5 py-5 transition ease-in-out hover:font-bold hover:border-b-4 border-[#038e43] hover:text-[#038e43]"
href="#">Industries</a>
</nav>
<!-- technologies -->
<div class="grid lg:grid-rows-2 lg:grid-flow-col lg:mt-10 gap-10 max-lg:px-10">
<div
class="flex flex-col justify-between p-3 rounded-xl transition ease-out hover:scale-105 hover:bg-slate-200 max-lg:border-2">
<img src="./assets/sd.jpg" alt="">
<h3>Crafting tailored software solutions aligned with your vision, driving efficiency
and innovation through precise coding.</h3>
</div>
<div
class="flex flex-col justify-between p-3 rounded-xl transition ease-out hover:scale-105 hover:bg-slate-200 max-lg:border-2">
<img src="./assets/st.jpg" alt="">
<h3>Ensuring impeccable software quality through rigorous testing, assuring reliability
and user satisfaction with every release.</h3>
</div>
<div
class="flex flex-col justify-between p-3 rounded-xl transition ease-out hover:scale-105 hover:bg-slate-200 max-lg:border-2">
<img src="./assets/blockchain.jpg" alt="">
<h3>Guiding exploration of blockchain's secure potential, integrating transparency and
trust into transformative initiatives.</h3>
</div>
<div
class="flex flex-col justify-between p-3 rounded-xl transition ease-out hover:scale-105 hover:bg-slate-200 max-lg:border-2">
<img src="./assets/infraDev.jpg" alt="">
<h3>Building robust foundations and agile workflows for scalability and security while
embracing continuous development methodologies.</h3>
</div>
<div
class="flex flex-col justify-between p-3 rounded-xl transition ease-out hover:scale-105 hover:bg-slate-200 max-lg:border-2">
<img src="./assets/mobiledev.jpg" alt="">
<h3>Creating seamless digital journeys with user-centric design, marrying aesthetics and
functionality for unparalleled cross-platform experiences.</h3>
</div>
<div
class="flex flex-col justify-between p-3 rounded-xl transition ease-out hover:scale-105 hover:bg-slate-200 max-lg:border-2">
<img src="./assets/ds.jpg" alt="">
<h3>Unveiling insights from complex data landscapes, empowering strategic decisions and
breakthroughs through advanced analytics and machine learning.</h3>
</div>
</div>
</div>
</div>
</div>
<!-- tech partners -->
<div class="lg:h-[85vh] w-full bg-slate-200">
<div class="h-full lg:w-[80%] mx-auto lg:grid grid-cols-3 max-lg:py-10">
<!-- img -->
<div class="max-lg:hidden col-span-1">
<img id="partnerImg" class="h-full object-cover" src="./assets/techpartner.png" alt="">
</div>
<!-- content -->
<div class="col-span-2 px-10 flex flex-col justify-center gap-10">
<h3 class="uppercase font-bold text-xl">The leapfrog difference</h3>
<div class="flex flex-col gap-5">
<h3 class="text-3xl lg:text-6xl font-bold">We strive to be a <span
class="text-[#038e43]">better
technology partner.</span></h3>
<h3 class="text-lg lg:text-2xl font-semibold">At our core, we are 450 people obsessed with
innovating
with technology in the right
ways.
</h3>
</div>
<p>We are 100% oriented around solving your problems and making you successful. If you need
skilled people, we make sure they have the talent and nature to plug right into your team.
When you have a job for us, we move mountains to make sure it’s done well and on time. We
pride ourselves on earning your trust, providing demonstrable value, and being great at what
we do - together.
</p>
<a class="uppercase px-5 py-3 bg-[#038e43] lg:w-[30%] text-xl text-white font-semibold text-center"
href="#">Learn More</a>
</div>
</div>
</div>
<!-- books -->
<div class="lg:h-[100vh] w-full max-lg:p-5">
<div class="h-[70%] lg:w-[80%] mx-auto mt-[10%] flex flex-col justify-between">
<div class="flex flex-col gap-5 text-center">
<h3 class="text-4xl lg:text-7xl font-extrabold">See <span class="text-[#038e43]">what</span> we
are thinking
</h3>
<h3 class="lg:text-2xl">We're not just doers, we're tinkerers and thinkers obsessed with
building
new things in
better
ways. Read some of our insights, download our playbooks.</h3>
</div>
<div id="books" class="lg:grid grid-rows-1 grid-flow-col gap-5">
<div
class="flex flex-col items-center justify-between gap-3 max-lg:mt-10 max-lg:border-2 max-lg:pb-5">
<img src="./assets/book1.jpg" alt="">
<h3 class="text-center">Guide to a bulletproof design sprint aligning the goals of clients
and end-users.</h3>
<button class="uppercase px-5 py-3 bg-[#038e43] font-bold text-white">Get the book</button>
</div>
<div
class="flex flex-col items-center justify-between gap-3 max-lg:mt-10 max-lg:border-2 max-lg:pb-5">
<img src="./assets/book2.jpg" alt="">
<h3 class="text-center">The product development roadmap that enables companies small or
large build defensible digital products.</h3>
<button class="uppercase px-5 py-3 bg-[#038e43] font-bold text-white">Get the book</button>
</div>
<div
class="flex flex-col items-center justify-between gap-3 max-lg:mt-10 max-lg:border-2 max-lg:pb-5">
<img src="./assets/book3.jpg" alt="">
<h3 class="text-center">Drills down the basics about what DevOps is and how you should be
following a DevOps culture.</h3>
<button class="uppercase px-5 py-3 bg-[#038e43] font-bold text-white">Get the book</button>
</div>
</div>
</div>
</div>
<!-- get started -->
<div class="lg:h-[120vh] w-full bg-black">
<div class="h-full lg:w-[80%] mx-auto py-[5%] max-lg:px-10">
<!-- text -->
<h3 class="text-center text-3xl lg:text-7xl text-[#038e43] font-bold">Ready to get started?</h3>
<!-- img -->
<div class="h-[70%] lg:grid grid-rows-1 grid-flow-col gap-10 pt-20">
<div class="">
<img class="rounded-se-[120px]" src="./assets/rocket.jpg" alt="">
</div>
<div class="">
<img class="rounded-ss-[120px]" src="./assets/boat.jpg" alt="">
</div>
</div>
<!-- query form -->
<div class="flex max-lg:flex-col pt-20 gap-10 justify-center">
<h3 class="text-3xl font-bold text-[#038e43]">Stay in the loop</h3>
<form action="#" class="flex max-lg:flex-col gap-10">
<input class="h-[40px] lg:w-[360px] ps-3 bg-slate-800 text-white" type="email" name="email"
placeholder="Your email addresss">
<button class="px-5 py-2 bg-white text-black font-semibold" type="submit">Subscribe for
updates</button>
</form>
</div>
</div>
</div>
<!-- contacts -->
<div class="lg:h-screen w-full bg-black text-white pb-10">
<div class="h-[80%] w-[90%] mx-auto border-t-2 border-slate-400 grid lg:grid-cols-4 max-lg:gap-10 py-10 lg:pt-28">
<div class="flex gap-1">
<img class="w-9 h-8" src="./assets/bwLogo.jpg" alt="black&white logo">
<h3 class="text-4xl font-bold h-8">leapfrog</h3>
</div>
<div class="flex flex-col gap-14">
<div class="flex flex-col gap-3">
<h3 class="text-2xl font-bold">We are Leapfrog</h3>
<p>About</p>
<p>Resources</p>
<p>Case Studies</p>
<p>About Us</p>
<p>Blogs</p>
</div>
<div class="flex flex-col gap-3">
<h3 class="text-2xl font-bold">Work with us</h3>
<p>Careers</p>
<p>Internships</p>
<p>Life at Leapfrog</p>
</div>
</div>
<div class="flex flex-col gap-14">
<div class="flex flex-col gap-3">
<h3 class="text-2xl font-bold">What We Do</h3>
<p>Products & Technology</p>
<p>Team Augmentation</p>
<p>Design</p>
<p>Data and AI</p>
<p>DevOps & Cloud</p>
</div>
<div class="flex flex-col gap-3">
<h3 class="text-2xl font-bold">Industries</h3>
<p>Healthtech</p>
</div>
</div>
<div class="flex flex-col gap-14">
<div class="flex flex-col gap-3">
<h3 class="text-2xl font-bold">Connect with Us</h3>
<span class="flex gap-1"><img src="./assets/podcast.svg" alt=""> podcast</span>
<span class="flex gap-1"><img src="./assets/facebook.svg" alt=""> facebook</span>
<span class="flex gap-1"><img src="./assets/twitter.svg" alt=""> Twitter</span>
<span class="flex gap-1"><img src="./assets/insta.svg" alt=""> Instagram</span>
<span class="flex gap-1"><img src="./assets/linkedin.svg" alt=""> LinkedIn</span>
</div>
<div class="flex flex-col gap-3">
<span class="flex gap-1"><img src="./assets/leapfrogBrand.svg" alt="">Leapfrog Brand</span>
<span class="flex gap-1"><img src="./assets/eduMission.svg" alt=""> Education Mission</span>
<span class="flex gap-1"><img src="./assets/studentProgram.svg" alt=""> Student Partnership</span>
</div>
</div>
</div>
<!-- copyright section -->
<div
class="h-[20%] w-[90%] mx-auto border-t-2 border-slate-400 flex max-lg:flex-col max-lg:justify-center items-center justify-between max-lg:gap-10">
<h3 class=" text-white max-lg:text-center">Copyright 2024 Leapfrog Technology, Inc</h3>
<div class="flex gap-10 font-semibold lg:text-xl text-white cursor-pointer">
<h3>Privacy Policy </h3>
<h3>Data Policy</h3>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./script.js"></script>
</body>
</html>
<!-- #038e43 -->