style: replace emojis with Lucide icons, lighten footer

Author: swernerx

website/index.html

@@ -96,7 +96,7 @@
   <nav class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-lg border-b border-slate-200">
     <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
       <a href="#" class="flex items-center gap-3 font-semibold text-lg text-slate-900">
-        <span class="text-2xl">🌍</span>
+        <svg class="w-7 h-7 text-brand-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"/></svg>
         <span class="hidden sm:inline">eslint-plugin-lingui-typescript</span>
         <span class="sm:hidden">lingui-ts</span>
       </a>
@@ -207,47 +207,59 @@ <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">Smart Detection,
       <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
         <!-- Feature 1 -->
         <div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
-          <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-2xl mb-4">🎯</div>
+          <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
+          </div>
           <h3 class="text-lg font-semibold mb-2 text-slate-900">String Literal Unions</h3>
           <p class="text-slate-600 text-sm">
             <code class="text-blue-600 bg-blue-50 px-1 rounded">"idle" | "loading" | "error"</code> automatically detected as technical strings.
           </p>
         </div>
         <!-- Feature 2 -->
         <div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
-          <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center text-2xl mb-4">🌐</div>
+          <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"/></svg>
+          </div>
           <h3 class="text-lg font-semibold mb-2 text-slate-900">DOM & Intl APIs</h3>
           <p class="text-slate-600 text-sm">
             Event names, element types, Intl options — all recognized via TypeScript definitions.
           </p>
         </div>
         <!-- Feature 3 -->
         <div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
-          <div class="w-12 h-12 bg-pink-100 rounded-xl flex items-center justify-center text-2xl mb-4">🎨</div>
+          <div class="w-12 h-12 bg-pink-100 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="19" cy="11.5" r="2.5"/><circle cx="17" cy="18.5" r="2.5"/><circle cx="8.5" cy="13.5" r="2.5"/><path d="M21 12a9 9 0 1 1-9-9c0 4 2 6 4 8s4 5 5 5 0-4 0-4z"/></svg>
+          </div>
           <h3 class="text-lg font-semibold mb-2 text-slate-900">Styling Props</h3>
           <p class="text-slate-600 text-sm">
             <code class="text-pink-600 bg-pink-50 px-1 rounded">className</code>, <code class="text-pink-600 bg-pink-50 px-1 rounded">backgroundColor</code>, Tailwind classes — auto-ignored.
           </p>
         </div>
         <!-- Feature 4 -->
         <div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
-          <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center text-2xl mb-4">🔢</div>
+          <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/></svg>
+          </div>
           <h3 class="text-lg font-semibold mb-2 text-slate-900">Numeric Strings</h3>
           <p class="text-slate-600 text-sm">
             Prices, dates, times like <code class="text-amber-600 bg-amber-50 px-1 rounded">"€99.99"</code> or <code class="text-amber-600 bg-amber-50 px-1 rounded">"12:30"</code> are not user text.
           </p>
         </div>
         <!-- Feature 5 -->
         <div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
-          <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center text-2xl mb-4">🏷️</div>
+          <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2H2v10l9.29 9.29a1 1 0 0 0 1.42 0l8.58-8.58a1 1 0 0 0 0-1.42L12 2Z"/><circle cx="7.5" cy="7.5" r="1.5" fill="currentColor"/></svg>
+          </div>
           <h3 class="text-lg font-semibold mb-2 text-slate-900">Branded Types</h3>
           <p class="text-slate-600 text-sm">
             Mark custom loggers, analytics, storage keys as unlocalized with <code class="text-green-600 bg-green-50 px-1 rounded">unlocalized()</code>.
           </p>
         </div>
         <!-- Feature 6 -->
         <div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
-          <div class="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center text-2xl mb-4">🔒</div>
+          <div class="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
+          </div>
           <h3 class="text-lg font-semibold mb-2 text-slate-900">Package Verification</h3>
           <p class="text-slate-600 text-sm">
             Verifies <code class="text-cyan-600 bg-cyan-50 px-1 rounded">t</code>, <code class="text-cyan-600 bg-cyan-50 px-1 rounded">Trans</code> come from <code class="text-cyan-600 bg-cyan-50 px-1 rounded">@lingui/*</code> — no false positives.
@@ -513,20 +525,20 @@ <h3 class="font-semibold mb-3 text-slate-900">Run ESLint</h3>
   </section>
 
   <!-- Footer -->
-  <footer class="py-12 bg-slate-900 text-slate-400">
+  <footer class="py-12 bg-slate-100 text-slate-600 border-t border-slate-200">
     <div class="max-w-6xl mx-auto px-6">
       <div class="flex flex-col sm:flex-row items-center justify-between gap-6">
         <div class="flex items-center gap-3">
-          <span class="text-2xl">🌍</span>
-          <span>eslint-plugin-lingui-typescript</span>
+          <svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"/></svg>
+          <span class="font-medium text-slate-700">eslint-plugin-lingui-typescript</span>
         </div>
         <div class="flex items-center gap-6 text-sm">
-          <a href="https://github.com/sebastian-software/eslint-plugin-lingui-typescript" class="hover:text-white transition-colors">GitHub</a>
-          <a href="https://www.npmjs.com/package/eslint-plugin-lingui-typescript" class="hover:text-white transition-colors">npm</a>
-          <a href="https://lingui.dev/" class="hover:text-white transition-colors">Lingui</a>
+          <a href="https://github.com/sebastian-software/eslint-plugin-lingui-typescript" class="hover:text-slate-900 transition-colors">GitHub</a>
+          <a href="https://www.npmjs.com/package/eslint-plugin-lingui-typescript" class="hover:text-slate-900 transition-colors">npm</a>
+          <a href="https://lingui.dev/" class="hover:text-slate-900 transition-colors">Lingui</a>
         </div>
         <div class="text-sm">
-          Made with ❤️ by <a href="https://www.sebastian-software.de" class="text-slate-300 hover:text-white transition-colors">Sebastian Software</a>
+          Made with <svg class="w-4 h-4 inline text-red-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> by <a href="https://www.sebastian-software.de" class="text-slate-700 hover:text-slate-900 transition-colors">Sebastian Software</a>
         </div>
       </div>
     </div>