forked from thedevdojo/tails-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlandmark.html
434 lines (403 loc) · 63 KB
/
landmark.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmark</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css">
<!-- Small CSS to Hide elements at 1520px size -->
<style>
@media(max-width:1520px){
.left-svg{
display:none;
}
}
/* small css for the mobile nav close */
#nav-mobile-btn.close span:first-child{
transform: rotate(45deg);
top: 4px;
position: relative;
background:#a0aec0;
}
#nav-mobile-btn.close span:nth-child(2){
transform: rotate(-45deg);
margin-top: 0px;
background:#a0aec0;
}
</style>
</head>
<body class="antialiased overflow-x-hidden">
<!-- Header Section -->
<header class="h-24 w-full relative z-50">
<div class="container max-w-6xl mx-auto h-full flex justify-center sm:justify-between items-center px-8 xl:px-0">
<a href="/" class="inline-block h-full flex items-center h-5 relative font-black leading-none">
<svg class="h-6 w-auto fill-current text-indigo-600" viewBox="0 0 194 116" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z"/><path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"/></g></svg>
<span class="text-xl ml-3 text-gray-800">Landmark<span class="text-pink-500">.</span></span>
</a>
<nav id="nav" class="absolute left-0 w-full md:w-auto text-gray-800 flex-col md:flex-row h-64 md:h-24 justify-between text-sm lg:text-base bg-white md:bg-transparent top-0 mt-24 md:mt-0 border-t md:border-none border-gray-200 pt-5 md:py-0 z-50 flex hidden md:flex items-center md:relative">
<a href="#" class="font-bold ml-0 md:ml-12 mr-0 md:mr-3 lg:mr-8 transition-color duration-100 hover:text-indigo-600">Home</a>
<a href="#features" class="font-bold mr-0 md:mr-3 lg:mr-8 transition-color duration-100 hover:text-indigo-600">Features</a>
<a href="#pricing" class="font-bold mr-0 md:mr-3 lg:mr-8 transition-color duration-100 hover:text-indigo-600">Pricing</a>
<a href="#testimonials" class="font-bold transition-color duration-100 hover:text-indigo-600">Testimonials</a>
<div class="block md:hidden border-t border-gray-200 font-medium flex flex-col w-full">
<a href="#_" class="py-2 text-pink-500 w-full text-center font-bold">Login</a>
<a href="#_" class="px-5 py-3 fold-bold text-sm leading-none bg-indigo-700 text-white w-full inline-block text-center relative">Get Started</a>
</div>
</nav>
<div class="absolute left-0 md:relative w-full md:w-auto md:bg-transparent border-b md:border-none border-gray-200 mt-48 md:mt-0 flex-col md:flex-row pb-8 md:p-0 justify-center items-center md:items-end hidden md:flex md:justify-between">
<a href="#_" class="px-3 md:px-5 py-2 text-sm text-pink-500 lg:text-white font-bold mr-0 sm:mr-3 relative z-40 md:mt-0">Login</a>
<a href="#_" class="px-5 py-3 rounded fold-bold text-sm transition-all duration-300 leading-none bg-indigo-700 lg:bg-white text-white lg:text-indigo-700 w-auto sm:w-full h-full inline-block font-bold relative shadow-md lg:shadow-none hover:shadow-xl duration-100 transition z-40">Get Started</a>
<svg class="hidden lg:block absolute w-screen max-w-3xl -mt-64 -ml-12 left-0 top-0" viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c"><stop stop-color="#E614F2" offset="0%"/><stop stop-color="#FC3832" offset="100%"/></linearGradient><linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f"><stop stop-color="#657DE9" offset="0%"/><stop stop-color="#1C0FD7" offset="100%"/></linearGradient><filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox" id="d"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1"/></filter><path d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z" id="b"/><path d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z" id="e"/></defs><g fill="none" fill-rule="evenodd" opacity=".9"><g transform="rotate(65 416.452 409.167)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/></g><g transform="rotate(29 421.929 414.496)"><use fill="#000" filter="url(#d)" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/></g></g></svg>
</div>
<div id="nav-mobile-btn" class="w-6 absolute block md:hidden right-0 top-0 mr-10 mt-8 sm:mt-10 z-50 cursor-pointer select-none">
<span class="w-full h-1 mt-2 sm:mt-1 bg-gray-800 rounded-full block transform duration-200"></span>
<span class="w-full h-1 mt-1 bg-gray-800 rounded-full block transform duration-200"></span>
</div>
</div>
</header>
<!-- End Header Section-->
<!-- BEGIN HERO SECTION -->
<div class="w-full justify-center items-center relative overflow-x-hidden lg:pt-40 lg:pb-40 xl:pt-40 xl:pb-64">
<div class="container max-w-6xl mx-auto h-full flex flex-col lg:flex-row justify-between items-center -mt-32 px-8 xl:px-0">
<div class="flex flex-col items-center lg:items-start w-full max-w-xl lg:w-1/2 pt-48 lg:pt-20 xl:pt-40 text-center lg:text-left z-30">
<h1 class="text-gray-900 font-black text-3xl sm:text-6xl leading-tight relative mb-4 xl:mb-8">Build the Next Great Thing</h1>
<p class="text-base sm:text-lg xl:text-xl text-gray-600 mb-8 pr-0 lg:pr-20">Are you ready to start your adventure and start building the next greatest SAAS app on the market?</p>
<a href="#_" class="mt-0 sm:mt-1 px-8 py-4 rounded-md fold-bold text-base bg-indigo-600 shadow-xl text-white border-t border-gray-200 w-auto font-bold relative self-start inline-block lg:mx-0 mx-auto">Signup Today!</a>
<!-- Integrates with section -->
<div class="hidden sm:flex flex-col mt-12 lg:mt-24">
<p class="text-gray-500 uppercase font-medium tracking-widest mb-4 text-sm">Integrates With</p>
<div class="flex">
<svg class="h-8 mr-4 fill-current text-gray-500 transition-color duration-150 hover:text-gray-600 cursor-pointer" viewBox="0 0 2499 1037" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1"><g><path d="M261.062 466.768c-53.833-19.912-83.335-35.399-83.335-59.735 0-20.652 16.963-32.45 47.201-32.45 55.31 0 112.09 21.388 151.178 40.559l22.124-136.427c-30.973-14.752-94.397-39.088-182.151-39.088-61.947 0-113.573 16.223-150.443 46.46-38.352 31.71-58.263 77.434-58.263 132.744 0 100.293 61.211 143.07 160.769 179.203 64.159 22.86 85.547 39.088 85.547 64.16 0 24.336-20.652 38.346-58.263 38.346-46.46 0-123.153-22.86-173.302-52.356L0 786.087c42.771 24.337 122.417 49.409 205.017 49.409 65.63 0 120.204-15.487 157.08-44.984 41.293-32.45 62.682-80.381 62.682-142.328 0-102.511-62.683-145.282-163.717-181.416zm523.877-80.387l22.124-135.692H690.265V85.966l-157.035 25.84-22.677 138.883-55.232 8.96-20.675 126.732h75.68v266.227c0 69.32 17.7 117.257 53.833 146.754 30.238 24.336 73.745 36.134 134.956 36.134 47.196 0 75.957-8.109 95.868-13.275V678.416c-11.062 2.953-36.133 8.114-53.097 8.114-36.134 0-51.62-18.435-51.62-60.47V386.38h94.673zm350.752-143.618c-51.62 0-92.92 27.102-109.142 75.775l-11.062-67.849H855.459v573.745h182.887V452.017c22.865-28.026 55.31-38.159 99.558-38.159 9.59 0 19.911 0 32.45 2.213V247.188c-12.539-2.948-23.6-4.425-34.663-4.425zm171.095-48.86c53.098 0 95.869-43.507 95.869-96.604 0-53.839-42.771-96.61-95.869-96.61-53.838 0-96.609 42.771-96.609 96.61 0 53.097 42.771 96.604 96.61 96.604zm-92.184 56.786h183.628v573.745h-183.628V250.689zm703.999 51.62c-32.45-42.035-77.434-62.682-134.956-62.682-53.097 0-99.558 22.124-143.07 68.584l-9.585-57.522h-160.769v786.134l182.893-30.232V822.22c28.02 8.85 56.78 13.275 82.594 13.275 45.725 0 112.096-11.798 163.717-67.843 49.408-53.839 74.485-137.168 74.485-247.052 0-97.345-18.44-171.09-55.31-218.291zm-151.92 353.983c-14.75 28.025-37.61 42.777-64.159 42.777-18.435 0-34.662-3.69-49.408-11.062V415.142c30.973-32.445 58.993-36.134 69.32-36.134 46.46 0 69.32 50.15 69.32 148.23 0 56.045-8.11 99.557-25.073 129.054zm731.566-123.894c0-91.443-19.912-163.717-59-214.602-39.822-51.62-99.557-78.169-175.514-78.169-155.608 0-252.212 115.044-252.212 299.408 0 103.247 25.808 180.68 76.692 230.089 45.725 44.248 111.361 66.372 196.168 66.372 78.169 0 150.442-18.435 196.167-48.673l-19.912-125.365c-44.989 24.336-97.345 37.61-156.344 37.61-35.398 0-59.734-7.378-77.434-22.864-19.175-16.223-30.237-42.771-33.921-80.382h303.097c.736-8.85 2.213-50.15 2.213-63.424zm-306.787-48.672c5.16-81.859 27.284-120.205 69.32-120.205 41.3 0 62.688 39.087 65.636 120.205H2191.46z"/></g></g></svg>
<svg class="h-8 mr-4 fill-current text-gray-500 transition-color duration-150 hover:text-gray-600 cursor-pointer" viewBox="0 0 2350 2315" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1"></g><g><path d="M1175 0C525.8 0 0 525.8 0 1175c0 552.2 378.9 1010.5 890.1 1139.7-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4c-79.3 0-152.8-35.2-185.1-99.9-38.2-70.5-44.1-179.2-141-246.8-29.4-23.5-5.9-47 26.4-44.1 61.7 17.6 111.6 58.8 158.6 120.4 47 61.7 67.6 76.4 155.7 76.4 41.1 0 105.7-2.9 164.5-11.8 32.3-82.3 88.1-155.7 155.7-190.9-393.6-47-581.6-240.9-581.6-505.3 0-114.6 49.9-223.3 132.2-317.3-26.4-91.1-61.7-279.1 11.8-352.5 176.3 0 282 114.6 308.4 143.9 88.1-29.4 185.1-47 284.9-47 102.8 0 196.8 17.6 284.9 47 26.4-29.4 132.2-143.9 308.4-143.9 70.5 70.5 38.2 261.4 8.8 352.5 82.3 91.1 129.3 202.7 129.3 317.3 0 264.4-185.1 458.3-575.7 499.4 108.7 55.8 185.1 214.4 185.1 331.9V2256c0 8.8-2.9 17.6-2.9 26.4C2021 2123.8 2350 1689.1 2350 1175 2350 525.8 1824.2 0 1175 0z"/></g></g></svg>
<svg class="h-8 mr-4 fill-current text-gray-500 transition-color duration-150 hover:text-gray-600 cursor-pointer" viewBox="0 0 2500 2158" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1"><g transform="translate(-.157)"><path d="M2498.932 499.093c-11.204 242.78-181.152 575.201-509.837 997.268-339.895 440.74-627.499 661.11-862.808 661.11-145.67 0-268.924-134.462-369.776-403.39l-201.693-739.547C480.115 745.61 399.81 611.145 313.904 611.145c-18.675 0-84.04 39.219-196.095 117.656L.155 577.53a31955.67 31955.67 0 00364.171-324.952C528.669 110.644 651.928 35.944 734.1 28.472c194.224-18.675 313.746 113.921 358.567 397.786 48.556 306.277 82.172 496.767 100.845 571.47 56.027 253.986 117.656 380.98 184.887 380.98 52.29 0 130.73-82.172 235.311-246.516 104.584-164.345 160.609-289.47 168.078-375.376 14.94-141.934-41.085-212.9-168.078-212.9-59.762 0-121.392 13.075-184.887 39.219C1552.082 183.48 1787.393-10.745 2134.757.462c257.721 7.471 379.113 173.683 364.17 498.635l.005-.004z"/></g></g></svg>
<svg class="h-8 mr-4 fill-current text-gray-500 transition-color duration-150 hover:text-gray-600 cursor-pointer" viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1"><g transform="translate(-401 -701)"><g transform="translate(-293 -236)"><g transform="translate(463 909)"><g transform="translate(0 28)"><g transform="translate(229.885)"><path d="M242.088 0c-36.478.027-66 29.582-65.973 66-.027 36.418 29.522 65.973 66 66h66V66.027C308.142 29.608 278.593.054 242.088 0c.027 0 .027 0 0 0zm.23 175H66.912c-36.365.027-65.824 29.576-65.797 65.987-.054 36.41 29.405 65.96 65.77 66.013h175.433c36.366-.027 65.824-29.576 65.797-65.987.027-36.437-29.431-65.986-65.797-66.013zM681.115 240.987c.027-36.411-29.522-65.96-66-65.987-36.478.027-66.027 29.576-66 65.987V307h66c36.478-.027 66.027-29.576 66-66.013zm-175 .214V65.772C506.142 29.506 476.614.054 440.13 0c-36.486.027-66.04 29.48-66.014 65.772v175.429c-.054 36.293 29.501 65.745 65.987 65.799 36.485-.027 66.04-29.48 66.013-65.8zM440.115 680c36.478-.027 66.027-29.582 66-66 .027-36.418-29.522-65.973-66-66h-66v66c-.027 36.392 29.522 65.946 66 66zm-.23-175h175.433c36.366-.027 65.824-29.576 65.797-65.987.054-36.41-29.404-65.96-65.77-66.013H439.912c-36.366.027-65.824 29.576-65.797 65.987-.027 36.437 29.405 65.986 65.77 66.013zM1.115 439c-.027 36.418 29.522 65.973 66 66 36.478-.027 66.027-29.582 66-66v-66h-66c-36.478.027-66.027 29.582-66 66zm175-.249v175.444c-.054 36.296 29.501 65.751 65.987 65.805 36.485-.027 66.04-29.482 66.013-65.778V438.805c.054-36.296-29.501-65.751-65.986-65.805-36.513 0-66.04 29.455-66.014 65.751 0 0 0 .027 0 0z"/></g></g></g></g></g></g></svg>
<svg class="h-8 mr-4 fill-current text-gray-500 transition-color duration-150 hover:text-gray-600 cursor-pointer" viewBox="0 0 1681 417" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1"><g><path d="M1621.33 306.03l.578.008c34.43 0 58.659-23.855 58.924-57.992.126-16.904-4.757-32.38-13.753-43.558-9.512-11.834-22.829-18.142-38.516-18.267h-.313c-21.17 0-40.83 16.062-60.1 49.112l-1.533 2.638-.984-2.875c-4.866-14.163-9.2-25.963-11.791-33.025-1.817-4.925-2.617-7.138-2.809-7.854-.925-3.575-3.979-5.796-7.987-5.796-2.463 0-5.08.837-7.554 2.412-2.455 1.563-3.825 3.471-4.317 6.021l-.125.383c-19.287 60.155-35.188 89.359-48.662 89.359-1.959-.017-3.492-.654-4.634-1.93-3.529-3.9-2.662-13.174-1.462-26.016.879-9.433 1.883-20.112 1.466-31.446-.791-21.787-12.716-34.87-31.879-35.012-24.358-.009-40.141 25.933-47.412 41.395l-2.171 4.609-.48-5.083c-1.816-19.134-8.237-41.988-28.512-42.138-23.65 0-41.667 27.75-52.658 51.042l-2.946 6.241.292-6.891c1.304-31.063 2.375-49.404 3.187-54.492.8-5.104.38-8.53-1.292-10.492-1.583-1.837-4.566-2.516-8.941-2.241-7.571.479-11.442 5.087-17.271 20.533-9.575 25.367-33.93 84.383-53.375 84.383-3.858-.029-6.912-1.341-9.15-3.912-8.154-9.346-4.892-34.621-.38-69.592l.342-2.646c2.138-16.558-1.504-20.091-10.5-21.745a15.487 15.487 0 00-2.733-.267c-7.183 0-10.541 6.879-17.25 25.996-11.937 34.016-27.291 69.791-45.241 69.791-.659 0-1.305-.05-1.967-.154-9.513-1.62-9.304-15.729-9.042-33.608.134-9.667.296-20.63-1.191-30.525-2.684-17.758-13.142-28.846-27.313-28.958-28.267 0-47.33 36.2-56.196 57.783l-2.008 4.883-.671-5.242a486.444 486.444 0 01-3.43-41.729l-.024-.52.32-.409c52.905-66.596 76.647-114.654 76.963-155.829.204-26.304-11.933-42.104-32.462-42.267-15.013 0-50.705 12.505-63.109 128.321a669.633 669.633 0 00-3.75 65.45l-.008.434-.246.35c-24.204 35.033-75.862 95.295-126.437 95.295-45.696 0-82.154-36.97-82.154-102.229 0-87.483 61.92-141.196 108.52-141.196h.388c10.125.075 18.808 2.904 25.108 8.18 6.542 5.474 9.971 13.15 9.9 22.191-.091 12.08-4.029 18.288-7.833 24.284-.971 1.545-1.95 3.079-2.842 4.704-.9 1.641-1.72 4.02-.525 6.058 1.225 2.087 4.354 3.4 8.167 3.43 11.091 0 27.866-16.06 28.05-40.25.192-25.322-21.138-51.413-59.192-51.413-57.587 0-135.15 63.266-135.15 165.8 0 72.529 45.475 122.658 107.075 122.658 43.713 0 86.954-31.3 125.25-83.58l2.346-3.166.167 3.934c.812 19.137 2.2 34.212 3.212 45.224.654 7.08 1.13 12.192 1.113 15.013-.05 6.18.954 10.48 3.091 13.112 2.13 2.638 5.513 3.884 10.646 3.917 8.6 0 10.325-5.862 13.73-20.329l.978-4.13c4.234-17.528 19.867-74.745 43.38-74.745 3.841.037 6.804 1.17 8.908 3.4 5.192 5.508 4.625 16.813 3.967 29.908-.417 8.171-.834 16.609-.017 24.83 2.213 22.191 11.796 33.045 29.292 33.17 17.966.009 36.716-19.346 46.612-37.329l1.867-3.387.729 3.808c1.825 9.625 9.992 41.217 35.563 41.217 23.175 0 43.058-24.404 64.85-74.634l2.854-6.558-.175 7.154c-.463 19.034-1.492 42.275-1.5 60.246-.009 13.9 1.396 19.204 7.82 19.204l1.459.067c6.162 0 10.346-3.68 12.433-10.954 16.4-57.155 30.571-83.771 44.613-83.771 13.75.104 15.037 25.246 16.141 69.67l.075 3.117c.334 15.538.896 22.413 10.546 22.484 7.325 0 9.146-5.755 12.934-19.921.725-2.7 1.508-5.663 2.437-8.863 13.242-45.937 24.217-64.679 37.883-64.679 11.7.088 12.35 12.15 12.567 16.113.45 8.487-.425 17.375-1.267 25.954-.787 7.975-1.596 16.225-1.291 23.887.716 17.967 10.55 27.938 27.7 28.067 22.258 0 42.35-26.033 59.946-77.358l1.22-3.575 1.396 3.52c3.196 8.067 7.354 18.988 11.2 32.017l.146.496-.213.47c-17.041 37.834-29.062 79.976-29.233 102.493-.229 29.654 13.188 48.925 34.184 49.087h.362c11.42 0 38.042-4.587 38.558-47.02.213-17.392-3.9-41.984-12.204-73.105l-.954-3.563 3.063 2.042c10.637 7.038 22.591 10.8 34.616 10.9zm-573.697-143.913c.475-10.634 1.371-20.988 2.642-30.78 8.242-63.091 25.433-107.15 41.83-107.15h.074c7.817.059 11.725 5.971 11.646 17.563-.225 28.487-18.275 69.27-53.642 121.217l-2.766 4.066.216-4.916zm522.804 226.82c-2.608 3.476-6.241 5.238-10.791 5.238-5.225-.046-9.15-1.863-11.821-5.433-7.483-9.996-5.375-33.496 6.833-76.15a370.41 370.41 0 014.717-15.234l1.417-4.254 1.245 4.304c14.221 49.238 17.046 80.03 8.4 91.53zm4.426-126.145l-.259-.471-.516-1.638.241-.487c16.217-33.417 34.8-52.571 50.967-52.571h.167c18.258.137 30.883 16.57 30.708 39.942-.121 15.6-7 24.583-12.742 29.37-6.554 5.467-15.283 8.592-23.95 8.592-21.367-.162-36.033-12.458-44.617-22.737zM540.55 300.504c25.033-2 44.892-36.046 52.267-50.596l1.9-3.75.72 4.142c3.542 20.458 14.671 54.833 49.484 55.108h.291c15.059 0 32.142-9.212 49.409-26.633l1.267-1.28.92 1.538c11.625 19.442 27.217 29.771 43.817 28.921 24.438-1.27 39.27-18.587 40.575-30.617.333-3.066-.475-5.954-2.23-7.9-2.195-2.45-5.387-2.733-7.728-.487l-1.121 1.058c-5.688 5.463-16.288 15.642-27.838 16.242-14.141.692-24.6-7.762-31.358-25.212l-.28-.734.476-.616c38.887-50.863 66.175-128.471 63.479-180.525-1.242-24.092-8.246-52.813-34.558-52.813l-1.963.05c-10.079.52-19.246 5.325-27.241 14.27-24.413 27.313-37.188 94.538-32.55 171.267.958 15.942 3.729 30.842 8.225 44.271l.254.754-.513.609c-14.429 16.862-28.667 26.15-40.091 26.15-27.488 0-26.563-46.092-24.392-84.309.47-8.241 1.167-13.491-1.271-16.475-1.742-2.137-4.658-3.191-8.908-3.225l-.496-.004c-9.784 0-11.83 2.013-16.833 16.53-10.413 30.158-30.967 80.77-51.642 80.77-5.73-.054-10.104-2.008-13.1-5.825-10.03-12.8-2.413-44.725 3.704-70.387 1.1-4.613 2.154-9.042 3.058-13.142 1.338-6.083.93-10.52-1.22-13.208-2.159-2.68-6.463-3.763-12.142-3.313-8.854.709-14.517 4.417-17.254 21.254l-.55 3.5-2.059-2.491c-3.866-5.708-11.404-12.508-25.4-12.508-1.225 0-2.495.05-3.808.154-14.933 1.225-31.938 11.629-44.383 27.158-14.53 18.13-21.471 41.075-19.538 64.62.1 1.247.28 2.442.459 3.63l.1.654-.45.496c-8.692 9.467-17.55 14.275-26.326 14.275-13.545-.1-21.316-10.167-21.316-26.938 0-28.225 19.129-113.32 19.129-144.125 0-32.783-14.608-50.629-39.975-50.825h-.383c-37.042 0-65.909 42.03-93.534 128.505a1413.034 1413.034 0 00-7.641 24.975l-3.88 13.004 1.146-13.517a1682.328 1682.328 0 005.238-87.112c1.375-41.792-4.271-68.688-17.275-82.221-7.013-7.3-16.288-10.896-28.371-10.988h-.308c-45.325 0-67.038 76.442-82.85 130.38-4.771 16.283-14.175 53.012-20.454 78.12l3.72-6.046c2.788-31.616 10.867-110.812 10.338-153.779-.575-46.091-15.917-66.754-49.771-67.012h-.417c-18.083 0-30.629 8.987-37.966 16.525C7.358 52.92.017 70.604.425 85.875c.25 9.283 5.946 17.546 10.262 17.546 2.813 0 4.371-3.754 5.046-5.992 10.475-34.62 24.03-51.454 41.421-51.454 7.213.054 12.583 2.18 16.6 6.5 13.592 14.58 11.117 53.946 6.638 125.417-1.45 23.033-3.084 49.129-4.463 78.816-.24 4.899-.527 9.795-.858 14.688-1.321 20.612-2.371 36.904 5.45 38.116 10.175 1.588 16.796-2.545 20.187-12.612 5.025-14.942 16.296-55.78 38.105-130.4 20.925-71.608 36.733-97.662 56.958-97.662 23.367 0 25.108 40.12 20.825 124.787-.913 17.95-2.133 38.28-3.071 60.4-.13 3.108-.275 6.125-.425 9.025-.9 18.32-1.608 32.767 3.625 38.308 1.633 1.725 3.85 2.58 6.787 2.596 10.13 0 13.175-8.879 18.221-23.6.892-2.596 1.838-5.37 2.892-8.27 34.708-95.746 60.37-178.817 94.817-178.817 10.329 0 18.37 8.391 18.37 24.758 0 37.78-18.475 110.775-18.475 147.792 0 13.262 3.817 25.162 11.026 33.529 7.4 8.591 17.754 13.166 29.941 13.27h.267c11.525 0 23.529-5.6 35.696-16.641l1.141-1.033.917 1.237c8.012 10.767 20.938 16.554 34.896 15.48 21.408-1.667 39.37-20.73 46.054-38.705l1.308-3.517 1.304 3.517c4.967 13.338 15.709 29.413 38.663 27.55zM737.817 50.33l.366-.008c2.446 0 4.596 1.225 6.38 3.65 8.5 11.492 8.629 53.437-5.992 101.162-8.354 27.275-19.592 53.042-32.484 74.504l-2.058 3.417-.525-3.954c-1.517-11.542-2.267-23.558-2.792-33.783-3.729-72.138 18.092-144 37.105-144.988zM500.283 218.925c-7.491 30.146-21.858 66.537-47.762 68.62l-2.108.088c-10.746 0-16.771-7.033-17.909-20.916-1.425-17.367 6.063-37.704 19.071-51.825 8.28-8.992 17.62-13.942 26.3-13.942h.175c10.954.083 18.633 8.88 22.162 17.083l.188.425-.117.467zm120.146-110.52c-9.562 0-17.283 7.532-17.358 16.795-.075 9.33 7.6 16.98 17.1 17.05l.137 1.387v-1.387c9.425 0 17.142-7.53 17.217-16.787.075-9.334-7.596-16.984-17.096-17.059zm601.221 0c-9.563 0-17.28 7.532-17.358 16.795-.075 9.33 7.596 16.98 17.1 17.05l.133 1.387v-1.387c9.433 0 17.15-7.53 17.225-16.787.067-9.334-7.6-16.984-17.1-17.059z"/></g></g></svg>
</div>
</div>
<svg class="absolute left-0 max-w-md -ml-64 mt-24 left-svg" viewBox="0 0 423 423" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="100%" y1="0%" x2="4.48%" y2="0%" id="linearGradient-1"><stop stop-color="#5C54DB" offset="0%"/><stop stop-color="#6A82E7" offset="100%"/></linearGradient><filter x="-9.3%" y="-6.7%" width="118.7%" height="118.7%" filterUnits="objectBoundingBox" id="filter-3"><feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" in="shadowBlurOuter1"/></filter><rect id="path-2" x="63" y="504" width="300" height="300" rx="40"/></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity=".9"><g id="Desktop-HD" transform="translate(-39 -531)"><g id="Hero" transform="translate(43 83)"><g id="Rectangle-6" transform="rotate(45 213 654)"><use fill="#000" filter="url(#filter-3)" xlink:href="#path-2"/><use fill="url(#linearGradient-1)" xlink:href="#path-2"/></g></g></g></g></svg>
</div>
<div class="flex flex-col items-end justify-center h-full w-full lg:w-1/2 ms:pl-10 relative z-50">
<div class="relative lg:absolute max-w-4xl xl:max-w-6xl left-0 container lg:w-screen w-full">
<img src="https://cdn.devdojo.com/images/september2020/macbook-mockup.png" class="mt-20 lg:mt-24 xl:mt-40 w-full h-auto mb-20 lg:mb-0 lg:h-full ml-0 lg:-ml-12 h-auto">
</div>
</div>
</div>
</div>
<!-- HERO SECTION END -->
<!-- BEGIN FEATURES SECTION -->
<div id="features" class="w-full relative py-10 md:py-16 lg:py-24 xl:py-40 border-t border-gray-200 px-8 xl:px-0">
<div class="container max-w-6xl mx-auto h-full flex flex-col justify-between items-center">
<h2 class="text-indigo-500 uppercase text-base font-medium tracking-tight my-5">Our Features</h2>
<h3 class="font-black text-3xl mt-2 sm:mt-0 px-5 sm:px-0 sm:text-6xl max-w-2xl leading-tight text-gray-900 text-center">Built and Designed with you in Mind</h3>
<div class="flex flex-col lg:flex-row w-full mt-0 sm:mt-10 lg:mt-20">
<div class="w-full max-w-md mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3 p-4">
<div class="flex flex-col justify-center items-center w-full h-full mr-5 p-20 rounded-lg relative">
<svg class="w-full h-full absolute fill-current text-gray-100" viewBox="0 0 377 340" xmlns="http://www.w3.org/2000/svg"><g><g><path d="M342.8 3.7c24.7 14 18.1 75 22.1 124s18.6 85.8 8.7 114.2c-9.9 28.4-44.4 48.3-76.4 62.4-32 14.1-61.6 22.4-95.9 28.9-34.3 6.5-73.3 11.1-95.5-6.2-22.2-17.2-27.6-56.5-47.2-96C38.9 191.4 5 151.5.9 108.2-3.1 64.8 22.7 18 61.8 8.7c39.2-9.2 91.7 19 146 16.6 54.2-2.4 110.3-35.6 135-21.6z"/></g></g></svg>
<!-- FEATURE Icon 1 -->
<svg class="w-20 h-20 relative" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1TriangleIcon1"><stop stop-color="#9C09DB" offset="0%"/><stop stop-color="#1C0FD7" offset="100%"/></linearGradient><filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox" id="filter-3TriangleIcon1"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.141176471 0 0 0 0 0.031372549 0 0 0 0 0.501960784 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z" id="path-2TriangleIcon1"/></defs><g id="Page-1TriangleIcon1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Desktop-HDTriangleIcon1" transform="translate(-291 -1278)"><g id="FeaturesTriangleIcon1" transform="translate(170 915)"><g id="Group-9TriangleIcon1" transform="translate(0 365)"><g id="Group-8TriangleIcon1" transform="translate(125)"><g id="Rectangle-9TriangleIcon1"><use fill="#000" filter="url(#filter-3TriangleIcon1)" xlink:href="#path-2TriangleIcon1"/><use fill="url(#linearGradient-1TriangleIcon1)" xlink:href="#path-2TriangleIcon1"/></g><g id="playTriangleIcon1" transform="translate(18 15)" fill="#FFF" fill-rule="nonzero"><path d="M9.432 2.023l8.919 14.879a1.05 1.05 0 01-.384 1.452 1.097 1.097 0 01-.548.146H-.42A1.07 1.07 0 01-1.5 17.44c0-.19.052-.375.15-.538L7.567 2.023a1.092 1.092 0 011.864 0z" id="TriangleIcon1" transform="rotate(90 8.5 10)"/></g></g></g></g></g></g></svg>
<h4 class="font-bold text-lg mt-6 relative">Automated Tools</h4>
<p class="text-base text-gray-600 text-center mt-2 relative">Automate your workflow with these top of the line marketing tools.</p>
<a href="#_" class="flex underline text-indigo-500 font-medium text-sm mt-2 relative">Learn More</a>
</div>
</div>
<div class="w-full max-w-md mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3 p-4">
<div class="flex flex-col justify-center items-center w-full h-full mr-5 p-20 rounded-lg relative">
<svg class="w-full h-full absolute fill-current text-gray-100" viewBox="0 0 358 372" xmlns="http://www.w3.org/2000/svg"><g><g><path d="M315.7 6.5c30.2 15.1 42.6 61.8 41.5 102.5-1.1 40.6-15.7 75.2-24.3 114.8-8.7 39.7-11.3 84.3-34.3 107.2-23 22.9-66.3 23.9-114.5 30.7-48.2 6.7-101.3 19.1-123.2-4.1-21.8-23.2-12.5-82.1-21.6-130.2C30.2 179.3 2.6 141.9.7 102c-2-39.9 21.7-82.2 57.4-95.6 35.7-13.5 83.3 2.1 131.2 1.7 47.9-.4 96.1-16.8 126.4-1.6z"/></g></g></svg>
<!-- FEATURE Icon 2 -->
<svg class="w-20 h-20 relative" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon2"><stop stop-color="#F2C314" offset="0%"/><stop stop-color="#FC3832" offset="100%"/></linearGradient><filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox" id="filter-3Icon2"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.501960784 0 0 0 0 0.125490196 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z" id="path-2Icon2"/></defs><g id="Page-1Icon2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Desktop-HDIcon2" transform="translate(-691 -1278)"><g id="FeaturesIcon2" transform="translate(170 915)"><g id="Group-9-CopyIcon2" transform="translate(400 365)"><g id="Group-8Icon2" transform="translate(125)"><g id="Rectangle-9Icon2"><use fill="#000" filter="url(#filter-3Icon2)" xlink:href="#path-2Icon2"/><use fill="url(#linearGradient-1Icon2)" xlink:href="#path-2Icon2"/></g><g id="machine-learningIcon2" transform="translate(14 12)" fill="#FFF" fill-rule="nonzero"><path d="M10.554 21.418v-2.68c-1.1-.204-1.932-1.143-1.932-2.271 0-.468.143-.903.388-1.267l-2.32-1.662L4.367 15.2a2.254 2.254 0 01-.005 2.541l5.28 4.05c.268-.182.577-.311.911-.373zm.892 0c.334.062.643.191.912.373l5.28-4.05a2.254 2.254 0 01-.006-2.54l-2.321-1.663L12.99 15.2c.245.364.388.8.388 1.267 0 1.128-.832 2.067-1.932 2.27v2.681zm1.538.997c.25.365.394.803.394 1.274C13.378 24.965 12.314 26 11 26s-2.378-1.035-2.378-2.311c0-.471.145-.91.394-1.274l-5.28-4.05c-.385.26-.853.413-1.358.413C1.065 18.778 0 17.743 0 16.467c0-1.129.832-2.068 1.932-2.27v-2.393C.832 11.6 0 10.662 0 9.534c0-1.277 1.065-2.312 2.378-2.312.505 0 .973.153 1.358.414l5.28-4.05a2.254 2.254 0 01-.394-1.275C8.622 1.035 9.686 0 11 0s2.378 1.035 2.378 2.311c0 .471-.145.91-.394 1.274l5.28 4.05c.385-.26.853-.413 1.358-.413C20.935 7.222 22 8.257 22 9.533c0 1.129-.832 2.068-1.932 2.27v2.393c1.1.203 1.932 1.142 1.932 2.27 0 1.277-1.065 2.312-2.378 2.312-.505 0-.973-.153-1.358-.414l-5.28 4.05zm-9.243-7.843L5.937 13l-2.196-1.572c-.27.183-.58.314-.917.376v2.392c.336.062.647.193.917.376zm.627-3.772l2.321 1.662L9.01 10.8a2.254 2.254 0 01-.388-1.267c0-1.128.832-2.067 1.932-2.27V4.582a2.403 2.403 0 01-.912-.373l-5.28 4.05a2.254 2.254 0 01.006 2.54zm13.89 3.772c.27-.183.582-.314.918-.376v-2.392a2.403 2.403 0 01-.917-.376L16.063 13l2.196 1.572zm-.62-6.313l-5.28-4.05a2.403 2.403 0 01-.912.373v2.68c1.1.204 1.932 1.143 1.932 2.271 0 .468-.143.903-.388 1.267l2.32 1.662 2.322-1.662a2.254 2.254 0 01.005-2.541zm-8 6.313A2.415 2.415 0 0111 14.156c.507 0 .977.154 1.363.416L14.559 13l-2.196-1.572a2.415 2.415 0 01-1.363.416c-.507 0-.977-.154-1.363-.416L7.441 13l2.196 1.572zM11 10.978c.821 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.486.647-1.486 1.444c0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445c0 .797.665 1.444 1.486 1.444zm8.622-6.933c.82 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.487.647-1.487 1.444c0 .798.666 1.445 1.487 1.445zm0 6.933c.82 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.487.647-1.487 1.445c0 .797.666 1.444 1.487 1.444zM2.378 10.978c.821 0 1.487-.647 1.487-1.445 0-.797-.666-1.444-1.487-1.444-.82 0-1.486.647-1.486 1.444 0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.487-.647 1.487-1.444 0-.798-.666-1.445-1.487-1.445-.82 0-1.486.647-1.486 1.445 0 .797.665 1.444 1.486 1.444zM11 25.133c.821 0 1.486-.646 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445.665 1.444 1.486 1.444zm0-21.377c.821 0 1.486-.647 1.486-1.445S11.821.867 11 .867s-1.486.646-1.486 1.444c0 .798.665 1.445 1.486 1.445z" id="ShapeIcon2"/></g></g></g></g></g></g></svg>
<h4 class="font-bold text-lg mt-6 relative">Machine Learning</h4>
<p class="text-base text-gray-600 text-center mt-2 relative">Your Marketing tools will learn how to better convert and sell.</p>
<a href="#_" class="flex underline text-indigo-500 font-medium text-sm mt-2 relative">Learn More</a>
</div>
</div>
<div class="w-full max-w-md mx-auto mb-16 lg:mb-0 lg:w-1/3 p-4">
<div class="flex flex-col justify-center items-center w-full h-full mr-5 p-20 rounded-lg relative">
<svg class="w-full h-full absolute fill-current text-gray-100" viewBox="0 0 378 410" xmlns="http://www.w3.org/2000/svg"><g><g><path d="M305.9 14.4c23.8 24.6 16.3 84.9 26.6 135.1 10.4 50.2 38.6 90.3 43.7 137.8 5.1 47.5-12.8 102.4-50.7 117.4-37.9 15.1-95.7-9.8-151.7-12.2-56.1-2.5-110.3 17.6-130-3.4-19.7-20.9-4.7-82.9-11.5-131.2C25.5 209.5-3 174.7 1.2 147c4.2-27.7 41-48.3 75-69.6C110.1 56.1 141 34.1 184 17.5c43.1-16.6 98.1-27.7 121.9-3.1z"/></g></g></svg>
<!-- FEATURE Icon 3 -->
<svg class="relative h-20 w-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon3"><stop stop-color="#32FBFC" offset="0%"/><stop stop-color="#3214F2" offset="100%"/></linearGradient><filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox" id="filter-3Icon3"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.031372549 0 0 0 0 0.149019608 0 0 0 0 0.658823529 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter><path d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z" id="path-2Icon3"/></defs><g id="Page-1Icon3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Desktop-HDIcon3" transform="translate(-1091 -1278)"><g id="FeaturesIcon3" transform="translate(170 915)"><g id="Group-9-Copy-2Icon3" transform="translate(800 365)"><g id="Group-8Icon3" transform="translate(125)"><g id="Rectangle-9Icon3"><use fill="#000" filter="url(#filter-3Icon3)" xlink:href="#path-2Icon3"/><use fill="url(#linearGradient-1Icon3)" xlink:href="#path-2Icon3"/></g><g id="smart-notificationsIcon3" transform="translate(15 11)" fill="#FFF" fill-rule="nonzero"><path d="M12.519 3.243a6.808 6.808 0 00-.187 1.298h-8.44a2.595 2.595 0 00-2.595 2.594v12.973a2.595 2.595 0 002.595 2.595h12.973a2.595 2.595 0 002.594-2.595v-8.44c.445-.02.88-.084 1.298-.187v8.627A3.892 3.892 0 0116.865 24H3.892A3.892 3.892 0 010 20.108V7.135a3.892 3.892 0 013.892-3.892h8.627zm6.616 6.487a4.865 4.865 0 110-9.73 4.865 4.865 0 010 9.73z" id="IconIcon3"/></g></g></g></g></g></g></svg>
<h4 class="font-bold text-lg mt-6 relative">Smart Notifications</h4>
<p class="text-base text-gray-600 text-center mt-2 relative">Our smart notifications will notify you when users convert.</p>
<a href="#_" class="flex underline text-indigo-500 font-medium text-sm mt-2 relative">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<!-- END FEATURES SECTION -->
<!-- Pricing Section -->
<div class="bg-white relative py-10 md:py-16 lg:py-24 xl:py-40 border-t border-gray-200 px-8 xl:px-0">
<div id="pricing" class="container max-w-6xl mx-auto h-full flex flex-col items-center">
<h2 class="text-indigo-500 uppercase text-base font-medium tracking-tight my-5">Our Pricing</h2>
<h3 class="font-black text-2xl mt-2 sm:mt-0 px-5 sm:px-0 sm:text-6xl max-w-2xl leading-tight text-gray-900 text-center w-full px-8 md:px-0">Simple, Transparent Pricing for Everyone</h3>
<div class="max-w-full md:max-w-6xl mx-auto sm:px-8">
<!-- Basic Pricing -->
<div class="relative block flex flex-col sm:flex-row items-center">
<div class="w-11/12 max-w-sm sm:w-3/5 lg:w-1/3 sm:my-5 my-8 relative z-0 rounded-lg md:-mr-4 border border-gray-200">
<div class="bg-white text-black rounded-lg border-t border-gray-100 shadow-sm overflow-hidden">
<div class="block text-left text-sm sm:text-md max-w-sm mx-auto mt-5 text-black px-8 lg:px-6">
<h3 class="text-lg font-bold uppercase p-3 text-center tracking-wide">Basic<span class="font-light ml-2">Plan</span></h3>
<h4 class="text-4xl text-gray-900 text-center pb-6 font-bold flex items-center justify-center"><span class="text-lg text-gray-700 -ml-2 mr-1">$</span>48</h4>
<p class="text-gray-600 text-sm">In our basic plan you can take advantage of all these features below.</p>
</div>
<div class="flex flex-wrap mt-8 px-6">
<ul>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">Awesome Feature</span>
</li>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">And Another Cool Feature</span>
</li>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">One More Feature</span>
</li>
</ul>
</div>
<div class="block flex items-center p-8 uppercase">
<a href="#_" class="mt-3 text-lg font-semibold bg-gray-900 w-full text-white rounded px-6 py-4 block shadow-sm hover:bg-green-600 text-center">Select This Plan</a>
</div>
</div>
</div>
<!-- Pro Pricing -->
<div class="w-full max-w-md sm:w-2/3 lg:w-1/3 sm:my-5 my-8 relative z-10 bg-white rounded-lg shadow-lg">
<div class="text-sm leading-none rounded-t bg-indigo-500 text-white font-semibold uppercase py-4 text-center tracking-wide">Most Popular</div>
<div class="block text-left text-sm sm:text-md max-w-sm mx-auto mt-5 text-black px-8 lg:px-6">
<h3 class="text-lg font-bold uppercase p-3 pb-1 text-center tracking-wide">Pro<span class="font-light ml-2">Plan</span></h3>
<h4 class="text-5xl text-gray-900 text-center pb-6 font-bold flex items-center justify-center"><span class="text-lg text-gray-700 -ml-2 mr-1">$</span>98</h4>
<p class="text-gray-600 text-sm">Our most popular package is the Pro Plan which gives you access to the following:</p>
</div>
<div class="flex pl-12 justify-start sm:justify-start mt-8">
<ul>
<li class="flex items-center">
<div class="rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">Really Cool Features</span>
</li>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">Another Cool Feature</span>
</li>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">And One More</span>
</li>
</ul>
</div>
<div class="block flex items-center p-8 uppercase">
<a href="#_" class="mt-3 text-lg font-semibold bg-gray-900 w-full text-white rounded px-6 py-4 block shadow-sm hover:bg-indigo-600 text-center">Select This Plan</a>
</div>
</div>
<!-- Premium Pricing -->
<div class="w-11/12 max-w-sm sm:w-3/5 lg:w-1/3 sm:my-5 my-8 relative z-0 rounded-lg shadow-lg md:-ml-4">
<div class="bg-white text-black rounded-lg shadow-inner shadow-lg overflow-hidden">
<div class="block text-left text-sm sm:text-md max-w-sm mx-auto mt-5 text-black px-8 lg:px-8">
<h3 class="text-lg font-bold uppercase p-3 pb-1 text-center tracking-wide">Premium<span class="font-light ml-2">Plan</span></h3>
<h4 class="text-4xl text-gray-900 text-center pb-6 font-bold flex items-center justify-center"><span class="text-lg text-gray-700 -ml-2 mr-1">$</span>78</h4>
<p class="text-gray-600 text-sm pl-2">With our premium plan you can take advantage of all the following features:</p>
</div>
<div class="flex flex-wrap mt-8 px-8">
<ul>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">Totally Tubular Feature</span>
</li>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">Super Cool Feature</span>
</li>
<li class="flex items-center">
<div class=" rounded-full p-2 fill-current text-green-500">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="text-gray-700 text-lg ml-3">And One More</span>
</li>
</ul>
</div>
<div class="block flex items-center p-8 uppercase">
<a href="#_" class="mt-3 text-lg font-semibold bg-gray-900 w-full text-white rounded px-6 py-4 block shadow-sm hover:bg-green-600 text-center">Select This Plan</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Pricing Section -->
<!-- Start Testimonials -->
<div id="testimonials" class="flex items-center justify-center w-full py-10 md:py-16 lg:py-24 xl:py-40 border-t border-gray-200 px-8 xl:px-0">
<div class="max-w-6xl mx-auto">
<div class="flex-col items-center ">
<div class="w-full flex flex-col justify-center text-center items-center h-full pr-8 max-w-2xl mx-auto">
<p class="text-indigo-500 uppercase text-base font-medium tracking-tight my-5">Our customers love our product</p>
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">Testimonials</h2>
<p class="text-gray-500 font-medium text-xl my-6">Don't just take our word for it, read from our extensive list of case studies and customer testimonials.</p>
</div>
<div class="mx-auto flex flex-col xl:flex-row max-w-2xl xl:max-w-full items-center justify-center py-8">
<div class="w-full xl:w-1/2 xl:pr-8">
<blockquote class="w-full flex flex-col-reverse md:flex-row text-center md:text-left items-center justify-between p-6 col-span-1 bg-gray-100 rounded-lg hover:bg-white hover:shadow transition-all duration-200 ease">
<div class="flex flex-col pr-8">
<div class="pl-12 relative">
<svg class="w-10 h-10 fill-current text-indigo-500 absolute left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" /></svg>
<p class="text-base text-gray-600 mt-2">I'm loving these templates! Very nice features and layouts.</p>
</div>
<h3 class="pl-12 text-gray-800 text-base mt-3 leading-5 font-medium truncate">Sandra Walton <span class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1">- CEO SomeCompany</span></h3>
<p class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1"></p>
</div>
<img class="w-24 h-24 bg-gray-300 rounded-full flex-shrink-0 object-cover mb-5 md:mb-0" src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2694&q=80" alt="">
</blockquote>
<blockquote class="w-full flex flex-col-reverse md:flex-row text-center md:text-left items-center justify-between p-6 col-span-1 bg-gray-100 rounded-lg hover:bg-white hover:shadow transition-all duration-200 ease mt-16 mb-16 xl:mb-0">
<div class="flex flex-col pr-10">
<div class="pl-12 relative">
<svg class="w-10 h-10 fill-current text-indigo-500 absolute left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" /></svg>
<p class="text-base text-gray-600 mt-2">Really digging this service. Now I can quickly bootstrap any project.</p>
</div>
<h3 class="pl-12 text-gray-800 text-base mt-3 leading-5 font-medium truncate">Kenny Jones <span class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1">- CEO SomeCompany</span></h3>
<p class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1"></p>
</div>
<img class="w-24 h-24 bg-gray-300 rounded-full flex-shrink-0 object-cover mb-5 md:mb-0" src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="">
</blockquote>
</div>
<div class="w-full xl:w-1/2 xl:pl-8">
<blockquote class="w-full flex flex-col-reverse md:flex-row text-center md:text-left items-center justify-between p-6 col-span-1 bg-gray-100 rounded-lg hover:bg-white hover:shadow transition-all duration-200 ease">
<div class="flex flex-col pr-10">
<div class="pl-12 relative">
<svg class="w-10 h-10 fill-current text-indigo-500 absolute left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" /></svg>
<p class="text-base text-gray-600 mt-2">Extremely helpful in every single project we have released.</p>
</div>
<h3 class="pl-12 text-gray-800 text-base mt-3 leading-5 font-medium truncate">Mike Smith <span class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1">- CEO SomeCompany</span></h3>
<p class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1"></p>
</div>
<img class="w-24 h-24 bg-gray-300 rounded-full flex-shrink-0 object-cover mb-5 md:mb-0" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80" alt="">
</blockquote>
<blockquote class="w-full flex flex-col-reverse md:flex-row text-center md:text-left items-center justify-between p-6 col-span-1 bg-gray-100 rounded-lg hover:bg-white hover:shadow transition-all duration-200 ease mt-16">
<div class="flex flex-col pr-10">
<div class="pl-12 relative">
<svg class="w-10 h-10 fill-current text-indigo-500 absolute left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" /></svg>
<p class="text-base text-gray-600 mt-2">Finally a quick and easy system I can use for any type of project.</p>
</div>
<h3 class="pl-12 text-gray-800 text-base mt-3 leading-5 font-medium truncate">Molly Sanchez <span class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1">- CEO SomeCompany</span></h3>
<p class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1"></p>
</div>
<img class="w-24 h-24 bg-gray-300 rounded-full flex-shrink-0 object-cover mb-5 md:mb-0" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80" alt="">
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials-->
<footer class="bg-white border-t border-gray-200 text-white pt-12 pb-8 px-4">
<div class="mx-auto px-4 container overflow-hidden max-w-6xl flex flex-col lg:flex-row justify-between">
<div class="w-full lg:w-1/4 mr-4 text-left sm:text-center pl-12 sm:pl-0 lg:text-left">
<a href="/" class="block text-left sm:text-center lg:text-left flex justify-start sm:justify-center lg:justify-start">
<span class="flex items-start sm:items-center">
<svg class="h-6 w-auto fill-current text-gray-800" viewBox="0 0 194 116" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z"></path><path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path></g></svg>
</span>
</a>
<p class="text-gray-500 text-base mr-4 mt-6">Crafting the next-level of user experience and engagement.</p>
</div>
<div class="w-full lg:w-3/4 pl-10 block sm:flex text-sm mt-6 lg:mt-0">
<ul class="text-gray-700 list-none p-0 font-medium flex flex-col text-left w-full">
<li class="inline-block py-2 px-3 text-gray-800 uppercase font-bold tracking-wide mt-5 md:mt-0">Product</li>
<li><a href="#_" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Features</a></li>
<li><a href="#_" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Integrations</a></li>
<li><a href="#_" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Pricing</a></li>
<li><a href="#_" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">FAQ</a></li>
</ul>
<ul class="text-gray-700 list-none p-0 font-medium flex flex-col text-left w-full">
<li class="inline-block py-2 px-3 text-gray-800 uppercase font-bold tracking-wide mt-5 md:mt-0">Company</li>
<li><a href="#_" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Privacy</a>
</li>
<li><a href="#_" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Terms of Service</a></li>
</ul>
<ul class="text-gray-700 list-none p-0 font-medium flex flex-col text-left w-full">
<li class="inline-block py-2 px-3 text-gray-800 uppercase font-bold tracking-wide mt-5 md:mt-0">TailwindCSS</li>
<li><a href="https://devdojo.com/tailwindcss/components" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Tailwind Components</a></li>
<li><a href="https://devdojo.com/tailwindcss/templates" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Tailwind Templates</a></li>
<li><a href="https://devdojo.com/tails" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-600 no-underline">Tails</a></li>
</ul>
<div class="text-gray-700 flex flex-col w-full">
<div class="inline-block py-2 px-3 text-gray-800 uppercase font-bold mt-5 md:mt-0">Follow Us</div>
<div class="flex pl-4 justify-start mt-2">
<a class="block flex items-center text-gray-400 hover:text-gray-600 mr-6 no-underline" target="_blank" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg">
<path d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" /></svg>
</a>
<a class="block flex items-center text-gray-400 hover:text-gray-600 mr-6 no-underline" target="_blank" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg">
<path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" /></svg>
</a>
<a class="block flex items-center text-gray-400 hover:text-gray-600 no-underline" target="_blank" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></svg>
</a>
</div>
</div>
</div>
</div>
<div class="pt-4 mt-10 pt-6 text-gray-400 border-t border-gray-100 text-center">© 2020 Landmark. All rights reserved.</div>
</footer>
<!-- a little JS for the mobile nav button -->
<script>
if( document.getElementById('nav-mobile-btn') ){
document.getElementById('nav-mobile-btn').addEventListener('click', function(){
if( this.classList.contains('close') ){
document.getElementById('nav').classList.add('hidden');
this.classList.remove('close');
} else {
document.getElementById('nav').classList.remove('hidden');
this.classList.add('close');
}
});
}
</script>
</body>
</html>