PageSourceSearch

https://plaky.com/templates/product-roadmap

html plaky.com collected 2026-10-01 13:04:47 UTC 93,228 bytes, 2,082 lines download raw bytes

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">&nbsp;</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">&nbsp;</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">&nbsp;</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.