-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
376 lines (351 loc) · 21.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
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
<!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.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./images/favicon.svg" type="image/svg">
<title>Fibery</title>
</head>
<body>
<div class="h-[42px] w-[88vw] mt-[30px] mx-auto flex items-center justify-between">
<a href="#" class="flex-shrink-0"><img src="./images/logo.svg" alt=""></a>
<div class="flex lg:space-x-[39px] xl:space-x-[78px] items-center">
<div class="lg:space-x-[30px] xl:space-x-[63px] text-[15px] hidden lg:flex items-center">
<a href="#">Solutions</a>
<a href="#">Product</a>
<a href="#">Resources</a>
<a href="#">Pricing</a>
</div>
<div class="space-x-2 sm:space-x-[25px] xl:space-x-[47px] text-[12px] sm:text-[15px] flex items-center">
<a href="#">Log in</a>
<a href="#" class="text-[15px] sm:text-[20px] font-bold text-white bg-black px-[10px] py-[2px] sm:py-[5px] sm:px-[20px] rounded-[3px]">Start
90-day trial</a>
</div>
</div>
</div>
<section class="w-[79vw] mt-[125px] mx-auto">
<div class="text-[35px] sm:text-[55px] lg:text-[80px] sm:leading-[88px] max-w-[949px] text-[#242938]">Build your company workspace
with no code
</div>
<div class="text-[20px] leading-[30px] max-w-[522px] text-[#242938] mt-[42px]">Create apps, connect them
together, invite
teammates and do something cool.</div>
<div class="flex gap-[25px] justify-start items-start mt-[80px] flex-wrap">
<div class="flex h-[94px] justify-start items-start space-x-[10px] pl-[17px] pt-[16px] pr-[11px] lg:pr-[44px] rounded-[13px] custom-shadow-1">
<img src="./images/header-1.svg" alt="">
<div>Connected databases</div>
</div>
<div class="flex h-[94px] justify-start items-start space-x-[10px] pl-[17px] pt-[16px] pr-[11px] lg:pr-[44px] rounded-[13px] custom-shadow-1">
<img src="./images/header-2.svg" alt="">
<div>Customizable Views</div>
</div>
<div class="flex h-[94px] justify-start items-start space-x-[10px] pl-[17px] pt-[16px] pr-[11px] lg:pr-[44px] rounded-[13px] custom-shadow-1">
<img src="./images/header-3.svg" alt="">
<div>Integrations</div>
</div>
<div class="flex h-[94px] justify-start items-start space-x-[10px] pl-[17px] pt-[16px] pr-[11px] lg:pr-[44px] rounded-[13px] custom-shadow-1">
<img src="./images/header-4.svg" alt="">
<div>Automations</div>
</div>
<div class="flex h-[94px] justify-start items-start pl-[17px] pt-[16px] pr-[11px] lg:pr-[44px] rounded-[13px] custom-shadow-1">
<div class="flex items-center space-x-[10px]">
<img src="./images/header-5.svg" alt="">
<div class="text-[10px]">Collaborative Documents & Whiteboards</div>
</div>
</div>
<div class="flex h-[94px] justify-start items-start space-x-[10px] pl-[17px] pt-[16px] pr-[11px] lg:pr-[44px] rounded-[13px] custom-shadow-1">
<img src="./images/header-6.svg" alt="">
<div>Super-powerful Charts</div>
</div>
<div class="flex w-[71px] h-[94px] justify-center items-center rounded-[13px] custom-shadow-1 bg-[#A7FEE9]">
<img src="./images/header-7.png" alt="">
</div>
<div class="flex h-[94px] w-[94px] justify-center items-center rounded-[13px] custom-shadow-1">
<img src="./images/header-8.svg" alt="">
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-6 place-items-center gap-y-10 gap-x-10 w-[79wv] mt-[118px]">
<img src="./images/lemonade.svg" alt="">
<img src="./images/vochi.svg" alt="">
<img src="./images/kontur.svg" alt="">
<img src="./images/rosetta stone.svg" alt="">
<img src="./images/aiwo.svg" alt="">
<img src="./images/plex.svg" alt="">
</div>
<div class="bg-[#D8D8D8] max-w-[79wv] h-[2px] my-[28px]"></div>
<div class="text-center text-[22px] text-[#909298]">Be in a cool company</div>
</section>
<section class="w-[79wv] mx-auto mt-[125px] relative">
<div class="px-[10px] sm:pl-[55px] max-w-[749px] font-Baskerville text-[35px] sm:text-[69px]">Connected databases</div>
<div class="px-[10px] sm:pl-[55px] mt-[28px] max-w-[717px] text-[20px] leading-[32px]">Use a full-blown relational database
to build apps for your processes in minutes. Reflect your company
structure. Create de-eee-ep work hierarchies. Link processes together. Shape a single connected workspace
for your team or company.</div>
<img class="absolute top-[10px] right-0 hidden sm:block" src="./images/sect1-logo.svg" alt="">
<img class="w-[79wv] mx-auto mt-[70px]" src="./images/expersc.jpg" alt="">
</section>
<section class="w-[79wv] mt-[170px] mx-auto relative">
<div class="px-[10px] sm:pl-[55px] max-w-[749px] font-Baskerville text-[35px] sm:text-[59px] md:text-[69px]">Customizable Views</div>
<div class="px-[10px] sm:pl-[55px] mt-[28px] max-w-[717px] text-[20px] leading-[32px]">Set up Views to work with your data.
Filter, group, sort, and color-code information. Tune every View to fit your case.</div>
<img class="absolute top-[10px] right-0 hidden sm:block" src="./images/sec2-logo.svg" alt="">
<div class="mt-[70px]">
<div class="flex justify-between text-[16px] sm:text-[28px] w-[72vw] mx-auto overflow-x-scroll space-x-4">
<button id="Table">Table</button>
<button id="Board">Board</button>
<button id="List">List</button>
<button id="Timeline">Timeline</button>
<button id="Calendar">Calendar</button>
</div>
<div>
<img src="./images/sec2-table.jpg" alt="">
</div>
</div>
<div class="w-[79wv] mt-[170px] mx-auto relative">
<div class="px-[10px] sm:pl-[55px] max-w-[749px] font-Baskerville text-[35px] sm:text-[59px] md:text-[69px]">Integrations</div>
<div class="px-[10px] sm:pl-[55px] mt-[28px] max-w-[717px] text-[20px] leading-[32px]">Sync data from your favorite tools
into Fibery and connect information. Create a single point of truth of all important processes.</div>
<img class="absolute top-[10px] right-0 hidden sm:block" src="./images/sec3-logo.svg" alt="">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 mt-[40px] gap-[25px] lg:gap-[50px]">
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/intercom.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Intercom</div>
<div>Link conversations to insights and features to drive product decisions and close the loop with
customers.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/braintree.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Braintree</div>
<div>Connect payments to customers and take their MRR into account when prioritizing feature
requests.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/GitLab.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">GitLab</div>
<div>Connect merge requests to tasks to streamline your dev workflow.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/trello.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Trello</div>
<div>Migrate to Fibery once your team and your workflows are too much for Trello to handle.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/jira.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Jira</div>
<div>Sync your whole Jira database to Fibery and connect issue tracking to roadmapping — before
fully switching from J to F.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/Discourse.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Discourse</div>
<div>Drive your product backlog with ideas (and rants) from your community — and don't forget to
close the loop.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/Currency Exchange.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Currency Exchange</div>
<div>Convert payments and salaries from one currency to another using historical exchange rates.
</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/Zendesk.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Zendesk</div>
<div>Create insights, features, and bugs from tickets to drive product development and close the
loop with customers.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/Github.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Github</div>
<div>Bring your code closer to work to get visibility and avoid context switching.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/World.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">World</div>
<div>Connect to other Apps to get an up-to-date countries dropdown, slice sales by region, and add
calling codes to local phone numbers.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/Slack.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Slack</div>
<div>Create Entities from Slack. Convert discussions and ideas into actionable work in Fibery.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/Zapier.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Zapier</div>
<div>Zapier is a tool that connects software you use every day to automate tasks and save time.
Integrate Fibery with other tools easily.</div>
</div>
<div class="min-h-[310px] p-[30px] custom-shadow-1">
<img src="./images/Integromat.svg" alt="">
<div class="mt-[20px] mb-[14px] text-[24px]">Integromat</div>
<div>Connect Fibery to hundreds of tools like Slack, Pipedrive, or Gmail and let the machine do
repetitive tasks for you.</div>
</div>
</div>
</div>
</section>
<section class="w-[79wv] mt-[170px] mx-auto relative ">
<div class="px-[10px] sm:pl-[55px] max-w-[749px] font-Baskerville text-[35px] sm:text-[59px] md:text-[69px]">Automations</div>
<div class="px-[10px] sm:pl-[55px] mt-[28px] max-w-[717px] text-[20px] leading-[32px]">Set up Action Buttons and Automated
Rules to keep all data consistent and do less manual work. Think more, do… more 😅.</div>
<img class="absolute top-[10px] right-0 hidden sm:block" src="./images/sec4-logo.svg" alt="">
<div class="flex flex-col sm:flex-row items-center justify-center sm:space-x-[104px] px-[50px] mt-[120px]">
<div class="w-[90vw] sm:w-[50%]">
<div class="text-[48px]">Action Buttons</div>
<div class="text-[20px] mt-[14px]">Click less to do more actions: set fields values, update nested
collections, add new things.</div>
</div>
<img class="w-[90vw] sm:w-[50%] mt-6 sm:mt-0" src="./images/sec4-img1.jpg" alt="">
</div>
<div class="flex flex-col-reverse sm:flex-row items-center justify-around sm:space-x-[104px] px-[50px] mt-[75px]">
<img class="w-[90vw] sm:w-[50%] mt-6 sm:mt-0" src="./images/sec4-img2.jpg" alt="">
<div class="w-[90vw] sm:w-[50%]">
<div class="text-[48px]">Rules</div>
<div class="text-[20px] mt-[14px]">Don't click at all. Set up automation rules to make things happen.
Write code if you need something very unique and specific.</div>
</div>
</div>
</section>
<section class="w-[79wv] mt-[170px] mx-auto relative">
<div class="px-[10px] sm:pl-[55px] w-full sm:w-[749px] font-Baskerville text-[39px] md:text-[49px] lg:text-[69px]">Collaborative Docs &
Whiteboards</div>
<div class="px-[10px] sm:pl-[55px] mt-[28px] max-w-[717px] text-[20px] leading-[32px]">Make your apps collaborative 🏓:
create specs, capture meeting notes, brainstorm problems, and connect text to databases.</div>
<img class="absolute top-[10px] right-0 hidden sm:block" src="./images/sec5-logo.svg" alt="">
<div>
<ul class="flex space-x-[95px] px-[55px] mt-[55px]">
<li>
<div class="text-[28px]">Docs</div>
<div class="mt-[6px] leading-[24px]">Discuss ideas together in real time, leave comments, mention
teammates, create tasks or insights right from the text.</div>
<div class="bg-[#242938] opacity-0 h-[3px] w-[55%] mt-[29px] tabs-active"></div>
</li>
<li>
<div class="text-[28px]">Whiteboards</div>
<div class="mt-[6px] leading-[24px]">Create diagrams, mindmaps, or customer journey maps, brainstorm
and organize ideas together.</div>
<div class="bg-[#242938] opacity-0 h-[3px] w-[55%] mt-[29px]"></div>
</li>
</ul>
<div class="mt-[100px]">
<img src="./images/sec5-img.jpg" alt="">
</div>
</div>
</section>
<section class="w-[79wv] mt-[170px] mx-auto relative">
<div class="pl-[55px] max-w-[749px] font-Baskerville text-[49px] lg:text-[69px]">Super-powerful <br class="lg:hidden"> Charts</div>
<div class="pl-[55px] mt-[28px] max-w-[717px] text-[20px] leading-[32px]">Visualize Fibery databases with 💪💪💪
charts. Build custom charts, including CFD, burn down, process efficiency, work importance, financial, and
transform data into information.</div>
<img class="absolute top-[10px] right-0" src="./images/sec6-logo.svg" alt="">
<div>
<ul class="flex items-center justify-around px-[55px] mt-[55px]">
<li>
<div class="text-[20px] lg:text-[28px] relative sec5-tabs-active">Easy Setup</div>
</li>
<li>
<div class="text-[20px] lg:text-[28px] relative">Stacked Bar</div>
</li>
<li>
<div class="text-[20px] lg:text-[28px] relative">Forecast</div>
</li>
<li>
<div class="text-[20px] lg:text-[28px] relative">Facets</div>
</li>
<li>
<div class="text-[20px] lg:text-[28px] relative">Table</div>
</li>
</ul>
<div class="mt-[25px] lg:mt-[100px]">
<img class="mx-auto" src="./images/sec6-img.jpg" alt="">
</div>
</div>
</section>
<section class="h-[523px] w-[79wv] mx-auto bg-sec7-bg">
<div class="grid place-content-center">
<div class=" pt-[150px] text-[49px] lg:text-[69px] leading-[91px]">Try for free till you ❤️ it.</div>
<div class="mt-[10px]">Get a single connected workspace where all teams are welcome.</div>
<div class="mt-[40px] flex items-center space-x-[20px]">
<a href="#" class="text-[20px] font-bold text-white bg-black py-[5px] px-[20px] rounded-[3px]">Start
90-day trial</a>
<a href="#" class="flex items-center justify-center border-[2px] border-[#242938] rounded-[3px] w-[174px] h-[26px]"><span><img class="mr-[9px]" src="./images/sec7-small-img.png" alt=""></span> Get a demo</a>
</div>
</div>
</section>
<!-- sec8 -->
<section class="w-[79wv] mx-auto">
<div class="text-[21px]">Might be helpful to check out:</div>
<div class="mt-[80px] flex items-start justify-between gap-x-[15px] lg:gap-x-[30px] px-[10px] flex-wrap">
<div class="lg:px-[30px] xl:px-[43px] pt-[32px] w-[263px] min-h-[531px] custom-shadow-1">
<img class="mx-auto" src="./images/sec8-img1.svg" alt="">
<div class="text-[24px] mt-[50px] mb-[8px]">Product Management</div>
<div class="leading-[25px]">Aggregate customers feedback from many sources, link feedback to features,
make smart decisions about priorities, and invent new ideas together.</div>
</div>
<div class="lg:px-[30px] xl:px-[43px] pt-[32px] w-[263px] min-h-[531px] custom-shadow-1">
<img class="mx-auto" src="./images/sec8-img2.png" alt="">
<div class="text-[24px] mt-[49px] mb-[9px]">Startup</div>
<div class="leading-[25px]">Set strategy, connect it to execution, validate ideas, research your market,
and do stuff. Stay focused and discover new insights.</div>
</div>
<div class="lg:px-[30px] xl:px-[43px] pt-[32px] w-[263px] min-h-[531px] custom-shadow-1">
<img class="mx-auto" src="./images/sec8-img3.svg" alt="">
<div class="text-[24px] mt-[49px] mb-[9px]">User Research</div>
<div class="leading-[25px]">Plan user researches and generate insights. Transform customers problems
into effective solutions, and connect user research to product development.</div>
</div>
<div class="lg:px-[30px] xl:px-[43px] pt-[32px] w-[263px] min-h-[531px] custom-shadow-1 bg-[#A7FEE9]">
<img class="mx-auto" src="./images/sec8-img4.png" alt="">
<div class="text-[24px] mt-[51px] mb-[8px]">New concierge service</div>
<div class="leading-[25px]">From setting up your account and installing templates to adding data and
creating custom views.</div>
</div>
</div>
</section>
<footer class="mt-[17vw] w-[85vw] mx-auto">
<div class="flex items-start justify-between">
<div class="mt-[43px] w-[17vw]">Platform that adapts and grows with your company</div>
<ul class="space-y-[14px] hidden md:block">
<li class="mb-[19px] text-black">Solutions</li>
<li>Product teams</li>
<li>User research</li>
<li>Startup</li>
</ul>
<ul class="space-y-[14px]">
<li class="mb-[19px] text-black">Product</li>
<li>Templates</li>
<li>Pricing</li>
<li>Fibery vs. X</li>
<li>Integrations</li>
<li>Anxiety</li>
<li>Remote</li>
</ul>
<ul class="space-y-[14px]">
<li class="mb-[19px] text-black hidden sm:block">Team</li>
<li>About us</li>
<li>Contact us</li>
<li>Blog</li>
<li>Startup diary</li>
</ul>
<ul class="space-y-[14px]">
<li class="mb-[19px] text-black">Help & Useful</li>
<li>Help center</li>
<li>Twitter @fibery_io</li>
<li>Guides</li>
<li>API</li>
<li>Community</li>
</ul>
</div>
<ul class="flex w-[527px] justify-between mt-[65px] items-center">
<li class="text-black text-[18px]">© Fibery</li>
<li class="text-black/50 text-[14px]">Terms</li>
<li class="text-black/50 text-[14px]">Privacy Policy</li>
<li class="text-black/50 text-[14px]">Cookies Policy</li>
<li class="text-black/50 text-[14px]">Cloud Security</li>
</ul>
</footer>
<script src="main.js"></script>
</body>
</html>