-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
328 lines (312 loc) · 14.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Nibble">
<meta property="og:description" content="The marketplace for food too fresh to be kept overnight by restaurants.">
<meta property="og:image" content="https://nibble.club/images/nibble-logo.png">
<meta property="og:url" content="https://nibble.club">
<title>Nibble</title>
<link rel="icon" href="images/app-logo.png" type="image/gif">
<link rel="stylesheet" href="css/mystyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- HOME PAGE HERO -->
<section class="hero is-fullheight" id="HOME">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<img src="images/nibble-logo.svg" width="112" height="28">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" href="waitlist-typeform.html" target="_blank">
<strong>Sign up</strong>
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container is-fluid">
<div class="columns is-vcentered">
<div class="column is-two-thirds">
<h1 class="title is-1">
<!-- Welcome to the joy </br>
of better eating. -->
<!-- Welcome to smarter eating. -->
Great food, less spending.
<!-- Save money on fresh foods. -->
<!-- Experience the joy of better eating. -->
<!-- The same great food, cheaper. -->
</h1>
<h2 class="subtitle is-4">
Nibble connects people with inexpensive meals and ingredients that are </br>
too fresh to be kept overnight by restaurants.
</h2>
<div class="buttons">
<a class="button is-primary" href="waitlist-typeform.html" target="_blank">Join the Waitlist</a>
<a class="button is-info" href="#ABOUT">Learn More</a>
</div>
</div>
<div class="column is-one-mobile">
<div class="container">
<img src="images/beta-nibble.png" width="300px" height="auto">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-fullheight is-info" id="ABOUT">
<div class="hero-head">
<figure class="image is-96x96 px-5 py-5">
<a href="#HOME">
<img src="images/up-arrow.svg"/>
</a>
</figure>
</div>
<!-- ABOUT Hero content-->
<div class="hero-body">
<div class="columns is-vcentered">
<div class="column is-two-thirds">
<div class="container is-fluid">
<h1 class="title is-2 mb-6">
Did you know?
</h1>
<!-- Fact 1 -->
<div class="content mb-6">
<h2 class="subtitle is-5 mb-0">
U.S. restaurants generate an estimated 22 to 33 billion pounds of food waste each year, largely driven by over-preparation of food,
extensive menu choices, and fluctuation in sales.
</h2>
<!-- <p class="mb-6">-Natural Resources Defense Council</p> -->
</div>
<!-- Fact 2 -->
<div class="content has-text-right mb-6">
<h2 class="subtitle is-5 mb-0">
The restaurant industry spends an estimated $162 billion</br> every year in costs related to wasted food.
</h2>
<!-- <p class="mb-6">-Environmental Protection Agency</p> -->
</div>
<!-- Fact 3 -->
<!-- <div class="content">
<h2 class="subtitle is-5 mb-0">
A 2017 <a href="https://champions123.org/wp-content/uploads/2017/03/report_-business-case-for-reducing-food-loss-and-waste.pdf">study</a> found that the median
restaurant sees more than an 8-fold financial return on investment in food waste reduction efforts.
</h2>
<p>-The Business Case for Reducing Food Loss and Waste Report</p>
</div> -->
<!-- Fact 4 -->
<div class="content mb-6">
<h2 class="subtitle is-5 mb-0">
Restaurants working to prevent food waste can cut their costs by 2 to 6 percent.
</h2>
<!-- <p>-Restaurant Hospitality</p> -->
</div>
</div>
</div>
<div class="column px-6 is-one-fourth-tablet is-two-thirds-mobile">
<figure class="image">
<img src="images/food-bowl.svg"/>
</figure>
</div>
</div>
</div>
<div class="hero-foot">
<figure class="image is-96x96 px-5 py-5">
<a href="#EXPLAIN">
<img src="images/down-arrow.svg"/>
</a>
</figure>
</div>
</section>
<!-- NIBBLE EXPLAIN HERO -->
<section class="hero is-fullheight is-success" id="EXPLAIN">
<div class="hero-head">
<figure class="image is-96x96 px-5 py-5">
<a href="#ABOUT">
<img src="images/up-arrow.svg"/>
</a>
</figure>
</div>
<div class="hero-body">
<div class="columns is-vcentered">
<div class="column px-6 is-one-fourth-tablet is-two-thirds-mobile">
<figure class="image">
<img src="images/cutlery.svg"/>
</figure>
</div>
<div class="column is-two-thirds">
<div class="container is-fluid">
<h1 class="title is-2 mb-6">
Introducing Nibble
</h1>
<!-- Explain -->
<div class="content">
<h2 class="subtitle is-5 mb-0">
At Nibble, we believe that doing good can be a win-win for everyone.
We connect high quality restaurants that have extra food with paying customers
looking to save money on takeout. </br></br>
Restaurants get paid for adding their extra foods to the platform instead of
tossing money down the drain. Customers download our app and get great deals
on meals and ingredients.
</h2>
<h2 class="subtitle is-5 mb-0">
Join the waitlist today to be considered for our early access program. Don't hesitate to
reach out with comments or questions!
</h2>
</div>
<div class="buttons">
<a class="button is-primary" href="waitlist-typeform.html" target="_blank">Join the Waitlist</a>
</div>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<figure class="image is-96x96 px-5 py-5">
<a href="#BETA">
<img src="images/down-arrow.svg"/>
</a>
</figure>
</div>
</section>
<!-- NIBBLE BETA HERO -->
<section class="hero is-fullheight" id="BETA">
<div class="hero-head">
<figure class="image is-96x96 px-5 py-5">
<a href="#EXPLAIN">
<img src="images/up-arrow.svg"/>
</a>
</figure>
</div>
<div class="hero-body">
<div class="columns is-vcentered">
<div class="column px-6">
<figure class="image">
<img src="images/beta-reserve.png"/>
</figure>
</div>
<div class="column px-6">
<div class="content">
Our pilot app allows you to browse available nibbles, view details,
and claim what you want.
</div>
</div>
<div class="column px-6">
<figure class="image">
<img src="images/beta-map.png"/>
</figure>
</div>
<div class="column px-6">
<div class="content">
You can also browse with the convenient map function and search restaurants with available food near you.
</div>
</div>
</div>
</div>
<div class="hero-foot">
<figure class="image is-96x96 px-5 py-5">
<a href="#FAQ">
<img src="images/down-arrow.svg"/>
</a>
</figure>
</div>
</section>
<!-- NIBBLE FAQ HERO -->
<section class="hero is-fullheight is-link" id="FAQ">
<div class="hero-head">
<figure class="image is-96x96 px-5 py-5">
<a href="#BETA">
<img src="images/up-arrow-primary.svg"/>
</a>
</figure>
</div>
<div class="hero-body">
<div class="columns is-vcentered">
<div class="column">
<div class="container is-fluid">
<h1 class="title is-2 mb-6">
FAQ
</h1>
<!-- FAQ -->
<div class="content mb-6">
<!-- How it works -->
<h2 class="subtitle is-5 mb-0 has-text-black">
How does Nibble work?
</h2>
<h2 class="subtitle is-6 mt-0">
Restaurants admitted to our early access program will put together packages, or 'nibbles' of their excess food.
Each nibble is $3 and can contain anything from a fully prepped meal to a tub of raw ingredients.
We communicate info about the available foods to our users, who reserve their nibble and
pick it up at the restaurant.
<!-- </br></br>
Examples of a nibble include:
<ul>
<li>sushi roll or burrito</li>
<li>plate of rice, beans, peppers</li>
<li>tub of lettuce, sliced tomato, or chopped onions</li>
</ul> -->
</h2>
<!-- How to sign up -->
<h2 class="subtitle is-5 mb-0 has-text-black">
How do I sign up?
</h2>
<h2 class="subtitle is-6 mt-0">
For restaurants, once we've approved you for our platform, fill out a quick questionnaire and answer our phone call! We will help you set up your account
and show you how to use it. </br>
For users, we will send a beta tester form and provide you with a link to our beta app.
</h2>
<!-- Only a little food -->
<h2 class="subtitle is-5 mb-0 has-text-black">
My restaurant only throws away a few pounds of food most nights. Should I still sign up?
</h2>
<h2 class="subtitle is-6 mt-0">
Yes! Every nibble counts toward putting money back in your wallet, instead of throwing it down the drain. It also helps feed people,
and keeps food out of landfills!
</h2>
<!-- How quickly you can start -->
<h2 class="subtitle is-5 mb-0 has-text-black">
How quickly can I get started?
</h2>
<h2 class="subtitle is-6 mt-0">
For restaurants, turnaround should be within a few days. We will first send a questionnaire, set up a quick call, and then you should
start expecting customers as soon as you are ready to submit your first nibbles!
For users, once we've selected you as a beta tester we will give you access to our beta app, and you can start using Nibble immediately.
</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="columns is-centered">
<div class="column">
<div class="content">
<h3>
<strong>Nibble</strong>
</h3>
<p>
<a class="fa fa-envelope" href="mailto:wendy@nibble.club"></a> hello@nibble.club</br>
Based in San Francisco, CA
</p>
</div>
</div>
</div>
</footer>
</body>
</html>