{{define "main"}}
<section id="home" class="presentation">
    <div class="introduction">
        <div class="intro-text">
            <h1>
                {{i18n "sfcamp"}}
                <span style="color:#469198">({{i18n "div-ed"}})</span>
            </h1>
            <p>{{i18n "intro" | safeHTML}}</p>
            <div class="cta-block">
                <div class="cta">
                    <a href='{{"#about" | relLangURL}}'><button>{{i18n "about"}}</button></a>
                </div>
                <div class="dropdown cta">
                    <button onclick="myFunction()" class="dropbtn">{{i18n "apply"}}</button>
                    <div id="myDropdown" class="dropdown-content" style="padding: 5px;">
                        <button style="padding: 0px;"><a href='{{"learners" | relLangURL}}'>{{i18n "as-learner"}}<br>({{i18n "not-opened"}})</a></button>
                        <button style="padding: 0px;"><a href='{{"mentors" | relLangURL}}'>{{i18n "as-mentor"}}<br>({{i18n "not-opened"}})</a></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cover">
        <img src='{{"img/landing-image.png" | absURL}}' alt="person on a bench" />
    </div>
</section>
<section id="about">
    <div class="about-section">
        <div class="about-cover">
            <img src='{{"img/example-29.svg" | absURL}}' alt="person in front of workspace" />
        </div>
        <div class="about-text">
            <h1 class="medium-heading">{{i18n "whats-sfcamp"}}</h1>
            <p class="para">{{i18n "sfcamp-desc"}}</p>
        </div>
        <div class="about-text">
            <h1 class="medium-heading">{{i18n "whats-div-ed"}}</h1>
            <p class="para">{{i18n "div-ed-desc"}}</p>
        </div>
    </div>
    <div class="tasks-section">
        <div class="task-text">
            <h1 class="medium-heading">{{i18n "what-tasks"}}</h1>
            <p class="para">{{i18n "tasks-desc"}}:</p>
        </div>
    </div>
    <div class="task-tech">
        <div class="about-cover task-cover">
            <img src='{{"img/tech.svg" | absURL}}' alt="a smartphone and a desktop computer" />
        </div>
        <div class="about-text task-block">
            <div class="block">
                <h1 class="medium-heading" style="color:#469198; text-align: center">{{i18n "tech"}}</span>
                </h1>
                <ul>
                    <li>{{i18n "programming"}}</li>
                    <li>{{i18n "sysadmin"}}</li>
                    <li>{{i18n "packaging"}}</li>
                    <li>{{i18n "forensics"}}</li>
                    <li>{{i18n "uiux"}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="task-tech">
        <div class="about-text task-block">
            <div class="block">
                <h1 class="medium-heading" style="color:#469198; text-align: center">{{i18n "nontech"}}</span>
                </h1>
                <ul>
                    <li>{{i18n "art"}}</li>
                    <li>{{i18n "l10n"}}</li>
                    <li>{{i18n "publicity"}}</li>
                    <li>{{i18n "event-org"}}</li>
                </ul>
            </div>
        </div>
        <div class="about-cover task-cover">
            <img src='{{"img/non-tech.svg" | absURL}}' alt="infomatics and books" />
        </div>
    </div>
    <div class="about-section" style="margin-top: 10vh auto;">
        <div class="about-text">
            <h1 class="medium-heading" style="color:#469198">{{i18n "how-it-works"}}</h1>
            <p class="para">{{i18n "how-desc" | safeHTML}}</p>
        </div>
    </div>
    <div class="about-section" style="margin: 10vh auto;">
        <div class="about-cover">
            <img src='{{"img/mentor.svg" | absURL}}' alt="people planning and making things" />
        </div>
        <div class="about-text">
            <h1 class="medium-heading" style="color:#469198">{{i18n "mentors-who"}}</h1>
            <p class="para">{{i18n "mentors-desc"}}</p>
            <div class="cta">
                <a href='{{"mentors" | relLangURL}}'><button>{{i18n "about-mentorship"}}</button></a>
            </div>
        </div>
    </div>
    <div class="about-section" style="margin-bottom: 10vh auto;">
        <div class="about-text">
            <h1 class="medium-heading" style="color:#469198">{{i18n "learners-who"}}</h1>
            <p class="para">{{i18n "learners-desc"}}</p>
            <div class="cta">
                <a href='{{"learners" | relLangURL}}'><button>{{i18n "about-participation"}}</button></a>
            </div>
        </div>
        <div class="about-cover" style="display:flex; margin:auto;">
            <img src='{{"img/mentee.png" | absURL}}' alt="people trying to find things" />
        </div>
    </div>
    <div class="about-section" style="margin: 10vh auto;">
        <div id="tools" class="about-text">
            <h1 class="medium-heading" style="color: #469198">{{i18n "comm-infra"}}</h1>
            <div style="width: 100%;">
                <ul>
                    <li><a href="https://videos.fsci.in/videos/watch/b3f34489-ad2b-4cfb-956b-7a8bad799d89" target="_blank">{{i18n "bbb"}}</a> {{i18n "bbb-desc"}}</li>
                    <li><a href="https://videos.fsci.in/videos/watch/5fbd125f-d309-4eda-a4af-4009ced56f71" target="_blank">{{i18n "matrix"}}</a> {{i18n "matrix-desc"}}</li>
                    <li><a href="https://joinmastodon.org/" target="_blank">{{i18n "masto"}}</a> {{i18n "masto-desc"}}</li>
                    <li><a href="https://videos.fsci.in/videos/watch/76f79bb3-b5ca-4929-8ceb-74bb18783803" target="_blank">{{i18n "mlist"}}</a> {{i18n "mlist-desc"}}</li>
                    <li><a href="https://about.gitlab.com" target="_blank">{{i18n "gitlab"}}</a> {{i18n "gitlab-desc"}}</li>
                    <li><a href="https://joinpeertube.org" target="_blank">{{i18n "peertube"}}</a> {{i18n "peertube-desc"}}</li>
                    <li><a href="https://cryptpad.fr" target="_blank">{{i18n "cryptpad"}}</a>/<a href="https://etherpad.org/">{{i18n "etherpad"}}</a> {{i18n "pad-desc"}}</li>
                </ul>
                <p>{{i18n "infra-desc"}}</p>

                <h3>{{i18n "mailman-iframe"}}</h3>
                <iframe src="https://videos.fsci.in/videos/embed/76f79bb3-b5ca-4929-8ceb-74bb18783803" style="min-height: 400px; width: 100%;" frameborder="0" sandbox="allow-same-origin allow-scripts" allowfullscreen="allowfullscreen"></iframe>
                <h3>{{i18n "matrix-iframe"}}</h3>
                <iframe src="https://videos.fsci.in/videos/embed/5fbd125f-d309-4eda-a4af-4009ced56f71" style="min-height: 400px; width: 100%;" frameborder="0" sandbox="allow-same-origin allow-scripts" allowfullscreen="allowfullscreen"></iframe>
                <h3>{{i18n "bbb-iframe"}}</h3>
                <iframe src="https://videos.fsci.in/videos/embed/b3f34489-ad2b-4cfb-956b-7a8bad799d89" style="min-height: 400px; width: 100%;" frameborder="0" sandbox="allow-same-origin allow-scripts" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </div>
</section>
<section id="contact">
    <div class="tasks-section">
        <div class="task-text">
            <h1 class="medium-heading" style="color:white">{{i18n "contrib"}}</h1>
            <p class="para" style="color:white">{{i18n "contrib-desc"}}!</p>
        </div>
        <div class="icon-row">
            <a href="mailto:camp@fsci.in" target="_blank" rel="noopener" title="Email">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
                <span class="get-in-touch">{{i18n "email"}}</span>
            </a>
            <a href="https://matrix.to/#/#sfcamp:poddery.com" target="_blank" rel="noopener" title="Matrix">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
                </svg>
                <span class="get-in-touch">{{i18n "matrix"}}</span>
            </a>
            <a href="https://social.masto.host/@fscamp" target="_blank" rel="noopener" title="Mastodon/Pleroma">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 216.4144 232.00976">
                    <path stroke="#fff" stroke-width="12px" fill="#ffffff00" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" />
                    <path fill="#fff" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" />
                </svg>
                <span class="get-in-touch">{{i18n "masto"}}</span>
            </a>
            <a href="https://git.fosscommunity.in/community/camp/-/issues/" target="_blank" rel="noopener" title="Gitlab">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z" />
                </svg>
                <span class="get-in-touch">{{i18n "gitlab"}}</span>
            </a>
            <a href="https://videos.fsci.in/accounts/sfcamp/videos" target="_blank" rel="noopener" title="Peertube">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3,0v12l9-6L3,0z M3,12v12l9-6L3,12z M12,6v12l9-6L12,6z"/>
                </svg>
                <span class="get-in-touch">{{i18n "peertube"}}</span>
            </a>
        </div>
        <div class="icon-row secondary">
            <ul style="padding:0">
                <li>
                    <a href="https://git.fosscommunity.in/community/camp" target="_blank" rel="noopener" title="Wesbite source repo - Merge requests are welcome">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dddddd" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <polyline points="7 8 3 12 7 16" />
                            <polyline points="17 8 21 12 17 16" />
                            <line x1="14" y1="4" x2="10" y2="20" />
                        </svg>
                        <span class="get-in-touch">{{i18n "help-site"}}</span>
                    </a>
                </li>
                <li>
                    <a href="https://git.fosscommunity.in/community/camp/-/wikis/How-To-Translate" target="_blank" rel="noopener" title="See how to translate">

                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dddddd" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>

                            <path d="M5 7h7m-2 -2v2a5 8 0 0 1 -5 8m1 -4a7 4 0 0 0 6.7 4" />
                            <path d="M11 19l4 -9l4 9m-.9 -2h-6.2" />

                        </svg>
                        <span class="get-in-touch">{{i18n "help-translate"}}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</section>
{{end}}