<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Cygnal - Track and share issues in realtime on bike lanes!</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <meta name=description content="Track and share issues in realtime on bike lanes!">
        <meta name=twitter:card content=summary>
        <meta name=twitter:creator content=@PhyksIsHere>
        <meta property=og:type content=website>
        <meta property=og:title content="Cygnal">
        <meta property=og:description content="Track and share issues in realtime on bike lanes!">
        <meta property=og:url content=".">
        <meta property=og:image content="./images/icons/ogIcon.png">

        <link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
        <link rel="icon" type="image/png" sizes="228x228" href="./img/coast-228x228.png">
        <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
        <link rel="shortcut icon" href="./images/icons/favicon.ico">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="container">
            <header>
                <div id="logoTitle">
                    <img id="logo" src="img/logo.svg" alt="Logo"/>
                    <h1>Cygnal app</h1>
                </div>
                <h2>Get realtime infos on your bike route.</h2>
            </header>

            <main>
                <div id="features">
                    <div class="left-feature">
                        <div class="feature">
                            <img src="img/signal.svg" alt="Report"/>
                            <h3>Track and share issues</h3>
                            <p>Report on realtime issues on bike routes: road works, obstacles, accidents, etc.</p>
                        </div>

                        <div class="feature">
                            <img src="img/openData.svg" alt="OpenData"/>
                            <h3>Based on available OpenData</h3>
                            <p>Always up to date to inform you about road works ahead while you bike!</p>
                        </div>
                    </div>

                    <div class="feature">
                        <img src="img/iPhone/@2-black.png" alt="Screenshot"/>
                    </div>

                    <div class="right-feature">
                        <div class="feature">
                            <img src="img/open.svg" alt="Open-source"/>
                            <h3>Free and open-source</h3>
                            <p>From one fellow cyclist to another!</p>
                        </div>

                        <div class="feature">
                            <img src="img/privacy.svg" alt="Privacy"/>
                            <h3>Respecting your privacy</h3>
                            <p>Handles your geolocation with care, keeping it as much as possible within your device.</p>
                        </div>
                    </div>
                </div>
                <a class="button" href="https://app.cygnal.eu/">Go to app</a>
            </main>

            <footer>
                <nav>
                    <ul>
                        <li><a href="mailto:phyks+cygnal@phyks.me">contact</a></li>
                        <li><a href="https://framagit.org/phyks/cygnal">source</a></li>
                    </ul>
                </nav>
            </footer>
        </div>
    </body>
</html>