1<!DOCTYPE html> 2<html lang="en"> 3<head> 4
4<script> 5 // Define dataLayer and the gtag function. 6 window.dataLayer = window.dataLayer || []; 7 function gtag(){dataLayer.push(arguments);} 8 9 // Set default consent to 'denied' as a placeholder 10 // Determine actual values based on your own requirements 11 gtag('consent', 'default', { 12 'ad_storage': 'denied', 13 'ad_user_data': 'denied', 14 'ad_personalization': 'denied', 15 'analytics_storage': 'denied', 16 }); 17 </script>
17 18 19 <!-- Google Tag Manager --> 20
20<script>
vendor: 335 bytes, lines 20-24
20(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 21 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 22 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 23 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 24})(window,document,'script','dataLayer','
24GTM-PV5QFSQ
vendor: 3 bytes, line 24
24');
24</script>
24 25<!-- End Google Tag Manager --> 26<!-- First Promoter -->
27<script>(function(w){w.fpr=w.fpr||function(){w.fpr.q = w.fpr.q||[];w.fpr.q[arguments[0]=='set'?'unshift':'push'](arguments);};})(window); 28 fpr("init", {cid:"o2sg2qce"}); 29 fpr("click"); 30 </script>
30 31
31<script src="https://cdn.firstpromoter.com/fpr.js" async></script>
31 32<!-- First Promoter --> 33<meta charset="utf-8"> 34<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 35<meta http-equiv="x-ua-compatible" content="ie=edge"> 36 37<link rel="alternate" hreflang="en" href="https://plaky.com/templates/product-roadmap"/> 38<link rel="alternate" hreflang="fr" href="https://plaky.com/fr/templates/product-roadmap"/> 39<link rel="alternate" hreflang="es" href="https://plaky.com/es/templates/product-roadmap"/> 40<link rel="alternate" hreflang="pt" href="https://plaky.com/pt/templates/product-roadmap"/> 41 42<link rel="alternate" hreflang="de" href="https://plaky.com/de/templates/product-roadmap"/> 43<link rel="alternate" hreflang="x-default" href="https://plaky.com/templates/product-roadmap"/> 44<title>Product Roadmap Template - Plakyâ¢</title> 45 46<!-- for Google --> 47<meta name="description" content="Product roadmap template, great for displaying major goals and desired outcomes. Unlimited projects and users. Free forever." /> 48<meta name="image" content="https://plaky.com/assets/images/social/plaky-share.png"> 49<meta name="application-name" content="Plaky" /> 50<!-- Schema.org for Google --> 51<meta itemprop="name" content="Plaky"> 52<meta itemprop="description" content="Product roadmap template, great for displaying major goals and desired outcomes. Unlimited projects and users. Free forever."> 53<meta itemprop="image" content="https://plaky.com/assets/images/social/plaky-share.png"> 54<!-- for Facebook --> 55<meta property="og:title" content="Product Roadmap Template - Plakyâ¢" /> 56<meta property="og:description" content="Product roadmap template, great for displaying major goals and desired outcomes. Unlimited projects and users. Free forever." /> 57<meta property="og:image" content="https://plaky.com/assets/images/social/plaky-share.png" /> 58<meta property="og:image:secure_url" content="https://plaky.com/assets/images/social/plaky-share.png"> 59<meta property="og:url" content="https://plaky.com/templates/product-roadmap" /> 60<meta property="og:site_name" content="Plaky" /> 61<meta property="og:type" content="website" /> 62<meta property="og:locale" content="en_US" /> 63<!-- for Twitter --> 64<meta name="twitter:card" content="summary_large_image" /> 65<meta name="twitter:title" content="Product Roadmap Template - Plakyâ¢" /> 66<meta name="twitter:site" content="@Plaky"> 67<meta name="twitter:description" content="Product roadmap template, great for displaying major goals and desired outcomes. Unlimited projects and users. Free forever." /> 68<meta name="twitter:image" content="https://plaky.com/assets/images/social/plaky-share.png" /> 69<meta name="twitter:creator" content="@PlakyCom" /> 70<!-- Favicons --> 71<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicons/apple-touch-icon.png"> 72<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicons/favicon-32x32.png"> 73<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicons/favicon-16x16.png"> 74<link rel="manifest" href="/assets/images/favicons/site.webmanifest"> 75<link rel="mask-icon" href="/assets/images/favicons/safari-pinned-tab.svg" color="#F85383"> 76<link rel="preconnect" href="https://fonts.googleapis.com"> 77<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 78<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,600;0,700;1,400&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> 79 80<!-- Links --> 81<link rel="canonical" href="https://plaky.com/templates/product-roadmap" /> 82 83<!-- Main CSS --> 84<link rel="stylesheet" href="/assets/main-0.43256700088705147.css">
85<script type="application/javascript" src="/assets/params-processor-0.43256700088705147.js"></script>
85 86<!-- Just for testing --> 87<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> 88</head> 89 90 91<!-- JSON-LD Schema -->
92<script type="application/ld+json"> 93{ 94 "@context": "https://schema.org", 95 "@type": "WebPage", 96 "@id": "https://plaky.com/templates/product-roadmap#webpage", 97 "url": "https://plaky.com/templates/product-roadmap", 98 "name": "Product Roadmap Template - Plaky", 99 "isPartOf": { 100 "@type": "WebSite", 101 "@id": "https://plaky.com/#website" 102 }, 103 "mainEntity": { 104"@id": "https://plaky.com/#organization" 105} 106} 107</script>
107 108 109 110 111 112 113 114 115<body class="redesign feature-single template-single"> 116 <!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 116-117
116 117<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
117GTM-PV5QFSQ
vendor: 85 bytes, line 117
117" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
118<!-- End Google Tag Manager (noscript) --> 119 <header class="h-auto"> 120 <div class="header-container-bg w-100 sticky-nav"> 121 <div class="header-nav container"> 122 <div class="background-blur"></div> 123 124<nav class="navbar navbar-mega-menu"> 125 <div class="container px-md-0 px-3"> 126 <div class="dropdown-header-links"> 127 <a href="/"> 128 <img 129 class="logo products-header-link" 130 src="/assets/images/web-assets/plaky-cake-logo.svg" 131 alt="Plaky Logo" 132 /> 133 </a> 134 <svg 135 class="products-header-link header-arrow light" 136 width="17" 137 height="16" 138 viewBox="0 0 17 16" 139 fill="none" 140 xmlns="http://www.w3.org/2000/svg" 141 > 142 <path 143 d="M3.56641 5.5L8.56641 10.5L13.5664 5.5" 144 stroke="#ffffff" 145 stroke-width="2" 146 stroke-linecap="round" 147 stroke-linejoin="round" 148 ></path> 149 </svg> 150 </div> 151 152 <div class="header-products-dropdown"> 153 <div class="content"> 154 <div class="header-products-dropdown-content"> 155 <a href="https://pumble.com"> 156 <div class="header-product-link-box"> 157 <img 158 src="/assets/images/web-assets/pumble-header-link-logo-new.svg" 159 alt="Pumble logo" 160 /> 161 <div> 162 <p>Pumble</p> 163 <p>Team Communication</p> 164 </div> 165 </div> 166 </a> 167 <a href="https://clockify.me/" target="_blank"> 168 <div class="header-product-link-box"> 169 <img 170 src="/assets/images/web-assets/clockify-header-link-logo-new.svg" 171 alt="Clockify logo" 172 /> 173 <div> 174 <p>Clockify</p> 175 <p>Time Tracking</p> 176 </div> 177 </div> 178 </a> 179 <a href="/" target="_blank"> 180 <div class="header-product-link-box"> 181 <img 182 src="/assets/images/web-assets/plaky-header-link-logo-new.svg" 183 alt="Plaky logo" 184 /> 185 <div> 186 <p>Plaky</p> 187 <p>Project Management</p> 188 </div> 189 </div> 190 </a> 191 </div> 192 <p class="powered-by"> 193 <span>Powered by</span> 194 <a href="https://cake.com/" target="_blank"> 195 <img 196 src="/assets/images/web-assets/cake-header-link-logo-white.svg" 197 alt="CAKE.com⢠logo" 198 /> 199 </a> 200 </p> 201 </div> 202 </div> 203 204
204<script> 205 const productDropdown = 206 document.currentScript.previousElementSibling.previousElementSibling, 207 dropdownLinks = productDropdown.nextElementSibling; 208 209 if (window.innerWidth > 991) { 210 productDropdown 211 .querySelector(".header-arrow") 212 .addEventListener("click", () => { 213 productDropdown.classList.toggle("hovered"); 214 dropdownLinks.classList.toggle("showDropdown"); 215 }); 216 document.addEventListener("click", (event) => { 217 let target = event.target; 218 219 if ( 220 !target.closest(".header-arrow") && 221 !target.closest(".header-products-dropdown") 222 ) { 223 productDropdown.classList.remove("hovered"); 224 dropdownLinks.classList.remove("showDropdown"); 225 } 226 }); 227 } 228 </script>
228 229 <div class="menu-container hide-sm"> 230 <ul class="mega-menu"> 231 <!-- Product section --> 232 <li id="nav-product" data-i="0" class="dropdown-mega-menu"> 233 <a href="javascript:void(0)">Product</a> 234 <svg 235 class="desktop_arrow_icon" 236 width="24" 237 height="24" 238 viewBox="0 0 24 24" 239 fill="none" 240 xmlns="http://www.w3.org/2000/svg" 241 > 242 <path 243 d="M7.5 10L11.5 14L15.5 10" 244 stroke="#BBC3D9" 245 stroke-width="1.1" 246 stroke-linecap="round" 247 stroke-linejoin="round" 248 ></path> 249 </svg> 250 </li> 251 252 <!-- Solutions section --> 253 <li id="nav-solutions" data-i="1" class="dropdown-mega-menu"> 254 <a href="javascript:void(0)">Solutions</a> 255 <svg 256 class="desktop_arrow_icon" 257 width="24" 258 height="24" 259 viewBox="0 0 24 24" 260 fill="none" 261 xmlns="http://www.w3.org/2000/svg" 262 > 263 <path 264 d="M7.5 10L11.5 14L15.5 10" 265 stroke="#BBC3D9" 266 stroke-width="1.1" 267 stroke-linecap="round" 268 stroke-linejoin="round" 269 ></path> 270 </svg> 271 </li> 272 273 <!-- Resources section --> 274 <li id="nav-resources" data-i="2" class="dropdown-mega-menu"> 275 <a href="javascript:void(0)">Resources</a> 276 <svg 277 class="desktop_arrow_icon" 278 width="24" 279 height="24"
280 viewBox="0 0 24 24" 281 fill="none" 282 xmlns="http://www.w3.org/2000/svg" 283 > 284 <path 285 d="M7.5 10L11.5 14L15.5 10" 286 stroke="#BBC3D9" 287 stroke-width="1.1" 288 stroke-linecap="round" 289 stroke-linejoin="round" 290 ></path> 291 </svg> 292 </li> 293 294 <!-- Pricing section --> 295 <a href="/pricing">Pricing</a> 296 297 <div 298 class="nav_underline" 299 style="width: 0px; transform: translateX(0px)" 300 ></div> 301 </ul> 302 </div> 303 304 <div class="buttons navbar-nav ml-auto nav-right"> 305 <div class="navbar-nav nav-right xs-hidden bg-transparent"> 306 <a 307 href="https://app.plaky.com/login" 308 class="nav-link nav-link-primary mr-2" 309 >Log In</a 310 > 311 </div> 312 <div class="navbar-nav nav-right xs-hidden bg-transparent"> 313 <a href="https://app.plaky.com/signup" class="rd-btn rd-btn rd-btn-gradient no-svg"> 314 Sign up free 315 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 316 <path d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 317 <path d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 318 <path d="M5.6709 8H11.0042" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 319 </svg> 320</a> 321 </div> 322 <div class="navbar-nav nav-right d-lg-none bg-transparent"> 323 <a href="https://app.plaky.com/signup" class="rd-btn rd-btn rd-btn-gradient no-svg"> 324 Sign up 325 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 326 <path d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 327 <path d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 328 <path d="M5.6709 8H11.0042" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 329 </svg> 330</a> 331 </div> 332 <div class="mega-menu-btn xs-shown bg-transparent"> 333 <svg 334 width="24" 335 height="24"
336 viewBox="0 0 24 24" 337 fill="none" 338 xmlns="http://www.w3.org/2000/svg" 339 > 340 <path 341 d="M3 12H21" 342 stroke="white" 343 stroke-width="2" 344 stroke-linecap="round" 345 stroke-linejoin="round" 346 /> 347 <path 348 d="M3 6H21" 349 stroke="white" 350 stroke-width="2" 351 stroke-linecap="round" 352 stroke-linejoin="round" 353 /> 354 <path 355 d="M3 18H21" 356 stroke="white" 357 stroke-width="2" 358 stroke-linecap="round" 359 stroke-linejoin="round" 360 /> 361 </svg> 362 </div> 363 </div> 364 </div> 365</nav> 366 367<div class="mega-menu-content container"> 368 <div id="nav-product" class="content desktop"> 369 <div class="link-content"> 370 <div class="top-links"> 371 <div class="column"> 372 <div class="title main-title">FEATURES</div> 373 <div class="title">TASK MANAGEMENT</div> 374 <div class="links"> 375 <a href="/features/board" class="icon-link"> 376 <div class="title">Boards</div> 377 </a> 378 <a href="/features/items" class="icon-link"> 379 <div class="title">Items</div> 380 </a> 381 <a href="/features/fields" class="icon-link"> 382 <div class="title">Custom fields</div> 383 </a> 384 <a href="/features/comments" class="icon-link"> 385 <div class="title">Comments</div> 386 </a> 387 </div> 388 </div> 389 390 <div class="column"> 391 <div class="title main-title"> </div> 392 <div class="title">PROGRESS TRACKING</div> 393 <div class="links"> 394 <a href="/features/board-views" class="icon-link"> 395 <div class="title">Board views</div> 396 </a> 397 <a href="/features/sort-filter" class="icon-link"> 398 <div class="title">Sort & filter</div> 399 </a> 400 <a href="/features/dashboards" class="icon-link"> 401 <div class="title">Dashboards</div> 402 </a> 403 <a href="/features/notifications" class="icon-link"> 404 <div class="title">Notifications</div> 405 </a> 406 </div> 407 </div> 408 409 <div class="column"> 410 <div class="title main-title"> </div> 411 <div class="title">PRODUCTIVITY</div> 412 <div class="links"> 413 <a href="/features/automations" class="icon-link"> 414 <div class="title">Automations</div> 415 </a> 416 <a href="/features/my-tasks" class="icon-link"> 417 <div class="title">My tasks</div> 418 </a> 419 <a href="/features/templates" class="icon-link"> 420 <div class="title">Templates</div> 421 </a> 422 <a href="/features/" class="icon-link icon-link__arrow"> 423 See all features 424 <svg 425 width="12" 426 height="12"
427 viewBox="0 0 12 12" 428 fill="none" 429 xmlns="http://www.w3.org/2000/svg" 430 > 431 <path 432 d="M2.5 6H9.5" 433 stroke="" 434 stroke-width="1.5" 435 stroke-linecap="round" 436 stroke-linejoin="round" 437 ></path> 438 <path 439 d="M6 2.5L9.5 6L6 9.5" 440 stroke="" 441 stroke-width="1.5" 442 stroke-linecap="round" 443 stroke-linejoin="round" 444 ></path> 445 </svg> 446 </a> 447 </div> 448 </div> 449 450 <div class="vertical-separator"></div> 451 452 <div class="column"> 453 <div class="title main-title">COMPARISONS</div> 454 <div class="links"> 455 <a href="/compare/monday-alternative" class="icon-link"> 456 <div class="title">vs Monday</div> 457 </a> 458 <a href="/compare/asana-alternative" class="icon-link"> 459 <div class="title">vs Asana</div> 460 </a> 461 <a href="/compare/clickup-alternative" class="icon-link"> 462 <div class="title">vs ClickUp</div> 463 </a> 464 465 <a href="/compare/" class="icon-link icon-link__arrow"> 466 See more 467 <svg 468 width="12" 469 height="12"
470 viewBox="0 0 12 12" 471 fill="none" 472 xmlns="http://www.w3.org/2000/svg" 473 > 474 <path 475 d="M2.5 6H9.5" 476 stroke="" 477 stroke-width="1.5" 478 stroke-linecap="round" 479 stroke-linejoin="round" 480 ></path> 481 <path 482 d="M6 2.5L9.5 6L6 9.5" 483 stroke="" 484 stroke-width="1.5" 485 stroke-linecap="round" 486 stroke-linejoin="round" 487 ></path> 488 </svg> 489 </a> 490 </div> 491 </div> 492 <div class="column"> 493 <div class="title main-title">INTEGRATIONS</div> 494 <div class="links"> 495 <a href="/pumble-integration" class="icon-link"> 496 <div class="title">Pumble</div> 497 </a> 498 <a href="/clockify-integration" class="icon-link"> 499 <div class="title">Clockify</div> 500 </a> 501 </div> 502 <div class="title main-title mt-3">RELEASES</div> 503 <div class="links"> 504 <a href="/roadmap" class="icon-link"> 505 <div class="title">Roadmap</div> 506 </a> 507 </div> 508 </div> 509 </div> 510 <div class="bottom-links"> 511 <div class="xs-hidden bg-transparent"> 512 <a 513 id="watch-video" 514 href="javascript: void(0)" 515 onclick="openModal('https://www.youtube.com/embed/IYQCi9y-lNU?si=-zfs04eM6PdERGEc?auto
515play=1')" 516 > 517 Watch tour 518 </a> 519 </div> 520 <div class="xs-hidden bg-transparent"> 521 <a href="/help/contact/sales/">Book a demo</a> 522 </div> 523 </div> 524 </div> 525 </div> 526 <div id="nav-solutions" class="content desktop"> 527 <div class="link-content"> 528 <div class="top-links"> 529 <div class="column"> 530 <div class="title main-title">COMPANY TYPE</div> 531 <div class="links"> 532 <a href="/small-business" class="icon-link"> 533 <svg 534 width="24" 535 height="24" 536 viewBox="0 0 24 24" 537 fill="none" 538 xmlns="http://www.w3.org/2000/svg" 539 > 540 <rect width="24" height="24" rx="4" fill="#4E8AFF" /> 541 <path 542 d="M16.6665 8H14.6665V7.3335C14.6665 6.597 14.0695 6 13.333 6H10.6665C9.93001 6 9.33301 6.597 9.33301 7.3335V8H7.33301C6.22851 8 5.33301 8.8955 5.33301 10V16C5.33301 17.1045 6.22851 18 7.33301 18H16.6665C17.771 18 18.6665 17.1045 18.6665 16V10C18.6665 8.8955 17.771 8 16.6665 8ZM10.6665 7.3335H13.333V8H10.6665V7.3335ZM17.3335 16C17.3335 16.368 17.035 16.6665 16.667 16.6665H7.33351C6.96551 16.6665 6.66701 16.368 6.66701 16V12.26L9.78701 13.3335C9.81901 13.338 9.85601 13.3405 9.89351 13.3405C9.93101 13.3405 9.96801 13.338 10.0045 13.333L10.0005 13.3335H14.0005C14.077 13.332 14.1505 13.32 14.2195 13.2985L14.214 13.3L17.334 12.26L17.3335 16ZM17.3335 10.8535L13.8935 12H10.107L6.66701 10.8535V10C6.66701 9.632 6.96551 9.3335 7.33351 9.3335H16.667C17.035 9.3335 17.3335 9.632 17.3335 10V10.8535Z" 543 fill="#D8DEEE" 544 /> 545 </svg> 546 <div class="title">Small business</div> 547 <div class="text"> 548 Flexible tool for small businesses, no matter the tech skills. 549 </div> 550 </a> 551 <a href="/enterprise" class="icon-link"> 552 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 553 <rect width="24" height="24" rx="4" fill="#4E8AFF"/> 554 <mask id="mask0_17554_24751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="16" height="16"> 555 <rect x="4" y="4" width="16" height="16" fill="#D8DEEE"/> 556 </mask> 557 <g mask="url(#mask0_17554_24751)"> 558 <path d="M7.33398 18C6.22941 18 5.33398 17.1046 5.33398 16V8C5.33398 6.89543 6.22941 6 7.33398 6H10.0007C11.1052 6 12.0007 6.89543 12.0007 8V8.66667H16.6673C17.7719 8.66667 18.6673 9.5621 18.6673 10.6667V16C18.6673 17.1046 17.7719 18 16.6673 18H7.33398ZM6.66732 16.6667H8.00065V15.3333H6.66732V16.6667ZM6.66732 14H8.00065V12.6667H6.66732V14ZM6.66732 11.3333H8.00065V10H6.66732V11.3333ZM6.66732 8.66667H8.00065V7.33333H6.66732V8.66667ZM9.33398 16.6667H10.6673V15.3333H9.33398V16.6667ZM9.33398 14H10.6673V12.6667H9.33398V14ZM9.33398 11.3333H10.6673V10H9.33398V11.3333ZM9.33398 8.66667H10.6673V7.33333H9.33398V8.66667ZM12.0007 16.6667H17.334V10H12.0007V11.3333H13.334V12.6667H12.0007V14H13.334V15.3333H12.0007V16.6667ZM14.6673 12.6667V11.3333H16.0007V12.6667H14.6673ZM14.6673 15.3333V14H16.0007V15.3333H14.6673Z" fill="#D8DEEE"/> 559 </g> 560 </svg> 561 562 <div class="title">Enterprise</div> 563 <div class="text"> 564 Built to support growing enterprises. 565 </div> 566 </a> 567 <a href="/non-profit" class="icon-link"> 568 <svg 569 width="24" 570 height="24"
571 viewBox="0 0 24 24" 572 fill="none" 573 xmlns="http://www.w3.org/2000/svg" 574 > 575 <rect width="24" height="24" rx="4" fill="#4E8AFF" /> 576 <path 577 d="M13.3337 11.3338H12.6672V10.6673C12.6672 10.2993 12.3687 10.0008 12.0007 10.0008C11.6327 10.0008 11.3342 10.2993 11.3342 10.6673V11.3338H10.6677C10.2997 11.3338 10.0012 11.6323 10.0012 12.0003C10.0012 12.3683 10.2997 12.6668 10.6677 12.6668H11.3342V13.3333C11.3342 13.7013 11.6327 13.9998 12.0007 13.9998C12.3687 13.9998 12.6672 13.7013 12.6672 13.3333V12.6668H13.3337C13.7017 12.6668 14.0002 12.3683 14.0002 12.0003C14.0002 11.6323 13.7017 11.3338 13.3337 11.3338ZM17.4402 7.33376C16.6827 6.58426 15.6407 6.12076 14.4907 6.12076C13.5532 6.12076 12.6877 6.42826 11.9892 6.94826L12.0002 6.94026C11.3127 6.42426 10.4452 6.11426 9.50568 6.11426C7.19718 6.11426 5.32568 7.98576 5.32568 10.2943C5.32568 11.4538 5.79768 12.5028 6.56018 13.2603L10.5602 17.2938C10.9222 17.6553 11.4217 17.8788 11.9737 17.8788C12.5257 17.8788 13.0252 17.6553 13.3872 17.2938L17.3872 13.2603C18.1642 12.5008 18.6462 11.4418 18.6462 10.2703C18.6462 9.12526 18.1857 8.08776 17.4402 7.33326L17.4407 7.33376H17.4402ZM16.5002 12.3068L12.5002 16.3068C12.3792 16.4288 12.2117 16.5038 12.0267 16.5038C11.8417 16.5038 11.6742 16.4283 11.5532 16.3068L7.55318 12.3068C7.04868 11.7918 6.73768 11.0853 6.73768 10.3068C6.73768 9.52826 7.04868 8.82176 7.55368 8.30626L7.55318 8.30676C8.06718 7.79926 8.77368 7.48576 9.55318 7.48576C10.3327 7.48576 11.0392 7.79926 11.5537 8.30676L11.5532 8.30626C11.6742 8.42826 11.8417 8.50326 12.0267 8.50326C12.2117 8.50326 12.3792 8.42776 12.5002 8.30626C13.0142 7.79876 13.7207 7.48526 14.5002 7.48526C15.2797 7.48526 15.9862 7.79876 16.5007 8.30626L16.5002 8.30576C17.0087 8.82176 17.3222 9.53026 17.3222 10.3123C17.3222 11.0943 17.0082 11.8028 16.4997 12.3193L16.5002 12.3188V12.3068Z" 578 fill="#F2F2F8" 579 fill-opacity="0.87" 580 /> 581 </svg> 582 <div class="title">Nonprofit</div> 583 <div class="text"> 584 Centralize all operations in one platform for greater social 585 impact. 586 </div> 587 </a> 588 </div> 589 </div> 590 591 <div class="vertical-separator"></div> 592 593 <div class="column"> 594 <div class="title main-title">TEAM</div> 595 <div class="links"> 596 <a href="/plaky-for-marketing" class="icon-link"> 597 <div class="title">Marketing</div> 598 </a> 599 <a href="/development" class="icon-link"> 600 <div class="title">IT</div> 601 </a> 602 <a href="/sales" class="icon-link"> 603 <div class="title">Sales</div> 604 </a> 605 <a href="/hr" class="icon-link"> 606 <div class="title">HR</div> 607 </a> 608 <a href="/software-uses" class="icon-link icon-link__arrow"> 609 See all use cases 610 <svg 611 width="12" 612 height="12"
613 viewBox="0 0 12 12" 614 fill="none" 615 xmlns="http://www.w3.org/2000/svg" 616 > 617 <path 618 d="M2.5 6H9.5" 619 stroke="" 620 stroke-width="1.5" 621 stroke-linecap="round" 622 stroke-linejoin="round" 623 ></path> 624 <path 625 d="M6 2.5L9.5 6L6 9.5" 626 stroke="" 627 stroke-width="1.5" 628 stroke-linecap="round" 629 stroke-linejoin="round" 630 ></path> 631 </svg> 632 </a> 633 </div> 634 </div> 635 636 <div class="column"> 637 <div class="title main-title">TEMPLATES</div> 638 <div class="links"> 639 <a href="/templates/event-planning" class="icon-link"> 640 <div class="title">Event planning</div> 641 </a> 642 <a href="/templates/single-project" class="icon-link"> 643 <div class="title">Single project</div> 644 </a> 645 <a href="/templates/construction-schedule" class="icon-link"> 646 <div class="title">Construction schedule</div> 647 </a> 648 <a href="/templates/content-calendar" class="icon-link"> 649 <div class="title">Content calendar</div> 650 </a> 651 <a href="/templates/scrum-board" class="icon-link"> 652 <div class="title">Scrum board</div> 653 </a> 654 </div> 655 </div> 656 657 <div class="column"> 658 <div class="title main-title"> </div> 659 660 <div class="links"> 661 <a href="/templates/resource-planning" class="icon-link"> 662 <div class="title">Resource planning</div> 663 </a> 664 <a 665 href="/templates/real-estate-agency-management" 666 class="icon-link" 667 > 668 <div class="title">Real estate management</div> 669 </a> 670 <a href="/templates/work-log" class="icon-link"> 671 <div class="title">Work log</div> 672 </a> 673 <a href="/templates/product-roadmap" class="icon-link"> 674 <div class="title">Product roadmap</div> 675 </a> 676 <a href="/templates/" class="icon-link icon-link__arrow"> 677 See all templates 678 <svg 679 width="12" 680 height="12"
681 viewBox="0 0 12 12" 682 fill="none" 683 xmlns="http://www.w3.org/2000/svg" 684 > 685 <path 686 d="M2.5 6H9.5" 687 stroke="" 688 stroke-width="1.5" 689 stroke-linecap="round" 690 stroke-linejoin="round" 691 ></path> 692 <path 693 d="M6 2.5L9.5 6L6 9.5" 694 stroke="" 695 stroke-width="1.5" 696 stroke-linecap="round" 697 stroke-linejoin="round" 698 ></path> 699 </svg> 700 </a> 701 </div> 702 </div> 703 </div> 704 705 <div class="bottom-links"> 706 <div class="xs-hidden bg-transparent"> 707 <a 708 id="watch-video" 709 href="javascript: void(0)" 710 onclick="openModal('https://www.youtube.com/embed/IYQCi9y-lNU?si=-zfs04eM6PdERGEc?autoplay=1')" 711 > 712 Watch tour 713 </a> 714 </div> 715 <div class="xs-hidden bg-transparent"> 716 <a href="/help/contact/sales/">Book a demo</a> 717 </div> 718 </div> 719 </div> 720 </div> 721 <div id="nav-resources" class="content desktop"> 722 <div class="link-content"> 723 <div class="top-links"> 724 <div class="column"> 725 <div class="title main-title">LEARN</div> 726 <div class="links"> 727 <a href="/learn/" class="icon-link"> 728 <div class="title">Knowledge hub</div> 729 </a> 730 <a href="/learn/plaky/" class="icon-link"> 731 <div class="title">Plaky guides</div> 732 </a> 733 <a href="/blog/" class="icon-link"> 734 <div class="title">Blog</div> 735 </a> 736 <a href="/pm-center/" class="icon-link"> 737 <div class="title">PM Center</div> 738 </a> 739 </div> 740 </div> 741 742 <div class="column"> 743 <div class="title main-title">SUPPORT</div> 744 <div class="links"> 745 <a href="/help/" class="icon-link"> 746 <div class="title">Help</div> 747 </a> 748 <a href="/help/contact/" class="icon-link"> 749 <div class="title">Contact</div> 750 </a> 751 <a href="/tutorials" class="icon-link"> 752 <div class="title">Tutorials</div> 753 </a> 754 </div> 755 </div> 756 757 <div class="vertical-separator"></div> 758 759 <div class="column"> 760 <div class="title main-title">CUSTOMER STORIES</div> 761 762 <div class="testimonial"> 763 <div class="text"> 764 <div class="name_job"> 765 <div class="name">Jesse Tutt</div> 766 <div class="job">Founder and CEO of Guru</div> 767 </div> 768 <div class="quote"> 769 âOne of the best things about Plaky is that we have everything 770 posted clearly, including status, due dates, labels, and 771 additional commentaryâ 772 </div> 773 <a href="/customer-stories/" class="rd-btn rd-btn-gray"> 774 See more 775 <svg 776 width="17" 777 height="16"
778 viewBox="0 0 17 16" 779 fill="none" 780 xmlns="http://www.w3.org/2000/svg" 781 > 782 <path 783 d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" 784 stroke="" 785 stroke-linecap="round" 786 stroke-linejoin="round" 787 ></path> 788 <path 789 d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" 790 stroke="" 791 stroke-linecap="round" 792 stroke-linejoin="round" 793 ></path> 794 <path 795 d="M5.6709 8H11.0042" 796 stroke="" 797 stroke-linecap="round" 798 stroke-linejoin="round" 799 ></path> 800 </svg> 801 </a> 802 </div> 803 </div> 804 </div> 805 </div> 806 807 <div class="bottom-links"> 808 <div class="xs-hidden bg-transparent"> 809 <a 810 id="watch-video" 811 href="javascript: void(0)" 812 onclick="openModal('https://www.youtube.com/embed/IYQCi9y-lNU?si=-zfs04eM6PdERGEc?auto
812play=1')" 813 > 814 Watch tour 815 </a> 816 </div> 817 <div class="xs-hidden bg-transparent"> 818 <a href="/help/contact/sales/">Book a demo</a> 819 </div> 820 </div> 821 </div> 822 </div> 823</div> 824 825<div class="mega-menu-content"> 826 <div class="content mobile"> 827 <ul class="mega-menu"> 828 <!-- Product section --> 829 <li id="nav-product" data-i="0" class="dropdown-mega-menu nav-item-sm"> 830 <a href="javascript:void(0)">Product</a> 831 <svg 832 width="16" 833 height="17" 834 viewBox="0 0 16 17" 835 fill="none" 836 xmlns="http://www.w3.org/2000/svg" 837 > 838 <path 839 d="M4.66657 7.56L7.52657 10.3865C7.64757 10.5085 7.81507 10.5835 8.00007 10.5835C8.18507 10.5835 8.35257 10.508 8.47357 10.3865L11.3001 7.56C11.4221 7.439 11.4971 7.2715 11.4971 7.0865C11.4971 6.9015 11.4216 6.734 11.3001 6.613C11.1796 6.493 11.0136 6.419 10.8301 6.419C10.6466 6.419 10.4806 6.493 10.3601 6.613L8.00007 8.973L5.64007 6.613C5.52007 6.494 5.35557 6.4205 5.17357 6.4195C5.17257 6.4195 5.17107 6.4195 5.16957 6.4195C4.98657 6.4195 4.82057 6.4935 4.70007 6.613C4.56807 6.735 4.48557 6.9095 4.48557 7.103C4.48557 7.28 4.55457 7.441 4.66707 7.56L4.66657 7.5595V7.56Z" 840 fill="#C7C6D9" 841 fill-opacity="0.87" 842 /> 843 </svg> 844 </li> 845 <div id="nav-product" class="link-content"> 846 <div> 847 <div class="column"> 848 <div class="title main-title">FEATURES</div> 849 <div class="title secondary-title">TASK MANAGEMENT</div> 850 <div class="links"> 851 <a href="/features/board" class="icon-link"> 852 <div class="title">Boards</div> 853 </a> 854 <a href="/features/items" class="icon-link"> 855 <div class="title">Items</div> 856 </a> 857 <a href="/features/fields" class="icon-link"> 858 <div class="title">Custom fields</div> 859 </a> 860 <a href="/features/comments" class="icon-link"> 861 <div class="title">Comments</div> 862 </a> 863 </div> 864 </div> 865 866 <div class="column"> 867 <div class="title secondary-title">PROGRESS TRACKING</div> 868 <div class="links"> 869 <a href="/features/board-views" class="icon-link"> 870 <div class="title">Board views</div> 871 </a> 872 <a href="/features/sort-filter" class="icon-link"> 873 <div class="title">Sort & Filter</div> 874 </a> 875 <a href="/features/activity-log" class="icon-link"> 876 <div class="title">Activity</div> 877 </a> 878 <a href="/features/notifications" class="icon-link"> 879 <div class="title">Notifications</div> 880 </a> 881 </div> 882 </div> 883 884 <div class="column"> 885 <div class="title secondary-title">PRODUCTIVITY</div> 886 <div class="links"> 887 <a href="/features/automations" class="icon-link"> 888 <div class="title">Automations</div> 889 </a> 890 <a href="/features/summary" class="icon-link"> 891 <div class="title">Summary</div> 892 </a> 893 <a href="/features/templates" class="icon-link"> 894 <div class="title">Templates</div> 895 </a> 896 <a href="/features/" class="icon-link icon-link__arrow"> 897 See all features 898 <svg 899 width="12" 900 height="12"
901 viewBox="0 0 12 12" 902 fill="none" 903 xmlns="http://www.w3.org/2000/svg" 904 > 905 <path 906 d="M2.5 6H9.5" 907 stroke="" 908 stroke-width="1.5" 909 stroke-linecap="round" 910 stroke-linejoin="round" 911 ></path> 912 <path 913 d="M6 2.5L9.5 6L6 9.5" 914 stroke="" 915 stroke-width="1.5" 916 stroke-linecap="round" 917 stroke-linejoin="round" 918 ></path> 919 </svg> 920 </a> 921 </div> 922 </div> 923 924 <div class="column"> 925 <div class="title main-title">COMPARISONS</div> 926 <div class="links"> 927 <a href="/compare/monday-alternative" class="icon-link"> 928 <div class="title">vs Monday</div> 929 </a> 930 <a href="/compare/asana-alternative" class="icon-link"> 931 <div class="title">vs Asana</div> 932 </a> 933 <a href="/compare/clickup-alternative" class="icon-link"> 934 <div class="title">vs Clickup</div> 935 </a> 936 <a href="/features/comments" class="icon-link"> 937 <div class="title">Comments</div> 938 </a> 939 940 <a href="/compare/" class="icon-link icon-link__arrow"> 941 See all comparisons 942 <svg 943 width="12" 944 height="12"
945 viewBox="0 0 12 12" 946 fill="none" 947 xmlns="http://www.w3.org/2000/svg" 948 > 949 <path 950 d="M2.5 6H9.5" 951 stroke="" 952 stroke-width="1.5" 953 stroke-linecap="round" 954 stroke-linejoin="round" 955 ></path> 956 <path 957 d="M6 2.5L9.5 6L6 9.5" 958 stroke="" 959 stroke-width="1.5" 960 stroke-linecap="round" 961 stroke-linejoin="round" 962 ></path> 963 </svg> 964 </a> 965 </div> 966 </div> 967 968 <div class="column"> 969 <div class="title main-title">INTEGRATIONS</div> 970 <div class="links"> 971 <a href="/pumble-integration" class="icon-link"> 972 <div class="title">Pumble</div> 973 </a> 974 <!-- <a 975 href="/clockify-integration" 976 class="icon-link" 977 > 978 <div class="title">Clockify</div> 979 </a> --> 980 </div> 981 <div class="title main-title">RELEASES</div> 982 <div class="links"> 983 <a href="/roadmap" class="icon-link"> 984 <div class="title">Roadmap</div> 985 </a> 986 </div> 987 </div> 988 </div> 989 </div> 990 991 <!-- Solutions section --> 992 <li id="nav-solutions" data-i="1" class="dropdown-mega-menu nav-item-sm"> 993 <a href="javascript:void(0)">Solutions</a> 994 <svg 995 width="16" 996 height="17"
997 viewBox="0 0 16 17" 998 fill="none" 999 xmlns="http://www.w3.org/2000/svg" 1000 > 1001 <path 1002 d="M4.66657 7.56L7.52657 10.3865C7.64757 10.5085 7.81507 10.5835 8.00007 10.5835C8.18507 10.5835 8.35257 10.508 8.47357 10.3865L11.3001 7.56C11.4221 7.439 11.4971 7.2715 11.4971 7.0865C11.4971 6.9015 11.4216 6.734 11.3001 6.613C11.1796 6.493 11.0136 6.419 10.8301 6.419C10.6466 6.419 10.4806 6.493 10.3601 6.613L8.00007 8.973L5.64007 6.613C5.52007 6.494 5.35557 6.4205 5.17357 6.4195C5.17257 6.4195 5.17107 6.4195 5.16957 6.4195C4.98657 6.4195 4.82057 6.4935 4.70007 6.613C4.56807 6.735 4.48557 6.9095 4.48557 7.103C4.48557 7.28 4.55457 7.441 4.66707 7.56L4.66657 7.5595V7.56Z" 1003 fill="#C7C6D9" 1004 fill-opacity="0.87" 1005 /> 1006 </svg> 1007 </li> 1008 1009 <div id="nav-solutions" class="link-content"> 1010 <div> 1011 <div class="column"> 1012 <div class="title main-title">COMPANY TYPE</div> 1013 <div class="links"> 1014 <a href="/small-business" class="icon-link"> 1015 <svg 1016 width="24" 1017 height="24"
1018 viewBox="0 0 24 24" 1019 fill="none" 1020 xmlns="http://www.w3.org/2000/svg" 1021 > 1022 <rect width="24" height="24" rx="4" fill="#4E8AFF" /> 1023 <path 1024 d="M16.6665 8H14.6665V7.3335C14.6665 6.597 14.0695 6 13.333 6H10.6665C9.93001 6 9.33301 6.597 9.33301 7.3335V8H7.33301C6.22851 8 5.33301 8.8955 5.33301 10V16C5.33301 17.1045 6.22851 18 7.33301 18H16.6665C17.771 18 18.6665 17.1045 18.6665 16V10C18.6665 8.8955 17.771 8 16.6665 8ZM10.6665 7.3335H13.333V8H10.6665V7.3335ZM17.3335 16C17.3335 16.368 17.035 16.6665 16.667 16.6665H7.33351C6.96551 16.6665 6.66701 16.368 6.66701 16V12.26L9.78701 13.3335C9.81901 13.338 9.85601 13.3405 9.89351 13.3405C9.93101 13.3405 9.96801 13.338 10.0045 13.333L10.0005 13.3335H14.0005C14.077 13.332 14.1505 13.32 14.2195 13.2985L14.214 13.3L17.334 12.26L17.3335 16ZM17.3335 10.8535L13.8935 12H10.107L6.66701 10.8535V10C6.66701 9.632 6.96551 9.3335 7.33351 9.3335H16.667C17.035 9.3335 17.3335 9.632 17.3335 10V10.8535Z" 1025 fill="#D8DEEE" 1026 /> 1027 </svg> 1028 <div class="title">Small business</div> 1029 <div class="text"> 1030 Flexible tool for small businesses, no matter the tech skills. 1031 </div> 1032 </a> 1033 <a href="/non-profit" class="icon-link"> 1034 <svg 1035 width="24" 1036 height="24"
1037 viewBox="0 0 24 24" 1038 fill="none" 1039 xmlns="http://www.w3.org/2000/svg" 1040 > 1041 <rect width="24" height="24" rx="4" fill="#4E8AFF" /> 1042 <path 1043 d="M13.3337 11.3338H12.6672V10.6673C12.6672 10.2993 12.3687 10.0008 12.0007 10.0008C11.6327 10.0008 11.3342 10.2993 11.3342 10.6673V11.3338H10.6677C10.2997 11.3338 10.0012 11.6323 10.0012 12.0003C10.0012 12.3683 10.2997 12.6668 10.6677 12.6668H11.3342V13.3333C11.3342 13.7013 11.6327 13.9998 12.0007 13.9998C12.3687 13.9998 12.6672 13.7013 12.6672 13.3333V12.6668H13.3337C13.7017 12.6668 14.0002 12.3683 14.0002 12.0003C14.0002 11.6323 13.7017 11.3338 13.3337 11.3338ZM17.4402 7.33376C16.6827 6.58426 15.6407 6.12076 14.4907 6.12076C13.5532 6.12076 12.6877 6.42826 11.9892 6.94826L12.0002 6.94026C11.3127 6.42426 10.4452 6.11426 9.50568 6.11426C7.19718 6.11426 5.32568 7.98576 5.32568 10.2943C5.32568 11.4538 5.79768 12.5028 6.56018 13.2603L10.5602 17.2938C10.9222 17.6553 11.4217 17.8788 11.9737 17.8788C12.5257 17.8788 13.0252 17.6553 13.3872 17.2938L17.3872 13.2603C18.1642 12.5008 18.6462 11.4418 18.6462 10.2703C18.6462 9.12526 18.1857 8.08776 17.4402 7.33326L17.4407 7.33376H17.4402ZM16.5002 12.3068L12.5002 16.3068C12.3792 16.4288 12.2117 16.5038 12.0267 16.5038C11.8417 16.5038 11.6742 16.4283 11.5532 16.3068L7.55318 12.3068C7.04868 11.7918 6.73768 11.0853 6.73768 10.3068C6.73768 9.52826 7.04868 8.82176 7.55368 8.30626L7.55318 8.30676C8.06718 7.79926 8.77368 7.48576 9.55318 7.48576C10.3327 7.48576 11.0392 7.79926 11.5537 8.30676L11.5532 8.30626C11.6742 8.42826 11.8417 8.50326 12.0267 8.50326C12.2117 8.50326 12.3792 8.42776 12.5002 8.30626C13.0142 7.79876 13.7207 7.48526 14.5002 7.48526C15.2797 7.48526 15.9862 7.79876 16.5007 8.30626L16.5002 8.30576C17.0087 8.82176 17.3222 9.53026 17.3222 10.3123C17.3222 11.0943 17.0082 11.8028 16.4997 12.3193L16.5002 12.3188V12.3068Z" 1044 fill="#F2F2F8" 1045 fill-opacity="0.87" 1046 /> 1047 </svg> 1048 <div class="title">Nonprofit</div> 1049 <div class="text"> 1050 Centralize all operations in one platform for greater social 1051 impact. 1052 </div> 1053 </a> 1054 </div> 1055 </div> 1056 <div class="column"> 1057 <div class="title main-title">TEAM</div> 1058 <div class="links"> 1059 <a href="/plaky-for-marketing" class="icon-link"> 1060 <div class="title">Marketing</div> 1061 </a> 1062 <a href="/development" class="icon-link"> 1063 <div class="title">IT</div> 1064 </a> 1065 <a href="/sales" class="icon-link"> 1066 <div class="title">Sales</div> 1067 </a> 1068 <a href="/hr" class="icon-link"> 1069 <div class="title">HR</div> 1070 </a> 1071 <a href="/features/" class="icon-link icon-link__arrow"> 1072 See all features 1073 <svg 1074 width="12" 1075 height="12"
1076 viewBox="0 0 12 12" 1077 fill="none" 1078 xmlns="http://www.w3.org/2000/svg" 1079 > 1080 <path 1081 d="M2.5 6H9.5" 1082 stroke="" 1083 stroke-width="1.5" 1084 stroke-linecap="round" 1085 stroke-linejoin="round" 1086 ></path> 1087 <path 1088 d="M6 2.5L9.5 6L6 9.5" 1089 stroke="" 1090 stroke-width="1.5" 1091 stroke-linecap="round" 1092 stroke-linejoin="round" 1093 ></path> 1094 </svg> 1095 </a> 1096 </div> 1097 </div> 1098 1099 <div class="column"> 1100 <div class="title main-title">TEMPLATES</div> 1101 <div class="links"> 1102 <a href="/templates/event-planning" class="icon-link"> 1103 <div class="title">Event planning</div> 1104 </a> 1105 <a href="/templates/single-project" class="icon-link"> 1106 <div class="title">Single project</div> 1107 </a> 1108 <a href="/templates/construction-schedule" class="icon-link"> 1109 <div class="title">Construction schedule</div> 1110 </a> 1111 <a href="/templates/content-calendar" class="icon-link"> 1112 <div class="title">Content calendar</div> 1113 </a> 1114 <a href="/templates/scrum-board" class="icon-link"> 1115 <div class="title">Scrum board</div> 1116 </a> 1117 </div> 1118 </div> 1119 1120 <div class="column"> 1121 <div class="links"> 1122 <a href="/templates/resource-planning" class="icon-link"> 1123 <div class="title">Resource planning</div> 1124 </a> 1125 <a 1126 href="/templates/real-estate-agency-management" 1127 class="icon-link" 1128 > 1129 <div class="title">Real estate management</div> 1130 </a> 1131 <a href="/templates/work-log" class="icon-link"> 1132 <div class="title">Work log</div> 1133 </a> 1134 <a href="/templates/product-roadmap" class="icon-link"> 1135 <div class="title">Product roadmap</div> 1136 </a> 1137 <a href="/features/" class="icon-link icon-link__arrow"> 1138 See all features 1139 <svg 1140 width="12" 1141 height="12"
1142 viewBox="0 0 12 12" 1143 fill="none" 1144 xmlns="http://www.w3.org/2000/svg" 1145 > 1146 <path 1147 d="M2.5 6H9.5" 1148 stroke="" 1149 stroke-width="1.5" 1150 stroke-linecap="round" 1151 stroke-linejoin="round" 1152 ></path> 1153 <path 1154 d="M6 2.5L9.5 6L6 9.5" 1155 stroke="" 1156 stroke-width="1.5" 1157 stroke-linecap="round" 1158 stroke-linejoin="round" 1159 ></path> 1160 </svg> 1161 </a> 1162 </div> 1163 </div> 1164 </div> 1165 </div> 1166 1167 <!-- Resources section --> 1168 <li id="nav-resources" data-i="2" class="dropdown-mega-menu nav-item-sm"> 1169 <a href="javascript:void(0)">Resources</a> 1170 <svg 1171 width="16" 1172 height="17" 1173 viewBox="0 0 16 17" 1174 fill="none" 1175 xmlns="http://www.w3.org/2000/svg" 1176 > 1177 <path 1178 d="M4.66657 7.56L7.52657 10.3865C7.64757 10.5085 7.81507 10.5835 8.00007 10.5835C8.18507 10.5835 8.35257 10.508 8.47357 10.3865L11.3001 7.56C11.4221 7.439 11.4971 7.2715 11.4971 7.0865C11.4971 6.9015 11.4216 6.734 11.3001 6.613C11.1796 6.493 11.0136 6.419 10.8301 6.419C10.6466 6.419 10.4806 6.493 10.3601 6.613L8.00007 8.973L5.64007 6.613C5.52007 6.494 5.35557 6.4205 5.17357 6.4195C5.17257 6.4195 5.17107 6.4195 5.16957 6.4195C4.98657 6.4195 4.82057 6.4935 4.70007 6.613C4.56807 6.735 4.48557 6.9095 4.48557 7.103C4.48557 7.28 4.55457 7.441 4.66707 7.56L4.66657 7.5595V7.56Z" 1179 fill="#C7C6D9" 1180 fill-opacity="0.87" 1181 /> 1182 </svg> 1183 </li> 1184 1185 <div id="nav-resources" class="link-content"> 1186 <div> 1187 <div class="column"> 1188 <div class="title main-title">LEARN</div> 1189 <div class="links"> 1190 <a href="/learn/" class="icon-link"> 1191 <div class="title">Knowledge hub</div> 1192 </a> 1193 <a href="/learn/plaky/" class="icon-link"> 1194 <div class="title">Plaky guides</div> 1195 </a> 1196 <a href="/learn/glossary/" class="icon-link"> 1197 <div class="title">Glossary</div> 1198 </a> 1199 <a href="/blog/" class="icon-link"> 1200 <div class="title">Blog</div> 1201 </a> 1202 <a href="/pm-center/" class="icon-link"> 1203 <div class="title">PM Center</div> 1204 </a> 1205 </div> 1206 </div> 1207 1208 <div class="column"> 1209 <div class="title main-title">SUPPORT</div> 1210 <div class="links"> 1211 <a href="/help/" class="icon-link"> 1212 <div class="title">Help</div> 1213 </a> 1214 <a href="/learn/plaky/" class="icon-link"> 1215 <div class="title">Plaky guides</div> 1216 </a> 1217 <a href="/help/contact/" class="icon-link"> 1218 <div class="title">Contact</div> 1219 </a> 1220 <a href="/tutorials" class="icon-link"> 1221 <div class="title">Tutorials</div> 1222 </a> 1223 </div> 1224 </div> 1225 1226 <div class="column"> 1227 <div class="title main-title">CUSTOMER STORIES</div> 1228 1229 <div class="testimonial"> 1230 <div class="picture"> 1231 <img 1232 src="/assets/images/web-assets/mega-menu/picture-jesse-tut.png" 1233 alt="Jesse Tutt picture" 1234 /> 1235 </div> 1236 <div class="text"> 1237 <div class="name_job"> 1238 <div class="name">Jesse Tutt</div> 1239 <div class="job">Founder and CEO of Guru</div> 1240 </div> 1241 <div class="quote"> 1242 âOne of the best things about Plaky is that we have everything 1243 posted clearly, including status, due dates, labels, and 1244 additional commentaryâ 1245 </div> 1246 <a href="/customer-stories/" class="rd-btn rd-btn-gray"> 1247 More stories 1248 <svg 1249 width="17" 1250 height="16"
1251 viewBox="0 0 17 16" 1252 fill="none" 1253 xmlns="http://www.w3.org/2000/svg" 1254 > 1255 <path 1256 d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" 1257 stroke="" 1258 stroke-linecap="round" 1259 stroke-linejoin="round" 1260 ></path> 1261 <path 1262 d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" 1263 stroke="" 1264 stroke-linecap="round" 1265 stroke-linejoin="round" 1266 ></path> 1267 <path 1268 d="M5.6709 8H11.0042" 1269 stroke="" 1270 stroke-linecap="round" 1271 stroke-linejoin="round" 1272 ></path> 1273 </svg> 1274 </a> 1275 </div> 1276 </div> 1277 </div> 1278 </div> 1279 </div> 1280 1281 <!-- Login link --> 1282 <a href="https://app.plaky.com/login" class="nav-item-sm">Log In</a> 1283 1284 <div class="bottom-links"> 1285 <div class="bg-transparent"> 1286 <a 1287 id="watch-video" 1288 href="javascript: void(0)" 1289 onclick="openModal('https://www.youtube.com/embed/IYQCi9y-lNU?si=-zfs04eM6PdERGEc?auto
1289play=1')" 1290 > 1291 Watch tour 1292 </a> 1293 </div> 1294 <div class="bg-transparent"> 1295 <a href="/help/contact/sales/">Book a demo</a> 1296 </div> 1297 </div> 1298 </ul> 1299 </div> 1300</div> 1301 1302<!-- Desktop mega menu functionality --> 1303
1303<script> 1304 document.addEventListener("DOMContentLoaded", () => { 1305 const navbarMegaMenu = document.querySelector(".navbar-mega-menu"); 1306 const megaMenu = document.querySelector(".mega-menu"); 1307 const megaMenuUnderline = megaMenu.querySelector(".nav_underline"); 1308 const megaMenuDropdownContent = document.querySelector( 1309 ".mega-menu-content .content" 1310 ); 1311 1312 let prevTarget = null; 1313 1314 const getWidthWithoutPadding = (element) => { 1315 const computedStyle = getComputedStyle(element); 1316 const paddingLeft = parseFloat(computedStyle.paddingLeft); 1317 const paddingRight = parseFloat(computedStyle.paddingRight); 1318 const elementWidth = element.getBoundingClientRect().width; 1319 return elementWidth - paddingLeft - paddingRight; 1320 }; 1321 1322 document.addEventListener("mouseover", (event) => { 1323 let target = event.target; 1324 const dropdownMenu = target.closest(".dropdown-mega-menu"); 1325 const isOverNavbar = target.closest(".navbar-mega-menu"); 1326 const isOverMegaMenuContent = target.closest(".mega-menu-content"); 1327 1328 // Hide underline if mouse leaves navbar/mega-menu-content 1329 if ( (isOverNavbar && !dropdownMenu) || (!isOverNavbar && !isOverMegaMenuContent) ) { 1330 megaMenuUnderline.style.width = "0"; 1331 } 1332 1333 if (isOverNavbar && dropdownMenu && dropdownMenu !== prevTarget) { 1334 // Update underline position 1335 const { offsetLeft, paddingLeft } = dropdownMenu; 1336 const position = offsetLeft + parseInt(getComputedStyle(dropdownMenu).paddingLeft); 1337 1338 megaMenuUnderline.style.width = `${ getWidthWithoutPadding(dropdownMenu) - 8 }px`; 1339 megaMenuUnderline.style.transform = `translateX(${position}px)`; 1340 1341 // Update the previous target 1342 prevTarget = dropdownMenu; 1343 } else if (isOverNavbar && dropdownMenu) { 1344 megaMenuUnderline.style.width = `${ getWidthWithoutPadding(dropdownMenu) - 8 }px`; 1345 } 1346 }); 1347 }); 1348</script>
vendor: 1 bytes, line 1348
1348
1349<script> 1350 document.addEventListener("DOMContentLoaded", () => { 1351 const navbarMegaMenu = document.querySelector(".navbar-mega-menu"); 1352 const megaMenu = document.querySelector(".mega-menu"); 1353 1354 // Header background based on scroll 1355 const setNavbarBackground = () => { 1356 const scrollY = window.scrollY; 1357 const scrollRange = navbarMegaMenu.offsetHeight; 1358 const color = 1359 getComputedStyle(navbarMegaMenu).getPropertyValue( 1360 "--_background-color-rgb" 1361 ) || "9, 9, 10"; 1362 1363 const opacityBackground = Math.min(scrollY / scrollRange, 1) * 0.75; 1364 const opacityShadow = Math.min(scrollY / scrollRange, 1) * 0.45; 1365 1366 navbarMegaMenu.style.backgroundColor = `rgba(${color}, ${opacityBackground})`; 1367 navbarMegaMenu.style.boxShadow = `0px 4px 4px 0px rgba(0,0,0,${opacityShadow})`; 1368 }; 1369 1370 // Execute on load and on scroll 1371 setNavbarBackground(); 1372 window.addEventListener("scroll", setNavbarBackground); 1373 }); 1374</script>
1374 1375 1376<!-- Mobile mega menu functionality -->
1377<script> 1378 const navbarMegaMenu = document.querySelector(".navbar-mega-menu"), 1379 menuBtn = document.querySelector(".mega-menu-btn"), 1380 menu = document.querySelector(".menu-container"), 1381 dropdownsSelector = ".dropdown-mega-menu.nav-item-sm", 1382 dropdowns = document.querySelectorAll(dropdownsSelector); 1383 1384 let menuOpen = false; 1385 1386 menuBtn.addEventListener("click", () => { 1387 dropdowns.forEach((el) => { 1388 el.nextElementSibling.classList.remove("menu-show"); 1389 }); 1390 menu.classList.toggle("mega-menu-show"); 1391 }); 1392 1393 function handleClick(target) { 1394 const width = window.innerWidth; 1395 1396 if (width <= 991) { 1397 const nextElement = target.nextElementSibling; 1398 1399 if (nextElement.classList.contains("menu-show")) { 1400 nextElement.classList.toggle("menu-show"); 1401 } else { 1402 dropdowns.forEach((el) => 1403 el.nextElementSibling.classList.remove("menu-show") 1404 ); 1405 nextElement.classList.toggle("menu-show"); 1406 } 1407 } 1408 } 1409 1410 document.addEventListener("click", (event) => { 1411 var target = event.target; 1412 1413 if (target.matches(dropdownsSelector)) { 1414 handleClick(target); 1415 } 1416 }); 1417 1418 const menuItemSm = document.querySelectorAll(".nav-item-sm"); 1419 1420 menuItemSm.forEach((btn) => { 1421 btn.addEventListener("click", (e) => { 1422 [...menuItemSm] 1423 .filter((f) => f != e.target) 1424 .forEach((f) => f.classList.remove("active")); 1425 1426 e.target.classList.toggle("active"); 1427 }); 1428 }); 1429</script>
1429 1430 1431 </div> 1432 </div> 1433 </header> 1434 1435<section class="hero background-primary-3 py-128 "> 1436 <div class="container mt-64 "> 1437 <div class="row circle justify-content-between align-items-center position-relative text-center text-lg-left" > 1438 <div class="col-lg-5 col-12 mb-lg-0 mb-5 above-image"> 1439 <p class="hero__lead text-blue mb-0">#SOFTWARE DEVELOPMENT</p> 1440 <h1 class="hero__title text-white">Product roadmap template</h1> 1441 <p class="hero__desc text-bg-4">Align your entire team around your roadmap with Plakyâs easy to use free product roadmap template.</p> 1442 <a href="https://app.plaky.com/signup" class="rd-btn rd-btn-gradient"> 1443 Get Started 1444 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 1445 <path d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1446 <path d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1447 <path d="M5.6709 8H11.0042" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1448 </svg> 1449</a> 1450 </div> 1451 <div class="col-lg-6 col-12 above-image text-center"> 1452 <img class="img-fluid" src="/assets/images/redesign/templates/product-roadmap/hero.png" alt="Stay up to date in Plaky" srcset="/assets/images/redesign/templates/product-roadmap/[email protected] 2x"> 1453 </div> 1454 </div> 1455 </div> 1456 1457 <div class="container mt-128 above-image"> 1458 <div class="container-card py-64"> 1459 <div class="row justify-content-between align-items-center"> 1460 <div class="col-lg-5 mb-lg-0 mb-5"> 1461 <h3 class="text-bg-2">Everything you need to plan and track the best product roadmap</h3> 1462 <p class="text-bg-4">Are you struggling with planning of features and releases? 1463 Do team members act according to the project objectives?</p> 1464 <p class="text-bg-4">This template has the tools you need to unite the team around your plan and create impactful product roadmaps.</p> 1465 1466 <!-- List starts from here --> 1467 <p class="text-bg-4 mb-0">Use Plaky to:</p> 1468 <div class="d-flex align-items-center justify-content-start"> 1469 <img width="40" src="/assets/images/redesign/icons/checkmark-radial.svg" alt=""> 1470 <p class="mb-0 text-bg-4">Break roadmap into manageable phases</p> 1471 </div> 1472 <div class="d-flex align-items-center justify-content-start"> 1473 <img width="40" src="/assets/images/redesign/icons/checkmark-radial.svg" alt=""> 1474 <p class="mb-0 text-bg-4">Share critical information within your department</p> 1475 </div> 1476 <div class="d-flex align-items-center justify-content-start"> 1477 <img width="40" src="/assets/images/redesign/icons/checkmark-radial.svg" alt=""> 1478 <p class="mb-0 text-bg-4">Track project performance</p> 1479 </div> 1480 </div> 1481 <div class="col-lg-6"> 1482 <img class="img-fluid text-center" src="/assets/images/redesign/templates/product-roadmap/subhero.png" alt="Gantt chart in Plaky" srcset="/assets/images/redesign/templates/product-roadmap/[email protected] 2x"> 1483 </div> 1484 </div> 1485 </div> 1486 </div> 1487 1488</section> 1489 1490<section class="background-primary-2 py-128 "> 1491<div class="container"> 1492 <div class="row"> 1493 <div class="col"> 1494 <h2 class="text-center text-bg-2 mb-64">Benefits of using Product roadmap template</h2> 1495 </div> 1496 </div> 1497 1498 <div class="benefits-wrapper"> 1499 <div class="benefits-wrapper-item"> 1500 <img class="img-fluid mb-4" src="/assets/images/redesign/templates/contacts/book.svg"> 1501 <h5 class="text-bg-2 mb-3">Shared goals</h5> 1502 <p class="text-bg-5">Share major milestones with everyone in your organization or even your customers. This way you can keep an eye on releases across the year and can easily communicate with internal stakeholders and users about upcoming release dates.</p> 1503 </div> 1504 <div class="benefits-wrapper-item"> 1505 <img class="img-fluid mb-4" src="/assets/images/redesign/templates/event-planning/box.svg"> 1506 <h5 class="text-bg-2 mb-3">Easy collaboration</h5> 1507 <p class="text-bg-5">Have your data just one click away. But also have get the attention of your teammates with a @mention. Communicating through Plaky will make things easy to refer back to at a later date and ensure nothing falls through the cracks.</p> 1508 </div> 1509 1510 </div> 1511</div> 1512</section> 1513 1514<section class="background-primary-3 accordions pt-128"> 1515<div class="container"> 1516 <div class="container-card py-5"> 1517 <div class="row mb-64"> 1518 <div class="col"> 1519 <h2 class="text-center text-bg-1 m-0">Product roadmap in three simple steps</h2> 1520 </div> 1521 </div> 1522 <div class="row justify-content-between align-items-center accordion"> 1523 <div class="col-lg-6 accordions-steps"> 1524 <div class="step-item open" 1525 data-image="/assets/images/redesign/templates/product-roadmap/step-1.png" 1526 data-srcset="/assets/images/redesign/templates/product-roadmap/[email protected] 2x"> 1527 <div class="step-title"> 1528 <h4>
1529 <span>1</span> 1530 Dedicate a task for each feature 1531 </h4> 1532 </div> 1533 <div class="step-desc"> 1534 <p>Task is where you place and save all the relevant information about your feature. You can plan and track everything there, even communicate with the team mates in the most coordinated ways.</p> 1535 </div> 1536 <div class="step-desc"> 1537 <p>Share files, write updates and stay informed of the progress.</p> 1538 </div> 1539 </div> 1540 <div class="step-item" 1541 data-image="/assets/images/redesign/templates/product-roadmap/step-2.png" 1542 data-srcset="/assets/images/redesign/templates/product-roadmap/[email protected] 2x"> 1543 <div class="step-title"> 1544 <h4> 1545 <span>2</span> 1546 Assign the right people to tasks 1547 </h4> 1548 </div> 1549 <div class="step-desc"> 1550 <p>Let the people from your development team know who is responsible and for what. Assign them to task and have them manage features in the most organized way. Track their progress and make sure the roadmap flows perfectly.</p> 1551 </div> 1552 </div> 1553 <div class="step-item" 1554 data-image="/assets/images/redesign/templates/product-roadmap/step-3.png" 1555 data-srcset="/assets/images/redesign/templates/product-roadmap/[email protected] 2x"> 1556 <div class="step-title"> 1557 <h4> 1558 <span>3</span> 1559 Add fields for better planning 1560 </h4> 1561 </div> 1562 <div class="step-desc"> 1563 <p>Know exactly where your team stands against your milestones at any time with a customizable status field. Fields in Plaky can categorize your tasks in many ways.</p> 1564 </div> 1565 <div class="step-desc"> 1566 <p>Add tag field to represent the tier; date field to mark the end date; description field to bring more clarity about the feature, and much more.</p> 1567 </div> 1568 </div> 1569 </div> 1570 1571 <div class="col-lg-5 accordions-image"> 1572 <img class="img-fluid"> 1573 </div> 1574 </div> 1575 </div> 1576 1577</div> 1578 1579</section> 1580 1581<section class="background-primary-3 template-slider pb-128"> 1582<div class="container "> 1583 <div class="container-card py-5"> 1584 <div class="row"> 1585 <div class="col-lg-7 mx-auto"> 1586 <h2 class="text-center text-bg-2 mb-4">The features youâll love in the Product roadmap template</h2> 1587 </div> 1588 </div> 1589 <div class="row justify-content-center gap-20 mb-5 slider-top-links"> 1590 <div>
1591 <a href="javascript:void(0)" data-slide="0" >Importance</a> 1592 </div> 1593 <div> 1594 <a href="javascript:void(0)" data-slide="1">@mention</a> 1595 </div> 1596 </div> 1597 <div class="row"> 1598 <div class="swiper swiper-1"> 1599 <!-- Additional required wrapper --> 1600 <div class="swiper-wrapper"> 1601 <div class="swiper-slide"> 1602 <div class="template-slide-content"> 1603 <div class="text col-lg-5"> 1604 <h4>Importance</h4> 1605 <div class="d-flex align-items-start justify-content-start mb-3"> 1606 <img width="40" src="/assets/images/redesign/icons/checkmark-radial.svg" alt=""> 1607 <p class="mb-0 text-bg-1">The status field allows you to visually keep track of the importance of your tasks. This field can also be used to prioritize and categorize your tasks. Distinguish between urgent and important.</p> 1608 </div> 1609 </div> 1610 <div class="image col-lg-5"><img src="/assets/images/redesign/templates/product-roadmap/importance.png" alt="" srcset="/assets/images/redesign/templates/product-roadmap/[email protected] 2x" /></div> 1611 </div> 1612 </div> 1613 <div class="swiper-slide"> 1614 <div class="template-slide-content"> 1615 <div class="text col-lg-5"> 1616 <h4>@mention</h4> 1617 <div class="d-flex align-items-start justify-content-start mb-3"> 1618 <img width="40" src="/assets/images/redesign/icons/checkmark-radial.svg" alt=""> 1619 <p class="mb-0 text-bg-1">As many teams will be involved along the way, youâll need a place to share detailed information about your task so everybody is on the same track and knows what to work on and what to expect. To communicate easily just and send a message to a team member, simply use the @mention followed by your message.</p> 1620 </div> 1621 </div> 1622 <div class="image col-lg-5"><img src="/assets/images/redesign/templates/product-roadmap/mention.png" alt="" srcset="/assets/images/redesign/templates/product-roadmap/[email protected] 2x" /></div> 1623 </div> 1624 </div> 1625 </div> 1626 </div> 1627 </div> 1628 </div> 1629 1630 1631</div> 1632</section> 1633 1634<section class="py-128 explore-section"> 1635<div class="container"> 1636 <div class="row"> 1637 <div class="col-lg-8 mx-auto"> 1638 <h2 class="text-blue text-center">Explore Plaky more and do more</h2> 1639 <h4 class="text-center text-bg-2 mb-5">Discover versatile tools and resources that can help your team plan and execute the best content.</h4> 1640 1641 <div class="row justify-content-center gap-20"> 1642 <a href="/features/" class="rd-btn rd-btn-white"> 1643 Plaky Features 1644 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 1645 <path d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1646 <path d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1647 <path d="M5.6709 8H11.0042" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1648 </svg> 1649</a> 1650 <a href="https://plaky.com/learn/" class="rd-btn rd-btn-white"> 1651 Project management hub 1652 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 1653 <path d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1654 <path d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1655 <path d="M5.6709 8H11.0042" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1656 </svg> 1657</a> 1658 </div> 1659 </div> 1660 </div> 1661 1662</div> 1663</section> 1664 1665 1666<section class="footer-cta position-relative background-primary-3 m-0 px-md-0 px-3 py-128"> 1667<div class="container radial-double border-radius-20px"> 1668 <div class="row"> 1669 <div class="col-lg-12 text-center my-5"> 1670 <img class="mb-4" alt="Plaky logo" src="/assets/images/web-assets/plaky-logo-small-redesign.svg"> 1671 <div class="h2 font-weight-regular text-bg-1 mb-3">Start managing your tasks</div> 1672 <p class="lead text-bg-4 mb-4">Unlimited projects ⢠Unlimited users ⢠Free forever</p> 1673 <a href="https://app.plaky.com/signup" class="rd-btn rd-btn-gradient"> 1674 GET STARTED
1675 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 1676 <path d="M8.33756 14.6668C12.0195 14.6668 15.0042 11.6821 15.0042 8.00016C15.0042 4.31826 12.0195 1.3335 8.33756 1.3335C4.65567 1.3335 1.6709 4.31826 1.6709 8.00016C1.6709 11.6821 4.65567 14.6668 8.33756 14.6668Z" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1677 <path d="M8.33789 10.6668L11.0046 8.00016L8.33789 5.3335" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1678 <path d="M5.6709 8H11.0042" stroke="" stroke-linecap="round" stroke-linejoin="round"/> 1679 </svg> 1680</a> 1681 </div> 1682 </div> 1683 </div> 1684 </section> 1685 1686<footer class="redesign"> 1687 <section class="container"> 1688 <div class="row"> 1689 <div class="col-lg-3 col-12"> 1690 <div class="menu-group"> 1691 <a href="/"><img class="footer-logo" src="/assets/images/redesign/footer/footer-logo.svg" alt=""></a> 1692 <p>Free task and project management software for team collaboration</p> 1693 <p><a href="https://plaky.com/help/contact/sales/" class="footer-button">Book a demo</a></p> 1694 <p><a href="https://app.plaky.com/login">Log in</a></p> 1695 <p><a href="https://app.plaky.com/signup">Sign up</a></p> 1696 </div> 1697 </div> 1698 <div class="col-lg-2 col-6"> 1699 <div class="menu-group"> 1700 <h6>Product</h6> 1701 <p><a href="/">Overview</a></p> 1702 <p><a href="/apps">Apps</a></p> 1703 <p><a href="/help/whats-new/">Changelog</a></p> 1704 <p><a href="/roadmap">Roadmap</a></p> 1705 <p><a href="https://docs.plaky.com/">API</a></p> 1706 </div> 1707 <div class="menu-group"> 1708 <h6>Plans</h6> 1709 <p><a href="/pricing#compare">Free</a></p> 1710 <p><a href="/pro-plan">Pro</a></p> 1711 <p><a href="/enterprise-plan">Enterprise</a></p> 1712 <p class="icon-link"> 1713 <a href="/pricing">See pricing 1714 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1715 <path d="M2.5 6H9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1716 <path d="M6 2.5L9.5 6L6 9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1717 </svg> 1718 </a> 1719 </p> 1720 1721 </div> 1722 <div class="menu-group"> 1723 <h6>Templates</h6> 1724 <p><a href="/templates/single-project">Single project</a></p> 1725 <p><a href="/templates/resource-planning">Resource planning</a></p> 1726 <p><a href="/templates/construction-schedule">Construction schedule</a></p> 1727 <p><a href="/templates/scrum-board">Scrum board</a></p> 1728 <p class="icon-link"> 1729 <a href="/templates/">See all templates 1730 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1731 <path d="M2.5 6H9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1732 <path d="M6 2.5L9.5 6L6 9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1733 </svg> 1734 </a> 1735 </p> 1736 </div> 1737 </div> 1738 <div class="col-lg-2 col-6"> 1739 <div class="menu-group"> 1740 <h6>Features</h6> 1741 <p><a href="/features/board">Boards</a></p> 1742 <p><a href="/features/items">Items</a></p> 1743 <p><a href="/features/fields">Fields</a></p> 1744 <p><a href="/features/notifications">Notifications</a></p> 1745 <p><a href="/features/activity-log">Activity</a></p> 1746 <p><a href="/features/space-permissions">Permissions</a></p> 1747 <p class="icon-link"> 1748 <a href="/features/">See all features 1749 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1750 <path d="M2.5 6H9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1751 <path d="M6 2.5L9.5 6L6 9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1752 </svg> 1753 </a> 1754 </p> 1755 </div> 1756 <div class="menu-group"> 1757 <h6>Use cases</h6> 1758 <p><a href="/project-management-software">Project management</a></p> 1759 <p><a href="/development">Development</a></p> 1760 <p><a href="/plaky-for-marketing">Marketing</a></p> 1761 <p><a href="/sales">Sales</a></p> 1762 <p><a href="/crm">CRM</a></p> 1763 <p><a href="/hr">HR</a></p> 1764 <p class="icon-link"> 1765 <a href="https://plaky.com/software-uses">More use cases 1766 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1767 <path d="M2.5 6H9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1768 <path d="M6 2.5L9.5 6L6 9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1769 </svg> 1770 </a> 1771 </p> 1772 </div> 1773 </div> 1774 <div class="col-lg-2 col-6"> 1775 <div class="menu-group"> 1776 <h6>Resources</h6> 1777 <p><a href="https://plaky.com/learn/">Knowledge hub</a></p> 1778 <p><a href="https://plaky.com/learn/plaky/">Plaky guides</a></p> 1779 <p><a href="https://plaky.com/learn/glossary/">Glossary</a></p> 1780 <p><a href="/tutorials">Tutorials</a></p> 1781 <p><a href="https://plaky.com/blog/">Blog</a></p> 1782 <p><a href="https://plaky.com/customer-stories/">Customer stories</a></p> 1783 <p><a href="/pm-center/">PM Center</a></p> 1784 </div> 1785 <div class="menu-group"> 1786 <h6>Compare</h6> 1787 <p><a href="/compare/monday-alternative">vs Monday</a></p> 1788 <p><a href="/compare/clickup-alternative">vs ClickUp</a></p> 1789 <p><a href="/compare/asana-alternative">vs Asana</a></p> 1790 <p><a href="/compare/trello-alternative">vs Trello</a></p> 1791 <p class="icon-link"> 1792 <a href="/compare/">More comparisons 1793 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1794 <path d="M2.5 6H9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1795 <path d="M6 2.5L9.5 6L6 9.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1796 </svg> 1797 </a> 1798 </p> 1799 </div> 1800 <div class="menu-group"> 1801 <h6>Integrations</h6> 1802 <p><a href="/clockify-integration">Clockify</a></p> 1803 <p><a href="/pumble-integration">Pumble</a></p> 1804 </div> 1805 </div> 1806 <div class="col-lg-3 col-6"> 1807 <div class="menu-group"> 1808 <h6>Support</h6> 1809 <p><a href="https://plaky.com/help/">Help</a></p> 1810 <p><a href="https://plaky.com/help/contact/">Contact</a></p> 1811 <p><a href="https://plaky.com/feedback">Feedback</a></p> 1812 <p><a href="https://status.plaky.com">System status</a></p> 1813 <p><a href="mailto:[email protected]">[email protected]</a></p> 1814 <p><a href="tel:+1-844-647-0267">+1-844-647-0267</a></p> 1815 </div> 1816 <div class="menu-group"> 1817 <h6>Download apps</h6> 1818 <div class="row"> 1819 <div class="col-md-6 mb-3"> 1820 <a href="https://apps.apple.com/us/app/plaky/id1635144609" target="_blank"> 1821 <img class="img-fluid" src="/assets/images/redesign/apps/apple-store.svg" alt=""> 1822 </a> 1823 </div> 1824 </div> 1825 1826 <div class="row"> 1827 <div class="col-md-6"> 1828 <a href="https://play.google.com/store/apps/details?id=com.plaky.android" target="_blank"> 1829 <img class="img-fluid" src="/assets/images/redesign/apps/google-play.svg" alt=""> 1830 </a> 1831 </div> 1832 </div> 1833 <!-- SOCIAL --> 1834 <div class="social"> 1835 <!-- FACEBOOK --> 1836 <a href="https://www.facebook.com/PlakyCom" target="_blank"> 1837 <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> 1838 <g clip-path="url(#clip0_3555_16859)"> 1839 <path d="M16.6737 5.204V7.72936H15.1716C14.623 7.72936 14.2532 7.84418 14.0621 8.07382C13.8711 8.30346 13.7753 8.64793 13.775 9.10721V10.9152H16.5778L16.205 13.747H13.775V21.0081H10.8478V13.747H8.4082V10.9152H10.8478V8.82971C10.8478 7.64364 11.1795 6.72364 11.8427 6.06971C12.5059 5.41578 13.3891 5.089 14.4923 5.08936C1
18395.4298 5.08936 16.1573 5.12757 16.6737 5.204Z" fill=""/> 1840 </g> 1841 <defs> 1842 <clipPath id="clip0_3555_16859"> 1843 <rect width="9.64286" height="17.1429" fill="" transform="translate(7.5 4.28564)"/> 1844 </clipPath> 1845 </defs> 1846 </svg> 1847 </a> 1848 <!-- LINKEDIN --> 1849 <a href="https://www.linkedin.com/company/plaky/" target="_blank"> 1850 <svg width="27" height="26" viewBox="0 0 27 26" fill="" xmlns="http://www.w3.org/2000/svg"> 1851 <g clip-path="url(#clip0_3555_6091)"> 1852 <path d="M4.85693 6.18857C4.85693 5.63698 5.04999 5.18194 5.43608 4.82343C5.82218 4.4649 6.32412 4.28564 6.94188 4.28564C7.54861 4.28564 8.0395 4.46214 8.41457 4.81515C8.80067 5.17919 8.99372 5.65353 8.99372 6.23821C8.99372 6.76772 8.80619 7.20896 8.43112 7.56198C8.04502 7.92602 7.53757 8.10804 6.90878 8.10804H6.89223C6.2855 8.10804 5.79461 7.92602 5.41954 7.56198C5.04446 7.19794 4.85693 6.74013 4.85693 6.18857ZM5.07205 20.6673V9.61383H8.74552V20.6673H5.07205ZM10.7808 20.6673H14.4543V14.4952C14.4543 14.1091 14.4984 13.8113 14.5867 13.6017C14.7411 13.2266 14.9755 12.9095 15.2899 12.6502C15.6043 12.391 15.9987 12.2614 16.473 12.2614C17.7086 12.2614 18.3263 13.0942 18.3263 14.76V20.6673H21.9998V14.3298C21.9998 12.6971 21.6137 11.4588 20.8415 10.6149C20.0693 9.77103 19.0489 9.34907 17.7803 9.34907C16.3572 9.34907 15.2485 9.96132 14.4543 11.1858V11.2189H14.4377L14.4543 11.1858V9.61383H10.7808C10.8029 9.96683 10.8139 11.0645 10.8139 12.9067C10.8139 14.749 10.8029 17.3358 10.7808 20.6673Z" fill=""/> 1853 </g> 1854 <defs> 1855 <clipPath id="clip0_3555_6091"> 1856 <rect width="17.1429" height="16.3817" fill="" transform="translate(4.85693 4.28564)"/> 1857 </clipPath> 1858 </defs> 1859 </svg> 1860 </a> 1861 <!-- TWITTER / X --> 1862 <a href="https://x.com/i/flow/login?redirect_after_login=%2FPlakyCom" target="_blank"> 1863 <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> 1864 <path d="M4.85547 4.28564L11.6858 13.3928L4.85547 21.4285H6.56975L12.4894 14.4642L17.7126 21.4285H21.1412L14.3108 12.3214L21.1412 4.28564H19.4269L13.5073 11.2499L8.28404 4.28564H4.85547ZM6.56975 5.14279H7.85547L19.4269 20.5714H18.1412L6.56975 5.14279Z" fill=""/> 1865 </svg> 1866 </a> 1867 <!-- YOUTUBE --> 1868 <a href="https://www.youtube.com/c/PlakyCom?sub_confirmation=1" target="_blank"> 1869 <svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg"> 1870 <path d="M13.6272 6.42936H13.7219C14.6032 6.43204 19.0659 6.46418 20.2687 6.78741C20.6325 6.88609 20.964 7.07856 21.23 7.34557C21.4961 7.61258 21.6874 7.94477 21.7848 8.30892C21.8937 8.71609 21.9696 9.2554 22.0205 9.81168L22.0312 9.92329L22.0554 10.2019L22.0643 10.3126C22.1117 11.0108 22.1379 11.7102 22.1429 12.41V12.4904C22.1374 13.2269 22.1082 13.963 22.0554 14.6976L22.0464 14.8102L22.0375 14.9209C21.9839 15.5343 21.9036 16.1433 21.7848 16.5906C21.6877 16.9549 21.4966 17.2873 21.2304 17.5543C20.9643 17.8214 20.6326 18.0138 20.2687 18.1121C19.0257 18.4461 14.3023 18.4693 13.6469 18.4711H13.4951C13.1647 18.4711 11.795 18.4648 10.3592 18.4157L10.1771 18.4086L10.0833 18.405L9.90025 18.3969L9.71721 18.3898C8.52786 18.3371 7.39566 18.2523 6.87331 18.1112C6.50949 18.0129 6.17792 17.8206 5.91182 17.5537C5.64572 17.2868 5.45444 16.9547 5.35716 16.5906C5.23841 16.1442 5.15894 15.5343 5.10536 14.9209L5.09643 14.8093L5.0875 14.6976C5.03475 13.9717 5.00557 13.2442 5 12.5163V12.3841C5.00268 12.1538 5.01071 11.3573 5.06875 10.4787L5.07679 10.3689L5.07947 10.3126L5.0884 10.2019L5.11161 9.9224L5.12233 9.81168C5.17412 9.2554 5.25001 8.71519 5.35805 8.30892C5.45528 7.94455 5.64662 7.61215 5.9
1870129 7.34509C6.17917 7.07803 6.51101 6.88571 6.8751 6.78741C7.39745 6.64812 8.52965 6.5624 9.719 6.50883L9.90115 6.50169L10.0851 6.49543L10.1779 6.49186L10.361 6.48472C11.3807 6.45168 12.4004 6.43382 13.421 6.43025H13.6281V6.42847L13.6272 6.42936ZM11.8575 9.86704V15.0298L16.3122 12.4493L11.8575 9.86704Z" fill=""/> 1871 </svg> 1872 </a> 1873 <!-- INSTAGRAM --> 1874 <a href="https://www.instagram.com/plaky.app/" target="_blank"> 1875 <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> 1876 <g clip-path="url(#clip0_3555_6098)"> 1877 <path d="M13.0445 16.2181C14.9365 16.2181 16.4703 14.6843 16.4703 12.7923C16.4703 10.9003 14.9365 9.36646 13.0445 9.36646C11.1525 9.36646 9.61865 10.9003 9.61865 12.7923C9.61865 14.6843 11.1525 16.2181 13.0445 16.2181Z" fill=""/> 1878 <path d="M9.74254 4.78613C7.0954 4.78613 4.93994 6.94159 4.93994 9.58873V16.1251C4.93994 18.7722 7.0954 20.9276 9.74254 20.9276H16.3451C18.9923 20.9276 21.1476 18.7724 21.1476 16.1251V9.58873C21.1476 6.94159 18.9924 4.78613 16.3451 4.78613H9.74254ZM9.74254 6.33925H16.3451C18.1588 6.33925 19.5945 7.77522 19.5945 9.58873V16.1251C19.5945 17.9387 18.1588 19.3744 16.3451 19.3744H9.74254C7.9289 19.3744 6.49306 17.9387 6.49306 16.1251V9.58873C6.49306 7.77509 7.92903 6.33925 9.74254 6.33925Z" fill=""/> 1879 <path d="M17.4059 9.55697C17.9435 9.55697 18.3792 9.12121 18.3792 8.58366C18.3792 8.04612 17.9435 7.61035 17.4059 7.61035C16.8684 7.61035 16.4326 8.04612 16.4326 8.58366C16.4326 9.12121 16.8684 9.55697 17.4059 9.55697Z" fill=""/> 1880 </g> 1881 <defs> 1882 <clipPath id="clip0_3555_6098"> 1883 <rect width="17.1429" height="17.1429" fill="" transform="translate(4.57129 4.28564)"/> 1884 </clipPath> 1885 </defs> 1886 </svg> 1887 </a> 1888 </div> 1889 </div> 1890 </div> 1891 </div> 1892 <div class="row"> 1893 <div class="col-lg-3 col-md-6 col-12"> 1894 <div class="menu-group"> 1895 <a href="https://cake.com/" target="_blank"><img class="footer-logo" src="/assets/images/redesign/footer/footer-cake-logo.svg" alt=""></a> 1896 <p>Productivity software suite</p> 1897 </div> 1898 </div> 1899 <div class="col-lg-2 col-md-6 col-12 "> 1900 <div class="menu-group"> 1901 <h6>Our other products</h6> 1902 <a href="https://pumble.com/" target="_blank" class="product"> 1903 <img src="/assets/images/redesign/footer/pumble-logo.svg" alt=""> 1904 <p>Team Communication</p> 1905 </a> 1906 <a href="https://clockify.me/" target="_blank" class="product"> 1907 <img src="/assets/images/redesign/footer/clockify-logo.svg" alt=""> 1908 <p>Time Tracking</p> 1909 </a> 1910 </div> 1911 </div> 1912 <div class="col-lg-2 col-md-4 col-6"> 1913 <div class="menu-group"> 1914 <h6>Platform</h6> 1915 <p><a href="https://cake.com/suite">Suite</a></p> 1916 <p><a href="https://cake.com/bundle">Bundle</a></p> 1917 <p><a href="https://marketplace.cake.com/">Marketplace</a></p> 1918 <p><a href="https://cake.com/updates/">Updates</a></p> 1919 </div> 1920 </div> 1921 <div class="col-lg-2 col-md-4 col-6"> 1922 <div class="menu-group"> 1923 <h6>Company</h6> 1924 <p><a href="https://cake.com/about">About us</a></p> 1925 <p><a href="https://cake.com/affiliate">Affiliate</a></p> 1926 <p><a href="https://brand.cake.com/">Brand</a></p> 1927 </div> 1928 </div> 1929 <div class="col-lg-3 col-md-4 col-12"> 1930 <div class="menu-group security-links"> 1931 <a href="https://cake.com/security"><img src="/assets/images/redesign/footer/iso.svg" alt=""></a> 1932 <a href="https://cake.com/security"><img src="/assets/images/redesign/footer/soc2.svg" alt=""></a> 1933 <a href="https://cake.com/security"><img src="/assets/images/redesign/footer/gdpr.svg" alt=""></a> 1934 </div> 1935 </div> 1936 </div> 1937 <div class="row copyright"> 1938 <div class="col-lg-3 col-12 order-3 order-lg-1"> 1939 <p>© Plaky
1939<script type="text/javascript"> document.write(new Date().getFullYear());</script>
1939 by CAKE.com Inc.</p> 1940 </div> 1941 1942 <div class="col-lg-6 col-12 copyright-links order-2 order-lg-2"> 1943 <p><a href="https://cake.com/cookies" target="_blank">Cookies</a></p> 1944 <p><a href="https://cake.com/terms" target="_blank">Terms</a></p> 1945 <p><a href="https://cake.com/privacy" target="_blank">Privacy</a></p> 1946 <p><a href="https://cake.com/security" target="_blank">Security</a></p> 1947 <p><a href="https://plaky.com/sitemap">Sitemap</a></p> 1948 </div> 1949 1950 <div class="col-lg-3 col-12 order-1 order-lg-3"> 1951 <div class="lang-picker"> 1952 <img class="" src="/assets/images/redesign/footer/globe.svg" alt=""> 1953 <div class="lang-picker-wrapper"> 1954 <p class="lang-picker-title"> English </p> 1955 <div class="lang-picker-list"> 1956 <a href="/de/">Deutsch</a> 1957 <a href="/">English</a> 1958 <a href="/es/">Español</a> 1959 <a href="/fr/">Français</a> 1960 <a href="/pt/">Português</a> 1961 </div> 1962 </div> 1963 </div> 1964 </div> 1965 </div> 1966 </section> 1967</footer> 1968 1969<!-- CORE JS -->
1970<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1970
1970
1971<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1971
1971
1972<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1972
1972
1973<script> 1974 document.addEventListener("DOMContentLoaded", function () { 1975 // Select all accordions on the page 1976 const accordions = document.querySelectorAll(".accordion"); 1977 1978 accordions.forEach((accordion) => { 1979 const stepItems = accordion.querySelectorAll(".step-item"); 1980 const imageElement = accordion.querySelector(".accordions-image img"); 1981 1982 1983 // Function to update the image with animation 1984 function updateImage(step) { 1985 const newImageSrc = step.getAttribute("data-image"); 1986 const newImageSrcset = step.getAttribute("data-srcset"); 1987 const newImageAlt = step.getAttribute("data-alt"); 1988 1989 if (newImageSrc && imageElement) { 1990 imageElement.classList.add("hidden"); 1991 1992 setTimeout(() => { 1993 imageElement.src = newImageSrc; 1994 1995 if (newImageSrcset) { 1996 imageElement.srcset = newImageSrcset; 1997 } 1998 1999 // Add this line to update the alt text 2000 if (newImageAlt) { 2001 imageElement.alt = newImageAlt; 2002 } 2003 2004 imageElement.classList.remove("hidden"); 2005 }, 100); // Match CSS transition duration 2006 } 2007 } 2008 2009 // Set the default image based on the currently open step-item 2010 const defaultStep = accordion.querySelector(".step-item.open"); 2011 if (defaultStep) { 2012 updateImage(defaultStep); 2013 } 2014 2015 // Add event listener for each step-item in the current accordion 2016 stepItems.forEach((step) => { 2017 step.addEventListener("click", () => { 2018 const isOpen = step.classList.contains("open"); 2019 2020 // Remove "open" class from all step-items in this accordion 2021 stepItems.forEach((item) => item.classList.remove("open")); 2022 2023 // If the clicked step-item was not already open, add "open" class 2024 if (!isOpen) { 2025 step.classList.add("open"); 2026 updateImage(step); 2027 } 2028 }); 2029 }); 2030 }); 2031 }); 2032 2033 2034</script>
2034 2035 2036 2037<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
2038<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
2038 2039 2040
2041<script> 2042document.addEventListener("DOMContentLoaded", function () { 2043 2044const links = document.querySelectorAll('.slider-top-links a'); 2045 2046 let swiper = new Swiper('.swiper-1', { 2047 direction: 'horizontal', 2048 loop: true, 2049 spaceBetween: 20, 2050 slidesPerView: 1, 2051 on: { 2052 slideChange: function () { 2053 updateActiveLink(this.realIndex); 2054 } 2055 } 2056 }); 2057 2058 2059 links.forEach(link => { 2060 link.addEventListener('click', function (e) { 2061 e.preventDefault(); 2062 let slideIndex = parseInt(this.getAttribute('data-slide')); // Ensure it's a number 2063 swiper.slideTo(slideIndex); 2064 updateActiveLink(slideIndex); 2065 }); 2066 }); 2067 2068 function updateActiveLink(index) { 2069 links.forEach(link => link.classList.remove('active')); 2070 if (links[index]) { 2071 links[index].classList.add('active'); 2072 } 2073 } 2074}); 2075 2076 2077 2078</script>
2078 2079 2080</body> 2081 2082</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.