-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
523 lines (448 loc) · 30.4 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
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
<!DOCTYPE html>
<html data-maglev-basic-theme data-maglev-first-section="nav_01" lang="en">
<head>
<title>Maglev is the only page builder for RoR application.</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="description" content="Maglev is the only page builder for Ruby on Rails application. Similar to the Wordpress Elementor plugin but in RoR. Live preview, i18n, SEO, ...etc." />
<meta property="og:title" content="Maglev is the only page builder for RoR application." />
<meta property="og:description" content="Maglev is the only page builder for Ruby on Rails application. Similar to the Wordpress Elementor plugin but in RoR. Live preview, i18n, SEO, ...etc." />
<meta property="og:image" content="/assets/maglev/10-screenshot_02-webp?1724145731" />
<script src="/vite/assets/theme-basic-1703a8dd.js?1724145731" crossorigin="anonymous" type="module"></script>
<link rel="preload" href="/assets/tailwind-4065c492061d61ed1b99f5e1544656dc17ee2ce3603272dc219dfa3ca5be3b01.css?1724145731" as="style" type="text/css" data-turbo-track="reload">
<link rel="stylesheet" href="/assets/tailwind-4065c492061d61ed1b99f5e1544656dc17ee2ce3603272dc219dfa3ca5be3b01.css?1724145731" as="style" data-turbo-track="reload" />
<link rel="preload" href="/assets/theme-basic-a06f876ee6c19019ddfe6c77e621d2d44b3a262387e9084fcc10f3167bd0657b.css?1724145731" as="style" type="text/css" data-turbo-track="reload">
<link rel="stylesheet" href="/assets/theme-basic-a06f876ee6c19019ddfe6c77e621d2d44b3a262387e9084fcc10f3167bd0657b.css?1724145731" as="style" data-turbo-track="reload" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="preload" as="style">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<style id="maglev-style">
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700;900&display=swap');
html {
font-size: var(--basic-theme-default-font-size);
}
html > body {
font-family: "Open Sans", "Arial", "sans-serif";
}
:root {
--basic-theme-title-font: "Raleway", "Arial", "sans-serif";
--basic-theme-logo-font: "Raleway", "Arial", "sans-serif";
--basic-theme-default-font-size: 16px;
--basic-theme-primary-color: #6d28d9;
--basic-theme-primary-color-non-hex: 109, 40, 217;
--basic-theme-primary-color-non-hex-no-comma: 109 40 217;
--basic-theme-transparent: transparent;
--basic-theme-color-white: #FFFFFF;
--basic-theme-color-black: #000000;
--basic-theme-color-zinc: #3f3f46;
--basic-theme-color-red: #B70A1E;
--basic-theme-color-orange: #c2410c;
--basic-theme-color-beige: #B9A58F;
--basic-theme-color-green: #15803d;
--basic-theme-color-teal: #0f766e;
--basic-theme-color-cyan: #0369a1;
--basic-theme-color-dark-blue: #12285C;
--basic-theme-color-blue: #266AFD;
--basic-theme-color-violet: #6d28d9;
--basic-theme-color-fuchsia: #a21caf;
}
</style>
<link href="/sites/4/favicon?1724145731" rel="icon" type="image/x-icon" />
<script defer data-domain="maglev.dev" src="https://plausible.io/js/plausible.js"></script>
</head>
<body class="bg-white">
<main data-maglev-dropzone>
<header class="fixed top-0 w-full z-30" data-controller="basic-nav-01" data-anchorable="off" data-maglev-section-id="hsJUxE-g" id="section-hsJUxE-g">
<div class="relative">
<div class="bg-scale-200 absolute top-0 h-full w-full
opacity-95
"
style="background-color: var(--basic-theme-color-violet)"></div>
<div class="backdrop-blur-sm">
<div class="container mx-auto h-20 px-6 flex items-center justify-between text-white">
<a class="shrink-0 flex items-center space-x-3 cursor-pointer relative z-40" href="https://www.maglev.dev">
<img data-maglev-id="hsJUxE-g.logo" class="block max-h-10 hidden" />
<div data-maglev-id="hsJUxE-g.logo_text" class="font-bold font-logo text-xl">Maglev.</div>
</a>
<nav class="hidden lg:flex justify-around flex-row
w-full absolute inset-0
"
>
<ul class="flex flex-row items-center">
<li class="px-6 py-5 xl:py-0" id="block-hbZWP3LOpYs" data-maglev-block-id="hbZWP3LOpYs">
<a data-maglev-id="hbZWP3LOpYs.link" class="text-left text-white text-opacity-80 hover:text-opacity-100 transition-all" href="https://www.maglev.dev#section-hjQmuQj8"><span data-maglev-id="hbZWP3LOpYs.link.text">How it works</span></a>
</li> <li class="px-6 py-5 xl:py-0" id="block-HA5iDAcJ" data-maglev-block-id="HA5iDAcJ">
<a data-maglev-id="HA5iDAcJ.link" class="text-left text-white text-opacity-80 hover:text-opacity-100 transition-all" href="https://www.maglev.dev/themes"><span data-maglev-id="HA5iDAcJ.link.text">Themes</span></a>
</li> <li class="px-6 py-5 xl:py-0" id="block-aNmQTxwVPaw" data-maglev-block-id="aNmQTxwVPaw">
<a data-maglev-id="aNmQTxwVPaw.link" target="_blank" class="text-left text-white text-opacity-80 hover:text-opacity-100 transition-all" href="https://pro.maglev.dev"><span data-maglev-id="aNmQTxwVPaw.link.text">Maglev PRO 🚀</span></a>
</li> <li class="px-6 py-5 xl:py-0" id="block-eQzEZLhQ" data-maglev-block-id="eQzEZLhQ">
<a data-maglev-id="eQzEZLhQ.link" target="_blank" class="text-left text-white text-opacity-80 hover:text-opacity-100 transition-all" href="https://docs.maglev.dev"><span data-maglev-id="eQzEZLhQ.link.text">Documentation</span></a>
</li> </ul>
</nav>
<div class="
hidden
shrink-0
pl-8
ml-auto
lg:flex"
>
<a data-maglev-id="hsJUxE-g.primary_button" target="_blank" class="
flex
items-center
text-center
text-sm
text-white
font-bold
bg-white/20
rounded-lg
py-2.5
px-5
transform
hover:-translate-y-0.5
transition-all" href="https://docs.maglev.dev/quickstart">
<i class="ri-2x mr-2 hidden" data-maglev-id="hsJUxE-g.primary_button_icon"></i>
<span data-maglev-id="hsJUxE-g.primary_button.text">Start now →</span>
</a> </div>
<button type="button" class="ml-auto lg:hidden rounded-md h-12 w-12 inline-flex items-center justify-center text-white/80 hover:text-white hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-basic-theme-primary relative -right-4" aria-expanded="false" aria-label="Toggle menu" data-action="click->basic-nav-01#toggleMenu">
<i class="ri-2x ri-menu-fill cursor-pointer"></i>
</button>
</div>
</div>
</div>
<!-- Mobile version -->
<div
class="hidden fixed inset-0 bg-black bg-opacity-50 z-10"
data-basic-nav-01-target="overlay"
data-transition-enter="transition ease-out duration-500"
data-transition-enter-start="bg-opacity-0"
data-transition-enter-end="bg-opacity-50"
data-transition-leave="transition ease-in duration-500"
data-transition-leave-start="bg-opacity-50"
data-transition-leave-end="bg-opacity-0"
></div>
<div
class="hidden fixed inset-y-0 right-0 bg-white z-10 w-80 shadow-xl px-4 py-4 flex flex-col translate-x-0"
data-basic-nav-01-target="mobileMenu"
data-transition-enter="transform transition ease-in-out duration-500"
data-transition-enter-start="translate-x-full"
data-transition-enter-end="translate-x-0"
data-transition-leave="transform transition ease-in-out duration-500"
data-transition-leave-start="translate-x-0"
data-transition-leave-end="translate-x-full"
>
<div class="text-right">
<button type="button" class="rounded-md h-12 w-12 inline-flex items-center justify-center text-gray-600 hover:text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-basic-theme-primary" aria-label="Toggle menu" aria-expanded="false" data-action="click->basic-nav-01#toggleMenu">
<i class="lg:hidden ri-2x ri-close-line cursor-pointer"></i>
</button>
</div>
<div class="h-full flex flex-col justify-between">
<nav class="w-full">
<ul>
<li class="px-10 py-5 xl:py-0" id="block-hbZWP3LOpYs" data-maglev-block-id="hbZWP3LOpYs">
<a data-maglev-id="hbZWP3LOpYs.link" class="text-left text-gray-700 hover:text-basic-theme-primary transition-all" href="https://www.maglev.dev#section-hjQmuQj8"><span data-maglev-id="hbZWP3LOpYs.link.text">How it works</span></a>
</li> <li class="px-10 py-5 xl:py-0" id="block-HA5iDAcJ" data-maglev-block-id="HA5iDAcJ">
<a data-maglev-id="HA5iDAcJ.link" class="text-left text-gray-700 hover:text-basic-theme-primary transition-all" href="https://www.maglev.dev/themes"><span data-maglev-id="HA5iDAcJ.link.text">Themes</span></a>
</li> <li class="px-10 py-5 xl:py-0" id="block-aNmQTxwVPaw" data-maglev-block-id="aNmQTxwVPaw">
<a data-maglev-id="aNmQTxwVPaw.link" target="_blank" class="text-left text-gray-700 hover:text-basic-theme-primary transition-all" href="https://pro.maglev.dev"><span data-maglev-id="aNmQTxwVPaw.link.text">Maglev PRO 🚀</span></a>
</li> <li class="px-10 py-5 xl:py-0" id="block-eQzEZLhQ" data-maglev-block-id="eQzEZLhQ">
<a data-maglev-id="eQzEZLhQ.link" target="_blank" class="text-left text-gray-700 hover:text-basic-theme-primary transition-all" href="https://docs.maglev.dev"><span data-maglev-id="eQzEZLhQ.link.text">Documentation</span></a>
</li> </ul>
</nav>
<div>
<a data-maglev-id="hsJUxE-g.primary_button" target="_blank" class="
w-full
items-center
justify-center
shrink-0
text-center
text-sm
text-white
font-bold
bg-basic-theme-primary
rounded-lg
py-4
px-5
transform
hover:-translate-y-0.5
transition-all
flex" href="https://docs.maglev.dev/quickstart">
<i class="ri-2x mr-2 hidden" data-maglev-id="hsJUxE-g.primary_button_icon"></i>
<span data-maglev-id="hsJUxE-g.primary_button.text">Start now →</span>
</a> </div>
</div>
</div>
</header><div style="background-color: var(--basic-theme-color-violet)" data-controller="modal" data-force-padding="true" data-maglev-section-id="ZbY-YDRZ" id="section-ZbY-YDRZ">
<div class='py-10 md:py-20'>
<div class="container mx-auto px-6 flex flex-col justify-between items-center text-white">
<h1 class="
text-4xl md:text-6xl font-title font-extrabold text-center
basic-hero-title-alt
leading-relaxed md:leading-relaxed"
>
<span data-maglev-id="ZbY-YDRZ.title">Embed a <strong>page builder</strong><br>into your <strong>Ruby on Rails</strong> app</span>
</h1>
<div data-maglev-id="ZbY-YDRZ.intro" class="text-center text-sm md:text-lg leading-relaxed mt-10 max-w-2xl lg:mx-auto prose text-white/80 prose-a:text-white prose-strong:text-white prose-a:underline"><p>Are looking for a something similar to the<br><u>Wordpress Elementor</u> plugin but in Ruby on Rails? <br><strong>Your search is now over!</strong></p></div>
<div
class="flex flex-col md:flex-row md:space-x-14 space-y-5 md:space-y-0 mt-10 w-full justify-center"
>
<a data-maglev-id="ZbY-YDRZ.primary_cta" target="_blank" class="
shrink-0
flex items-center justify-center
bg-white/20
rounded-lg
py-3
md:py-4
px-10
w-full
md:w-auto
text-center
text-white
font-bold
transform
hover:-translate-y-0.5
transition-all" href="https://docs.maglev.dev/quickstart"><span data-maglev-id="ZbY-YDRZ.primary_cta.text">Get started →</span></a>
<a data-maglev-id="ZbY-YDRZ.secondary_cta" target="_blank" class="
shrink-0
flex items-center justify-center
font-bold
bg-transparent
rounded-lg
border border-white
py-3
md:py-4
px-10
w-full
md:w-auto
transform
text-white
hover:-translate-y-0.5
transition-all" href="https://github.com/maglevhq/maglev-core"><span data-maglev-id="ZbY-YDRZ.secondary_cta.text">MIT Code source </span></a>
</div>
<div class="mt-14 flex justify-center relative">
<div class="w-full lg:max-w-4xl my-0 md:my-10 relative">
<div class="w-full h-11 rounded-t-lg bg-gray-200 flex justify-start items-center space-x-1.5 px-3">
<span class="w-3 h-3 rounded-full bg-red-400"></span>
<span class="w-3 h-3 rounded-full bg-yellow-400"></span>
<span class="w-3 h-3 rounded-full bg-green-400"></span>
</div>
<div class=" rounded-b-lg w-full overflow-hidden">
<img src="/assets/maglev/10-screenshot_02.webp?1724145731" alt="The content editor in action" data-maglev-id="ZbY-YDRZ.screenshot" class="relative max-h-216" />
<div class="absolute inset-0 flex items-center justify-center">
<button class="block relative" data-action="modal#open">
<i class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 ri-play-fill text-white text-6xl z-20"></i>
<div class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-20 h-20 bg-basic-theme-primary rounded-full z-10"></div>
<div class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
<div class="animate-ping w-16 h-16 rounded-full bg-basic-theme-primary opacity-75 z-0"></div>
</div>
</button>
</div>
</div>
</div> </div>
</div>
<dialog data-modal-target="modal" class="p-0 backdrop:bg-gray-800 backdrop:bg-opacity-80 open:animate-fade-in open:backdrop:animate-fade-in w-216 relative z-40">
<button type="button" data-action="modal#close" class="absolute top-4 right-4 z-30">
<i class="ri-close-circle-fill text-white/90 hover:text-white/100 text-3xl"></i>
</button>
<div class="aspect-w-16 aspect-h-9">
<iframe src="https://iframe.mediadelivery.net/embed/160010/f086a9fa-46e2-4a6a-b176-9421247bf4d6?autoplay=true" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>
</div>
</dialog>
</div>
</div><div class="py-10 md:py-20 leading-loose " style="background-color: var(--basic-theme-transparent)" id="section-hjQmuQj8" data-maglev-section-id="hjQmuQj8">
<div class="container mx-auto px-6">
<div class="text-left md:text-center max-w-2xl mx-auto">
<h2 class="text-center text-4xl leading-relaxed font-bold
basic-hero-title
max-w-3xl mx-auto">
<span data-maglev-id="hjQmuQj8.title">How it works</span>
</h2>
<div data-maglev-id="hjQmuQj8.body" class="mt-5 text-left md:text-center prose text-black prose-a:text-basic-theme-primary"><p>Based on our experience of crafting sites for various clients, we came to the conclusion that most of the time a site is composed of various marketing or content oriented bricks stacked in a vertical up-down direction.</p><p></p><p>We call <strong><u>sections</u></strong> those "Lego" bricks </p></div>
</div>
<div class="space-y-24 md:space-y-32 mt-20">
<div class="flex flex-col lg:flex-row" id="block-fit3AUb5" data-maglev-block-id="fit3AUb5">
<div class="lg:w-7/12 flex items-center">
<div>
<h3 class="text-3xl font-bold mb-2.5">
<span data-maglev-id="fit3AUb5.title">Define sections locally</span>
</h3>
<div data-maglev-id="fit3AUb5.body" class="mt-5 prose text-black prose-a:text-basic-theme-primary text-lg"><p>A section can be anything, a carousel, a hero panel, a list of testimonials, ...etc.<br><br>Registering a section in Maglev is done in your Ruby on Rails application by <strong>declaring the content fields</strong> in a YAML file.<br></p></div>
</div>
</div>
<div class="lg:w-5/12 w-full lg:ml-16 flex items-center mt-10 md:mt-0">
<div class="overflow-hidden rounded-2xl shadow-2xl max-h-216">
<img src="/assets/maglev/12-Snap.png?1724145731" alt="A piece of the YAML definition of a Maglev section" data-maglev-id="fit3AUb5.screenshot" class="block" />
</div>
</div>
</div> <div class="flex flex-col lg:flex-row-reverse" id="block-mMkAfUON" data-maglev-block-id="mMkAfUON">
<div class="lg:w-7/12 flex items-center">
<div>
<h3 class="text-3xl font-bold mb-2.5">
<span data-maglev-id="mMkAfUON.title">Write the HTML section templates </span>
</h3>
<div data-maglev-id="mMkAfUON.body" class="mt-5 prose text-black prose-a:text-basic-theme-primary text-lg"><p>Code the HTML/ERB template of your sections thanks to our view helpers.</p><p>Use any CSS framework you want or even any templating language (HAML, Slim, Liquid, ...etc).</p></div>
</div>
</div>
<div class="lg:w-5/12 w-full lg:mr-16 flex items-center mt-10 md:mt-0">
<div class="overflow-hidden rounded-2xl shadow-2xl max-h-216">
<img src="/assets/maglev/26-Snap-4.png?1724145731" alt="an example of a Maglev template in HTML/ERB " data-maglev-id="mMkAfUON.screenshot" class="block" />
</div>
</div>
</div> <div class="flex flex-col lg:flex-row" id="block-eeoOo3JE" data-maglev-block-id="eeoOo3JE">
<div class="lg:w-7/12 flex items-center">
<div>
<h3 class="text-3xl font-bold mb-2.5">
<span data-maglev-id="eeoOo3JE.title">Compose pages with sections</span>
</h3>
<div data-maglev-id="eeoOo3JE.body" class="mt-5 prose text-black prose-a:text-basic-theme-primary text-lg">Once the section has been correctly configured and its template tested thanks to your dev tools, then it can be used by content editors to assemble pages.<br><br>We put a huge amount of work to make the content editing UX as smooth as possible.</div>
</div>
</div>
<div class="lg:w-5/12 w-full lg:ml-16 flex items-center mt-10 md:mt-0">
<div class="w-full">
<div class="w-full h-11 rounded-t-lg bg-gray-900 flex justify-start items-center space-x-1.5 px-3">
<span class="w-3 h-3 rounded-full bg-red-400"></span>
<span class="w-3 h-3 rounded-full bg-yellow-400"></span>
<span class="w-3 h-3 rounded-full bg-green-400"></span>
</div>
<div class="border border-t-0 border-gray-200 rounded-b-lg w-full overflow-hidden">
<img src="/assets/maglev/15-screenshot_02.webp?1724145731" alt="List of available sections in Maglev" data-maglev-id="eeoOo3JE.screenshot" class="relative max-h-216" />
</div>
</div>
</div>
</div> </div>
</div>
</div><div class="py-10 md:py-20 px-6 md:px-0 " style="background-color: var(--basic-theme-transparent)" id="section-8Oq_XaAE" data-maglev-section-id="8Oq_XaAE">
<div class="container mx-auto
bg-basic-theme-primary
px-10
py-10
md:py-16
md:px-24
rounded-2xl">
<h2 class="text-center text-5xl leading-relaxed font-bold text-white max-w-3xl mx-auto">
<span data-maglev-id="8Oq_XaAE.title">Take your Rails SaaS <br>to the next level 🚀</span>
</h2>
<div data-maglev-id="8Oq_XaAE.body" class="text-center text-white leading-relaxed mt-10 max-w-3xl lg:mx-auto prose prose-a:underscore"><p>Are you running a Rails SaaS platform? <br><br>Upgrade to Maglev PRO and empower your clients with advanced page building and customization features.<br><br>Unlock the full potential of Maglev with premium tools and dedicated support designed to elevate your SaaS business.</p></div>
<div class="text-center">
<a data-maglev-id="8Oq_XaAE.cta_link" target="_blank" class="
inline-block
font-bold
mt-10
py-4
px-10
text-center
bg-white
text-basic-theme-primary text-opacity-100
rounded-xl
hover:-translate-y-0.5
transition-all" href="https://pro.maglev.dev"><span data-maglev-id="8Oq_XaAE.cta_link.text">Upgrade to Maglev PRO</span></a>
</div>
</div>
</div><div class="py-10 md:py-20" style="background-color: var(--basic-theme-transparent)" id="section-0sy6nvEQ" data-maglev-section-id="0sy6nvEQ">
<div class="container mx-auto px-6 ">
<div class="text-center max-w-2xl mx-auto">
<p class="text-gray-400 uppercase mb-2.5 text-xs">
<span data-maglev-id="0sy6nvEQ.intro">Open source</span>
</p>
<h2 class="text-3xl lg:text-4xl font-bold leading-relaxed text-basic-theme-primary text-opacity-100">
<span data-maglev-id="0sy6nvEQ.title">Batteries included!</span>
</h2>
<div data-maglev-id="0sy6nvEQ.body" class="mt-5 md:mt-10 prose text-black prose-a:text-basic-theme-primary"><p><strong>Maglev</strong> is a <u>page builder</u> but it also includes the basic features you'd expect from a <u>content management system</u>.</p></div>
</div>
<div class="grid grid-cols-1 gap-x-14 gap-y-14 lg:grid-cols-2 lg:gap-x-20 lg:gap-y-14 mt-12 md:mt-24">
<div class="flex flex-col lg:flex-row items-start w-full" id="block-iu-iqh7Z" data-maglev-block-id="iu-iqh7Z">
<div class="w-full lg:w-[theme(spacing.44)] xl:w-[theme(spacing.52)]">
<img src="/assets/maglev/21-streamlinehq-future-train-transportation-other-400.SVG?1724145731" alt="Ruby on Rails engine" data-maglev-id="iu-iqh7Z.image" class="object-contain object-center w-full" />
</div>
<div class="lg:ml-10 text-center lg:text-left flex-1">
<h3 class="font-bold text-lg lg:text-xl mt-5 mb-2.5 lg:mt-0">
<span data-maglev-id="iu-iqh7Z.title">Ruby on Rails engine</span>
</h3>
<div data-maglev-id="iu-iqh7Z.body" class="text-base leading-6 prose text-black prose-a:text-basic-theme-primary"><p>Embed Maglev in your Ruby on Rails 6+ applications. Bring your own authentication system and assets manager.</p></div>
</div>
</div> <div class="flex flex-col lg:flex-row items-start w-full" id="block-1V_JQBXf" data-maglev-block-id="1V_JQBXf">
<div class="w-full lg:w-[theme(spacing.44)] xl:w-[theme(spacing.52)]">
<img src="/assets/maglev/22-streamlinehq-designer-4-design-400.SVG?1724145731" alt="Live preview" data-maglev-id="1V_JQBXf.image" class="object-contain object-center w-full" />
</div>
<div class="lg:ml-10 text-center lg:text-left flex-1">
<h3 class="font-bold text-lg lg:text-xl mt-5 mb-2.5 lg:mt-0">
<span data-maglev-id="1V_JQBXf.title">Live preview</span>
</h3>
<div data-maglev-id="1V_JQBXf.body" class="text-base leading-6 prose text-black prose-a:text-basic-theme-primary"><p>Let the content editors have a real-time preview of the content they're editing.</p></div>
</div>
</div> <div class="flex flex-col lg:flex-row items-start w-full" id="block-AhG-sarb" data-maglev-block-id="AhG-sarb">
<div class="w-full lg:w-[theme(spacing.44)] xl:w-[theme(spacing.52)]">
<img src="/assets/maglev/23-streamlinehq-camera-instant-translation-3-mobile-phone-400.SVG?1724145731" alt="Multilingual" data-maglev-id="AhG-sarb.image" class="object-contain object-center w-full" />
</div>
<div class="lg:ml-10 text-center lg:text-left flex-1">
<h3 class="font-bold text-lg lg:text-xl mt-5 mb-2.5 lg:mt-0">
<span data-maglev-id="AhG-sarb.title">Multilingual</span>
</h3>
<div data-maglev-id="AhG-sarb.body" class="text-base leading-6 prose text-black prose-a:text-basic-theme-primary"><p>Edit the content of your Maglev pages in the languages you set for your site.</p></div>
</div>
</div> <div class="flex flex-col lg:flex-row items-start w-full" id="block-KCpqQvDY" data-maglev-block-id="KCpqQvDY">
<div class="w-full lg:w-[theme(spacing.44)] xl:w-[theme(spacing.52)]">
<img src="/assets/maglev/20-streamlinehq-seo-globe-search-marketing-advertising-400.SVG?1724145731" alt="SEO" data-maglev-id="KCpqQvDY.image" class="object-contain object-center w-full" />
</div>
<div class="lg:ml-10 text-center lg:text-left flex-1">
<h3 class="font-bold text-lg lg:text-xl mt-5 mb-2.5 lg:mt-0">
<span data-maglev-id="KCpqQvDY.title">SEO</span>
</h3>
<div data-maglev-id="KCpqQvDY.body" class="text-base leading-6 prose text-black prose-a:text-basic-theme-primary"><p>Configure the SEO attributes for each Maglev page. Support for canonical urls is also included.</p></div>
</div>
</div> <div class="flex flex-col lg:flex-row items-start w-full" id="block-qHkN1Gnb" data-maglev-block-id="qHkN1Gnb">
<div class="w-full lg:w-[theme(spacing.44)] xl:w-[theme(spacing.52)]">
<img src="/assets/maglev/18-streamlinehq-app-building-2-coding-400-2.SVG?1724145731" alt="Tools" data-maglev-id="qHkN1Gnb.image" class="object-contain object-center w-full" />
</div>
<div class="lg:ml-10 text-center lg:text-left flex-1">
<h3 class="font-bold text-lg lg:text-xl mt-5 mb-2.5 lg:mt-0">
<span data-maglev-id="qHkN1Gnb.title">Tools</span>
</h3>
<div data-maglev-id="qHkN1Gnb.body" class="text-base leading-6 prose text-black prose-a:text-basic-theme-primary"><p>Use the custom generators to generate the skeleton of your sections (both the YAML definition and ERB template files).</p></div>
</div>
</div> <div class="flex flex-col lg:flex-row items-start w-full" id="block-uJoQscC3" data-maglev-block-id="uJoQscC3">
<div class="w-full lg:w-[theme(spacing.44)] xl:w-[theme(spacing.52)]">
<img src="/assets/maglev/24-streamlinehq-color-palatte-design-400.SVG?1724145731" alt="Editor UI customization" data-maglev-id="uJoQscC3.image" class="object-contain object-center w-full" />
</div>
<div class="lg:ml-10 text-center lg:text-left flex-1">
<h3 class="font-bold text-lg lg:text-xl mt-5 mb-2.5 lg:mt-0">
<span data-maglev-id="uJoQscC3.title">Editor UI customization</span>
</h3>
<div data-maglev-id="uJoQscC3.body" class="text-base leading-6 prose text-black prose-a:text-basic-theme-primary"><p>Change the default color of the editor UI and the main logo to match your client's brand.</p></div>
</div>
</div> </div>
</div>
</div><div class="py-10 md:py-20" data-anchorable="off" data-maglev-section-id="vV2hf0It" style="background-color: var(--basic-theme-color-black)" id="section-vV2hf0It">
<div class="container mx-auto px-6 space-y-10 text-white">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-4 content-center">
<div class="flex flex-col items-center md:items-baseline mt-5 md:mt-0">
<a class="shrink-0 flex items-center" href="https://www.maglev.dev">
<img alt="Maglev." data-maglev-id="vV2hf0It.logo" class="block mr-3 max-h-8 hidden" />
<div data-maglev-id="vV2hf0It.logo_text" class="font-bold font-logo text-xl">Maglev.</div>
</a> </div>
<div class="h-full flex flex-col md:flex-row items-center justify-center space-y-3 md:space-x-10 md:space-y-0">
<div class="shrink-0" id="block-P7vUWFCg" data-maglev-block-id="P7vUWFCg">
<a data-maglev-id="P7vUWFCg.link" target="_blank" class="font-bold hover:underline" href="https://github.com/orgs/maglevhq/projects/1/views/1"><span data-maglev-id="P7vUWFCg.link.text">Roadmap</span></a>
</div> <div class="shrink-0" id="block-rwFdrQBz" data-maglev-block-id="rwFdrQBz">
<a data-maglev-id="rwFdrQBz.link" target="_blank" class="font-bold hover:underline" href="https://github.com/maglevhq/maglev-core/issues"><span data-maglev-id="rwFdrQBz.link.text">Github issues</span></a>
</div> <div class="shrink-0" id="block-9R5vwnsK" data-maglev-block-id="9R5vwnsK">
<a data-maglev-id="9R5vwnsK.link" target="_blank" class="font-bold hover:underline" href="https://join.slack.com/t/maglevhq/shared_invite/zt-1hy671m34-CSfumgCACIeI7veuiCWcig"><span data-maglev-id="9R5vwnsK.link.text">Slack</span></a>
</div> <div class="shrink-0" id="block-rwg7yhyO" data-maglev-block-id="rwg7yhyO">
<a data-maglev-id="rwg7yhyO.link" target="_blank" class="font-bold hover:underline" href="https://docs.maglev.dev"><span data-maglev-id="rwg7yhyO.link.text">Documentation</span></a>
</div> </div>
<div class="h-full flex items-center justify-center md:justify-end space-x-4">
<div id="block-fJCEC_yX" data-maglev-block-id="fJCEC_yX">
<a data-maglev-id="fJCEC_yX.link" target="_blank" title="Github" href="https://github.com/maglevhq">
<i class="ri-xl ri-github-fill"></i>
</a></div> <div id="block-l8f84Y05" data-maglev-block-id="l8f84Y05">
<a data-maglev-id="l8f84Y05.link" title="Email" href="mailto:[email protected]">
<i class="ri-xl ri-mail-line"></i>
</a></div> </div>
</div>
<div class="text-center border-t pt-10 border-white/20">
<span data-maglev-id="vV2hf0It.copyright" class="prose-sm prose-invert text-white/80 prose">Built with ❤️ by the creators of <a href="https://www.locomotivecms.com/" rel="noopener noreferrer nofollow">LocomotiveCMS</a>.<br><br>© 2023 <strong><a href="https://www.nocoffee.fr/" rel="noopener noreferrer nofollow">NoCoffee SARL</a></strong>, all rights reserved</span>
</div>
</div>
</div>
</main>
</body>
</html>