feat: enhance 'How we work' pages with additional content and call-to-action buttons in English and Polish

Author: Don-Damiano

src/components/HeroTerminal.astro

@@ -21,32 +21,109 @@ const linesEN = [
 
 const lines = lang === "pl" ? linesPL : linesEN;
 ---
+
 <div class="card" style="padding: 14px 14px 12px;">
   <div style="display:flex; gap:8px; align-items:center; margin-bottom: 10px;">
     <span style="width:10px;height:10px;border-radius:999px;background:rgba(255,95,86,.9)"></span>
     <span style="width:10px;height:10px;border-radius:999px;background:rgba(255,189,46,.9)"></span>
     <span style="width:10px;height:10px;border-radius:999px;background:rgba(39,201,63,.9)"></span>
-    <span style="margin-left:8px; color: rgba(255,255,255,.5); font-family: var(--mono); font-size: 12px;">deploy.log</span>
+    <span style="margin-left:8px; color: rgba(255,255,255,.5); font-family: var(--mono); font-size: 12px;">
+      deploy.log
+    </span>
   </div>
 
-  <pre id="term" style="margin:0; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.78); white-space: pre-wrap;"></pre>
+  <pre
+    id="term"
+    style="
+      margin:0;
+      font-family: var(--mono);
+      font-size: 13px;
+      color: rgba(255,255,255,.78);
+      white-space: pre-wrap;
+
+      line-height: var(--term-lh);
+
+      min-height: calc((var(--term-lines) * var(--term-lh) + 0.6) * 1em);
+      max-height: calc((var(--term-lines) * var(--term-lh) + 0.6) * 1em);
 
-  <script define:vars={{ lines }}>
+      overflow: hidden;
+    "
+  ></pre>
+
+  <script define:vars={{ termLines: lines }}>
     const el = document.getElementById("term");
 
-    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (reduce) {
-      el.textContent = lines.join("\n");
-    } else {
+    // ustawiamy liczbę linii jako CSS variable do wyliczenia wysokości
+    el.style.setProperty("--term-lines", String(termLines.length));
+
+    const reduce =
+      window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    // zabezpieczenie przed odpaleniem kilka razy
+    let started = false;
+
+    const renderAll = () => {
+      el.textContent = termLines.join("\n");
+    };
+
+    const startTyping = () => {
+      if (started) return;
+      started = true;
+
+      if (reduce) {
+        renderAll();
+        return;
+      }
+
       let i = 0;
       let out = "";
+
       const tick = () => {
-        out += (i === 0 ? "" : "\n") + lines[i];
+        out += (i === 0 ? "" : "\n") + termLines[i];
         el.textContent = out;
         i++;
-        if (i < lines.length) setTimeout(tick, i === 1 ? 650 : 420);
+        if (i < termLines.length) setTimeout(tick, i === 1 ? 650 : 420);
       };
+
       setTimeout(tick, 220);
+    };
+
+    // jeśli już widać od razu (np. desktop), startuj natychmiast
+    const isInViewportNow = () => {
+      const r = el.getBoundingClientRect();
+      return r.top < window.innerHeight && r.bottom > 0;
+    };
+
+    if (isInViewportNow()) {
+      startTyping();
+    } else if ("IntersectionObserver" in window) {
+      const io = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry && entry.isIntersecting) {
+            startTyping();
+            io.disconnect();
+          }
+        },
+        {
+          // odpali trochę wcześniej, zanim idealnie wejdzie w kadr
+          root: null,
+          threshold: 0.2,
+          rootMargin: "120px 0px",
+        }
+      );
+
+      io.observe(el);
+    } else {
+      // fallback dla bardzo starych przeglądarek: odpal po pierwszym scrollu
+      const onScroll = () => {
+        if (isInViewportNow()) {
+          startTyping();
+          window.removeEventListener("scroll", onScroll);
+        }
+      };
+      window.addEventListener("scroll", onScroll, { passive: true });
     }
   </script>
-</div>
+</div>

src/pages/en/how-we-work.astro

@@ -72,4 +72,24 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
       </ul>
     </div>
   </section>
+
+  <section class="section">
+    <div class="card">
+      <p style="margin-top:0; color: rgba(255,255,255,.72);">
+        If this approach sounds like a good fit for your project,
+        the next step is a short conversation or a closer look
+        at the areas where we can help.
+      </p>
+
+      <div style="margin-top: 14px;">
+        <a class="btn primary" href="/en/contact/">Let’s talk →</a>
+        <a class="btn" href="/en/services/" style="margin-left:8px;">View services →</a>
+      </div>
+
+      <p style="margin-top:12px; color: rgba(255,255,255,.6);">
+        If you’d like to see examples of systems we delivered in this model —
+        take a look at our <a href="/en/case-studies/">case studies</a>.
+      </p>
+    </div>
+  </section>
 </BaseLayout>

src/pages/en/index.astro

@@ -146,6 +146,10 @@ import HeroVisual from "../../components/HeroVisual.astro";
         <li>Docker for development, Kubernetes for production</li>
         <li><strong>production mindset from day one</strong></li>
       </ul>
+
+      <div style="margin-top: 14px;">
+        <a class="btn" href="/en/how-we-work/">See how we work →</a>
+      </div>
     </div>
   </section>
 

src/pages/pl/how-we-work.astro

@@ -71,4 +71,24 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
       </ul>
     </div>
   </section>
+
+  <section class="section">
+    <div class="card">
+      <p style="margin-top:0; color: rgba(255,255,255,.72);">
+        Jeśli to podejście brzmi sensownie dla Twojego projektu,
+        kolejnym krokiem jest krótka rozmowa albo sprawdzenie,
+        w jakich obszarach możemy pomóc.
+      </p>
+
+      <div style="margin-top: 14px;">
+        <a class="btn primary" href="/pl/kontakt/">Porozmawiajmy →</a>
+        <a class="btn" href="/pl/oferta/" style="margin-left:8px;">Zobacz ofertę →</a>
+      </div>
+
+      <p style="margin-top:12px; color: rgba(255,255,255,.6);">
+        Jeśli chcesz zobaczyć przykłady systemów, które dowieźliśmy w tym modelu —
+        zobacz <a href="/pl/case-studies/">realizacje</a>.
+      </p>
+    </div>
+  </section>
 </BaseLayout>