feat(hero): enhance visual elements with new styles and cursor effects

Author: Don-Damiano

src/components/Footer.astro

@@ -11,6 +11,7 @@ const text = lang === "pl"
       line2: "GitHub + LinkedIn + email after engagement (platform rules friendly).",
     };
 ---
+
 <div style="display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;">
   <div>
     <div>{text.line1}</div>
@@ -22,3 +23,17 @@ const text = lang === "pl"
     <a href="#" aria-disabled="true" style="opacity:.65; border-bottom: none;">LinkedIn</a>
   </div>
 </div>
+
+<div
+  aria-hidden="true"
+  style="
+    margin-top:18px;
+    font-family: var(--mono);
+    font-size:12px;
+    color: rgba(255,255,255,.35);
+    letter-spacing:.2px;
+    user-select:none;
+  "
+>
+  — end of output —
+</div>

src/pages/en/index.astro

@@ -7,11 +7,11 @@ import HeroVisual from "../../components/HeroVisual.astro";
 <BaseLayout lang="en" title="Home">
   <section class="hero">
     <div>
-      <div style="font-family: var(--mono); color: rgba(255,255,255,.55); font-size: 13px;">
+      <div class="hero-kicker" aria-label="architecture build production">
         architecture · build · production
       </div>
 
-      <h1>We design & ship systems.</h1>
+      <h1>We design &amp; ship systems.<span class="cursor" aria-hidden="true">│</span></h1>
 
       <p class="lead">
         RocketDeploy is a senior engineering team focused on
@@ -53,12 +53,12 @@ import HeroVisual from "../../components/HeroVisual.astro";
 
     <style>
       .hero-right {
-      display: grid;
-      gap: 14px;
+        display: grid;
+        gap: 14px;
       }
       @media (max-width: 900px) {
         .hero-visual-slot {
-        display: none;
+          display: none;
         }
       }
     </style>
@@ -131,10 +131,10 @@ import HeroVisual from "../../components/HeroVisual.astro";
   </section>
 
   <section class="section">
-    <h2>how we work</h2>
+    <h2 class="typing">how we work<span class="cursor" aria-hidden="true">█</span></h2>
 
     <div class="card">
-      <ul style="margin: 0; padding-left: 18px; color: rgba(255,255,255,.72);">
+      <ul class="cli-list" style="margin: 0; color: rgba(255,255,255,.72);">
         <li>microservices over monoliths</li>
         <li>clear boundaries and contracts</li>
         <li>API-first and event-driven where it makes sense</li>
@@ -151,7 +151,7 @@ import HeroVisual from "../../components/HeroVisual.astro";
       <p style="margin-top:0; color: rgba(255,255,255,.72);">
         We have designed and delivered systems across areas such as:
       </p>
-      <ul style="margin: 0; padding-left: 18px; color: rgba(255,255,255,.72);">
+      <ul class="check-list" style="margin: 0; color: rgba(255,255,255,.72);">
         <li>e-commerce platforms integrated with logistics and automation</li>
         <li>distributed systems connecting cloud services and physical devices</li>
         <li>operational platforms used daily by non-technical teams</li>

src/pages/pl/index.astro

@@ -7,11 +7,13 @@ import HeroVisual from "../../components/HeroVisual.astro";
 <BaseLayout lang="pl" title="Start">
   <section class="hero">
     <div>
-      <div style="font-family: var(--mono); color: rgba(255,255,255,.55); font-size: 13px;">
+      <div class="hero-kicker" aria-label="architecture build production">
         architecture · build · production
       </div>
 
-      <h1>Projektujemy i dowozimy systemy.</h1>
+      <h1>
+        Projektujemy i dowozimy systemy.<span class="cursor" aria-hidden="true">│</span>
+      </h1>
 
       <p class="lead">
         RocketDeploy to zespół senior inżynierów skoncentrowany na
@@ -54,12 +56,12 @@ import HeroVisual from "../../components/HeroVisual.astro";
 
     <style>
       .hero-right {
-      display: grid;
-      gap: 14px;
+        display: grid;
+        gap: 14px;
       }
       @media (max-width: 900px) {
         .hero-visual-slot {
-        display: none;
+          display: none;
         }
       }
     </style>
@@ -132,10 +134,12 @@ import HeroVisual from "../../components/HeroVisual.astro";
   </section>
 
   <section class="section">
-    <h2>jak pracujemy</h2>
+    <h2 class="typing">
+      jak pracujemy<span class="cursor" aria-hidden="true">█</span>
+    </h2>
 
     <div class="card">
-      <ul style="margin: 0; padding-left: 18px; color: rgba(255,255,255,.72);">
+      <ul class="cli-list" style="margin: 0; color: rgba(255,255,255,.72);">
         <li>microservices zamiast monolitów</li>
         <li>wyraźne granice odpowiedzialności i kontrakty</li>
         <li>API-first i event-driven tam, gdzie to daje przewagę</li>
@@ -152,7 +156,7 @@ import HeroVisual from "../../components/HeroVisual.astro";
       <p style="margin-top:0; color: rgba(255,255,255,.72);">
         Projektowaliśmy i wdrażaliśmy systemy m.in. w obszarach:
       </p>
-      <ul style="margin: 0; padding-left: 18px; color: rgba(255,255,255,.72);">
+      <ul class="check-list" style="margin: 0; color: rgba(255,255,255,.72);">
         <li>platformy e-commerce zintegrowane z logistyką i automatyzacją</li>
         <li>systemy rozproszone łączące cloud z fizycznymi urządzeniami</li>
         <li>platformy operacyjne używane codziennie przez zespoły nietechniczne</li>

src/styles/global.css

@@ -268,3 +268,102 @@ h1{
   .btn, .card{ transition: none; }
   .btn:hover, .card:hover{ transform: none; }
 }
+
+/* Hero kicker (index) — monospace + subtelny vibe */
+.hero-kicker{
+  font-family: var(--mono);
+  color: rgba(255,255,255,.55);
+  font-size: 13px;
+  letter-spacing: .2px;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  user-select: none;
+}
+
+/* Cursor █ (hero + typing header) */
+.cursor{
+  font-family: var(--mono);
+  color: rgba(255,255,255,.62);
+  animation: blink 1.35s steps(1, end) infinite;
+  transform: translateY(-0.05em);
+}
+@keyframes blink{
+  50%{ opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce){
+  .cursor{ animation: none; }
+}
+
+/* H2: CLI prefix + execution line (GLOBAL) */
+.section h2{
+  position: relative;
+  display: inline-block;
+  padding-left: 18px;
+}
+
+/* Prefix: na razie ">" */
+.section h2::before{
+  content: ">";
+  position: absolute;
+  left: 0;
+  top: .15em;
+  font-family: var(--mono);
+  font-size: .9em;
+  color: var(--faint);
+  transform: translateY(1px);
+}
+
+/* Execution line */
+.section h2::after{
+  content: "";
+  display: block;
+  height: 1px;
+  width: min(360px, 100%);
+  margin-top: 10px;
+  background: linear-gradient(
+    90deg,
+    rgba(255,255,255,.16) 0%,
+    rgba(255,255,255,.08) 55%,
+    rgba(255,255,255,0) 100%
+  );
+  opacity: .9;
+}
+
+/* Typing cue — tylko tam gdzie dodana klasa */
+.section h2.typing{
+  padding-right: 10px;
+}
+
+/* Terminalowe listy (opt-in przez klasy) */
+.cli-list,
+.check-list{
+  list-style: none;
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.cli-list li,
+.check-list li{
+  position: relative;
+  padding-left: 22px;
+  line-height: 1.5;
+}
+
+.cli-list li::before{
+  content: "→";
+  position: absolute;
+  left: 0;
+  top: .05em;
+  font-family: var(--mono);
+  color: var(--faint);
+}
+
+.check-list li::before{
+  content: "✓";
+  position: absolute;
+  left: 0;
+  top: .05em;
+  font-family: var(--mono);
+  color: var(--faint);
+}