feat: replace legacy emojis with professional lucide icons

apps/web/package.json

@@ -12,7 +12,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"dependencies": {
-		"@devcard/shared": "workspace:*"
+		"@devcard/shared": "workspace:*",
+		"lucide-svelte": "^1.0.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",

apps/web/src/routes/+page.svelte

@@ -1,5 +1,17 @@
 <script>
   import { onMount } from 'svelte';
+  import {
+    Moon,
+    Sun,
+    Zap,
+    Star,
+    ChevronDown,
+    Link,
+    CreditCard,
+    Smartphone,
+    Lock,
+    Globe,
+  } from 'lucide-svelte';
 
   let theme = 'light';
 
@@ -36,9 +48,15 @@
       on:click={toggleTheme}
       aria-label="Toggle theme"
     >
-      {theme === 'light' ? '🌙' : '☀️'}
+      {#if theme === 'light'}
+        <Moon size={20} />
+      {:else}
+        <Sun size={20} />
+      {/if}
     </button>
-    <div class="logo">⚡</div>
+    <div class="logo">
+      <Zap size={64} strokeWidth={2.5} fill="currentColor" />
+    </div>
     <h1>DevCard</h1>
     <p class="tagline">One Tap. Every Profile. Every Platform.</p>
     <p class="description">
@@ -52,55 +70,57 @@
         target="_blank"
         rel="noopener"
       >
-        ⭐ Star on GitHub
+        <Star size={18} fill="currentColor" /> Star on GitHub
+      </a>
+      <a href="#features" class="btn btn-secondary">
+        Learn More <ChevronDown size={18} />
       </a>
-      <a href="#features" class="btn btn-secondary">Learn More ↓</a>
     </div>
   </section>
 
   <section id="features" class="features">
     <div class="feature-card">
-      <div class="feature-icon">🔗</div>
+      <div class="feature-icon"><Link size={32} /></div>
       <h3>One Card, All Profiles</h3>
       <p>
         GitHub, LinkedIn, Twitter/X, Devfolio, GitLab, LeetCode, and 10+ more —
         all in one card.
       </p>
     </div>
     <div class="feature-card">
-      <div class="feature-icon">⚡</div>
+      <div class="feature-icon"><Zap size={32} /></div>
       <h3>Hybrid Follow Engine</h3>
       <p>
         Follow on GitHub silently via API. Connect on LinkedIn with one tap in
         WebView. No app switching.
       </p>
     </div>
     <div class="feature-card">
-      <div class="feature-icon">💳</div>
+      <div class="feature-icon"><CreditCard size={32} /></div>
       <h3>Context Cards</h3>
       <p>
         Share your "Professional" card at conferences and "Hackathon" card at
         hack events. Same profiles, different contexts.
       </p>
     </div>
     <div class="feature-card">
-      <div class="feature-icon">📱</div>
+      <div class="feature-icon"><Smartphone size={32} /></div>
       <h3>QR + AirDrop</h3>
       <p>
         Generate a QR code or share via AirDrop-style link. Works even if the
         receiver doesn't have the app.
       </p>
     </div>
     <div class="feature-card">
-      <div class="feature-icon">🔒</div>
+      <div class="feature-icon"><Lock size={32} /></div>
       <h3>Privacy First</h3>
       <p>
         No data monetization. No tracking. Apache 2.0 licensed. You own your
         data.
       </p>
     </div>
     <div class="feature-card">
-      <div class="feature-icon">🌍</div>
+      <div class="feature-icon"><Globe size={32} /></div>
       <h3>Open Source</h3>
       <p>
         Community-driven development. Contribute, self-host, or extend with your

apps/web/src/routes/u/[username]/+page.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
   import { PLATFORMS, getProfileUrl } from '@devcard/shared';
+  import {
+    Frown,
+    ArrowLeft,
+    ArrowRight,
+    Zap,
+  } from 'lucide-svelte';
 
   let { data } = $props();
   const profile = data.profile;
@@ -28,10 +34,10 @@
 {#if error || !profile}
   <main class="error-page">
     <div class="error-content">
-      <div class="error-emoji">😕</div>
+      <div class="error-emoji"><Frown size={64} /></div>
       <h1>User Not Found</h1>
       <p>This DevCard doesn't exist or has been removed.</p>
-      <a href="/" class="home-link">← Back to DevCard</a>
+      <a href="/" class="home-link"><ArrowLeft size={18} style="display: inline; vertical-align: middle; margin-right: 4px;" /> Back to DevCard</a>
     </div>
   </main>
 {:else}
@@ -79,7 +85,7 @@
               <span class="tile-name">{platform?.name || link.platform}</span>
               <span class="tile-username">{link.username}</span>
             </div>
-            <span class="tile-arrow">→</span>
+            <span class="tile-arrow"><ArrowRight size={18} /></span>
           </a>
         {/each}
       </div>
@@ -88,7 +94,9 @@
     <!-- Get DevCard CTA -->
     <div class="get-devcard">
       <p>Want your own DevCard?</p>
-      <a href="/" class="cta-link">Get your DevCard ⚡</a>
+      <a href="/" class="cta-link">
+        Get your DevCard <Zap size={18} style="display: inline; vertical-align: middle; margin-left: 2px;" fill="currentColor" />
+      </a>
     </div>
 
     <footer class="footer">