{{define "main"}}
<section id="home" class="presentation">
    <div class="introduction">
        <div class="intro-text">
            <h1>Free Software <span style="color:#469198">Camp</h1>
                <p>A unique, online mentorship programme conceptualized and organized by Free Software Foundation of India and Free Software Community of India.</p>
                <div class="cta-block">
                    <div class="cta">
                        <a href='{{.Site.BaseURL}}#about'><button>About us</button></a>
                    </div>
                    <div class="dropdown cta">
                        <button onclick="myFunction()" class="dropbtn">Apply</button>
                        <div id="myDropdown" class="dropdown-content" style="padding: 5px;">
                            <button style="padding: 0px;"><a href='{{.Site.BaseURL}}/learners'>As Learner</a></button>
                            <button style="padding: 0px;"><a href='{{.Site.BaseURL}}/mentors'>As Mentor</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"><span style="color:#469198">What is</span> Free Software <span style="color:#469198">Camp</span>?</h1>
            <p class="para">Free Software Camp is a mentorship programme for bringing more people to Free Software with strong focus on philosophy. We connect learners with experienced Free Software community members to work on some tasks together - this could be either technical or non technical.</p>
        </div>
    </div>
    <div class="tasks-section">
        <div class="task-text">
            <h1 class="medium-heading" style="color:#469198">What are the kind of tasks we'll be working on at <span style="color:black">Free Software</span> Camp?</h1>
            <p class="para">Here are a few technical and non-technical ways you can contribute:</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">Technical</span>
                </h1>
                <ul>
                    <li>Programming</li>
                    <li>Systems Administration</li>
                    <li>Packaging</li>
                    <li>Cyber Forensics</li>
                    <li>UI/UX Development</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">Non-Technical</span>
                </h1>
                <ul>
                    <li>Artwork</li>
                    <li>Translation and Localization</li>
                    <li>Publicity</li>
                    <li>Event organizing</li>
                </ul>
            </div>
        </div>
        <div class="about-cover task-cover">
            <img src='{{"img/non-tech.svg" | absURL}}' alt="infomatics and books" />
        </div>
    </div>
    <a class="button mb" href="https://git.fosscommunity.in/fsfi/camp/-/wikis/ideas-list" target="_blank">Check Ideas List</a>
    <div class="about-section" style="margin-top: 10vh auto;">
        <div class="about-text">
            <h1 class="medium-heading" style="color:#469198">How does it work</span>?</h1>
            <p class="para">Learners apply to join the program and are given a common introduction to the program, to free software, and to the projects they can work on. These sessions will be conducted online using <a href="#tools">free software tools</a>. Then they submit proposal(s) for working on the project of their choice which is evaluated and mentors get assigned for these. Learners can also choose to work independently without dedicated mentors. Learners are expected to report regularly on their progress and periodic review is done. By the end of the camp the learners will be contributing to free software and collaborating with other contributors from around the world.
            </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">Who can be mentors</span>?</h1>
            <p class="para">Are you an experienced Free Software contributor? Does mentoring new people to contribute to Free Software excite you? Do you have time to invest in mentoring for the next 3 months? Come join us!</p>
            <div class="cta">
                <a href='{{.Site.BaseURL}}/mentors'><button>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">Who can join as learner?</h1>
            <p class="para">Do you have some time to contribute back to the society? Do you want to learn about Free Software? Do you want to use and contribute to Free Software? Come join us!</p>
            <div class="cta">
                <a href='{{.Site.BaseURL}}/learners'><button>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">Camp Communication Infrastructure</h1>
            <div style="width: 100%;">
                <ul>
                    <li><a href="https://bigbluebutton.org/" target="_blank">Big Blue Button</a> (browser based free software video conferencing platform) for presentations, sessions, and other interactions.</li>
                    <li><a href="https://matrix.org" target="_blank">Matrix</a> rooms for instant messaging.</li>
                    <li><a href="https://joinmastodon.org/" target="_blank">Mastodon</a> for announcements.</li>
                    <li><a href="https://videos.fsci.in/videos/watch/76f79bb3-b5ca-4929-8ceb-74bb18783803" target="_blank">Mailing list</a> for announcements and discussions.</li>
                    <li><a href="https://about.gitlab.com" target="_blank">Gitlab</a> wiki for documentation, etc.</li>
                    <li><a href="https://joinpeertube.org" target="_blank">Peertube</a> for uploading videos.</li>
                    <li><a href="https://cryptpad.fr" target="_blank">Cryptpad</a>/<a href="https://etherpad.org/">Etherpad</a> for collaborative editing.</li>
                    <li>Each project will have their own project communication platforms.</li>
                </ul>
                <p>These tools will be introduced during the course of the camp.</p>
<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>
            </div>
        </div>
    </div>
</section>
<section id="contact">
    <div class="tasks-section">
        <div class="task-text">
            <h1 class="medium-heading" style="color:white">Wish to contribute to the initiative?</h1>
            <p class="para" style="color:white">We primarily use free software for all our communication and collaboration. Get in touch with us with your queries and sugesstions!</p>
        </div>
        <div class="icon-row">
            <a href="mailto:camp@mm.gnu.org.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">Email</span>
            </a>
            <a href="https://matrix.to/#/#fscamp: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">Matrix</span>
            </a>
            <a href="https://social.masto.host/@fscamp" target="_blank" rel="noopener" title="Mastodon">
                <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">Mastodon</span>
            </a>
            <a href="https://git.fosscommunity.in/fsfi/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">Gitlab</span>
            </a>
        </div>
        <div class="icon-row secondary">
            <ul>
                <li>
                    <a href="https://git.fosscommunity.in/fsfi/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">Help improve the website</span>
                    </a>
                </li>
                <li>
                    <a href="https://git.fosscommunity.in/fsfi/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">Help translate</span>
                    </a>
                </li>
                <li>
                    <a href="promo.html" target="_blank" rel="noopener" title="Sharing is caring">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />

                        </svg>
                        <span class="get-in-touch">Help spread the word</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</section>
{{end}}