From 2fe43622fd8a1be494fed162e4c74560767946f3 Mon Sep 17 00:00:00 2001
From: KGFCH2 <babinbid05@gmail.com>
Date: Fri, 15 May 2026 16:58:42 +0530
Subject: [PATCH] feat: replace legacy emojis with professional lucide icons

---
 apps/web/package.json                         |  3 +-
 apps/web/src/routes/+page.svelte              | 40 ++++++++++++++-----
 apps/web/src/routes/u/[username]/+page.svelte | 16 ++++++--
 pnpm-lock.yaml                                | 13 ++++++
 4 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 3601215..bbc0f02 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 363a491..00d5cfd 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/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,15 +70,17 @@
         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 —
@@ -68,7 +88,7 @@
       </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
@@ -76,7 +96,7 @@
       </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
@@ -84,7 +104,7 @@
       </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
@@ -92,7 +112,7 @@
       </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
@@ -100,7 +120,7 @@
       </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
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index f7750ec..178dbe8 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/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">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2637abe..6c366d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,6 +193,9 @@ importers:
       '@devcard/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      lucide-svelte:
+        specifier: ^1.0.1
+        version: 1.0.1(svelte@5.53.10)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^7.0.0
@@ -1925,6 +1928,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@vitest/expect@2.1.9':
     resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
@@ -3701,6 +3705,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-svelte@1.0.1:
+    resolution: {integrity: sha512-WvzZgk0pqzgda+AErLvgWxHkfg/+GgUwqKMRHvzt0IqyMdmyEDzDCk3Z+Wo/3y753oIgx8u9Q4eUbWkghFa8Jg==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -9449,6 +9458,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-svelte@1.0.1(svelte@5.53.10):
+    dependencies:
+      svelte: 5.53.10
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5