Update v8_10.md

Author: mythz

MyApp/_pages/releases/v8_10.md

@@ -92,19 +92,19 @@ We're introducing three production-ready React templates, each optimized for dif
 
 All three templates leverage our new [React Component Gallery](https://react.servicestack.net)—a high-fidelity port of our proven [Vue Component Library](https://docs.servicestack.net/vue/) and [Blazor Component Library](https://blazor.servicestack.net). This comprehensive collection provides everything needed to build highly productive, modern and responsive web applications.
 
-<div class="not-prose">
-    <a href="https://react.servicestack.net" class="block shadow-lg hover:shadow-xl">
-        <img class="w-full" src="/img/pages/react/react-gallery.webp">
-    </a>
-</div>
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
+[![](/img/pages/react/react-gallery.webp)](https://react.servicestack.net)
+:::
+:::
 
 Switch to Dark Mode to see how all components looks in Dark Mode:
 
-<div class="not-prose">
-    <a href="https://react.servicestack.net" class="block shadow-lg hover:shadow-xl">
-        <img class="w-full" src="/img/pages/react/react-gallery-dark.webp">
-    </a>
-</div>
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
+[![](/img/pages/react/react-gallery-dark.webp)](https://react.servicestack.net)
+:::
+:::
 
 ServiceStack's first-class React support positions your applications at the forefront of AI-assisted development. With declarative APIs, complete type safety, and minimal boilerplate, you can leverage AI code generation with confidence while maintaining the quality and maintainability your production systems demand.
 
@@ -127,9 +127,12 @@ This is enough to generate a complete CRUD UI to manage Bookings
 in your React App with the [React AutoQueryGrid Component](https://react.servicestack.net/gallery/autoquerygrid).
 or with ServiceStack's built-in [Locode UI](https://docs.servicestack.net/locode/):
 
-:::{.wideshot}
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
 [![](/img/pages/react/bookings-locode.webp)](https://docs.servicestack.net/locode/)
 :::
+:::
+
 
 ### Cheat Sheet
 
@@ -192,7 +195,11 @@ There are a number of options for starting with an AI generated Application, wit
 If you're using [GitHub Copilot](https://copilot.github.com/) you can also use it to generate a new App 
 [from the Vite React template ](https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates):
 
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
 [![](/img/pages/react/react-new-repo.webp)](https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates)
+:::
+:::
 
 For the example, I've started with a useful App that I've never created before, a Budget Planner App, using the prompt:
 
@@ -262,9 +269,11 @@ Claude Code to Implement Category Auto-Tagging with this prompt:
 
 Which resulted in [this commit](https://github.com/mythz/budgets.apps.cafe/commit/e45a17b8dfd2b5983971554ced3e52ded6fa050e) which sees the feature available in the UI:
 
-:::{.shadow}
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
 ![](/img/pages/react/budget/expense-tags-dark.webp)
 :::
+:::
 
 Along with different seed data, tailored for Income and Expenses:
  - [categoryAutoTag.ts](https://github.com/mythz/budgets.apps.cafe/blob/main/MyApp.Client/src/lib/categoryAutoTag.ts)
@@ -454,7 +463,11 @@ The `servicestack` provider requires the `SERVICESTACK_LICENSE` Environment Vari
 
 Learn more about [AI Chat's UI](https://docs.servicestack.net/ai-chat-ui):
 
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
 [![](/img/pages/ai-chat/llms-syntax.webp)](https://docs.servicestack.net/ai-chat-ui)
+:::
+:::
 
 ### FREE for Personal Usage
 
@@ -523,9 +536,11 @@ var file = new ChatCompletion
 We're excited to announce the new Typesense-powered **AI Search**, a powerful new feature bringing 
 conversational AI capabilities to [ServiceStack Docs](https://docs.servicestack.net). 
 
-:::{.my-8 .max-w-2xl .mx-auto .rounded-lg .overflow-hidden}
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
 [![](/img/pages/typesense/ai-search-default.webp)](https://docs.servicestack.net)
 :::
+:::
 
 ### Comprehensive Docs
 
@@ -534,17 +549,22 @@ from core features to advanced integrations. While comprehensive documentation i
 quickly can be challenging. Traditional search works well when you know what you're looking for, but what about when you
 need to understand concepts, explore solutions, or learn how different features work together? That's where **AI Search** comes in.
 
+
+:::{.not-prose}
 :::{.my-8 .max-w-2xl .mx-auto}
 [![](/img/pages/typesense/ai-search-button.webp)](https://docs.servicestack.net)
 :::
+:::
 
 **AI Search** leverages Typesense's advanced [Conversational Search API](https://typesense.org/docs/29.0/api/conversational-search-rag.html) 
 that uses Retrieval-Augmented Generation (RAG) of our docs combined with an LLM to provide intelligent, context-aware answers 
 directly from our documentation.
 
-:::{.my-8 .max-w-2xl .mx-auto .rounded-lg .overflow-hidden}
+:::{.not-prose}
+:::{.my-8 .max-w-3xl .mx-auto .rounded-lg .overflow-hidden .shadow .hover:shadow-xl}
 [![](/img/pages/typesense/ai_search_add_servicestack_reference.webp)](https://docs.servicestack.net)
 :::
+:::
 
 #### AI Search vs Instant Typesense Search