ApolloNvim2025/web/index.html

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>🚀 ApolloNvim | Neovim distribuce pro Front-End</title>

  <!-- Meta description & SEO -->
  <meta name="description" content="ApolloNvim je rychlá a lehká Neovim distribuce pro moderní Front-End vývoj. Postavená na Plug.vim, Coc a Lua. Dvě edice: Starter a FrontEnd." />
  <meta name="author" content="Lukáš Kaňka" />
  <meta name="keywords" content="ApolloNvim, Neovim, konfigurace, front-end, HTML, CSS, JavaScript, TypeScript, Lua, Coc, Plug.vim" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://apollo-nvim.lukan.cz/" />
  <meta property="og:title" content="🚀 ApolloNvim | Neovim distribuce pro Front-End" />
  <meta property="og:description" content="Rychlá, lehká a plně konfigurovatelná Neovim distribuce pro moderní Front-End vývoj. Postavená na Plug.vim, Coc a Lua." />
  <meta property="og:image" content="img/apollonvim.jpg" />
  <meta property="og:locale" content="cs_CZ" />
  <meta property="og:site_name" content="ApolloNvim" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="🚀 ApolloNvim | Neovim distribuce pro Front-End" />
  <meta name="twitter:description" content="Rychlá, lehká a plně konfigurovatelná Neovim distribuce pro moderní Front-End vývoj." />
  <meta name="twitter:image" content="img/apollonvim.jpg" />

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />

  <!-- Stylesheets -->
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/animations.css" />

  <!-- Canonical -->
  <link rel="canonical" href="https://apollo-nvim.lukan.cz/" />
  <!-- Umami --> 
  <script defer src="https://analytics.lukan.cz/script.js" data-website-id="6bd59e17-6d55-483e-8e7a-8ec92fb4ede4"></script>
</head>

<body>

  <!-- Loading Screen -->
  <div id="loading-screen" class="loading-screen">
    <div class="loading-screen__content">
      <span class="loading-rocket">🚀</span>
      <div class="loading-bar"><div class="loading-bar__fill"></div></div>
    </div>
  </div>

  <!-- ===================== NAVBAR ===================== -->
  <header class="navbar" id="navbar" role="banner">
    <nav class="navbar__inner" aria-label="Hlavní navigace">
      <a href="./index.html" class="navbar__logo" aria-label="ApolloNvim – Domů">
        🚀 <span>ApolloNvim</span>
      </a>

      <ul class="navbar__links" id="nav-links" role="list">
        <li><a href="./index.html" class="navbar__link active" aria-current="page">Domů</a></li>
        <li><a href="html/instalace.html" class="navbar__link">Instalace</a></li>
        <li><a href="html/pluginy.html"   class="navbar__link">Pluginy</a></li>
        <li><a href="html/tutorialy.html" class="navbar__link">Tutoriály</a></li>
        <li><a href="html/novinky.html"   class="navbar__link">Novinky</a></li>
        <li><a href="html/zkratky.html"   class="navbar__link">Zkratky</a></li>
      </ul>

      <button
        id="hamburger"
        class="navbar__hamburger"
        aria-label="Otevřít menu"
        aria-expanded="false"
        aria-controls="mobile-menu"
      >
        <span></span><span></span><span></span>
      </button>
    </nav>

    <div class="navbar__mobile" id="mobile-menu" hidden>
      <ul role="list">
        <li><a href="./index.html" class="active">Domů</a></li>
        <li><a href="html/instalace.html">Instalace</a></li>
        <li><a href="html/pluginy.html">Pluginy</a></li>
        <li><a href="html/tutorialy.html">Tutoriály</a></li>
        <li><a href="html/novinky.html">Novinky</a></li>
        <li><a href="html/zkratky.html">Zkratky</a></li>
      </ul>
    </div>
  </header>

  <main id="main-content">

    <!-- ===================== HERO ===================== -->
    <section id="hero" class="hero" aria-labelledby="hero-title">

      <!-- Particles canvas -->
      <canvas id="particles-canvas" aria-hidden="true"></canvas>

      <div class="hero__content">

        <div class="hero__badge animate-on-scroll">
          <span class="badge badge--purple">Verze 26.09</span>
        </div>

        <h1 id="hero-title" class="hero__title animate-on-scroll delay-1">
          <span class="gradient-text">🚀 ApolloNvim</span>
        </h1>

        <p class="hero__subtitle animate-on-scroll delay-2" aria-live="polite">
          <span class="typing-text" data-typewriter="Neovim distribuce pro moderní Front-End vývoj"></span>
        </p>

        <p class="hero__description animate-on-scroll delay-3">
          Rychlý, lehký a plně konfigurovatelný.<br />
          Postavený na <strong>Plug.vim</strong>, <strong>Coc</strong> a <strong>Lua</strong>.
        </p>

        <div class="hero__cta animate-on-scroll delay-4" role="group" aria-label="Hlavní akce">
          <a href="html/instalace.html" class="btn-primary">
            <span aria-hidden="true">🛠️</span> Začít instalaci
          </a>
          <a href="html/pluginy.html" class="btn-secondary">
            <span aria-hidden="true">🔌</span> Prohlédnout pluginy
          </a>
        </div>

      </div>

      <!-- Scroll down indicator -->
      <div class="hero__scroll" aria-hidden="true">
        <span>Scroll</span>
        <div class="hero__scroll-arrow"></div>
      </div>

    </section>

    <!-- ===================== FEATURES ===================== -->
    <section id="features" class="section section--alt" aria-labelledby="features-title">
      <div class="container">

        <header class="section-header">
          <h2 id="features-title" class="section-title animate-on-scroll">
            Proč ApolloNvim?
            <span class="section-title__line"></span>
          </h2>
          <p class="section__subtitle animate-on-scroll">
            Vše co potřebuješ pro moderní vývoj – přehledně na jednom místě.
          </p>
        </header>

        <div class="feature-grid">

          <article class="feature-card animate-on-scroll" role="listitem">
            <div class="feature-icon" aria-hidden="true">⚡</div>
            <h3 class="feature-card__title">Rychlost &amp; Lehkost</h3>
            <p class="feature-card__body">Minimální nároky na systém, maximální výkon. Spustí se během okamžiku.</p>
          </article>

          <article class="feature-card animate-on-scroll delay-1" role="listitem">
            <div class="feature-icon" aria-hidden="true">🎨</div>
            <h3 class="feature-card__title">Krásný design</h3>
            <p class="feature-card__body">19+ barevných témat. Výchozí Dracula téma pro příjemné prostředí při každé práci.</p>
          </article>

          <article class="feature-card animate-on-scroll delay-2" role="listitem">
            <div class="feature-icon" aria-hidden="true">🤖</div>
            <h3 class="feature-card__title">AI asistence</h3>
            <p class="feature-card__body">Podpora mnoha AI asistentu, stáčí jednoduše doinstalovat.</p>
          </article>

          <article class="feature-card animate-on-scroll delay-3" role="listitem">
            <div class="feature-icon" aria-hidden="true">🔌</div>
            <h3 class="feature-card__title">Bohatá sada pluginů</h3>
            <p class="feature-card__body">AutoSave, NERDTree, Colorizer a mnoho dalšího. Vše přednastaveno a připraveno.</p>
          </article>

          <article class="feature-card animate-on-scroll" role="listitem">
            <div class="feature-icon" aria-hidden="true">🌐</div>
            <h3 class="feature-card__title">Front-End zaměření</h3>
            <p class="feature-card__body">Plná podpora HTML, CSS, JS, TypeScript. Editor navržený pro webové vývojáře.</p>
          </article>

          <article class="feature-card animate-on-scroll delay-1" role="listitem">
            <div class="feature-icon" aria-hidden="true">📖</div>
            <h3 class="feature-card__title">Skvělá dokumentace</h3>
            <p class="feature-card__body">Podrobné návody v češtině i angličtině. Začneš produktivně pracovat od prvního dne.</p>
          </article>

        </div>
      </div>
    </section>

    <!-- ===================== EDITIONS ===================== -->
    <section id="editions" class="section" aria-labelledby="editions-title">
      <div class="container">

        <header class="section-header">
          <h2 id="editions-title" class="section-title animate-on-scroll">
            Dvě edice pro každého
            <span class="section-title__line"></span>
          </h2>
          <p class="section__subtitle animate-on-scroll">
            Vyber si edici, která odpovídá tvým potřebám.
          </p>
        </header>

        <div class="editions-grid">

          <!-- Starter Edition -->
          <article class="edition-card card animate-on-scroll" aria-labelledby="starter-title">
            <div class="edition-card__badge">
              <span class="badge badge--green">Pro začátečníky</span>
            </div>
            <h3 id="starter-title" class="edition-card__title">🚀 Starter Edition</h3>
            <p class="edition-card__desc">
              Zaměřená na práci s texty a Markdown. Ideální pro každého, kdo chce začít s Neovimem bez zbytečné složitosti.
            </p>
            <ul class="edition-card__features" role="list">
              <li>✅ Podpora Markdown a MDX</li>
              <li>✅ 19+ barevných témat vč. Dracula</li>
              <li>✅ AutoSave – nikdy neztrácíš práci</li>
              <li>✅ Minimalistické, rychlé prostředí</li>
              <li>✅ NERDTree pro správu souborů</li>
            </ul>
            <a href="html/instalace.html" class="btn-secondary edition-card__btn" role="button">
              🚀 Instalovat Starter
            </a>
          </article>

          <!-- FrontEnd Edition -->
          <article class="edition-card edition-card--highlighted card animate-on-scroll delay-1" aria-labelledby="frontend-title">
            <div class="edition-card__badge">
              <span class="badge badge--purple">⭐ Doporučeno</span>
            </div>
            <h3 id="frontend-title" class="edition-card__title">🌐 FrontEnd Edition</h3>
            <p class="edition-card__desc">
              Pro vývoj webů a webových aplikací. Inspirováno VSCode a WebStorm. Kompletní prostředí pro Front-End vývojáře.
            </p>
            <ul class="edition-card__features" role="list">
              <li>✅ Vše ze Starter Edition</li>
              <li>✅ LSP server přes Coc.nvim</li>
              <li>✅ HTML, CSS, JS, TS</li>
              <li>✅ Emmet, Autopairs, Colorizer</li>
              <li>✅ Git integrace (fugitive + gitsigns)</li>
            </ul>
            <a href="html/instalace.html" class="btn-primary edition-card__btn" role="button">
              🛠️ Instalovat FrontEnd
            </a>
          </article>

        </div>
      </div>
    </section>

    <!-- ===================== STATS ===================== -->
    <section class="section section--alt stats-section" aria-label="Statistiky projektu">
      <div class="container">
        <div class="stats-grid">

          <div class="stat-item animate-on-scroll" aria-label="19 a více barevných témat">
            <span class="stat-item__number" data-count="19" data-count-suffix="+">0+</span>
            <span class="stat-item__label">Barevných témat</span>
          </div>

          <div class="stat-item animate-on-scroll delay-1" aria-label="20 a více pluginů">
            <span class="stat-item__number" data-count="20" data-count-suffix="+">0+</span>
            <span class="stat-item__label">Pluginů</span>
          </div>

          <div class="stat-item animate-on-scroll delay-2" aria-label="20 a více tutoriálů">
            <span class="stat-item__number" data-count="20" data-count-suffix="+">0+</span>
            <span class="stat-item__label">Tutoriálů</span>
          </div>

        </div>
      </div>
    </section>

    <!-- ===================== TERMINAL PREVIEW ===================== -->
    <section id="install-preview" class="section" aria-labelledby="terminal-title">
      <div class="container">

        <header class="section-header">
          <h2 id="terminal-title" class="section-title animate-on-scroll">
            Jednoduchá instalace
            <span class="section-title__line"></span>
          </h2>
          <p class="section__subtitle animate-on-scroll">
            Nastav si ApolloNvim ve třech krocích. Více detailů na stránce&nbsp;
            <a href="html/instalace.html">Instalace</a>.
          </p>
        </header>

        <div class="animate-on-scroll">

          <div class="terminal-block" style="margin-bottom:16px;">
            <div class="terminal-block__header">
              <span class="terminal-block__dot terminal-block__dot--red"></span>
              <span class="terminal-block__dot terminal-block__dot--yellow"></span>
              <span class="terminal-block__dot terminal-block__dot--green"></span>
              <span class="terminal-block__title">Krok 1 – Klonování repozitáře</span>
            </div>
            <pre><code>git clone -b frontend https://codeberg.org/Kankys/ApolloNvim2025.git ~/.config/nvim</code></pre>
          </div>

          <div class="terminal-block" style="margin-bottom:16px;">
            <div class="terminal-block__header">
              <span class="terminal-block__dot terminal-block__dot--red"></span>
              <span class="terminal-block__dot terminal-block__dot--yellow"></span>
              <span class="terminal-block__dot terminal-block__dot--green"></span>
              <span class="terminal-block__title">Krok 2 – Instalace pluginů (uvnitř Neovimu)</span>
            </div>
            <pre><code><span class="token-command">:PlugInstall</span></code></pre>
          </div>

          <div class="terminal-block">
            <div class="terminal-block__header">
              <span class="terminal-block__dot terminal-block__dot--red"></span>
              <span class="terminal-block__dot terminal-block__dot--yellow"></span>
              <span class="terminal-block__dot terminal-block__dot--green"></span>
              <span class="terminal-block__title">Krok 3 – Instalace LSP serverů (FrontEnd Edition)</span>
            </div>
            <pre><code><span class="token-command">:CocInstall</span> coc-html coc-css coc-tsserver coc-phpls coc-emmet coc-prettier coc-eslint</code></pre>
          </div>

        </div>

        <div class="animate-on-scroll" style="margin-top:2rem;text-align:center;">
          <a href="html/instalace.html" class="btn-primary">
            📖 Kompletní průvodce instalací
          </a>
        </div>

      </div>
    </section>

    <!-- ===================== COMMUNITY / LINKS ===================== -->
    <section id="community" class="section section--alt" aria-labelledby="community-title">
      <div class="container">

        <header class="section-header">
          <h2 id="community-title" class="section-title animate-on-scroll">
            Komunita &amp; Zdroje
            <span class="section-title__line"></span>
          </h2>
          <p class="section__subtitle animate-on-scroll">
            Připoj se ke komunitě nebo si prohlédni zdrojový kód.
          </p>
        </header>

        <div class="community-grid">

          <a href="https://t.me/apollonvim" class="community-card card animate-on-scroll"
             target="_blank" rel="noopener noreferrer"
             aria-label="Telegram komunita ApolloNvim (otevře se v novém okně)">
            <div class="community-card__icon" aria-hidden="true">✈️</div>
            <h3 class="community-card__title">Telegram</h3>
            <p class="community-card__desc">Připoj se do Telegram skupiny. Sdílej tipy, ptej se a buď součástí komunity.</p>
            <span class="community-card__link">t.me/apollonvim →</span>
          </a>

          <a href="https://codeberg.org/Kankys/ApolloNvim2025" class="community-card card animate-on-scroll delay-1"
             target="_blank" rel="noopener noreferrer"
             aria-label="Codeberg repozitář ApolloNvim2025 (otevře se v novém okně)">
            <div class="community-card__icon" aria-hidden="true">🏔️</div>
            <h3 class="community-card__title">Codeberg</h3>
            <p class="community-card__desc">Zdrojový kód, issues a pull requesty. Otevřený a svobodný vývoj.</p>
            <span class="community-card__link">codeberg.org/Kankys →</span>
          </a>

          <a href="https://lukaskanka.cz/" class="community-card card animate-on-scroll delay-2"
             target="_blank" rel="noopener noreferrer"
             aria-label="Web autora Lukáše Kaňky (otevře se v novém okně)">
            <div class="community-card__icon" aria-hidden="true">🧑‍💻</div>
            <h3 class="community-card__title">Web autora</h3>
            <p class="community-card__desc">Osobní web Lukáše Kaňky – autora ApolloNvim. Další projekty a články.</p>
            <span class="community-card__link">lukaskanka.cz →</span>
          </a>

        </div>
      </div>
    </section>

  </main>

  <!-- ===================== FOOTER ===================== -->
  <footer class="footer" role="contentinfo">
    <div class="footer__inner">
      <div class="footer__brand">
        <span class="footer__logo">🚀 ApolloNvim</span>
        <p>Neovim distribuce pro moderní Front-End vývoj.</p>
        <p class="footer__made">Made with ❤️ and ⌨️</p>
      </div>
      <div class="footer__col">
        <h4>Stránky</h4>
        <ul>
          <li><a href="./index.html">Domů</a></li>
          <li><a href="html/instalace.html">Instalace</a></li>
          <li><a href="html/pluginy.html">Pluginy</a></li>
          <li><a href="html/tutorialy.html">Tutoriály</a></li>
          <li><a href="html/novinky.html">Novinky</a></li>
          <li><a href="html/zkratky.html">Zkratky</a></li>
        </ul>
      </div>
      <div class="footer__col">
        <h4>Komunita</h4>
        <ul>
          <li><a href="https://t.me/apollonvim" target="_blank" rel="noopener noreferrer">Telegram</a></li>
          <li><a href="https://codeberg.org/Kankys/ApolloNvim2025" target="_blank" rel="noopener noreferrer">Codeberg</a></li>
          <li><a href="https://lukaskanka.cz/" target="_blank" rel="noopener noreferrer">Web autora</a></li>
        </ul>
      </div>
      <div class="footer__col">
        <h4>Projekty</h4>
        <ul>
          <li><a href="https://endeavouros.cz/" target="_blank" rel="noopener noreferrer">EndeavourOS CZ</a></li>
        </ul>
      </div>
    </div>
    <div class="footer__bottom">
      <p>Copyright &copy; 2024 - 2026 🚀 ApolloNvim / Lukáš Kaňka</p>
      <span class="badge badge--purple">v26.09</span>
    </div>
  </footer>

  <!-- ===================== SCRIPTS ===================== -->
  <script src="js/particles.js"></script>
  <script src="js/main.js"></script>

</body>
</html>