Elevate public site UX: premium hero, motion, scrollspy, shared footer

Redesign-preserve pass on the light editorial theme (dials 7/5/3): - Hero: live availability status, accent value-prop, role line, social row, staggered entrance - Motion (all motivated, reduced-motion safe): CSS scroll-driven reading progress bar, scrollspy nav with animated underline, CTA/blog arrow nudges, service hover accent rule, portfolio cover scale, card lift - Shared multi-column footer across home + blog (brand, nav, contact, social) - Fix anchor scroll offset under the fixed navbar (scroll-margin-top) - Wire real social: LinkedIn, Instagram, email (code.soroush@gmail.com) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-26 02:48:22 +03:30
parent 5cc9ed976c
commit dd882287df
4 changed files with 182 additions and 42 deletions
@@ -1,5 +1,6 @@
@{
    var locale = (string)(ViewData["Locale"] ?? "fa");
+    var fa     = locale == "fa";
    var isRtl  = locale == "fa";
    var dir    = isRtl ? "rtl" : "ltr";
    var lang   = locale == "fa" ? "fa" : "en";
@@ -45,6 +46,9 @@
 </head>
 <body class="site antialiased">

+  <!-- Reading progress (CSS scroll-driven) -->
+  <div class="scroll-progress" aria-hidden="true"></div>
+
  <!-- Sentinel for the navbar border (observed by IntersectionObserver) -->
  <div id="nav-sentinel" aria-hidden="true"></div>

@@ -128,6 +132,43 @@
    @RenderBody()
  </main>

+  <!-- Footer (shared across all public pages) -->
+  <footer class="site-footer mt-8 px-5 py-14 sm:px-8">
+    <div class="mx-auto grid max-w-6xl grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr]">
+      <div>
+        <a href="/#top" class="flex items-center gap-2.5" aria-label="@(locale == "fa" ? "خانه" : "Home")">
+          <img src="/logo-mark.svg" alt="" width="26" height="26" class="h-[26px] w-[26px]" />
+          <span class="font-display text-[15px] font-bold text-zinc-900 @(isRtl ? "font-fa" : "")">@(locale == "fa" ? "سروش اسعدی" : "Soroush Asadi")</span>
+        </a>
+        <p class="mt-4 max-w-xs text-sm leading-relaxed text-zinc-600">@(fa ? "مهندسی سامانه‌های هوش مصنوعی برای سازمان‌ها؛ از راهبرد تا استقرار در تولید." : "AI systems engineering for the enterprise, from strategy to live deployment.")</p>
+        <div class="mt-5 flex gap-2.5">
+          <a class="social" href="https://www.linkedin.com/in/soroushdes/" target="_blank" rel="noopener" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm6 0h3.8v1.64h.05c.53-1 1.83-2.06 3.76-2.06 4.02 0 4.76 2.65 4.76 6.1V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.07 1.4-2.07 2.85V21H9V9Z"/></svg></a>
+          <a class="social" href="https://www.instagram.com/soroushasadicom/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/></svg></a>
+          <a class="social" href="mailto:code.soroush@gmail.com" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a>
+        </div>
+      </div>
+
+      <nav aria-label="Footer" class="flex flex-col gap-2.5">
+        <span class="kicker mb-1">@(fa ? "پیمایش" : "Navigate")</span>
+        <a href="/#services"  class="foot-link">@(fa ? "خدمات" : "Services")</a>
+        <a href="/#stack"     class="foot-link">@(fa ? "استک" : "Stack")</a>
+        <a href="/#portfolio" class="foot-link">@(fa ? "نمونه‌کارها" : "Work")</a>
+        <a href="/blog"       class="foot-link">@(fa ? "بلاگ" : "Blog")</a>
+      </nav>
+
+      <div class="flex flex-col gap-2.5">
+        <span class="kicker mb-1">@(fa ? "تماس" : "Get in touch")</span>
+        <a href="/#contact" class="foot-link">@(fa ? "رزرو جلسه" : "Book a call")</a>
+        <a href="mailto:code.soroush@gmail.com" class="foot-link">code.soroush@gmail.com</a>
+      </div>
+    </div>
+
+    <div class="mx-auto mt-12 flex max-w-6xl flex-col items-center gap-2 border-t border-zinc-200 pt-6 text-center sm:flex-row sm:justify-between sm:text-start">
+      <p class="text-[.78rem] text-zinc-400">© 2026 Soroush Asadi. @(fa ? "تمام حقوق محفوظ است." : "All rights reserved.")</p>
+      <p class="text-[.78rem] text-zinc-400">@(fa ? "ساخته‌شده با دقت در تهران." : "Built with care in Tehran.")</p>
+    </div>
+  </footer>
+
  <script src="/js/app.js" defer></script>
  @await RenderSectionAsync("Scripts", required: false)
 </body>