feat(site): przeprojektowany landing page — kierunek „Atlas"

[FilipB97]

Co i dlaczego

Pełny redesign site/index.html, żeby strona wyglądała jak zrobiona przez grafika/dewelopera, a nie generycznie. Wybrany kierunek: „Atlas" (premium, animowany) — po przeglądzie 3 propozycji.

Największa zmiana: zamiast abstrakcyjnego SVG-bloba w hero jest render prawdziwego okna Waypointa w HTML/CSS, używający dokładnych tokenów z aplikacji (akcent #2657D6/#4C86FF, statusy online/idle/offline, kolory protokołów RDP/SSH/VNC/REST, gradienty grup Prod/Staging/Client, metody REST). To sprawia, że strona jest spójna z aplikacją.

Zmiany

• Hero: pływające okno w perspektywie z poświatą + animowany, piszący się terminal; gradient tylko na jednym słowie nagłówka (oszczędnie).
• Sekcja statystyk (8 protokołów / 1 .exe / 0 sekretów / 100% OSS).
• Flagowa trójka jako naprzemienne wiersze z mikro-wizualami: terminal, dwupanelowy transfer plików z paskiem postępu, request/response REST z kolorowaniem.
• Układ bento dla pozostałych funkcji; zakładki protokołów, tabela porównania, szybki start, bezpieczeństwo, FAQ, roadmap — przestylowane.
• Ruch z umiarem: reveal przy scrollu, wszystko pod prefers-reduced-motion.

Zachowane (parytet z obecną stroną)

• Dwujęzyczność EN/PL (pełny słownik i18n + przełącznik + zapamiętywanie wyboru).
• SEO/OG/Twitter/JSON-LD, canonical, favicon, theme-color.
• Liczniki z GitHuba (gwiazdki + suma pobrań).
• Dostępność: skip-link, :focus-visible, ARIA; zero CDN (w pełni samowystarczalne).

Weryfikacja

Renderowane w headless Chromium:

• Desktop — pełna strona OK.
• Mobile (414 px) — po poprawce brak poziomego scrolla (scrollWidth < innerWidth); tabela porównania scrolluje we własnym kontenerze.
• Wersja PL — treść i przełącznik działają.
• Składnia JS zwalidowana (node --check).

Uwagi

• Deploy na GitHub Pages następuje dopiero po zmerdżowaniu do master (workflow pages.yml reaguje na site/** na master) — nic nie idzie live wcześniej.
• softwareVersion w JSON-LD podbite do 1.8.
• Kierunek Atlas jest świadomie dark-only (kinowy klimat, spójny z hero aplikacji).

🤖 Generated with Claude Code

https://claude.ai/code/session_01KXXgwUeSkZsXYVKRzyMvV9

---

Generated by Claude Code

[llamapreview]

AI Code Review by LlamaPReview

🎯 TL;DR & Recommendation

Recommendation: Approve with suggestions

This PR completely redesigns the landing page with a stunning "Atlas" dark theme, introducing an animated app window hero, flagship feature rows, and bento layout. The code is clean and well-structured, but there are a few minor issues around dead i18n keys, localization gaps, and accessibility robustness.

🌟 Strengths

• Excellent visual design with consistent use of application tokens (colors, status indicators) creating a cohesive brand experience.
• Strong accessibility foundation with skip-link, focus-visible outlines, and prefers-reduced-motion support.

Priority	File	Category	Impact Summary	Anchors
P2	site/index.html	Maintainability	Unused i18n keys clutter dictionary	symbol:I18N
P2	site/index.html	Maintainability	Hardcoded English terminal text not localized	-
P2	site/index.html	Bug (Speculative)	Language init order could cause mismatch	-
P2	site/index.html	Accessibility	!important on * may break widgets	-
P2	site/index.html	Performance/Robustness	GitHub API failure shows empty counts	-

🔍 Notable Themes

• Localization gaps: The i18n dictionary retains unused keys from the previous design, while the new terminal animation text is hardcoded in English, creating a partial internationalization that may confuse Polish users.

⚠️ **Unanchored Suggestions (Manual Review Recommended)**

The following suggestions could not be precisely anchored to a specific line in the diff. This can happen if the code is outside the changed lines, has been significantly refactored, or if the suggestion is a general observation. Please review them carefully in the context of the full file.

---

📁 File: site/index.html

The I18N dictionary retains a set of keys (rest.eyebrow, rest.h2, rest.p, rest.b1 through rest.b4) that no longer correspond to any data-i18n or data-i18n-html attribute in the updated HTML. The old "API client" section was replaced by the "flagship trio" rows and the REST details were moved into the fl.r.* keys. This dead code increases file size and creates maintenance confusion—a future developer might search for these keys expecting corresponding HTML. The same issue exists in the PL dictionary. These entries should be removed.

Suggestion:

Delete the unused keys from both `en` and `pl` blocks.

Related Code:

en: {
      "nav.features":"Features",...
      "rest.eyebrow":"API client","rest.h2":"A Postman-style API client, built in",
      "rest.p":"Test and organize HTTP APIs without leaving Waypoint — a cleaner, lighter take on Postman that lives next to your servers.",
      "rest.b1":"<b>Collections &amp; environments</b> — folders of requests and named environments with <code>{{variables}}</code> for URL, headers, body and auth.",
      ...
    }

---

📁 File: site/index.html

The typing animation uses a hardcoded English command (waypoint connect prod/app-02 --ssh) and the lines with tunnel :5432 → db-internal:5432, api.service — active (running) are also English. While the animation is cosmetic, the rest of the page is fully localized for Polish visitors. This breaks the immersive experience for Polish users who see a mix of Polish UI and English terminal output. Consider adding these strings to the I18N dictionary (e.g., "hero.typed" and "hero.lines") or at least adding a comment that this is intentionally English (e.g., because the terminal output is in English by nature).

Related Code:

var el=document.getElementById('typed'), cmd='waypoint connect prod/app-02 --ssh', lines=document.querySelectorAll('.float .l2');

---

📁 File: site/index.html

The language initialization now occurs after the IntersectionObserver setup and typing animation. If localStorage access fails (throws), saved remains null and lang falls back to the browser language, which is fine. However, the order of operations means the typing animation runs before the apply call, so the cur variable is still 'en' at that point. If the animation's behavior depended on cur (it does not currently), there could be a mismatch. This is a low-risk observation, but the code could be reorganized to set cur earlier or the animation could be placed after language initialization for future-proofing.

Related Code:

var saved=null; try{saved=localStorage.getItem('wp-lang');}catch(e){}
  var lang=saved||(((navigator.language||'en').toLowerCase().indexOf('pl')===0)?'pl':'en');
  document.querySelectorAll('[data-lang-btn]').forEach(function(b){b.addEventListener('click',function(){apply(b.getAttribute('data-lang-btn'));});});
  apply(lang); fetchStats();

---

📁 File: site/index.html

The reduced-motion media query uses !important on *{animation:none} to force disable all animations. This is a broad-sweep approach that can inadvertently break third-party widgets or future components that rely on CSS animations for functionality (e.g., a loading spinner that indicates progress). A more targeted approach would be to apply a class to the body and disable animations only on specific elements, or use animation on the .reveal and .tcaret classes only. This is a best-practice suggestion, not a bug.

Suggestion:

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float { transform: none; }
  .tcaret { animation: none; }
  html { scroll-behavior: auto; }
}

Related Code:

@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none}.float{transform:none}html{scroll-behavior:auto}}

---

📁 File: site/index.html

The GitHub API calls are unauthenticated and subject to strict rate limiting (60 requests per hour per IP). If the page is visited frequently or served from a shared IP (e.g., GitHub Pages), the catch blocks silently fail, leaving the star count and download count as empty strings. The previous code had the same limitation, but the redesign introduces a lot more visual emphasis on these counts (hero badge, download section). Consider adding a fallback display (e.g., '–' or '?') when the API fails, or caching the values in localStorage with a TTL to reduce API calls. This is a pre-existing issue, but the redesign makes it more noticeable.

Suggestion:

function renderCounts(){
  var sc=document.getElementById('starCount');
  if(sc) sc.textContent=stats.stars!=null?' · '+stats.stars:' · ?';
  var dc=document.getElementById('dlCount');
  if(dc){ if(stats.downloads!=null){ dc.textContent='↓ '+stats.downloads.toLocaleString()+' '+(dict['stat.downloads']||'downloads'); dc.hidden=false; } else { dc.textContent='↓ ?'; dc.hidden=false; } }
}

Related Code:

function fetchStats(){
    fetch('https://api.github.com/repos/FilipB97/Waypoint').then(function(r){return r.ok?r.json():null;})
      .then(function(j){if(j&&typeof j.stargazers_count==='number'){stats.stars=j.stargazers_count;renderCounts();}}).catch(function(){});
    fetch('https://api.github.com/repos/FilipB97/Waypoint/releases').then(function(r){return r.ok?r.json():null;})
      .then(function(a){if(Array.isArray(a)){var t=0;a.forEach(function(rel){(rel.assets||[]).forEach(function(as){t+=as.download_count||0;});});stats.downloads=t;renderCounts();}}).catch(function(){});
  }

---

---

💡 Have feedback? We'd love to hear it in our GitHub Discussions.
✨ This review was generated by LlamaPReview Advanced, which is free for all open-source projects. Learn more.