feat(landing): rebuild home into an ecosystem-integrated experience (#23)

* feat(landing): rebuild home into an ecosystem-integrated experience

Turn the single-hero landing page into a full developer/researcher funnel
that surfaces the whole RocketPy ecosystem.

Sections: sticky nav (text labels + persistent Simulate CTA + live GitHub
star badge + mobile menu); reworked hero with `pip install rocketpy`, CTA
cluster and micro social-proof; live stats band; four-class quickstart with
syntax-highlighted, copyable code and an Open-in-Colab link; output showcase;
auto-scrolling features carousel; validation + used-by wall; ecosystem cards
(RocketSerializer / Infinity-API / App / Docs); R&D roadmap; community; how
-to-cite with copyable BibTeX; final CTA; and an expanded footer with link
columns.

Live stats (GitHub stars/forks/contributors, recent PyPI downloads) are
fetched at build time by scripts/fetch-stats.mjs and injected into dist,
with static fallbacks and continue-on-error so a flaky API never breaks a
deploy. A monthly cron redeploy keeps the numbers fresh.

New css/home.css reuses the about.css component recipes so both pages read
as one system; footer columns are additive so the About footer is unchanged.
Accessibility: prefers-reduced-motion, skip link, focus rings and a noscript
fallback. No new npm dependencies.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(format): include .mjs files in prettier glob

Ensures scripts/fetch-stats.mjs is covered by `npm run format`, keeping
the build script consistent with the rest of the repo (addresses Copilot
review feedback on PR #23).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(stats): cap network requests with a timeout so a hung API can't stall deploy

`continue-on-error` handles a failed stats fetch but not a hung one — a slow
or stalled GitHub/PyPI endpoint would keep the deploy step waiting up to the
job's default timeout. Add an 8s AbortSignal.timeout to both fetches (rejection
falls through to the existing try/catch and committed defaults) and a 3-minute
step-level timeout-minutes as a backstop.

Addresses the blocking finding from the PR #23 review.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(landing): refine copy, sync About nav, drop fabricated roadmap

Landing-page content and consistency fixes from review feedback:

- Hero: balance the tagline so "The sky is not the limit!" no longer
  orphans "limit!" on its own line (text-wrap: balance).
- Quickstart: clarify that SolidMotor is one of several motor variants
  (Solid/Hybrid/Liquid/Generic); keep the four-class framing.
- Stats band: replace "refreshed on every deploy" with a build-injected
  "Updated <Month Year>" label.
- Remove the fabricated "frontier of flight simulation" R&D section (and
  its now-dead CSS) - the team is not working on those items.
- Rename the web app to "Jarvis" in the ecosystem card and footer.
- State that RocketPy is the official simulator of EuRoC (2022) and
  LASC (2025), supported by the team.

About page now shares the landing's sticky header:

- Extract the site-header/nav into a shared css/nav.css loaded by both
  pages (removed the duplicate block from home.css).
- About uses the same nav (links back to landing sections), star badge,
  Simulate CTA, mobile toggle, skip link and #main target.
- fetch-stats.mjs now injects the live star count into about.html too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Gui-FernandesBR

.github/workflows/static.yml

@@ -9,6 +9,12 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+  # Monthly redeploy (1st of each month, 06:00 UTC) so the live stats injected
+  # at build time (GitHub stars/forks/contributors, PyPI downloads) stay fresh
+  # without needing a push. Scheduled runs always execute on the default branch.
+  schedule:
+    - cron: "0 6 1 * *"
+
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
@@ -40,6 +46,12 @@ jobs:
         run: npm ci
       - name: Build site
         run: npm run build
+      - name: Refresh live stats
+        run: npm run stats
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        continue-on-error: true
+        timeout-minutes: 3
       - name: Add .nojekyll
         run: touch dist/.nojekyll
       - name: Setup Pages

about.html

@@ -45,6 +45,7 @@
     />
 
     <link href="./css/main.css" rel="stylesheet" />
+    <link href="./css/nav.css" rel="stylesheet" />
     <link href="./css/footer.css" rel="stylesheet" />
     <link href="./css/about.css" rel="stylesheet" />
     <link href="./css/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
@@ -53,45 +54,55 @@
   </head>
 
   <body>
+    <a href="#main" class="skip-link">Skip to content</a>
     <div class="page-wrapper">
-      <header class="top-bar">
-        <div class="brand-and-cta">
-          <a class="brand-link" href="./index.html" aria-label="RocketPy home">
-            <span class="brand-logo"></span>
-          </a>
-        </div>
-        <nav class="social-nav panel-bg" aria-label="Main navigation">
-          <a href="./about.html" class="icon-button" aria-label="About us"
-            ><i class="fa-solid fa-users"></i
-          ></a>
+      <header class="site-header" id="top">
+        <a class="brand-link" href="./index.html" aria-label="RocketPy home">
+          <span class="brand-logo"></span>
+        </a>
+        <nav class="nav-links" id="navLinks" aria-label="Primary">
+          <a class="nav-link" href="./index.html#features">Features</a>
+          <a class="nav-link" href="./index.html#showcase">Showcase</a>
+          <a class="nav-link" href="./index.html#ecosystem">Ecosystem</a>
           <a
+            class="nav-link"
             href="https://docs.rocketpy.org/en/latest/index.html"
-            class="icon-button"
-            aria-label="Documentation"
-            ><i class="fa-solid fa-book"></i
-          ></a>
+            >Docs</a
+          >
+          <a class="nav-link" href="./index.html#community">Community</a>
+          <a class="nav-link" href="./about.html" aria-current="page">About</a>
+        </nav>
+        <div class="nav-actions">
           <a
+            class="star-badge"
             href="https://github.com/RocketPy-Team/RocketPy"
-            class="icon-button"
-            aria-label="GitHub repository"
-            ><i class="fa-brands fa-github"></i
-          ></a>
-          <a
-            href="https://www.instagram.com/rocketpyteam"
-            class="icon-button"
-            aria-label="Instagram"
-            ><i class="fa-brands fa-instagram"></i
-          ></a>
+            aria-label="Star RocketPy on GitHub"
+          >
+            <i class="fa-brands fa-github" aria-hidden="true"></i>
+            <i class="fa-solid fa-star" aria-hidden="true"></i>
+            <span data-stat="stars">1,021</span>
+          </a>
           <a
-            href="https://www.linkedin.com/company/rocketpy"
-            class="icon-button"
-            aria-label="LinkedIn"
-            ><i class="fa-brands fa-linkedin"></i
-          ></a>
-        </nav>
+            href="https://app.rocketpy.org/"
+            class="simulate-button nav-cta"
+            role="button"
+          >
+            <span class="simulate-icon"></span>
+            <span>Simulate</span>
+          </a>
+          <button
+            class="nav-toggle"
+            type="button"
+            aria-label="Toggle menu"
+            aria-expanded="false"
+            aria-controls="navLinks"
+          >
+            <i class="fa-solid fa-bars" aria-hidden="true"></i>
+          </button>
+        </div>
       </header>
 
-      <main class="main-content">
+      <main class="main-content" id="main">
         <!-- ============================ HERO ============================ -->
         <section class="about-hero panel-bg">
           <p class="about-eyebrow">Since 2018 &middot; Open Source</p>
@@ -1055,6 +1066,22 @@ <h3 class="featured-name">${p.name}</h3>
       renderFeatured("coreGrid", "core");
       renderContributors();
       renderStats();
+
+      // Mobile nav toggle — mirrors the landing page's shared site-header.
+      const header = document.querySelector(".site-header");
+      const navToggle = document.querySelector(".nav-toggle");
+      if (header && navToggle) {
+        navToggle.addEventListener("click", () => {
+          const open = header.classList.toggle("nav-open");
+          navToggle.setAttribute("aria-expanded", open ? "true" : "false");
+        });
+        header.querySelectorAll(".nav-link").forEach((link) =>
+          link.addEventListener("click", () => {
+            header.classList.remove("nav-open");
+            navToggle.setAttribute("aria-expanded", "false");
+          }),
+        );
+      }
     </script>
   </body>
 </html>

css/footer.css

@@ -191,3 +191,142 @@
     margin-left: 0;
   }
 }
+
+/* ==========================================================================
+   EXPANDED SITE FOOTER (landing page) — additive; the legacy
+   .footer-left/.footer-center/.footer-right rules above still drive the
+   About page footer unchanged.
+   ========================================================================== */
+.site-footer {
+  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) 1.8rem;
+  text-align: left;
+  font:
+    normal 16px "Open Sans",
+    sans-serif;
+}
+
+.footer-top {
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) 2.2fr;
+  gap: clamp(2rem, 5vw, 4rem);
+  max-width: 1240px;
+  margin: 0 auto;
+}
+
+.footer-brand .footer-logo {
+  margin-bottom: 14px;
+}
+
+.footer-tagline {
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.7);
+  max-width: 280px;
+  margin: 0;
+}
+
+.footer-social {
+  display: flex;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.footer-social a {
+  width: 38px;
+  height: 38px;
+  border-radius: 8px;
+  background: #33383b;
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  text-decoration: none;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
+}
+
+.footer-social a:hover,
+.footer-social a:focus-visible {
+  background: #4a5568;
+  transform: translateY(-2px);
+}
+
+.footer-links-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+}
+
+.footer-col h4 {
+  font-family: "Rubik", sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #ffffff;
+  margin: 0 0 12px;
+}
+
+.footer-col a {
+  display: block;
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.68);
+  text-decoration: none;
+  padding: 6px 0;
+  transition: color 0.2s ease;
+}
+
+.footer-col a:hover,
+.footer-col a:focus-visible {
+  color: #ffffff;
+}
+
+.footer-bottom {
+  max-width: 1240px;
+  margin: clamp(2rem, 4vw, 2.6rem) auto 0;
+  padding-top: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.footer-bottom p {
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.82rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+}
+
+.footer-bottom a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.footer-bottom a:hover {
+  color: #ffffff;
+}
+
+@media (max-width: 880px) {
+  .footer-top {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-bottom {
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+@media (max-width: 620px) {
+  .footer-links-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}