From d0cf12f0d61f8958bcc92d959c92f518d2ea8115 Mon Sep 17 00:00:00 2001
From: Dwayne Charrington <dwaynecharrington@gmail.com>
Date: Sun, 15 Dec 2024 08:25:28 +1000
Subject: [PATCH] feat(site): standards name for counter, homepage improvements

Make the CTA better. Keep it simple, but show an example.
---
 aurelia-apps/src/examples/counter.html        |   2 -
 aurelia-apps/src/examples/counter.ts          |   7 --
 aurelia-apps/src/examples/simple-counter.ts   |  19 ++++
 aurelia-apps/src/main.ts                      |   3 +-
 .../layouts/examples/single.html              |   2 +-
 themes/aurelia-theme/layouts/index.html       | 100 +++++++++++++-----
 6 files changed, 94 insertions(+), 39 deletions(-)
 delete mode 100644 aurelia-apps/src/examples/counter.html
 delete mode 100644 aurelia-apps/src/examples/counter.ts
 create mode 100644 aurelia-apps/src/examples/simple-counter.ts

diff --git a/aurelia-apps/src/examples/counter.html b/aurelia-apps/src/examples/counter.html
deleted file mode 100644
index 1d12c03..0000000
--- a/aurelia-apps/src/examples/counter.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<p>Current count: ${count}</p>
-<button click.trigger="increment()">Increment</button>
\ No newline at end of file
diff --git a/aurelia-apps/src/examples/counter.ts b/aurelia-apps/src/examples/counter.ts
deleted file mode 100644
index 7585f0c..0000000
--- a/aurelia-apps/src/examples/counter.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export class Counter {
-  count = 0;
-
-  increment() {
-    this.count++;
-  }
-}
diff --git a/aurelia-apps/src/examples/simple-counter.ts b/aurelia-apps/src/examples/simple-counter.ts
new file mode 100644
index 0000000..9aeeb28
--- /dev/null
+++ b/aurelia-apps/src/examples/simple-counter.ts
@@ -0,0 +1,19 @@
+import { customElement } from 'aurelia';
+
+@customElement({
+  name: 'simple-counter',
+  template: `
+    <p style="margin-top:0;">Current count: \${count}</p>
+    <button click.trigger="increment()">Increment</button>
+  `,
+  shadowOptions: {
+    mode: 'open',
+  },
+})
+export class SimpleCounter {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+}
diff --git a/aurelia-apps/src/main.ts b/aurelia-apps/src/main.ts
index 0ca9322..f828254 100644
--- a/aurelia-apps/src/main.ts
+++ b/aurelia-apps/src/main.ts
@@ -1,14 +1,13 @@
 import { Aurelia, StyleConfiguration } from "aurelia";
 import { appMap } from "./app-map";
 
+// @ts-expect-error - This is a CSS file
 import sharedStyles from "./shared.css?inline";
 
 // Convert the CSS string to CSSStyleSheet
 const sheet = new CSSStyleSheet();
 sheet.replaceSync(sharedStyles);
 
-console.log(sheet);
-
 document
   .querySelectorAll("[data-aurelia-app]")
   .forEach(async (host: HTMLElement) => {
diff --git a/themes/aurelia-theme/layouts/examples/single.html b/themes/aurelia-theme/layouts/examples/single.html
index fd81f2c..cf69399 100644
--- a/themes/aurelia-theme/layouts/examples/single.html
+++ b/themes/aurelia-theme/layouts/examples/single.html
@@ -48,7 +48,7 @@ <h3 class="text-xl font-semibold text-gray-900">Want to explore the code?</h3>
       <!-- Counter -->
       <article class="p-6 rounded-2xl bg-white shadow-sm hover:shadow-md transition-shadow border border-gray-100">
         <h2 class="text-2xl font-semibold text-gray-900 mb-4">Counter</h2>
-        <div data-aurelia-app="counter" class="bg-gray-50 rounded-xl p-6"></div>
+        <div data-aurelia-app="simple-counter" class="bg-gray-50 rounded-xl p-6"></div>
       </article>
 
       <!-- Particle System -->
diff --git a/themes/aurelia-theme/layouts/index.html b/themes/aurelia-theme/layouts/index.html
index 1e697af..6760ea5 100644
--- a/themes/aurelia-theme/layouts/index.html
+++ b/themes/aurelia-theme/layouts/index.html
@@ -2,7 +2,6 @@
 
 <!-- Hero Section -->
 <section class="relative min-h-screen flex items-center justify-center bg-gradient-to-b from-white to-gray-50 overflow-hidden">
-  <!-- Enhanced Animated Background -->
   <div class="absolute inset-0 overflow-hidden">
     <!-- Elegant flowing gradient mesh -->
     <div class="absolute inset-0 opacity-[0.08]">
@@ -28,20 +27,15 @@
   </div>
 
   <!-- Hero Content -->
-  <div class="relative z-10 flex items-center justify-center gap-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <!-- Logo with Glow -->
-    <div class="flex-shrink-0 hidden md:block relative group">
-      <div class="absolute inset-0 bg-aurelia/20 rounded-full blur-xl scale-150 group-hover:bg-aurelia/30 transition-all duration-300"></div>
-      <img class="relative w-40 h-40 transform group-hover:scale-105 transition-transform duration-300" 
-           src="{{ "aurelia-icon.svg" | relURL }}" 
-           alt="Aurelia" 
-           width="160" 
-           height="160" 
-           fetchpriority="high" />
-    </div>
-
-    <div class="text-center md:text-left max-w-2xl">
-      <!-- Tagline with enhanced typography -->
+  <div class="relative z-10 flex flex-col lg:flex-row items-center justify-center gap-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <!-- Left Column: Content -->
+    <div class="text-center lg:text-left max-w-2xl">
+      <div class="mb-4">
+        <span class="inline-block px-4 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium">
+          <span class="mr-2">🚀</span> v2.0 Now Available
+        </span>
+      </div>
+      
       <h1 class="text-4xl sm:text-6xl font-bold mb-6">
         {{ range $index, $line := .Params.tagline }}
           <span class="block bg-gradient-to-r from-aurelia via-aurelia-light to-purple-500 bg-clip-text text-transparent
@@ -51,26 +45,78 @@ <h1 class="text-4xl sm:text-6xl font-bold mb-6">
         {{ end }}
       </h1>
 
-      <!-- CTA Buttons with enhanced design -->
-      <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
+      <p class="text-xl text-gray-600 mb-8 leading-relaxed">
+        Build modern web applications with a framework that puts <span class="text-aurelia font-semibold">you</span> first. 
+        Simple, powerful, and unobtrusive.
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
         <a href="{{ .Params.hero_cta_link }}" 
            class="group 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">
-          <span class="relative">
-            {{ .Params.hero_cta }}
-            <span class="absolute bottom-0 left-0 w-full h-[2px] bg-white/40 transform scale-x-0 group-hover:scale-x-100 transition-transform"></span>
+          <span class="relative flex items-center gap-2">
+            <span>{{ .Params.hero_cta }}</span>
+            <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
           </span>
         </a>
         
         <a href="{{ .Params.github_link }}" 
            target="_blank"
            class="group inline-flex items-center justify-center px-8 py-3 rounded-full font-semibold border-2 border-aurelia text-aurelia hover:bg-aurelia/5 transform hover:-translate-y-0.5 transition-all gap-2">
-          <i class="fa-brands fa-github w-5 h-5 transform group-hover:rotate-12 transition-transform flex items-center"></i>
-          <span class="relative flex items-center">
-            GITHUB
-            <span class="absolute bottom-0 left-0 w-full h-[2px] bg-aurelia/40 transform scale-x-0 group-hover:scale-x-100 transition-transform"></span>
+          <i class="fa-brands fa-github w-5 h-5 transform group-hover:rotate-12 transition-transform"></i>
+          <span class="relative flex items-center gap-2">
+            <span>GITHUB</span>
           </span>
         </a>
       </div>
+
+      <div class="mt-8 flex flex-wrap gap-6 justify-center lg:justify-start text-sm">
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 rounded-full bg-green-500"></div>
+          <span class="text-gray-600">Lightweight</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+          <span class="text-gray-600">TypeScript First</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 rounded-full bg-purple-500"></div>
+          <span class="text-gray-600">Standards Based</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column: Interactive Demo -->
+    <div class="hidden lg:block w-full max-w-lg">
+      <div class="relative">
+        <!-- Code Preview -->
+        <div class="rounded-xl bg-gray-900 p-4 shadow-2xl transform hover:-translate-y-1 transition-transform">
+          <div class="flex items-center gap-1.5 mb-4">
+            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          </div>
+          <pre class="text-sm font-mono"><code class="language-typescript text-gray-300">import { customElement } from 'aurelia';
+
+@customElement({
+  name: 'simple-counter',
+  template: `<p>Current count: \${count}</p><button click.trigger="increment()">Increment</button>`
+})
+export class SimpleCounter {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+}</code></pre>
+        </div>
+        
+        <!-- Result Preview -->
+        <div class="mt-4 rounded-xl bg-white p-6 shadow-xl border border-gray-200">
+          <div data-aurelia-app="simple-counter"></div>
+        </div>
+      </div>
     </div>
   </div>
 </section>
@@ -127,14 +173,14 @@ <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-
             </div>
           </div>
 
-          <!-- Title with gradient animation -->
+          <!-- Title -->
           <h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-gray-900 to-gray-900 
                      group-hover:from-aurelia group-hover:to-purple-500
                      bg-clip-text text-transparent transition-all duration-300">
             {{ .name }}
           </h3>
           
-          <!-- Description with better contrast -->
+          <!-- Description -->
           <p class="text-gray-600 leading-relaxed">
             {{ .description }}
           </p>
@@ -176,7 +222,7 @@ <h3 class="text-xl font-bold text-gray-900">Counter Example</h3>
             </svg>
           </div>
         </div>
-        <div data-aurelia-app="counter" class="bg-gray-50 rounded-xl p-6 mb-4"></div>
+        <div data-aurelia-app="simple-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>