theme/layouts/index.html

192 lines
20 KiB
HTML

{{ define "main" }}
<section class="flex min-h-screen w-full flex-col items-center justify-center pb-8 text-center text-gray-700">
<div class="mt-16 mb-8 font-title">
<div class="max-w-xs mb-16 mx-auto">
<svg version="1.1" viewBox="0 0 872.59 256.75" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g transform="matrix(1.3333 0 0 -1.3333 -88.275 376.11)"><g transform="matrix(.1 0 0 .1 9.548 -4.2435)"><path d="m2268.2 2512.3c-15.884 19.573-32.512 38.571-49.949 56.876-180.6 189.62-426.24 294.06-691.67 294.06-256.43 0-497.51-99.862-678.83-281.18-22.365-22.368-43.484-45.656-63.335-69.76-141.09-171.28-217.84-384.27-217.84-609.07 0-256.42 99.861-497.5 281.18-678.82 181.32-181.32 422.39-281.17 678.83-281.17 256.43 0 497.5 99.858 678.83 281.17 181.32 181.33 281.17 422.4 281.17 678.82 0 219.21-78.86 437.22-218.37 609.07" fill="#196aff"/><path d="m1823.7 1647.4c35.688 104.68 94.631 136.72 101.96 298.25 2.5753 56.765-14.661 237.07-14.661 237.07s28.013 72.294-25.823 152.83c-83.476 124.87-255.4 133.36-345.69 133.36s-260.21-8.4898-343.68-133.36c-53.84-80.533-25.826-152.83-25.826-152.83s-9.5356-92.732-16.752-174.52c-1.6998-19.193 0.1575-95.115 2.4544-113.46 4.1285-32.869 14.481-65.163 25.808-96.599 14.342-39.804 36.82-80.194 53.983-121.03 51.799-123.29 8.4513-276 11.1-408.96 2.2383-94.374-20.013-190.11-28.731-282.4 98.129-33.396 202.09-50.813 308.72-50.813 119.83 0 236.31 21.937 344.9 63.9-20.394 115.55-44.092 225.15-47.748 266.96-10.646 126.41-41.304 260.49-0.01 381.6" fill="#fff"/><path d="m1162.9 2383.9c1.1503-18.73 2.9966-37.93 8.2718-56.159 1.6558-5.6818 4.1029-19.683 11.415-21.764 9.0923-2.59 25.911 8.2571 32.288 12.957 12.356 9.096 23.925 18.459 36.285 27.651 7.8835 5.8613 16.492 10.47 24.211 16.496 8.4 6.5463 14.719 14.474 21.709 22.178 8.4843 9.3597 14.847 19.049 21.372 29.497 5.103 8.1545 37.069 13.463 42.187 21.031 5.5866 8.2755 0.9158 18.511 0.9158 28.698 0 74.164 4.4546 147.57 6.1874 220.29 1.7877 49.887 21.379 109.13-53.44 85.744-160.31-49.887-158.53-271.26-151.4-386.62" fill="#fff"/><path d="m1869.1 2279.7c-1.6118 1.7511-4.1945 3.2384-6.2606 4.7696-8.9788 6.649-17.445 13.606-25.156 21.482-9.411 9.6125-19.192 18.958-28.164 28.929-7.8908 8.7626-17.313 16.602-25.006 25.574-5.1286 5.9602-10.081 12.305-14.609 18.562-2.3115 3.1761-3.5204 6.9969-5.3374 10.396-2.7072 5.0114-39.882 10.118-36.19 15.005 6.3009 8.3304 20.328 15.397 23.702 24.94 17.243 48.667 24.771 244.53 26.852 294.51 5.3521 127.83 117.57-6.2386 137.17-57.682 57.008-149.66 23.145-258.78-46.315-386.62" fill="#fff"/><path d="m1716.5 1787.9c-0.081 73.805-9.2535 103.66-50.407 139.75-25.742 22.566-55.836 31.175-103.74 29.992-47.902 1.1833-82.424-13.378-107.32-39.223-37.549-38.992-47.436-62.053-47.542-135.86-0.059-39.893 42.956-128.16 55.756-148.54 21.244-35.93 60.562-48.85 99.104-46.154 38.545-2.6962 77.867 10.224 99.096 46.154 12.811 20.372 55.107 106.95 55.052 153.87" fill="#f1e6d3"/><path d="m1226.6 2316.1c-9.6162 86.088-38.582 239.98 61.489 331.24 11.038 10.074 14.001-24.2 15.848-38.066 2.5386-19.038-0.051-73.416 0.337-92.583 0.7143-36.087 8.2754-54.964 4.7513-71.46-9.6272-45.092-17.353-42.183-26.559-69.603-18.258-54.378-53.235-83.066-55.866-59.529" fill="#f1d7d4"/><path d="m1851.7 2333.1c10.243-18.331 36.996 80.256 45.381 123.07 7.8945 40.307 17.925 93.869 4.059 133.91-7.4365 21.482-53.078 84.568-58.463 62.892-2.0991-8.4183-3.1834-71.098-8.345-101.09-6.3889-37.109-17.91-73.805-17.98-111.54-0.1502-84.568 25.336-88.055 35.347-107.24" fill="#f1d7d4"/><path d="m1522 1319.7c-2.1687-6.583-18.595-11.404-24.764-13.393-14.91-4.8172-28.145 6.9383-36.476 16.844-11.583 13.73-11.276 35.629-16.126 51.642-2.9343 9.6822-19.533 10.997-24.518 2.0405-16.628-29.9-81.161 26.365-66.163 45.095 9.8872 12.353-13.781 23.262-23.54 11.078-28.948-36.16 48.92-103.5 93.579-85.245 1.9892-9.0338 4.0736-18.056 7.9091-26.636 7.5245-16.851 23.98-27.739 41.011-36.89 23.196-12.437 68.258 9.4074 75.142 30.255 4.7916 14.503-21.28 19.635-26.054 5.2093" fill="#faeee0"/><path d="m1727.6 1538.2c2.3958-10.045 2.7731-44.073-15.935-25.456-7.5904 7.5537-22.665 3.0954-23.28-7.008-1.4471-23.387-24.9-23.903-45.136-16.833-16.056 5.6012-24.533-16.588-8.6051-22.145 29.713-10.367 61.961-4.6231 74.776 17.837 10.081-4.744 21.485-6.0372 30.629 2.5679 15.968 15.042 18.375 36.226 13.73 55.708-3.5278 14.763-29.698 10.096-26.178-4.6707" fill="#faeee0"/><path d="m1775 1049.2c-7.0043-14.316-19.855-13.422-33.637-7.4109-10.107 4.3996-22.606-2.8757-19.558-13.107 6.1361-20.522-19.786-26.515-37.314-19.196-15.426 6.4438-28.834-13.796-13.243-20.313 31.582-13.181 71.728-1.6485 77.552 26.134 20.313-3.22 39.71 2.4837 49.396 22.31 6.7038 13.682-16.404 25.471-23.196 11.583" fill="#faeee0"/><path d="m1569.8 2153.3c-3.253-20.181-41.095 3.3189-50.492 9.6894-8.2717 5.5976-18.972 2.198-19.983-7.2387-1.3518-12.715-18.481-9.0227-26.31-7.4255-14.807 3.0112-27.365 12.239-27.717 26.105-0.3443 13.474 8.2059 27.621 12.664 40.271 2.8537 8.0776-8.7223 16.965-17.185 11.561-15.239-9.7298-88.714-18.481-59.452 13.547 9.3231 10.202-7.1325 24.797-16.554 14.481-13.518-14.8-22.661-48.7 6.583-55.876 15.437-3.7842 37.776-3.5937 56.814 0.7473-7.9494-25.478-9.6162-48.799 23.156-65.17 22.145-11.067 52.558-10.99 65.445 6.1067 27.116-14.584 69.709-28.731 75.6 7.7626 2.088 12.906-20.463 18.478-22.57 5.44" fill="#faeee0"/><path d="m1443 1685.6c39.366-3.3299 78.746-12.272 118.48-10.836 25.398 0.9232 51.693 4.4803 76.75 8.1949 18.203 2.6962 40.52 5.8796 52.697 19.375 1.143-45.018-92.513-59.108-128.84-60.023-42.143-1.066-89.509 17.221-119.09 43.289" fill="#494949"/><path d="m1549.4 1779.5c-4.5023-28.896-5.4327-58.199-2.7219-87.267 0.718-7.5977-1.3078-25.709 8.7956-29.523 8.1912-3.0955 18.317 2.7219 19.654 10.111 2.2603 12.455-3.0405 28.164-3.4911 40.919-0.5312 14.939 0 29.9 1.5789 44.769 0.9451 8.814 5.8906 20.705-4.1982 26.914-7.4036 4.5535-18.258 2.872-19.617-5.9236" fill="#494949"/><path d="m1626 1849.7c-23.661-1.0221-45.63-14.261-63.397-27.024-16.082 10.675-40.432 20.485-60.694 14.774-12.078-3.3922-1.11-7.0959 3.927-10.316 9.3085-6.191 16.895-14.148 23.742-22.368 10.389-12.598 19.624-25.826 30.71-37.978 7.6747 5.5243 15.001 11.104 21.672 17.558 3.0955 2.9929 28.435 36.926 32.325 42.667 2.4838 3.656 4.9895 7.4329 7.8359 10.873 2.8903 3.4802 11.07 9.0154 3.8794 11.814" fill="#494949"/><path d="m1326.5 2010c11.682 30.303 24.24 68.387 56.265 62.328 24.244-5.1946 56.697-86.117 35.926-78.124-11.254 4.3264-20.207 41.106-41.333 45.876-13.422 3.0332-32.032-43.502-49.993-48.26-8.7077-2.3006-4.3264 10.389-0.8646 18.181" fill="#2c3844"/><path d="m1670.6 2010c11.686 30.303 24.244 68.387 56.268 62.328 24.24-5.1946 56.693-86.117 35.922-78.124-11.254 4.3264-20.203 41.106-41.333 45.876-13.422 3.0332-32.032-43.502-49.99-48.26-8.7077-2.3006-4.33 10.389-0.8682 18.181" fill="#2c3844"/><g transform="scale(1,-1)" fill="#252626" stroke-width="29.085" aria-label="Vikunja"><path d="m3302.3-1549.4c3.4901 2.3268 8.1436 5.8169 10.47 6.9803h1.1634s1.1633 0 1.1633 1.1634c2.3268 0 6.9803 1.1634 9.3071 2.3267h2.3268c3.4901 1.1634 8.1436 1.1634 11.634 1.1634 3.4901 0 6.9803 0 11.634-1.1634h2.3267c3.4902-1.1633 5.8169-2.3267 9.3071-2.3267 1.1634-1.1634 1.1634-1.1634 2.3268-1.1634 3.4901-1.1634 6.9802-4.6535 9.307-5.8169l2.3268-1.1634c2.3267-2.3268 4.6535-3.4901 6.9802-5.8169 1.1634-1.1634 1.1634-1.1634 2.3268-3.4901 1.1634-2.3268 4.6535-4.6536 5.8169-6.9803 1.1634 0 1.1634 0 1.1634-1.1634 2.3268-2.3268 3.4901-6.9803 4.6535-9.3071l287.36-679.41c12.797-31.411-2.3268-69.803-34.902-82.6-31.411-13.961-69.803 1.1634-83.763 33.738l-226.86 538.65-226.86-538.65c-13.961-32.575-51.189-47.699-82.6-33.738-33.738 12.797-48.862 51.189-34.901 82.6l285.03 679.41c2.3268 2.3268 4.6536 6.9803 5.8169 9.3071 0 1.1634 1.1634 1.1634 1.1634 1.1634 1.1634 2.3267 3.4902 4.6535 5.8169 6.9803 0 2.3267 1.1634 2.3267 1.1634 3.4901 3.4901 2.3268 5.8169 3.4901 8.1437 5.8169h1.1634z"/><path d="m3936.8-2118.3c-34.901 0-62.823 26.758-62.823 63.986v453.72c0 34.902 27.921 62.823 62.823 62.823 36.065 0 62.823-27.921 62.823-62.823v-453.72c0-37.228-26.758-63.986-62.823-63.986zm62.823-171.02c0-34.901-26.758-62.823-62.823-62.823-34.901 0-62.823 27.921-62.823 62.823v24.431c0 34.902 27.921 63.986 62.823 63.986 36.065 0 62.823-29.084 62.823-63.986z"/><path d="m4264-1537.8c36.065 0 65.149-29.084 65.149-63.986v-102.38l63.986-63.986 171.02 207.08c11.634 15.124 30.248 23.268 48.862 23.268 13.961 0 29.084-4.6535 40.718-15.124 27.921-22.104 31.411-62.823 9.3071-90.744l-179.16-215.23 174.51-174.51c25.594-24.431 25.594-65.149 0-90.744-24.431-24.431-66.313-24.431-90.744 0l-238.49 238.49v-402.53c0-34.901-29.084-63.986-65.149-63.986-36.065 0-63.986 29.085-63.986 63.986v686.39c0 34.901 27.921 63.986 63.986 63.986z"/><path d="m5316.6-1779.8v-278.05c0-32.575-30.248-61.659-62.823-61.659-34.901 0-60.496 29.084-60.496 61.659v278.05c-1.1634 66.313-54.679 118.66-122.16 118.66-66.313 0-118.66-52.352-118.66-118.66v-278.05c0-32.575-26.758-61.659-61.659-61.659-33.738 0-61.659 29.084-61.659 61.659v278.05c0 132.63 109.36 241.98 241.98 241.98 133.79 0 245.47-109.36 245.47-241.98z"/><path d="m5769-2119.5c-45.372 0-88.417 13.96-123.32 36.065-10.47-22.104-32.575-36.065-57.006-36.065-34.902 0-61.659 27.921-61.659 61.659v458.37c0 33.738 26.758 61.659 61.659 61.659 30.248 0 55.842-22.104 61.659-50.025 2.3267-4.6535 2.3267-8.1436 2.3267-11.634v-278.05c0-65.149 51.189-117.5 116.34-117.5 66.313 0 120.99 52.352 120.99 117.5v278.05c0 33.738 29.084 61.659 61.659 61.659 33.738 0 60.496-27.921 60.496-61.659v-278.05c0-131.46-108.19-241.98-243.15-241.98z"/><path d="m6255.6-2199.7c34.901 0 62.823-30.248 62.823-63.986v-23.268c0-37.228-27.921-63.986-62.823-63.986-34.902 0-63.986 26.758-63.986 63.986v23.268c0 33.738 29.084 63.986 63.986 63.986zm-65.149 867.88c69.803 0 125.65-57.006 125.65-125.65v-597.98c0-36.065-26.758-63.986-62.823-63.986-33.738 0-62.823 27.921-62.823 63.986v597.98c-37.228 0-63.986 27.921-63.986 61.659 0 37.228 26.758 63.986 63.986 63.986z"/><path d="m6998.5-2056.6c0-34.901-27.921-62.822-61.659-62.822-30.248 0-53.516 22.104-60.496 51.189-44.208-31.411-96.561-51.189-154.73-51.189-79.11 0-147.75 33.738-197.77 87.254-50.025 52.352-79.11 124.48-79.11 204.76 0 79.11 29.085 151.24 79.11 204.76 50.025 52.352 118.66 84.927 197.77 84.927 58.169 0 110.52-18.614 154.73-50.025 6.9803 27.921 30.248 50.025 60.496 50.025 33.738 0 61.659-27.921 61.659-61.659v-228.02zm-168.69 349.01c-27.921 29.084-67.476 45.372-108.19 45.372-41.882 0-81.437-16.287-108.19-45.372-27.921-30.248-44.208-72.13-44.208-119.83 0-48.862 16.287-90.744 44.208-119.83 26.758-31.411 66.313-47.699 108.19-47.699 40.718 0 80.273 16.287 108.19 47.699 27.921 29.084 45.372 70.966 45.372 119.83 0 47.699-17.451 89.58-45.372 119.83z"/></g></g></g></svg>
</div>
<h2 class="mb-4 text-4xl">
The open-source, <a href="https://vikunja.io/docs/installing/" class="underline">self-hostable</a> to-do app.
</h2>
<h3 class="mb-6 text-3xl">
Organize everything, on all platforms.
</h3>
<h3 class="text-xl max-w-xl mx-auto">
Also one of the two wild South American camelids which live in the high
alpine areas of the Andes and a <a rel="nofollow" target="_blank" class="underline"
href="https://en.wikipedia.org/wiki/Vicu%C3%B1a">relative of the
llama</a>.
</h3>
<div class="flex justify-center space-x-2 py-4">
<a href="https://try.vikunja.io"
class="cursor-pointer rounded-md border border-transparent bg-primary px-4 py-2 text-xl font-medium text-white shadow hover:bg-primary-darker">
Try it
</a>
<a href="/features"
class="cursor-pointer rounded-md border border-transparent bg-primary px-4 py-2 text-xl font-medium text-white shadow hover:bg-primary-darker">
Features
</a>
</div>
</div>
<div class="max-w-6xl w-full">
<div class="slider mt-8 relative aspect-w-16 aspect-h-9">
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute">
<source srcset="/images/vikunja/01-task-overview.webp" type="image/webp"/>
<source srcset="/images/vikunja/01-task-overview.png" type="image/png"/>
<img src="/images/vikunja/01-task-overview.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/02-task-list.webp" type="image/webp"/>
<source srcset="/images/vikunja/02-task-list.png" type="image/png"/>
<img src="/images/vikunja/02-task-list.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/03-task-gantt.webp" type="image/webp"/>
<source srcset="/images/vikunja/03-task-gantt.png" type="image/png"/>
<img src="/images/vikunja/03-task-gantt.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/04-task-table.webp" type="image/webp"/>
<source srcset="/images/vikunja/04-task-table.png" type="image/png"/>
<img src="/images/vikunja/04-task-table.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/05-task-kanban.webp" type="image/webp"/>
<source srcset="/images/vikunja/05-task-kanban.png" type="image/png"/>
<img src="/images/vikunja/05-task-kanban.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/06-task-detail.webp" type="image/webp"/>
<source srcset="/images/vikunja/06-task-detail.png" type="image/png"/>
<img src="/images/vikunja/06-task-detail.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/07-quick-add.webp" type="image/webp"/>
<source srcset="/images/vikunja/07-quick-add.png" type="image/png"/>
<img src="/images/vikunja/07-quick-add.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/08-task-kanban-background.webp"
type="image/webp"/>
<source srcset="/images/vikunja/08-task-kanban-background.png"
type="image/png"/>
<img src="/images/vikunja/08-task-kanban-background.png" alt=""/>
</picture>
<picture
class="object-contain object-top w-full shadow-lg left-0 top-0 right-0 transition-all ease-in-out duration-300 absolute opacity-0">
<source srcset="/images/vikunja/09-task-detail-dark.webp"
type="image/webp"/>
<source srcset="/images/vikunja/09-task-detail-dark.png" type="image/png"/>
<img src="/images/vikunja/09-task-detail-dark.png" alt=""/>
</picture>
</div>
<div class="md:flex text-left mt-48 mb-4">
<div class="md:w-1/3 md:mr-4 mt-4">
<h2 class="text-2xl font-title flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
Stay organized
</h2>
<p class="pt-4">
Organize all of your tasks in lists. Put lists together in a namespace to keep related stuff
grouped together.
</p>
</div>
<div class="md:w-1/3 md:mr-4 mt-4">
<h2 class="text-2xl font-title flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
</svg>
Collaborate with peers
</h2>
<p class="pt-4">
Vikunja lets you easily share a list or a namespace with another user or a whole team!
You can also assign tasks to people so everybody knows who's working on what.
</p>
</div>
<div class="md:w-1/3 mt-4">
<h2 class="text-2xl font-title flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
</svg>
Use it how you need it
</h2>
<p class="pt-4">
You can show your tasks in the classic list view - each task underneath each other.
Or you can use the Gantt view to get a time overview. Or Table view to show all details you
need.
Or Kanban if you want that birds-eye view of the status of all current tasks.
</p>
</div>
</div>
</div>
</section>
<section class="md:flex text-left mb-16 max-w-6xl w-full mx-auto">
<a href="/docs/installing/" class="md:w-1/3 md:mr-4 mt-4 bg-hero-llama-small rounded shadow py-16 px-8 text-center font-title text-2xl bg-cover font-bold text-white">
Installation
</a>
<a href="/features" class="md:w-1/3 md:mr-4 mt-4 bg-hero-llama-2-small rounded shadow py-16 px-8 text-center font-title text-2xl bg-cover font-bold text-white bg-center">
Features
</a>
<a href="https://vikunja.cloud/?utm_source=io&utm_medium=io&utm_campaign=menu" class="md:w-1/3 md:mr-4 mt-4 bg-hero-llama-3-small rounded shadow py-16 px-8 text-center font-title text-2xl bg-cover font-bold text-white">
Get it hosted
</a>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const sliders = document.getElementsByClassName('slider')
if (sliders) {
for (const slider of sliders) {
let current = 0
const children = Array.from(slider.children)
const sliderDuration = 5000
const slide = () => {
children.forEach((img, key) => {
if (current !== key) {
img.classList.remove('opacity-100')
img.classList.add('opacity-0')
} else {
img.classList.add('opacity-100')
img.classList.remove('opacity-0')
}
})
current++
if (current >= children.length) {
current = 0
}
}
// Loop through the images
slide()
setInterval(slide, sliderDuration)
}
}
})
</script>
{{ end }}