-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
291 lines (268 loc) · 13 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<link rel="icon" type="image/svg+xml" href="./public/cps-assets/logo-white-small.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Creative Productive Software (CPS) is a powerful suite of document editors
including popular formats such as .docx, .pdf, .pptx .etc and a host of other functions & formats." />
<meta name="keywords" content="CPS, Creative Productive Software, PDF Editor, Spreadsheet Editor" />
<meta author="Marvin" />
<title>CPS - a powerful, modern document editor </title>
<link rel="stylesheet" href="src/styles/accordion.css">
<script type="module" src="./src/scripts/navbar-scroll-event.js" defer></script>
<script type="module" src="./src/scripts/side-bar.js" defer></script>
</head>
<body class="bg-[#f4f5ff] overflow-x-hidden">
<header class=" p-3 sticky top-0 z-[999]" id="header">
<nav class="mobile">
<div class="top-navbar flex">
<!-- <img src="menu-icon.svg" alt="menu-icon" onclick="openMenu()"> -->
<img src="./public/menu.svg" alt="menu-icon" id="open-btn" class="">
<span class="m-auto"> <img src="./public/cps-assets/logo-white-small.svg" width="30px" alt=""> </span>
<img src="./public/avatar.svg" alt="avatar logo">
</div>
<div id="sidebar"
class="sidebar shadow-2xl w-[0] fixed z-10 top-0 left-0 transition-all duration-[0.4s] overflow-hidden h-[100vh] bg-white ">
<div>
<div class="p-5">
<div class="close-btn" id="close-btn">
<!-- <img src="close.svg" alt="close icon" width="14px" onclick="closeMenu()"> -->
<img src="./public/close.svg" alt="close icon" width="14px">
</div>
<button class="mt-7 py-3 text-sm bg-black/[0.9] rounded-lg text-white w-[100%] shadow-md">
<p class="text-[12px]">Free download</p>
</button>
</div>
<div class="mobile accordion-container w-[100%]">
<div class="" id="accordion"></div>
</div>
</div>
</div>
</div>
</nav>
<nav class="pc hidden">
<div class="flex text-[11px]">
<div class="max-w-max" id="nav-menu"></div>
<div class="flex w-full items-center">
<div class="flex">
<a href="#" class="nav-link">
Product
</a>
<a href="#" class="nav-link">
Company
</a>
</div>
<button
class="ml-auto text-[11px] bg-black/[0.9] rounded-md px-[12px] py-[8.5px] text-white shadow-md button-clicked">Download
now</button>
</div>
</div>
</nav>
</header>
<main class="-mt-[150px]">
<section class="hero flex justify-center pb-0">
<div class="wrapper pt-[170px] flex flex-col items-center max-w-[1000px]">
<div class="texts text-center">
<h2 class="text-xl mb-3 font-bold">
Free You From Busy Work
<span
class="text-[10px] leading-[22px] text-white bg-[#0A6CFF] py-[0px] px-[7.5px] rounded-full outline outline-[2.5px] outline-blue-100 translate-y-[-4px] hidden md:inline-block">New
v2023
</span>
</h2>
<p class="text-[12px] mb-5 md:max-w-[650px]">
CPS Office is a lightweight, feature-rich comprehensive office suite with high compatibility. As a handy and
professional office software, CPS Office allows you to edit files in Writer, Presentation, Spreadsheet, and
PDF to
improve your work efficiency.
</p>
<div class="flex justify-center">
<button
class="flex items-center gap-x-1 max-h-[40px] button-clicked text-[12px] font-bold bg-black text-white rounded-lg shadow-lg px-[14px] py-[9px] md:px-4 md:py-3">
<img src="./public/download-icon.svg" alt="download icon svg" width="20px">
<span>Free download</span>
</button>
</div>
</div>
<div class="p-5 pb-0 max-w-[380px] md:max-w-[680px]">
<img src="./public/cps-assets/hero.png" alt="hero image" class="translate-y-[10px]">
</div>
</div>
</section>
<section class="app-suite p-3 py-12 bg-white">
<div class="texts text-center mb-5">
<h2 class="text-xl mb-2 font-bold">Free All-in-One Office Suite</h2>
<p class="text-[12px]">
Effortlessly create, edit, and collaborate on Word, Spreadsheets, Presentations, and PDFs in one place.
</p>
</div>
<div class="illustrations flex justify-center gap-x-3">
<div class=""><img src="./public/cps-assets/mobile/writer-app-logo-mobile.svg" alt="cps writer logo"
class="scale-[0.97] [marginTop:-3px]" width="100px"></div>
<div class=""><img src="./public/cps-assets/mobile/spreadsheet-app-logo-mobile.svg" alt="cps spreadsheet logo"
class="" width="100px"></div>
<div class=""><img src="./public/cps-assets/mobile/presentation-app-logo-mobile.svg" alt="cps presentation logo"
class="" width="100px"></div>
</div>
</section>
<section
class="gallery-wall py-8 overflow-hidden flex justify-center relative bg-gradient-to-b from-[#F5F9FF] from-[25%] md:bg-gradient-to-r md:from-[50%] ">
<div class="wrapper my-4 pb-[150px] max-w-[1000px]">
<div class="">
<div class="texts text-center">
<h2 class="text-xl mb-3 font-bold">
<span class="underline text-orange-500"> 10,000+</span> Templates to make your work Presentation out
</h2>
<p class="text-[12px] mb-5 md:max-w-[650px]">
We provide thousands of professional free templates by category. With these templates, you can customize
your creative
designs on work documents such as resumes, project plans, reports, and courseware.
</p>
<div class="flex justify-center">
<button
class="button-clicked text-[12px] font-bold bg-black text-white rounded-lg shadow-lg px-[14px] py-[9px] md:px-4 md:py-3">
Explore all templates
</button>
</div>
</div>
</div>
<div class="images-wrapper flex absolute z-[-2] top-0 -ml-[10px] p-5 h-full w-full">
<div class="md:ml-[300px]" id="gallery"></div>
</div>
</div>
</section>
<section class="collaboration flex justify-center py-12 p-5 bg-white">
<div class="wrapper flex flex-col items-center md:flex-row max-w-[1000px]">
<div class="texts text-center md:text-left">
<h2 class="text-xl mb-3 font-bold">Team Collaboration in Real Time</h2>
<p class="text-[12px] mb-5">
True synchronization and seamless collaboration on all platforms. You can track
changes as others type when you work collaboratively, and set edit permissions
to protect data security.
</p>
<button class="button-clicked text-[12px] font-bold bg-black text-white rounded-lg shadow-lg px-4 py-3">Start
your
Collaboration</button>
</div>
<div class="p-5 max-w-[350px] md:max-w-[470px]">
<img src="./public/cps-assets/collaboration.png" alt="cps collaboration image" class="">
</div>
</div>
</section>
<section class="achievements pb-10 bg-gradient-to-br from-[#6B6A75] to-[#484856] overflow-hidden relative">
<div class="wrapper sm:pt-3 text-white p-3 pt-4">
<div class="texts relative z-10">
<h3 class="text-xl font-bold"> Our Achievements </h3>
<p class="text-[11px] text-white/[.8] mt-3 max-w-[700px]">
CPS Office is a world-leading office software solution provider for improving individual and business
productivity. CPS
has been widely recognized for industry leadership and won numerous awards, including ITreview Grid Award
2021
Spring/Summer, APP Annie's 2018 Top App for Oversea Market, and Google Play Award.
</p>
</div>
<div class="awards p-4 flex gap-x-3 justify-center">
<img src="./public/cps-assets/award-big.svg" alt="cps award small image" class="award md:w-[150px]"
width="100px">
<img src="./public/cps-assets/award-big.svg" alt="cps award big" class="award md:w-[180px]" width="130px">
<img src="./public/cps-assets/award-big.svg" alt="cps award small image" class="award md:w-[150px]"
width="100px">
</div>
<div class="designs">
<img src="./public/cps-assets/sun.svg" class="w-[100px] absolute top-[-17%] -z-1" alt="sun design 1">
<img src="./public/cps-assets/sun.svg" class="md:w-[300px] hidden md:block absolute top-[-50%] right-[5%]"
alt="sun design 2">
</div>
</div>
</section>
<section class="downloads relative overflow-hidden flex justify-center bg-white py-5">
<div class="wrapper flex flex-col items-center md:flex-row max-w-[1000px]">
<div class="p-5 max-w-[350px] md:max-w-[470px]">
<img src="./public/cps-assets/wps-illustration.png" alt="wps illustration" class="">
</div>
<div class="texts text-center md:text-left">
<h2 class="text-xl mb-3 font-bold">Get Started with CPS Office for Free</h2>
<p class="text-[12px] mb-5">
Improve work efficiency and inspire your creativity with 170 million CPS Office users worldwide.
</p>
<button class="button-clicked mb-2 text-[12px] font-bold bg-black text-white rounded-lg shadow-lg px-4 py-3">
Download now
</button>
</div>
</div>
<div class="designs pc hidden">
<!-- overflow hidden was used to clip out designs -->
<img src="./public/cps-assets/purple-circle.svg" alt="" width="150px" class="absolute top-[-25%] right-[5%]">
<img src="./public/cps-assets/black-circle.svg" alt="" width="150px"
class="absolute bottom-[-28%] right-[35%] scale-[.8]">
<img src="./public/cps-assets/black-circle.svg" alt="" width="150px"
class="absolute top-[48%] right-[6%] scale-[.5]">
<img src="./public/cps-assets/blob.svg" alt="" class="absolute bottom-[-47%] left-[4%]">
</div>
</section>
</main>
<footer class="bg-[#eeeff1]" id="footer">
<div class="md:flex">
<div class="company-info p-5 md:mr-5 md:pt-8">
<!-- <img src="./public/cps-assets/wps-logo.svg" alt="cps-logo" class="mb-3" width="82px"> -->
<img src="./public/cps-assets/logo-black-big.svg" alt="cps-logo" class="mb-3" width="100px">
<p class="body-text-header">Make Busy Work Easy</p>
<p class="body-text">CPS SOFTWARE PTE. LTD., 6 RAFFLES QUAY #14-06 SINGAPORE (048580)</p>
</div>
<div class="links-pc pc hidden w-full">
<div class="flex gap-x-9 mt-8">
<div class="product-links">
<p class="body-text-header">Product</p>
<div>
<ul class="body-text space-y-3 mt-2">
<li><a href="#">CPS Office for Windows</a></li>
<li><a href="#">CPS Office for MacOS</a></li>
<li><a href="#">CPS Office for Linux</a></li>
<li><a href="#">CPS Office for Android</a></li>
<li><a href="#">CPS Office for iPhone</a></li>
</ul>
</div>
</div>
<div class="company-links">
<p class="body-text-header">Company</p>
<div>
<ul class="body-text space-y-3 mt-2">
<li><a href="#">About US</a></li>
<li><a href="#">Business Cooperation</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Sales</a></li>
</ul>
</div>
</div>
<div class="support-links">
<p class="body-text-header">Support</p>
<div>
<ul class="body-text space-y-3 mt-2">
<li><a href="#">Feedback</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="#">CPS Academy</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-container mobile" id="footer-accordion"></div>
<div class="language p-5 space-y-4 pt-12">
<div class="" id="select-button"></div>
<p class="body-text">Copyright © QueenSoft Office Software, All Rights Reserved</p>
</div>
<div class="notice bg-black text-white p-5 text-center">
<p class="text-[12px]"> <b>Disclaimer:</b> This is a simplified clone of the <a
class="text-blue-400 underline hover:text-slate-400" href="https://www.wps.com">WPS website</a>, a pet project
of the
author. All rights reserved. </p>
</div>
</footer>
<div id="root" class=""></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>