Add replacing-legacy-uis post

Author: mythz

MyApp/_posts/2025-11-19_replacing-legacy-uis.md

@@ -201,17 +201,21 @@ For organizations with legacy applications, it means **modernization is now econ
 
 ## From .NET APIs to AI First UIs
 
-Our roadmap is now firmly centered on developing the ideal .NET AI‑first development stack, powered by a growing suite of React / TypeScript / Tailwind CSS templates and components, the ultimate UX of hot-reloading npm UIs and built on our robust and highly capable & performant .NET backend APIs. 
+The unprecedented productivity of AI Assisted development has transformed our roadmap which is now firmly centered on developing the ideal .NET AI‑first development stack, powered by a growing suite of React / TypeScript / Tailwind CSS templates and components, the ultimate UX of hot-reloading npm UIs and built on our highly capable & performant .NET backend APIs. 
 
-This combination delivers true end‑to‑end type safety from database to UI, frictionless development, expressive declarative APIs that stay in sync with your contracts, enabling teams to move from idea to production‑ready AI‑driven UIs with minimal ceremony. 
 
-<div class="pt-8 not-prose flex justify-center">
+<div class="pt-12 not-prose flex justify-center">
 <a href="/react"
    class="group relative inline-flex items-center rounded-full bg-gradient-to-r from-sky-400 vithe UX Hot reloading of npm UIsa-cyan-400 to-emerald-400 p-[1.5px] shadow-md">
-  <span class="inline-flex items-center gap-2.5 rounded-full bg-white px-6 py-3 text-base font-semibold text-slate-900 transition group-hover:bg-slate-50">
+    <span class="inline-flex items-center gap-2.5 rounded-full bg-white px-6 py-3 text-base font-semibold text-slate-900 transition group-hover:bg-slate-50">
     <span class="h-2.5 w-2.5 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400 shadow-[0_0_7px_rgba(56,189,248,0.7)]"></span>
     <span class="tracking-wide">ServiceStack + React</span>
     <span class="ml-1 text-slate-400 transition-transform group-hover:translate-x-0.5">&rarr;</span>
-  </span>
+    </span>
 </a>
-</div>
+
+</div>
+
+<div class="-ml-[30px] w-[840px]">
+<react-callout />
+</div>

MyApp/wwwroot/css/app.css

@@ -948,6 +948,18 @@
   .-ml-48 {
     margin-left: calc(var(--spacing) * -48);
   }
+  .-ml-\[25\%\] {
+    margin-left: calc(25% * -1);
+  }
+  .-ml-\[30px\] {
+    margin-left: calc(30px * -1);
+  }
+  .-ml-\[50px\] {
+    margin-left: calc(50px * -1);
+  }
+  .-ml-\[100px\] {
+    margin-left: calc(100px * -1);
+  }
   .-ml-px {
     margin-left: -1px;
   }
@@ -1352,6 +1364,18 @@
   .w-\[600px\] {
     width: 600px;
   }
+  .w-\[800px\] {
+    width: 800px;
+  }
+  .w-\[820px\] {
+    width: 820px;
+  }
+  .w-\[840px\] {
+    width: 840px;
+  }
+  .w-\[980px\] {
+    width: 980px;
+  }
   .w-\[1280px\] {
     width: 1280px;
   }

MyApp/wwwroot/pages/components/ReactCallout.mjs

@@ -1,7 +1,8 @@
 export default {
     template:`
-<section class="py-24">
+<section class="not-prose py-20">
     <div class="w-full">
+        <a href="/react/">
         <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-blue-950 to-cyan-900 shadow-xl ring-1 ring-white/10">
             
             <!-- React Logo Watermark -->
@@ -68,6 +69,7 @@ export default {
                 </div>
             </div>
         </div>
+        </a>
     </div>
 </section>
     `,

MyApp/wwwroot/posts/replacing-legacy-uis.mjs

@@ -1,5 +1,7 @@
 import Templates, { Index } from "./components/Templates.mjs"
 import ScreenshotsGallery from "./components/ScreenshotsGallery.mjs"
+import ReactCallout from "../pages/components/ReactCallout.mjs"
+
 
 const ReactTemplate = {
     components: { Templates },
@@ -68,6 +70,7 @@ export default {
     components: {
         ReactTemplate,
         ScreenshotsGallery,
+        ReactCallout,
     },
     setup() {
         return { }