refact(examples): rename examples to playground

Makes much more sense

content/playground.md

@@ -0,0 +1,6 @@
+---
+title: "Playground"
+description: "Playground is a collection of interactive examples showcasing Aurelia's capabilities. You can edit the examples and see the changes in real time."
+url: "/playground/"
+type: "playground"
+---

themes/aurelia-theme/data/header.yaml

@@ -10,14 +10,14 @@ menu:
           - name: "Aurelia 2 Docs"
             link: "https://docs.aurelia.io"
             target: "_blank"
-          - name: "Examples"
-            link: "/examples"
-            active: "eq .RelPermalink '/examples/'"
       - title: "Legacy"
         items:
           - name: "Aurelia 1 Docs"
             link: "https://aurelia-1.gitbook.io/v1-docs"
             target: "_blank"
+  - name: "Playground"
+    link: "/playground"
+    active: "eq .RelPermalink '/playground/'"
   - name: "Blog"
     link: "/blog"
     active: "eq .Section 'blog'"

themes/aurelia-theme/layouts/index.html

@@ -206,7 +206,7 @@ <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-
 </section>
 
 <!-- Examples Section -->
-<section class="py-24 bg-gradient-to-b from-white to-gray-50">
+<!-- <section class="py-24 bg-gradient-to-b from-white to-gray-50">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16">
       <span class="inline-block px-4 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium mb-4">
@@ -220,9 +220,7 @@ <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-
       </p>
     </div>
 
-    <!-- Live Examples Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
-      <!-- Counter Example -->
       <article class="group p-6 rounded-2xl bg-white shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 border border-gray-100">
         <div class="flex items-center justify-between mb-4">
           <h3 class="text-xl font-bold text-gray-900">Counter Example</h3>
@@ -236,7 +234,6 @@ <h3 class="text-xl font-bold text-gray-900">Counter Example</h3>
         <p class="text-sm text-gray-600">A simple counter demonstrating reactive state management in Aurelia 2</p>
       </article>
 
-      <!-- Real-time Clock -->
       <article class="group p-6 rounded-2xl bg-white shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 border border-gray-100">
         <div class="flex items-center justify-between mb-4">
           <h3 class="text-xl font-bold text-gray-900">Real-time Clock</h3>
@@ -251,15 +248,14 @@ <h3 class="text-xl font-bold text-gray-900">Real-time Clock</h3>
       </article>
     </div>
 
-    <!-- CTA -->
     <div class="text-center">
       <a href="{{ "/examples" | relURL }}" 
          class="inline-flex items-center justify-center px-8 py-3 rounded-full text-white bg-gradient-to-r from-aurelia to-aurelia-light hover:opacity-90 transform hover:-translate-y-0.5 transition-all shadow-lg shadow-aurelia/20 hover:shadow-aurelia/30">
         View More Examples
       </a>
     </div>
   </div>
-</section>
+</section> -->
 
 <!-- Sponsors Section -->
 <section class="py-24 bg-white">