From 3ed19ec8d4fafdfd367a375b1baf957121143174 Mon Sep 17 00:00:00 2001
From: Dwayne Charrington <dwaynecharrington@gmail.com>
Date: Fri, 13 Dec 2024 20:52:21 +1000
Subject: [PATCH] feat(site): examples on homepage, restyle of single page

---
 themes/aurelia-theme/data/header.yaml         |  4 ++
 .../layouts/examples/single.html              | 25 ++++++++-
 themes/aurelia-theme/layouts/index.html       | 56 +++++++++++++++++++
 3 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/themes/aurelia-theme/data/header.yaml b/themes/aurelia-theme/data/header.yaml
index 1f59bde..086fcea 100644
--- a/themes/aurelia-theme/data/header.yaml
+++ b/themes/aurelia-theme/data/header.yaml
@@ -15,6 +15,10 @@ menu:
     link: "/blog"
     icon: "blog"
     active: "eq .Section 'blog'"
+  - name: "Examples"
+    link: "/examples"
+    icon: "examples"
+    active: "eq .RelPermalink '/examples/'"
   - name: "Learn"
     link: "/learn"
     icon: "learn"
diff --git a/themes/aurelia-theme/layouts/examples/single.html b/themes/aurelia-theme/layouts/examples/single.html
index f80f7f7..fd81f2c 100644
--- a/themes/aurelia-theme/layouts/examples/single.html
+++ b/themes/aurelia-theme/layouts/examples/single.html
@@ -18,8 +18,31 @@ <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-
   </div>
 </section>
 
+<!-- Repository Link -->
+<section class="py-8 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="p-6 rounded-2xl bg-gradient-to-r from-aurelia/5 to-aurelia-light/5 border border-aurelia/10">
+      <div class="flex items-center justify-between gap-6">
+        <div>
+          <h3 class="text-xl font-semibold text-gray-900">Want to explore the code?</h3>
+          <p class="mt-2 text-gray-600">Get all of the code for these examples in our repository.</p>
+        </div>
+        <a href="https://github.com/aurelia/website/tree/main/aurelia-apps/src/examples" 
+           class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-aurelia hover:bg-aurelia-dark text-white font-medium transition-colors"
+           target="_blank"
+           rel="noopener noreferrer">
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+          </svg>
+          View on GitHub
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- Examples Grid -->
-<section class="py-16 bg-white">
+<section class="pb-16 bg-white">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
       <!-- Counter -->
diff --git a/themes/aurelia-theme/layouts/index.html b/themes/aurelia-theme/layouts/index.html
index 34b5d7c..72fe745 100644
--- a/themes/aurelia-theme/layouts/index.html
+++ b/themes/aurelia-theme/layouts/index.html
@@ -138,6 +138,62 @@ <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-
   </div>
 </section>
 
+<!-- Examples Section -->
+<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">
+        Interactive Examples
+      </span>
+      <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+        Learn by Example
+      </h2>
+      <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+        Explore our collection of interactive examples showcasing Aurelia 2's powerful features
+      </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>
+          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-aurelia/10 to-purple-500/10 flex items-center justify-center">
+            <svg class="w-5 h-5 text-aurelia" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+            </svg>
+          </div>
+        </div>
+        <div data-aurelia-app="counter" class="bg-gray-50 rounded-xl p-6 mb-4"></div>
+        <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>
+          <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-aurelia/10 to-purple-500/10 flex items-center justify-center">
+            <svg class="w-5 h-5 text-aurelia" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+          </div>
+        </div>
+        <div data-aurelia-app="real-time-clock" class="bg-gray-50 rounded-xl p-6 mb-4"></div>
+        <p class="text-sm text-gray-600">See how Aurelia 2 handles real-time updates and rendering</p>
+      </article>
+    </div>
+
+    <!-- CTA -->
+    <div class="text-center">
+      <a href="/examples" 
+         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>
+
 <!-- Sponsors Section -->
 <section class="py-24 bg-white">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">