Skip to content

Commit ea4a725

Browse files
mythzmythz
committed
Update Index.cshtml
1 parent 15db47d commit ea4a725

File tree

1 file changed

+83
-85
lines changed

1 file changed

+83
-85
lines changed

‎MyApp/Pages/React/Index.cshtml‎

Lines changed: 83 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153

154154
@await Html.PartialAsync("PrimaryNav", "react")
155155

156-
<section class="my-24">
156+
<section class="mt-24">
157157
<div class="max-w-screen-lg mx-auto px-4 sm:px-6 lg:px-8">
158158

159159
<h2 class="mb-12 text-center text-3xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight text-gray-900 dark:text-gray-100">
@@ -168,6 +168,14 @@
168168
<li>AI Native React/Next.js, Vite, TypeScript and Tailwind CSS UI stack</li>
169169
</ul>
170170

171+
<h2 class="mb-12 mt-20 text-center text-3xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight text-gray-900 dark:text-gray-100">
172+
.NET React Templates for AI Assisted Apps
173+
</h2>
174+
175+
176+
<div id="templates"></div>
177+
178+
171179
<h2 class="mb-12 mt-16 text-center text-3xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight text-gray-900 dark:text-gray-100">
172180
Simplified .NET + React Development Workflow
173181
</h2>
@@ -213,85 +221,9 @@
213221
</p>
214222
</div>
215223
</div>
216-
217-
<div id="templates"></div>
218224
</div>
219225

220226

221-
<div class="mx-auto max-w-5xl">
222-
<!-- React Callout -->
223-
<section class="not-prose py-20">
224-
<div class="w-full">
225-
<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">
226-
227-
<!-- React Logo Watermark -->
228-
<svg class="absolute -right-20 -top-20 h-[400px] w-[400px] text-cyan-500/10 animate-[spin_60s_linear_infinite]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
229-
<circle cx="12" cy="12" r="2"></circle>
230-
<ellipse rx="10" ry="4.5" transform="rotate(60 12 12)"></ellipse>
231-
<ellipse rx="10" ry="4.5" transform="rotate(120 12 12)"></ellipse>
232-
<ellipse rx="10" ry="4.5"></ellipse>
233-
</svg>
234-
235-
<div class="relative px-6 py-10 sm:px-10 lg:px-12">
236-
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-white">
237-
AI-Ready React templates <span class="text-cyan-400">on a robust .NET backend</span>
238-
</h2>
239-
<p class="mt-4 max-w-2xl text-blue-100/80 text-sm sm:text-base">
240-
Combine the React ecosystem with ServiceStack's feature-rich backend.
241-
Experience end-to-end type safety and declarative APIs in a frictionless environment.
242-
</p>
243-
244-
<dl class="mt-8 grid gap-6 sm:grid-cols-3">
245-
<!-- Item 1 -->
246-
<div class="flex flex-col bg-white/5 p-5 rounded-xl border border-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors">
247-
<dt class="font-semibold text-white">
248-
<span class="block text-cyan-400 font-mono text-xs mb-1 opacity-70">01</span>
249-
AI Ready
250-
</dt>
251-
<dd class="mt-2 text-sm text-blue-100/70 leading-relaxed">
252-
Start from well-known React templates tuned for rich, data-driven and AI-assisted user interfaces.
253-
</dd>
254-
</div>
255-
256-
<!-- Item 2 -->
257-
<div class="flex flex-col bg-white/5 p-5 rounded-xl border border-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors">
258-
<dt class="font-semibold text-white">
259-
<span class="block text-cyan-400 font-mono text-xs mb-1 opacity-70">02</span>
260-
End-to-end Type Safety
261-
</dt>
262-
<dd class="mt-2 text-sm text-blue-100/70 leading-relaxed">
263-
Share DTOs between .NET and React for confident refactors without context switching.
264-
</dd>
265-
</div>
266-
267-
<!-- Item 3 -->
268-
<div class="flex flex-col bg-white/5 p-5 rounded-xl border border-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors">
269-
<dt class="font-semibold text-white">
270-
<span class="block text-cyan-400 font-mono text-xs mb-1 opacity-70">03</span>
271-
Zero-Ambiguity APIs
272-
</dt>
273-
<dd class="mt-2 text-sm text-blue-100/70 leading-relaxed">
274-
Consistent API integrations eliminates guesswork, giving AI the perfect context to generate accurate features.
275-
</dd>
276-
</div>
277-
</dl>
278-
279-
<div class="mt-8 flex flex-wrap gap-3">
280-
<a href="https://react.servicestack.net"
281-
class="inline-flex items-center justify-center rounded-md bg-cyan-500 px-4 py-2 text-sm font-bold text-blue-950 shadow-sm hover:bg-cyan-400 transition-colors">
282-
React Component Gallery
283-
</a>
284-
<a href="https://react-templates.net/docs"
285-
class="inline-flex items-center justify-center rounded-md bg-blue-950/50 px-4 py-2 text-sm font-semibold text-cyan-100 ring-1 ring-inset ring-cyan-500/30 hover:bg-blue-900 hover:ring-cyan-500/50 transition-all">
286-
Read the Docs
287-
</a>
288-
</div>
289-
</div>
290-
</div>
291-
</div>
292-
</section>
293-
</div>
294-
295227
<div id="gallery" class="mt-16 max-w-2xl mx-auto">
296228

297229
<div class="relative overflow-hidden bg-slate-50 dark:bg-gray-900 border-b border-slate-200 dark:border-gray-800">
@@ -678,23 +610,89 @@
678610
</div>
679611
</section>
680612

613+
<div class="mx-auto max-w-5xl">
614+
<!-- React Callout -->
615+
<section class="not-prose py-20">
616+
<div class="w-full">
617+
<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">
618+
619+
<!-- React Logo Watermark -->
620+
<svg class="absolute -right-20 -top-20 h-[400px] w-[400px] text-cyan-500/10 animate-[spin_60s_linear_infinite]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
621+
<circle cx="12" cy="12" r="2"></circle>
622+
<ellipse rx="10" ry="4.5" transform="rotate(60 12 12)"></ellipse>
623+
<ellipse rx="10" ry="4.5" transform="rotate(120 12 12)"></ellipse>
624+
<ellipse rx="10" ry="4.5"></ellipse>
625+
</svg>
626+
627+
<div class="relative px-6 py-10 sm:px-10 lg:px-12">
628+
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-white">
629+
AI-Ready React templates <span class="text-cyan-400">on a robust .NET backend</span>
630+
</h2>
631+
<p class="mt-4 max-w-2xl text-blue-100/80 text-sm sm:text-base">
632+
Combine the React ecosystem with ServiceStack's feature-rich backend.
633+
Experience end-to-end type safety and declarative APIs in a frictionless environment.
634+
</p>
635+
636+
<dl class="mt-8 grid gap-6 sm:grid-cols-3">
637+
<!-- Item 1 -->
638+
<div class="flex flex-col bg-white/5 p-5 rounded-xl border border-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors">
639+
<dt class="font-semibold text-white">
640+
<span class="block text-cyan-400 font-mono text-xs mb-1 opacity-70">01</span>
641+
AI Ready
642+
</dt>
643+
<dd class="mt-2 text-sm text-blue-100/70 leading-relaxed">
644+
Start from well-known React templates tuned for rich, data-driven and AI-assisted user interfaces.
645+
</dd>
646+
</div>
647+
648+
<!-- Item 2 -->
649+
<div class="flex flex-col bg-white/5 p-5 rounded-xl border border-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors">
650+
<dt class="font-semibold text-white">
651+
<span class="block text-cyan-400 font-mono text-xs mb-1 opacity-70">02</span>
652+
End-to-end Type Safety
653+
</dt>
654+
<dd class="mt-2 text-sm text-blue-100/70 leading-relaxed">
655+
Share DTOs between .NET and React for confident refactors without context switching.
656+
</dd>
657+
</div>
658+
659+
<!-- Item 3 -->
660+
<div class="flex flex-col bg-white/5 p-5 rounded-xl border border-white/5 backdrop-blur-sm hover:bg-white/10 transition-colors">
661+
<dt class="font-semibold text-white">
662+
<span class="block text-cyan-400 font-mono text-xs mb-1 opacity-70">03</span>
663+
Zero-Ambiguity APIs
664+
</dt>
665+
<dd class="mt-2 text-sm text-blue-100/70 leading-relaxed">
666+
Consistent API integrations eliminates guesswork, giving AI the perfect context to generate accurate features.
667+
</dd>
668+
</div>
669+
</dl>
670+
671+
<div class="mt-8 flex flex-wrap gap-3">
672+
<a href="https://react.servicestack.net"
673+
class="inline-flex items-center justify-center rounded-md bg-cyan-500 px-4 py-2 text-sm font-bold text-blue-950 shadow-sm hover:bg-cyan-400 transition-colors">
674+
React Component Gallery
675+
</a>
676+
<a href="https://react-templates.net/docs"
677+
class="inline-flex items-center justify-center rounded-md bg-blue-950/50 px-4 py-2 text-sm font-semibold text-cyan-100 ring-1 ring-inset ring-cyan-500/30 hover:bg-blue-900 hover:ring-cyan-500/50 transition-all">
678+
Read the Docs
679+
</a>
680+
</div>
681+
</div>
682+
</div>
683+
</div>
684+
</section>
685+
</div>
686+
681687

682688
<script type="module">
683689
import { mount } from "app.mjs"
684690
import { ref, computed } from "vue"
685-
import VibeTemplate from "/posts/components/VibeTemplate.mjs"
686691
687692
const App = {
688-
components: {
689-
VibeTemplate,
690-
},
691693
template: `
692694
<div class="max-w-screen-lg">
693695
694-
<h2 class="mb-12 mt-20 text-center text-3xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight text-gray-900 dark:text-gray-100">
695-
.NET React Templates for AI Assisted Apps
696-
</h2>
697-
698696
<div class="mb-12">
699697
<vibe-template
700698
template="react-static"

0 commit comments

Comments
 (0)