Add to Blazor to Crud App link

Author: mythz

MyApp/Pages/Start.cshtml

@@ -8,6 +8,14 @@
 @await Html.PartialAsync("StartHeader")
 
 <section>
+    <div class="float-right mt-4 mr-4">
+        <a href="/text-to-blazor"
+           class="flex items-center rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-green-900 shadow-sm ring-1 ring-inset ring-green-300 hover:bg-gray-50">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2" viewBox="0 0 32 32"><path fill="currentColor" d="M19 22v-2h1v-7h-1v-2h4v2h-1v7h1v2zm-3.5 0h2L14 11h-3L7.503 22h2l.601-2h4.778zm-4.794-4l1.628-5.411l.256-.003L14.264 18zM32 4h-4V0h-2v4h-4v2h4v4h2V6h4zm-2 8h2v2h-2zM18 0h2v2h-2z"/><path fill="currentColor" d="M32 32H0V0h14v2H2v28h28V18h2z"/></svg>
+            Text to Blazor App
+            <svg xmlns="http://www.w3.org/2000/svg"  class="w-5 h-5" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16.06 10.94a1.5 1.5 0 0 1 0 2.12l-5.656 5.658a1.5 1.5 0 1 1-2.121-2.122L12.879 12L8.283 7.404a1.5 1.5 0 0 1 2.12-2.122l5.658 5.657Z"/></g></svg>
+        </a>
+    </div>
     <div class="bg-white dark:bg-black py-32 px-6 lg:px-8">
         <div class="mx-auto max-w-4xl text-base leading-7 text-gray-700 dark:text-gray-200">
             <p class="text-base font-semibold leading-7 text-indigo-600 dark:text-gray-300">Getting Started</p>
@@ -18,9 +26,9 @@
                 ServiceStack has a number of different integrated project templates to help you get started quickly
             </p>
         </div>
-        
+
         <div id="projects"></div>
-        
+
     </div>
 </section>
 

MyApp/wwwroot/css/app.css

@@ -3411,6 +3411,10 @@ select{
   padding-bottom: 2rem;
 }
 
+.pb-\[6px\] {
+  padding-bottom: 6px;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -4211,6 +4215,11 @@ select{
   --tw-ring-color: rgb(255 255 255 / 0.05);
 }
 
+.ring-green-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -4945,6 +4954,12 @@ select{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -5245,6 +5260,12 @@ select{
   fill: rgb(255 255 255 / 0.8);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\:transition-none {
+    transition-property: none;
+  }
+}
+
 .dark\:hidden:is(.dark *) {
   display: none;
 }
@@ -5737,6 +5758,11 @@ select{
   background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:hover\:bg-green-950:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:hover\:bg-indigo-800:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 48 163 / var(--tw-bg-opacity, 1));
@@ -5776,6 +5802,11 @@ select{
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:hover\:bg-green-900:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:hover\:text-blue-200:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity, 1));
@@ -5886,6 +5917,16 @@ select{
   background-color: rgb(91 33 182 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:focus\:bg-green-950:focus:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1));
+}
+
+.dark\:focus\:bg-green-900:focus:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:focus\:text-black:focus:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));