-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
233 lines (207 loc) · 11.5 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
---
title: Creators of Future
---
{% include head.html %}
<body class="homepage">
<div class="container container--with-border">
<div class="top-graphic">
<div class="top-graphic__hand top-graphic__hand--left"></div>
<img class="top-graphic__center-piece" src="/assets/images/logo.svg" height="270" alt="">
<div class="top-graphic__hand top-graphic__hand--right"></div>
</div>
<header>
<h1 class="p-t-24">
Creators of <span class="heading-highlight glitch" data-text="Future">Future</span>
</h1>
<img class="m-t-32" src="/assets/images/arrow-down.svg" alt="" height="32" width="60">
</header>
<div class="content-wrapper">
<div class="content-wrapper__left">
<p class="large-text">
<span class="highlight">The future belongs to the generalists.</span>
The more tools you have in your arsenal,
the better you'll navigate the uncertainty
of the rapidly changing world.
</p>
<h2>What's Creators of Future?</h2>
<p>
Creators of Future is a mission to help more people become generalists.
I think being a designer with development skills or vice-versa is underrated.
The ability to create usable and delightful stuff out of nothing is magical.
It's a super-power. Add marketing and sales, and you're unstoppable.
</p>
<p>
The first batch of this program is for people who:
<strong>
want to build iOS apps; already have an idea; are either a designer or a developer.
</strong>
The mentorship will involve one-on-one guidance on UI/UX or SwiftUI,
depending on your existing skillset.
</p>
<p>
<s>If you belong to the above cohort, reach out via the form. I'll select up to
<strong>5 applications</strong>, beginning April 1st, 2021, who will also be the first members
of the Creators of Future Tribe. I'll help you in the journey of publishing
your app to the App Store from start to finish. (If you already have an app
published and are looking to improve your design skills, feel free to apply as well).</s>
</p>
<p>
The applications for this cohort are now closed. Sign up via the form to subscribe to updates.
</p>
<h2>How Much Does it Cost?</h2>
<p>
This is a <strong>free</strong>, no-strings-attached mentorship program.
<strong>
The long-term goal of this program is to create a strong network of generalists and
founders.
</strong>
</p>
<p>
If you, however, strongly believe in the mission and want to support it,
you can sponsor via <a href="https://www.patreon.com/creatorsoffuture">Patreon</a> or donate via BTC or ETH.
</p>
<div class="addresses">
<div id="btc" class="address__field address__field--btc">
<span class="address__field__text">bc1qmdu8jr7yzw369t4yv3a4up2p0taw0ymjxw9jwh</span>
<span class="address__field__copy" data-clipboard-target="#btc"
data-clipboard-text="bc1qmdu8jr7yzw369t4yv3a4up2p0taw0ymjxw9jwh"></span>
</div>
<div id="eth" class="address__field address__field--eth">
<span class="address__field__text">0x45fc15Cb5E400a3ce8E34087c3A7e55be1906971</span>
<span class="address__field__copy" data-clipboard-target="#eth"
data-clipboard-text="0x45fc15Cb5E400a3ce8E34087c3A7e55be1906971"></span>
</div>
</div>
<h2>About Me</h2>
<div class="about-first-para">
<img src="/assets/images/me.jpg" height="100" width="100" alt="">
<p>
Hi, I am <strong>Kushagra Agarwal</strong>. I started my career in 2010,
and I've been a generalist throughout—mostly wearing
the hat of a designer, but also helping with development on the side.
</p>
</div>
<p>
I've also worked on several side-projects, most notably,
<a href="https://cssbattle.dev">CSSBattle</a>,
<a href="https://cone.app">Cone</a>, and
<a href="https://unwind.to">Unwind</a>.
Apart from design and development, side projects have also taught
me a bunch about marketing, sales, and growth.
</p>
<p>
Through this mentorship, I aim to share all that I've learned throughout my
career and help you become a generalist and a future creator.
</p>
<p class="m-b-24">
If you have any questions, suggestions, concerns, or if you are a
generalist who would like to be a part of this mission, please
<a href="mailto:[email protected]">reach out</a>.
Let's build the future together. ✌
</p>
{% include social-links.html %}
</div>
<div class="content-wrapper__right">
<div class="content-wrapper__sticky">
<h2>Apply Here</h2>
<p style="margin-top: 1.5rem">
Note: The applications for the first cohort are now closed. However, you can still sign up below
to be the first to know whenever the second cohort is launched.
</p>
<form class="signup-form" action="https://formspree.io/f/meqvjykb" method="POST">
<label class="visuallyhidden" for="fullname">Full Name</label>
<input type="text" name="fullname" id="fullname" required placeholder="Full Name">
<label class="visuallyhidden" for="email">Email Address</label>
<input type="email" name="email" id="email" required placeholder="Email Address">
<!-- <label class="visuallyhidden" for="website">website Address</label>
<input type="url" name="website" id="website" required
placeholder="Twitter, LinkedIn, GitHub, or Website">
<label class="visuallyhidden" for="description">Description</label>
<textarea name="description" id="description" required
placeholder="Describe your app idea, or share any links showcasing your idea (Github, Figma, App Store, etc)."></textarea>
<p>What do you specialize in?</p>
<label for="design" class="radio-container">
<input type="radio" name="specialization" id="design" value="design" required checked>
<div class="fake-radio"></div>
<span>Design</span>
</label>
<label for="dev" class="radio-container">
<input type="radio" name="specialization" id="dev" required value="dev">
<div class="fake-radio"></div>
<span>Development</span>
</label> -->
<button class="button signup-form__submit">
<span class="button__text">Sign Up</span>
<svg class="button__loader" width="24" height="24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<g>
<path
d="M10.998 22a.846.846 0 010-1.692 9.308 9.308 0 000-18.616 9.286 9.286 0 00-7.205 3.416.846.846 0 11-1.31-1.072A10.978 10.978 0 0110.998 0c6.075 0 11 4.925 11 11s-4.925 11-11 11z">
</path>
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0 11 11" to="360 11 11" dur="1s" calcMode="linear"
repeatCount="indefinite">
</animateTransform>
</g>
</svg>
</button>
</form>
<p class="signup-form__success displayNone">
Thank you for signing up! We'll reach out to you whenever there's an update regarding the next cohort.
</p>
<p class="signup-form__error displayNone">Oops, an error was encountered while submitting the form.
Please share the details directly on <a
href="mailto:[email protected]">[email protected]</a>.</p>
</div>
</div>
</div>
<div class="wrapper">
{% include footer.html %}
</div>
</div>
<script src="/assets/scripts/clipboard.min.js"></script>
<script>
// Form Submission
let form = document.querySelector('.signup-form');
let successMessage = document.querySelector('.signup-form__success');
let errorMessage = document.querySelector('.signup-form__error');
let submitButton = document.querySelector('.signup-form__submit');
function handleSubmit(e) {
e.preventDefault();
submitButton.classList.add('button--show-loader');
var data = new FormData(form);
console.log(data)
fetch(e.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).then(response => {
successMessage.classList.remove('displayNone')
form.classList.add('displayNone');
form.reset()
submitButton.classList.remove('button--show-loader')
}).catch(error => {
errorMessage.classList.remove('displayNone')
submitButton.classList.remove('button--show-loader')
});
}
form.addEventListener('submit', handleSubmit, false)
// Copy address
const clipboard = new ClipboardJS('.address__field__copy');
clipboard.on('success', (e) => {
e.clearSelection()
const target = document.querySelector(e.trigger.getAttribute('data-clipboard-target'))
.querySelector('.address__field__text')
showSuccessMessage(target, e.text)
})
function showSuccessMessage(target, resetTo) {
target.innerText = 'Copied to clipboard!'
setTimeout(function () {
target.innerText = resetTo
}, 1000)
}
</script>
</body>
</html>