-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (137 loc) · 6.41 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jangle</title>
<meta name="description" content="Content's best friend.">
<link rel="shortcut icon" href="/images/logo.png" type="image/x-icon">
<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=Almarai:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/main.css">
</head>
<body>
<!-- Navbar -->
<header class="col center_x w_fill pad_lg py_sm sticky top bg_bg borderBottom_sm">
<div class="row center_y mw_1200 w_fill gap_fill">
<a class="brand pad_sm row gap_sm center" href="/">
<img class="brand__img" src="/images/logo.png" alt="Jangle Logo" />
<span class="family_header brand__label">Jangle</span>
</a>
<div class="row gap_md">
<button data-action="openWaitlistDialog" target="_blank" rel="noopener" class="button button--small">Join the waitlist</a>
</div>
</div>
</header>
<div class="pb_xl"></div>
<!-- MAIN CONTENT -->
<main class="col center_x w_fill">
<!-- HERO -->
<div class="col gap_xl py_xxl center">
<div class="col gap_md center">
<div class="row gap_md center_y">
<img class="title_logo" src="/images/logo.png" width="80" height="80" alt="The Jangle logo">
<h1 class="title">Jangle</h1>
</div>
<h2 class="subtitle">Content's best friend.</h2>
</div>
<div class="pb_xl">
<button data-action="openWaitlistDialog" target="_blank" rel="noopener" class="button">Join the waitlist</a>
</div>
</div>
<!-- Content should be free -->
<div class="wave"></div>
<div class="col center pad_lg py_xxl w_fill" style="color: white; background-color: var(--color_primary_1);">
<section class="row responsive gap_xl center mw_1200 w_fill">
<img class="section__image" src="/images/people_pointing.jpg" width="480" height="360" alt="People pointing at stuff">
<div class="col gap_md flex" style="max-width: 480px;">
<h3 class="font_h3">Content management should be free</h3>
<p class="font_h4">Jangle is designed to be free forever. Whether you're a solo developer, or making a website for a small business, you'll be able to fully manage your content.</p>
</div>
</section>
</div>
<!-- Integrations should be easy -->
<div class="wave" style="transform: scaleY(-1); margin-top: 0;"></div>
<div class="col center pad_lg py_xxl w_fill">
<section class="row responsive reverse gap_xl center mw_1200 w_fill">
<img class="section__image" src="/images/integrations.jpg" width="480" height="400" alt="Stuff connected together by wires">
<div class="col gap_md flex" style="max-width: 480px;">
<h3 class="font_h3">Integrations should be easy</h3>
<p class="font_h4">Jangle makes it easy to connect to any existing GitHub project. Whether you're using Astro, Next.js, Hugo, or a custom static website, you can start managing content without leaving your browser.</p>
</div>
</section>
</div>
<!-- Content should be free -->
<div class="wave"></div>
<div class="col center pad_lg py_xxl w_fill" style="color: white; background-color: var(--color_primary_1);">
<section class="row responsive gap_xl center mw_1200 w_fill">
<img class="section__image" src="/images/security.jpg" width="480" height="480" alt="A lock indicating safe and secure data">
<div class="col gap_md flex" style="max-width: 480px;">
<h3 class="font_h3">Your content belongs in your hands</h3>
<p class="font_h4">With Jangle, your content is stored securely in your GitHub repo. Access all the benefits of controlling your data, including the ability to use Jangle alongside existing systems and workflows.</p>
</div>
</section>
</div>
<!-- WAITLIST FORM -->
<dialog id="waitlistDialog">
<form id="waitlistForm" class="col" name="waitlist" method="POST" data-netlify="true">
<p class="form__title">Join the waitlist</p>
<p class="form__subtitle">Eager to get started with Jangle? You can sign up below for early access.</p>
<p>
<label>Name <input type="text" required="true" name="name" /></label>
</p>
<p>
<label>Email <input type="email" required="true" name="email" /></label>
</p>
<p>
<label><span>Message <span style="font-weight: normal; color: var(--color_fg_2);">(optional)</span></span><textarea name="message"></textarea></label>
</p>
<p class="row gap_sm">
<button class="button" type="submit">Request an invite</button>
<button class="button button--secondary" type="button" data-action="closeWaitlistDialog">Cancel</button>
</p>
</form>
</dialog>
<!-- CONTACT FORM -->
<dialog id="contactUsDialog">
<form id="contactUsForm" class="col" name="contact" method="POST" data-netlify="true">
<p class="form__title">Contact us</p>
<p class="form__subtitle">Have any questions or other business inquiries? Please let us know!</p>
<p>
<label>
<span>Name</span>
<input type="text" required="true" name="name" />
</label>
</p>
<p>
<label>
<span>Email</span>
<input type="email" required="true" name="email" />
</label>
</p>
<p>
<label>
<span>Message</span>
<textarea required="true" name="message"></textarea>
</label>
</p>
<p class="row gap_sm">
<button class="button" type="submit">Send a message</button>
<button class="button button--secondary" type="button" data-action="closeContactUsDialog">Cancel</button>
</p>
</form>
</dialog>
</main>
<footer class="footer row center w_fill">
<div class="row gap_fill gap_sm mw_1200 w_fill">
<span>© 2023 Ryan Haskell-Glatz</span>
<div class="row gap_md">
<button class="link" data-action="openContactUsDialog">Contact us</button>
<a class="link" href="https://github.com/jangle-cms" target="_blank" rel="noopener">GitHub</a>
</div>
</div>
</footer>
<script async src="/main.js"></script>
</body>
</html>