-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (175 loc) · 7.32 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Roboto&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
cinnabar: '#FF5047',
pacific: '#00BCD1',
bayou: '#007E8F',
black: '#212121',
mountain: '#595959',
persian: '#CC3333',
fog: '#ECECE',
lizard: '#CCCC33',
}
},
fontFamily: {
'sans': 'Archivo, Helvetica, Arial, sans-serif',
'body': 'Roboto, Helvetica, Arial, sans-serif',
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
[x-cloak] {
display: none !important;
}
}
</style>
<script src="//unpkg.com/alpinejs" defer></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('page', () => ({
mounted: false,
init() {
setTimeout(() => {
this.mounted = true;
}, 500);
},
email: '',
subscribeStart: false,
subscribeSuccess: false,
subscribeError: null,
subscribeBtnText: 'Subscribe',
subscribe() {
this.subscribeStart = true;
this.subscribeSuccess = false;
this.subscribeError = null;
this.subscribeBtnText = 'Subscribing...';
const guid = '7a681b70-b67c-496b-9d3a-53d2add105e7';
const fields = [
{
name: 'email',
value: this.email
}
];
fetch('https://api.hsforms.com/submissions/v3/integration/submit/390615/' + guid, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({fields}),
})
.then(response => response.json())
.then(data => {
if (data.status && data.status == 'error') throw data;
this.subscribeStart = false;
this.subscribeSuccess = true;
this.subscribeBtnText = 'Subscribed';
console.log('Success:', data);
})
.catch((error) => {
this.subscribeStart = false;
this.subscribeError = error;
this.subscribeBtnText = 'Retry';
console.error('Error:', error);
});
}
}))
})
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-T18Y0MJESJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-T18Y0MJESJ');
</script>
</head>
<body x-data="page" x-cloak class="relative bg-mountain">
<div
:style="{maxHeight: mounted ? '100vh' : 0}"
class="fixed inset-0 bg-persian transition-all duration-[600ms] ease-[cubic-bezier(.075,.82,.165,1)]"
></div>
<div
:style="{maxHeight: mounted ? '100vh' : 0}"
class="fixed inset-0 bg-cinnabar transition-all duration-[900ms] ease-[cubic-bezier(.075,.82,.165,1)]"
></div>
<div
:class="mounted ? 'opacity-100' : 'opacity-0'"
class="container mx-auto p-5 lg:py-3 space-y-10 lg:space-y-20 relative transition-all delay-100 duration-[900ms] ease-[cubic-bezier(.075,.82,.165,1)]"
>
<div class="flex flex-col lg:flex-row lg:items-end">
<header class="lg:w-3/5">
<h1 class="font-medium text-white text-4xl lg:text-5xl xl:text-6xl leading-normal xl:leading-snug">
Activate your vision.
</h1>
<h2 class="font-medium text-white text-4xl lg:text-5xl xl:text-6xl leading-normal xl:leading-snug">
Train your team, your way.
</h2>
</header>
<figure class="w-4/6 lg:w-2/5 self-center">
<img
src="./assets/img/academybuilder-logo-badge-3d-red.png"
class="w-full translate-y-5 lg:translate-y-8"
alt="ACADEMY BUILDER"
/>
</figure>
</div>
<p class="text-white/90 text-xl md:text-2xl lg:text-3xl font-body animate__animated animate__fadeIn animate__delay-2s animate__faster">
Academy Builder is the most intuitive, flexible and quickest way <br class="hidden lg:block">
to build, control and host corporate training programs.
</p>
<form
@submit.prevent="subscribe"
class="space-y-3 animate__animated animate__fadeIn animate__delay-2s animate__fast"
>
<p class="text-white text-xl lg:text-2xl font-body">
Coming soon! Sign up to be notified and to be invited to our Beta Launch!
<span class="text-2xl lg:text-3xl inline-block"
:class="{'animate__animated animate__flash animate__repeat-3' : subscribeSuccess}">🙌</span>
</p>
<div class="flex space-x-3 lg:space-x-5 w-full lg:w-3/5 font-body">
<input
x-model="email"
type="email"
class="md:text-xl lg:text-2xl w-full p-2 px-3 focus:outline-none placeholder:text-black bg-gradient-to-b from-[#f6f6f6] to-[#b6b6b6] shadow-sm"
placeholder="email address*"
required
:disabled="subscribeStart || subscribeSuccess"
/>
<button
class="p-3 pr-8 lg:pr-12 bg-pacific hover:bg-bayou transition text-white uppercase md:text-xl shadow-sm disabled:bg-bayou"
:disabled="subscribeStart || subscribeSuccess"
x-text="subscribeBtnText"
>
Subscribe
</button>
</div>
<small
x-transition
x-show="subscribeError && subscribeError.message"
x-text="subscribeError && subscribeError.message"
class="bg-persian text-white font-body tracking-wide"
>
</small>
</form>
<a href="privacy.html" class="text-white/90 text-sm font-body underline block">
Privacy Policy
</a>
</div>
</body>
</html>