├── imgs ├── logo.svg ├── speed-ui-mobile.png ├── header-ui-desktop.png ├── header-ui-mobile.png ├── privacy-ui-mobile.png ├── speed-ui-desktop.png ├── privacy-ui-desktop.png ├── graph.svg ├── chevrons-right.svg ├── video.svg ├── github.svg └── people.svg ├── README.md ├── LICENSE ├── style.css └── index.html /imgs/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /imgs/speed-ui-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vickonrails/prudent/HEAD/imgs/speed-ui-mobile.png -------------------------------------------------------------------------------- /imgs/header-ui-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vickonrails/prudent/HEAD/imgs/header-ui-desktop.png -------------------------------------------------------------------------------- /imgs/header-ui-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vickonrails/prudent/HEAD/imgs/header-ui-mobile.png -------------------------------------------------------------------------------- /imgs/privacy-ui-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vickonrails/prudent/HEAD/imgs/privacy-ui-mobile.png -------------------------------------------------------------------------------- /imgs/speed-ui-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vickonrails/prudent/HEAD/imgs/speed-ui-desktop.png -------------------------------------------------------------------------------- /imgs/privacy-ui-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vickonrails/prudent/HEAD/imgs/privacy-ui-desktop.png -------------------------------------------------------------------------------- /imgs/graph.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /imgs/chevrons-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /imgs/video.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /imgs/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Prudent 2 | 3 | Beautiful, Fast landing page template for your next mobile project - [Live Preview](https://prudent.netlify.com) 4 | 5 | ## Features 6 | 7 | - Almost 0 JavaScript 8 | - Sleek design 9 | - Highly responsive 10 | - Optimized images 11 | - Lighthouse score of 98 12 | 13 | ## Todo 14 | 15 | - [ ] Animate hamburger & mobile navigation 16 | - [x] Add credits for UI screenshots 17 | - [x] Make top left section a link 18 | 19 | ## Contributing 20 | 21 | This is a WIP, you can report issues you find or send a pull request to fix them. 22 | 23 | Happy hacking 🎉🎉🎉 24 | -------------------------------------------------------------------------------- /imgs/people.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Victor Ofoegbu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap"); 2 | 3 | /* General */ 4 | *, 5 | *::after, 6 | *::before { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | :focus { 12 | outline: 3px dotted var(--prim-color); 13 | } 14 | 15 | :root { 16 | --nav-shadow: 0 1px 4px rgba(178, 178, 178, 0.25); 17 | --black: #000; 18 | --black-light: #050505; 19 | --black-lighter: #4d4d4d; 20 | --white: #fff; 21 | --prim-color: #f15c41; 22 | --prim-color-shade1: #f17c41; 23 | --prim-color-shade2: #f16d41; 24 | --border-radius: 4px; 25 | --grey-background: #f1ecec; 26 | --prim-color-1: #f1e5e3; 27 | 28 | --tablet: 769px; 29 | --small-laptop: 1024px; 30 | --laptop: 1336px; 31 | --large-laptop: 1920px; 32 | } 33 | 34 | html { 35 | font-size: 16px; 36 | color: #333333; 37 | font-family: "Rubik", sans-serif, -apple-system, BlinkMacSystemFont, 38 | "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 39 | sans-serif; 40 | line-height: 1.5; 41 | } 42 | 43 | a { 44 | text-decoration: underline; 45 | color: var(--prim-color); 46 | position: relative; 47 | display: inline-block; 48 | transition: 0.25s transform; 49 | } 50 | a:hover { 51 | text-decoration: underline; 52 | } 53 | a.btn:hover, 54 | a.btn:focus { 55 | transform: translateY(-2px); 56 | box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12); 57 | } 58 | .with-arrow { 59 | text-decoration: none; 60 | } 61 | .with-arrow:hover { 62 | text-decoration: none; 63 | } 64 | .with-arrow::after { 65 | content: ""; 66 | background-image: url("./imgs/chevrons-right.svg"); 67 | height: 20px; 68 | width: 20px; 69 | position: absolute; 70 | display: inline-block; 71 | transition: 0.25s transform; 72 | } 73 | .with-arrow:hover::after { 74 | transform: translateX(5px); 75 | } 76 | p, 77 | ul, 78 | ol, 79 | li { 80 | margin-bottom: 1em; 81 | } 82 | h1, 83 | h2, 84 | h3, 85 | h4 { 86 | font-weight: 900; 87 | line-height: 1.13; 88 | margin-bottom: 0.2em; 89 | color: currentColor; 90 | } 91 | h1 { 92 | font-size: 2.5em; 93 | letter-spacing: 0; 94 | } 95 | h2 { 96 | font-size: 1.88em; 97 | } 98 | img { 99 | width: 100%; 100 | } 101 | body { 102 | margin-top: 4em; 103 | overflow-x: hidden; 104 | } 105 | 106 | hr { 107 | border: 0; 108 | border-bottom: 1px solid #ffe4df; 109 | } 110 | .container { 111 | padding: 0 3%; 112 | max-width: 1400px; 113 | margin: 0 auto; 114 | } 115 | .nav { 116 | padding: 0.625rem 0; 117 | box-shadow: var(--nav-shadow); 118 | position: fixed; 119 | width: 100%; 120 | z-index: 3; 121 | background: var(--white); 122 | top: 0; 123 | } 124 | .nav__container { 125 | display: flex; 126 | justify-content: space-between; 127 | max-width: 1800px; 128 | } 129 | .nav__right { 130 | display: flex; 131 | justify-content: center; 132 | align-items: center; 133 | } 134 | .nav__left a { 135 | display: flex; 136 | text-decoration: none; 137 | align-items: center; 138 | } 139 | .nav__left a:hover, 140 | .nav__left a:active { 141 | text-decoration: underline; 142 | } 143 | .nav__logo { 144 | margin-right: 4px; 145 | } 146 | .nav__hamburger { 147 | height: 30px; 148 | width: 30px; 149 | border: 0; 150 | position: relative; 151 | cursor: pointer; 152 | background: inherit; 153 | } 154 | .nav__hamburger::after, 155 | .nav__hamburger::before { 156 | content: ""; 157 | position: absolute; 158 | height: 2px; 159 | display: block; 160 | width: 100%; 161 | margin-right: 1px; 162 | background: var(--black); 163 | } 164 | .nav__hamburger::after { 165 | top: 30%; 166 | } 167 | .nav__hamburger::before { 168 | bottom: 30%; 169 | } 170 | .nav__mobile-nav { 171 | display: none; 172 | } 173 | .nav__mobiile-item { 174 | list-style-type: none; 175 | margin: 0.5em 0 0; 176 | text-align: center; 177 | } 178 | .nav__mobiile-item:last-child { 179 | margin-bottom: 0; 180 | } 181 | .nav__mobile-link { 182 | text-decoration: none; 183 | } 184 | .nav__mobile-link:hover, 185 | .nav__mobile-link:active { 186 | text-decoration: underline; 187 | } 188 | .nav__nav-desktop { 189 | display: none; 190 | } 191 | .nav__desktop-link { 192 | text-decoration: none; 193 | } 194 | body.mobile-nav-open .nav__mobile-nav { 195 | display: block; 196 | } 197 | 198 | .privacy { 199 | background-color: #ffffff; 200 | } 201 | 202 | /* header */ 203 | .header__container { 204 | display: flex; 205 | flex-direction: column; 206 | padding-top: 3.125em; 207 | padding-bottom: 2em; 208 | } 209 | 210 | /* utilty */ 211 | 212 | .header { 213 | background-color: #ffffff; 214 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23f15c41' fill-opacity='0.06'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 215 | } 216 | .highlighted { 217 | color: var(--prim-color); 218 | } 219 | .grey-background { 220 | background: var(--grey-background); 221 | } 222 | .text-centered { 223 | text-align: center; 224 | } 225 | .prim-background { 226 | background: var(--prim-color); 227 | color: var(--white); 228 | } 229 | 230 | /* btns */ 231 | .btn { 232 | background: var(--prim-color); 233 | color: var(--white); 234 | border: 0; 235 | font: inherit; 236 | text-decoration: none; 237 | border-radius: var(--border-radius); 238 | padding: 0.6em 0.8em; 239 | display: block; 240 | line-height: 1; 241 | cursor: pointer; 242 | } 243 | .btn:hover { 244 | text-decoration: none; 245 | } 246 | .btn-group { 247 | display: flex; 248 | justify-content: space-between; 249 | margin-bottom: 1em; 250 | max-width: 13.7em; 251 | } 252 | 253 | .patterns-left::after, 254 | .patterns-left::before, 255 | .patterns-right::after, 256 | .patterns-right::before { 257 | content: ""; 258 | position: absolute; 259 | top: 50%; 260 | left: 0; 261 | transform-origin: left center; 262 | width: 10em; 263 | height: 6.25em; 264 | z-index: -10; 265 | } 266 | .patterns-left, 267 | .patterns-right { 268 | position: absolute; 269 | height: 6em; 270 | width: 12.5em; 271 | top: 50%; 272 | transform: translateY(-50%); 273 | right: -10%; 274 | display: block; 275 | } 276 | .patterns-left { 277 | left: -10%; 278 | } 279 | .patterns-right { 280 | transform: translateY(-50%) rotate(180deg); 281 | } 282 | .patterns-right::after, 283 | .patterns-right::before { 284 | background: #fff; 285 | } 286 | 287 | .patterns-left::before, 288 | .patterns-right::before { 289 | background: var(--prim-color-shade1); 290 | transform: translateY(-50%) rotate(35deg); 291 | } 292 | .patterns-left::after, 293 | .patterns-right::after { 294 | background: var(--prim-color-shade2); 295 | transform: translateY(-50%) rotate(-35deg); 296 | } 297 | .cta .btn-group { 298 | margin: 0 auto; 299 | } 300 | .cta .btn { 301 | border: 1px solid #fff; 302 | } 303 | .btn-group > .btn:not(:last-child) { 304 | margin-right: 0.5em; 305 | } 306 | .btn.btn-secondary { 307 | color: var(--prim-color); 308 | border: 1px solid var(--prim-color); 309 | background: var(--white); 310 | } 311 | 312 | /* sections */ 313 | .section { 314 | padding: 3em 0 2em; 315 | } 316 | .section__heading-small { 317 | font-size: 0.88rem; 318 | display: block; 319 | text-transform: uppercase; 320 | font-weight: 400; 321 | margin-bottom: 0.62em; 322 | } 323 | .section__text-content { 324 | margin-bottom: 1.25em; 325 | } 326 | .cta__container { 327 | z-index: 1; 328 | position: relative; 329 | } 330 | .section__text { 331 | margin-bottom: 0.5em; 332 | } 333 | .section__container { 334 | display: flex; 335 | flex-direction: column; 336 | } 337 | .features { 338 | display: flex; 339 | margin: 0 auto; 340 | flex-direction: column; 341 | } 342 | .features .section__heading { 343 | margin-bottom: 1.5em; 344 | } 345 | .features__feature-text { 346 | margin-bottom: 0.5em; 347 | color: #4d4d4d; 348 | } 349 | .features__feature { 350 | max-width: 350px; 351 | margin: 0 auto 3em; 352 | } 353 | .features__icon { 354 | background: var(--prim-color-1); 355 | height: 50px; 356 | width: 50px; 357 | display: flex; 358 | border-radius: 100%; 359 | margin: 0 auto 0.75em; 360 | } 361 | .features .section__container { 362 | display: block; 363 | } 364 | .features__feather-video { 365 | margin: auto; 366 | stroke-width: 2px; 367 | color: var(--prim-color); 368 | } 369 | 370 | .header__text-text, 371 | .section__text { 372 | max-width: 400px; 373 | } 374 | .cta { 375 | color: #fff; 376 | padding: 4em 0; 377 | overflow: hidden; 378 | position: relative; 379 | } 380 | 381 | /* Footer */ 382 | .footer ul, 383 | .footer ol { 384 | list-style: none; 385 | } 386 | .footer__links-heading { 387 | font-weight: bold; 388 | } 389 | .footer__links-item { 390 | margin-bottom: 0.5em; 391 | } 392 | .footer__container { 393 | display: flex; 394 | flex-wrap: wrap; 395 | } 396 | .footer__links { 397 | flex: 1 1 150px; 398 | margin-bottom: 2.5em; 399 | } 400 | .footer__links-heading { 401 | margin-bottom: 0.3em; 402 | } 403 | .footer__link { 404 | font-size: 0.88em; 405 | text-decoration: none; 406 | color: var(--black-light); 407 | } 408 | .footer__links-list { 409 | margin-bottom: 0.2em; 410 | } 411 | 412 | @media screen and (min-width: 769px) { 413 | .header__container { 414 | align-items: center; 415 | } 416 | .header__container div:first-child { 417 | margin-right: 1em; 418 | } 419 | .header__container, 420 | .section__container { 421 | flex-direction: row; 422 | } 423 | .header__container > *, 424 | .section__container > * { 425 | flex: 1; 426 | } 427 | .section__container { 428 | align-items: center; 429 | } 430 | 431 | .features { 432 | flex-direction: row; 433 | justify-content: space-around; 434 | flex-wrap: wrap; 435 | } 436 | .features__feature { 437 | flex: 0 45%; 438 | } 439 | .nav__hamburger { 440 | display: none; 441 | } 442 | .nav__nav-desktop { 443 | display: flex; 444 | align-items: center; 445 | list-style-type: none; 446 | margin-bottom: 0; 447 | } 448 | .nav__desktop-item { 449 | margin: 0 0.25em; 450 | } 451 | .speed .section__text-content { 452 | order: 2; 453 | } 454 | .speed .section__img { 455 | margin-right: 1.5em; 456 | } 457 | .img-screen-ui { 458 | width: 500px; 459 | display: block; 460 | margin: 0 auto; 461 | } 462 | .patterns-left { 463 | left: 0; 464 | } 465 | .patterns-right { 466 | right: 0; 467 | } 468 | } 469 | 470 | @media screen and (min-width: 1024px) { 471 | .features__feature { 472 | flex: 0 30%; 473 | } 474 | h1 { 475 | font-size: 3.8em; 476 | } 477 | h2 { 478 | font-size: 3em; 479 | } 480 | } 481 | 482 | @media screen and (min-width: 1366px) { 483 | :root { 484 | font-size: 18px; 485 | } 486 | /* h1 { 487 | font-size: 4.3em; 488 | } 489 | h2 { 490 | font-size: 3.5em; 491 | } */ 492 | } 493 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Prudent - Landing page for mobile application 9 | 10 | 11 |

12 |

13 |

14 | 15 | 25 | 26 | Prudent 27 | 28 |

29 |

30 | 31 | 51 |

52 |

53 | 54 |

55 |

56 |

58 | Home 59 |
61 | App Store 62 |
64 | See Github 71 |
73 | Features 74 |
76 | Pricing 77 |

79 |

80 |

81 |

82 |

83 |

84 |

85 |

86 | Fast, Secure & Performant Conferencing For 87 | Families 88 |

89 |

90 | Prudent is a mobile app for connecting with loved ones and families 91 | in real time. Get it on your platform’s store. 92 |

93 | 94 |

95 | 96 | App Store 97 | 98 | 104 | See Github 105 | 106 |

107 |

108 |

109 |

121 |

122 |

123 |

124 |

125 |

126 |

127 |

128 |

129 | WHY YOU SHOULD CARE 130 | Lightening Fast Data Transfer 131 |

132 |

133 | Our architecture is built using the most suitable technologies for 134 | fast, crystal clear, zero spinner video experiences. 135 |

136 | Read about our Infrastructure 139 |

140 |

141 |

Mobile Image

152 |

153 |

154 |

155 | 156 |

157 |

158 |

159 |

160 | WHY YOU SHOULD CARE 161 | Privacy & Security embedded 162 |

163 |

164 | Our company is at the centre of privacy and security ethics. No 165 | calls are recorded. All your data is encrypted meaning, we don't 166 | even know what you'll talk about. 167 |

168 | Read about our Infrastructure 171 |

172 |

173 |

Mobile Image

185 |

186 |

187 |

188 |

189 |

190 |

191 | 192 |

193 |

194 |

195 | Awesome Features 196 |

197 | 198 |

199 |

200 |

201 | 216 |

217 |

Call Recording

218 |

219 | You can record & save sections of your calls for later. You can 220 | record & save sections of your calls for later 221 |

222 | Try it Here 223 |

224 | 225 |

226 |

227 | 242 |

243 |

Multiple persons

244 |

245 | Video call up to 5 persons at once. No performance differences. 246 | Video call up to 5 persons at once. 247 |

248 | Try it Here 249 |

250 | 251 |

252 |

253 | 290 |

291 |

Mentions

292 |

293 | You can record & save sections of your calls for later. You can 294 | record & save sections of your calls for later 295 |

296 | Try it Here 297 |

298 | 299 |

300 |

301 | 317 |

318 |

Mentions

319 |

320 | You can record & save sections of your calls for later. You can 321 | record & save sections of your calls for later 322 |

323 | Try it Here 324 |

325 | 326 |

327 |

328 | 343 |

344 |

Mentions

345 |

346 | You can record & save sections of your calls for later. You can 347 | record & save sections of your calls for later 348 |

349 | Try it Here 350 |

351 | 352 |

353 |

354 | 369 |

370 |

Mentions

371 |

372 | You can record & save sections of your calls for later. You can 373 | record & save sections of your calls for later 374 |

375 | Try it Here 376 |

377 |

378 |

379 |

380 | 381 |

382 |

383 |

384 |

385 |

386 | Don't Be Left Out 387 |

388 |

Join Hundreds of families stay together anywhere in the world

389 | 390 |

391 | 392 | App Store 393 | 394 | 400 | See Github 401 | 402 |

403 |

404 |

405 |

406 | 407 | 492 | 493 | 494 | 495 | 531 | 532 | 533 | --------------------------------------------------------------------------------