-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
322 lines (288 loc) · 15.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Teamwork: Work & Project Management Software</title>
<link rel="stylesheet" href="public/build/tailwind.css" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap");
</style>
</head>
<style>
* {
border: px;
border-color: red;
/* border: solid; */
}
</style>
<body class="font-quicksand">
<!-- Nav Component Start -->
<div class="max-w-sm mx-auto">
<div>
<nav class="flex justify-between fixed w-full bg-white scroll:shadow-lg">
<div class="logo w-32 m-8 mt-6">
<img src="public/img/logo.png" alt="Logo" />
</div>
<div class="menu mx-6 mb-6 mt-6">
<img class="w-5" src="public/img/menu.svg" alt="menu-collapsed" />
</div>
</nav>
</div>
<!-- Nav Component End -->
<!-- Intro Component Start -->
<div class="intro-section pt-20">
<div class="mx-8 mb-4 mt-1 ">
<div class="text-2xl font-semibold tracking-wide">
<p class="leading-relaxed">The project management software loved by</p>
<p class="inline users text-indigo-600"></p>
</div>
<div class="mt-6 mb-4 text-gray-700 font-normal text-lg">
<p>Trusted by over 20,000 companies</p>
</div>
<div class="my-1 mr-3">
<div class="flex">
<div class="flex-none">
<img class="w-5 object-contain pb-6" src="public/img/checked.png" alt="checked" />
</div>
<span class="ml-4 text-gray-600 font-semibold tracking-wider text-sm">Simple to use, powerful when you need
it</span>
</div>
<div class="flex my-1">
<div class="flex-none">
<img class="w-5 object-contain pb-6" src="public/img/checked.png" alt="checked" />
</div>
<span class="ml-4 text-gray-600 font-semibold tracking-wider text-sm">Manage multiple complex projects with
ease
</span>
</div>
<div class="flex my-1">
<div class="flex-none">
<img class="w-5 object-contain pb-12" src="public/img/checked.png" alt="checked" />
</div>
<span class="ml-4 text-gray-600 font-semibold tracking-wider text-sm">Scales into a platform with everything
you need to run your company</span>
</div>
</div>
<div class="my-16"></div>
<div>
<button class="bg-indigo-600 px-6 py-4 rounded text-white text-normal font-semibold tracking-wide hover:bg-indigo-800">
Try teamwork for free
</button>
</div>
</div>
<div class="my-16"></div>
<div>
<img src="https://images.ctfassets.net/gg4ddi543f5b/6DCERa76lXrlk9ZLIXbD7j/191cd59e3b1ce270b74de23b9be83e64/board-view-clip-4.webp"
alt="team-image">
</div>
<div class="promotional-images flex flex-wrap">
<img src="https://website-assets.teamwork.com/offload/app/uploads/2020/07/13110843/g2-crowd-review.svg" alt="TeamWork"
class="pl-6 py-5">
<img src="https://website-assets.teamwork.com/offload/app/uploads/2020/07/13110842/capterra-review.svg" alt="Captera"
class="pl-6 py-5">
<img src="https://website-assets.teamwork.com/offload/app/uploads/2020/07/13110841/softwareadvice-review.svg" alt="Software Advice"
class="pl-6 py-5">
<img src="https://website-assets.teamwork.com/offload/app/uploads/2020/07/13110839/pc-mag-review.svg" alt="PC Editors Choice"
class="pl-6 py-5">
</div>
<div class="my-12"></div>
<div class="clients-pictures flex flex-wrap mx-1 pr-6">
<img src="https://d33wubrfki0l68.cloudfront.net/2fffe449f9cb7e34ef1a468c33903932f585a6fe/d182c/_nuxt/assets/customerlogos/paypal-logo-home.svg"
alt="PayPal" class="pl-6 py-2 w-1/3">
<img src="https://d33wubrfki0l68.cloudfront.net/64570e9c4bfe391161c0f73301be136ac1d0a7ea/395aa/_nuxt/assets/customerlogos/spotify-logo-home.svg"
alt="Spotify" class="pl-6 py-2 w-1/3">
<img src="https://d33wubrfki0l68.cloudfront.net/9ea71e3150b8bb015b1d16694bf621dc1211d156/67865/_nuxt/assets/customerlogos/disney-logo-home.svg"
alt="Disney" class="pl-6 py-2 w-1/3">
<img src="https://d33wubrfki0l68.cloudfront.net/f8b74fddb343ea421e44cce24195e290f2b5f6d1/5e4ef/_nuxt/assets/customerlogos/netflix-logo-home.svg"
alt="Netflix" class="pl-6 py-2 w-1/3">
<img src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIHdpZHRoPSI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjAgNDBjLS4xOTg3OTY0IDAtLjM5Njc1OTMtLjAwMzYxMTEtLjU5NDM1MTgtLjAwOTM1MThsNC4wODczMTQ3LTExLjIzMzEyMjJoNS42MjVjLjk4NzMxNDkgMCAyLjA3MTExMTEtLjc1ODk3OTYgMi40MDg3OTY0LTEuNjg2MjkyNGw0LjQzNDQ0NDMtMTIuMTgwMTU3Yy43MjU0NjMxLTEuOTk0MTYyLS40MTY3NTkyLTMuNjI1NjM5Ny0yLjUzODcwMzYtMy42MjU2Mzk3aC03LjgwMzYxMTFsLTYuNTQ3Njg1MyAxNy45OTIxODA2aC0uMDAyNDA3MmwtMy43MTE5NDQ1IDEwLjE5OTMyODFjLTguODA2NDgxNTQtMi4wOTM2MDYxLTE1LjM1Njg1MTktMTAuMDA5OTc2Ny0xNS4zNTY4NTE5LTE5LjQ1Njg5OTIgMC05LjE3NDYwODUgNi4xNzc4NzAzNi0xNi45MDU1MTY1MyAxNC42MDAyNzc4LTE5LjI2MTcxNDc4bC0zLjgzMDA5MjYgMTAuNTI3MTA1MjhoLS4wMDExMTExbC02LjM2NzMxNDg1IDE3LjQ5MjA4OTEgNC4yMzg3MDM3MS4wMDAzNzA0IDUuNDE0OTA3NDQtMTQuODYzOTQ3MWgzLjE4NTU1NTVsLTUuNDE0OTA3NCAxNC44NjM5NDcxIDQuMjM3MTI5Ni4wMDA3NDA3IDUuMDQ2MTExMi0xMy44Njc1NjA1Yy43MjU5MjYtMS45OTQxNjItLjQxNjM4ODktMy42MjU2Mzk3LTIuNTM2Mzg4OS0zLjYyNTYzOTdoLTMuNTYzMDU1Nmw0LjA5MTI5NjMtMTEuMjQ0NDE4NDNjLjI5ODI0MDctLjAxMzI0MDcxLjU5NzU5MjUtLjAyMTAxODQ3Ljg5ODg4ODktLjAyMTAxODQ3IDExLjA0NTc0MDcgMCAyMCA4Ljk1NDIzODUzIDIwIDIwLjAwMDA0NjQgMCAxMS4wNDU1My04Ljk1NDI1OTMgMTkuOTk5OTUzNi0yMCAxOS45OTk5NTM2em0xMi43MjcyNzI3LTI3LjI3MjcyNzNoLTMuMDI5Nzg5MmwtNC4yNDI5MzggMTIuNzI3MjcyOGgzLjAyOTg3NzJ6IiBmaWxsPSIjNzI3NDkxIi8+PC9zdmc+"
alt="hp" class="pl-6 py-2 w-1/3 object-scale-down">
<img src="https://d33wubrfki0l68.cloudfront.net/af5f2ae7825f1b3856527982afcdff805616ad40/4cd21/_nuxt/assets/customerlogos/panasonic-logo-home.svg"
alt="Panasonic" class="pl-6 py-2 w-1/3">
</div>
</div>
<div class="bg-gray-100 mt-10 pt-16 pb-2">
<div>
<img src="https://images.ctfassets.net/gg4ddi543f5b/38VKqp3Kl11uUpvkVniqs3/f14551c4f54d8d3afac9caef0c0ea292/create-a-task-no-bg_2x.png"
alt="usage-example">
</div>
<div class="mx-8 mt-40 mb-24 text-indigo-900 leading-7">
<div>
<h1 class=" text-2xl font-black tracking-wider text-indigo-900">Simple to use, <span class="text-pink-600 ">powerful</span>
when you need it</h1>
</div>
<div class="mt-8 leading-7">
<h3 class="inline font-extrabold">All the project management essentials you need</h3><span class="ml-3"><img
src="public/img/up-arrow.svg" alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">Create tasks and projects, upload files, and add comments. With Teamwork
everything is in one central location.</p>
</div>
<div class="mt-8 leading-7">
<h3 class="inline font-extrabold">Flexible, so you can customize for your workflow </h3><span class="ml-3"><img
src="public/img/up-arrow.svg" alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">View your project as a task list, Gantt chart, or board view. You can
customize Teamwork to how you already work.</p>
</div>
<div class="mt-8">
<h3 class="inline font-extrabold">Advanced features for complex projects</h3><span class="ml-1"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">Teamwork has all of the advanced features that basic tools lack so you won’t
outgrow it as you scale. Gantt charts, board view,<br> <span class="text-indigo-600 underline font-bold">Portfolio
management</span>, time tracking, reporting dashboards,<span class="text-indigo-600 underline font-bold">
workload management</span> and many, many more.</p>
</div>
</div>
</div>
<div>
<div class="mx-16 mt-16 mb-64">
<img src="https://images.ctfassets.net/gg4ddi543f5b/5cPjbzT8BmcxncKxlj9y1a/e3f056632228fef1d5e1194a101ea537/dashboard-overivew_2x.webp"
alt="Task List Image">
</div>
<!-- Manage multiple com -->
<div class="mx-8 my-40 text-indigo-900">
<div>
<h1 class="text-2xl font-extrabold tracking-wider text-indigo-900">Manage multiple complex projects with ease</h1>
</div>
<div class="mt-8 leading-7">
<h3 class="inline font-bold">Instantly know what’s on and off track</h3><span class="ml-3"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm">Use dashboards, Board View and project health status updates to see how your project is
progressing and what’s left to do.</p>
</div>
<div class="mt-8 leading-7">
<h3 class="inline font-bold">Keep everyone accountable </h3><span class="ml-3"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm">Assign tasks so everyone knows who’s responsible for what. Use time tracking to measure how
long tasks take, so you can plan new projects more efficiently and avoid team burnout. Learn more about time
tracking</p>
</div>
<div class="mt-8 leading-7">
<h3 class="inline font-bold">Use your resources more wisely </h3><span class="ml-3"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm">Get deep insights into your team’s resources so you can see who’s at capacity and who has
the bandwidth to take on more work.
</p><span class="text-indigo-600 underline font-bold"><br>Learn more about Workload</span>
</div>
<!-- Integrate with tools compinent -->
<div class="my-16"></div>
</div>
<div class="mx-6">
<div>
<h1 class="font-extrabold text-2xl text-center mx-4 leading-tight">Integrate with the tools you already use</h1>
<div class="my-8 flex flex-wrap justify-around w-full">
<img class="pl-3" src="https://website-assets.teamwork.com/offload/app/uploads/2020/08/21143946/slack-logo-text.svg"
alt="Slack">
<img class="pl-3" src="https://website-assets.teamwork.com/offload/app/uploads/2020/08/21144532/xero-logo-text.svg"
alt="Xero">
<img class="pl-3" src="https://website-assets.teamwork.com/offload/app/uploads/2020/08/21144557/hubspot-logo-text.svg"
alt="HubSpot">
<img class="pl-3" src="https://website-assets.teamwork.com/offload/app/uploads/2020/08/21144621/google-drive-logo-text.svg"
alt="Slack">
<img class="pl-3" src="https://website-assets.teamwork.com/offload/app/uploads/2020/08/21144636/dropbox-logo-text.svg"
alt="Dropbox">
<img class="pl-3" src="https://website-assets.teamwork.com/offload/app/uploads/2020/08/21144651/zapier-logo-text.svg"
alt="Zapier">
<img class="pl-3" src="https://website-assets.teamwork.com/offload/app/uploads/2020/08/21144710/quickbooks-logo-text.svg"
alt="QuickBooks">
</div>
</div>
</div>
<div class="text-center mt-16 mb-24 text-indigo-600 underline"><a href="">And many more</a></div>
<div class="mb-32">
<img src="https://images.ctfassets.net/gg4ddi543f5b/4qRS83nYevykU1rH5VMGTW/c10abba1def869167d20ef8b34008d43/plan-more-efficiently-3__1__optimized.webp"
alt="">
</div>
</div>
<!-- Different Component -->
<div class="mx-4 text-indigo-900 leading-loose">
<h1 class="font-bold text-2xl">What makes Teamwork different?</h1>
<div class="mt-8 leading-7">
<h3 class="inline font-extrabold">Easy-to-use with enterprise level features </h3><span class="ml-3"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">Basic project management tools can’t meet your needs as you scale, Enterprise
Software is expensive and difficult to learn. Teamwork is the best of both worlds: easy-to-use, flexible, and
feature-rich.</p>
</div>
<div class="mt-8 leading-7">
<h3 class="inline font-extrabold">Customer support you’ll love </h3><span class="ml-3"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">Our customer support team are always there to help — no matter what the
question. “The support is best I’ve ever had – that is absolutely critical to me” – Luis Muniz, CEO at Funnel
Wave</p>
</div>
<div class="mt-8">
<h3 class="inline font-extrabold">Got clients? Teamwork is for you </h3><span class="ml-1"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">Unlimited free access for clients. Time tracking. Invoicing. We know what
agencies need, we ran one before starting Teamwork.</p>
</div>
<div class="mt-8">
<h3 class="inline font-extrabold">Scales into a full platform </h3><span class="ml-1"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">Teamwork is at the core of managing your work and projects. But Teamwork with
our other tools can manage your whole business. Unlock more value by using our chat, helpdesk, CRM, or content
collaboration software and Teamwork as one integrated suite.</p>
</div>
<div class="mt-8">
<h3 class="inline font-extrabold">Run from North America, Europe or Australia </h3><span class="ml-1"><img src="public/img/up-arrow.svg"
alt="" class="w-3 inline "></span>
<p class="text-sm font-semibold">Teamwork is the only project management software that allows all customers (not
just enterprise) to choose where in the world your data is held and processed. We offer hosting in Europe,
North America and now Austrailia too. This means incredible speeds for you and peace of mind that your data is
safe, secure and legally protected. We’d love to tell you all about it and we can help you move any existing
data to Teamwork. Get in touch to learn more</p>
</div>
</div>
<!-- Purple section -->
<div class="bg-gray-900 text-white leading-0">
<div class="my-16 mx-8 pt-32 pb-6">
<div>
<h1 class="text-3xl text-center font-normal">Just try it out! You'll fall in love!</h1>
<p class="text-center my-2 mx-1">Try Teamwork for free. No credit card needed. No catches</p>
</div>
<div class="flex mt-12 mb-6 mx-2"><button class="mx-auto py-4 w-full bg-white text-indigo-900 ">Try Teamwork For
Free</button></div>
</div>
<div class="text-center font-semibold pb-1">Not convinced yet? Keep reading</div>
<span><img class="text-indigo-200 w-4 mx-auto pb-10" src="public/img/down-arr.svg" alt=""></img></span>
</div>
<div>
<div class="mx-4 my-16 leading-0">
<div class="text-center text-3xl my-4"><span>Trusted by over</span> <span class="block"> 20,000 companies</span></div>
<div class="text-center mx-6 leading-loose font-semibold text-gray-700 text-2xl">
<span class="md:mx-0">Join teams all over the</span>
<span class="md:mx-0"> world increasing their</span>
<span class="md:mx-0"> productivity with Teamwork</span>
</div>
</div>
<!-- Card -->
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js">
</script>
<script>
var typed = new Typed(".users", {
strings: [
"Project Managers",
"Agencies",
"Professional Services",
"Business Owners",
"Marketing Teams",
"IT Teams",
"Universities"
],
loop: true,
typeSpeed: 200,
startDelay: 100,
backDelay: 3000,
backSpeed: 100
});
</script>
</body>
</html>