fix(web): fix lucide icon serialization error in Features page

Author: Arun-kushwaha007

apps/web/app/features/page.tsx

@@ -12,37 +12,37 @@ const featureList = [
   {
     title: 'Smart Expense Splitting',
     description: 'Split equally, by exact amounts, or percentages. Our engine handles the math so you don\'t have to.',
-    icon: Zap,
+    iconName: 'Zap' as const,
     colorClass: 'shadow-yellow-500/20',
   },
   {
     title: 'Groups Everywhere',
     description: 'Manage trips, roommates, and teams in dedicated spaces. Perfect for any shared living or travel situation.',
-    icon: Users,
+    iconName: 'Users' as const,
     colorClass: 'shadow-cyan-500/20',
   },
   {
     title: 'Real-Time Sync',
     description: 'Balances update instantly across all devices. No more "I thought I paid that" conversations.',
-    icon: RefreshCw,
+    iconName: 'RefreshCw' as const,
     colorClass: 'shadow-purple-500/20',
   },
   {
     title: 'Receipt Uploads',
     description: 'Attach receipts to expenses for proof. Cloud-based storage ensures you never lose a paper trail.',
-    icon: Shield,
+    iconName: 'Shield' as const,
     colorClass: 'shadow-pink-500/20',
   },
   {
     title: 'Debt Simplification',
     description: 'Reduce multiple payments into a single efficient settlement. We find the shortest path to zero.',
-    icon: Layers,
+    iconName: 'Layers' as const,
     colorClass: 'shadow-green-500/20',
   },
   {
     title: 'Realtime Updates',
     description: 'Socket events update group activity instantly. Get notified the second an expense is added.',
-    icon: Activity,
+    iconName: 'Activity' as const,
     colorClass: 'shadow-orange-500/20',
   },
 ];

apps/web/app/page.tsx

@@ -116,7 +116,7 @@ export default function HomePage() {
       </section>
 
       {/* Stats Section */}
-      <SectionContainer className="stats-section border-y border-white/5 bg-white/[0.02]">
+      {/* <SectionContainer className="stats-section border-y border-white/5 bg-white/[0.02]">
         <div className="grid gap-12 md:grid-cols-3">
           {stats.map((stat) => (
             <div key={stat.label} className="stat-card text-center group">
@@ -132,7 +132,7 @@ export default function HomePage() {
             </div>
           ))}
         </div>
-      </SectionContainer>
+      </SectionContainer> */}
 
       {/* Features Grid */}
       <SectionContainer id="features">

apps/web/components/marketing/FeatureCard.tsx

@@ -1,16 +1,18 @@
 'use client';
 
-import { LucideIcon } from 'lucide-react';
+import * as Icons from 'lucide-react';
 
 interface FeatureCardProps {
   title: string;
   description: string;
-  icon: LucideIcon;
+  iconName: keyof typeof Icons;
   colorClass: string;
   index: number;
 }
 
-export const FeatureCard = ({ title, description, icon: Icon, colorClass }: FeatureCardProps) => {
+export const FeatureCard = ({ title, description, iconName, colorClass }: FeatureCardProps) => {
+  const Icon = (Icons[iconName] as Icons.LucideIcon) || Icons.HelpCircle;
+
   return (
     <div className="glass-card p-10 group hover:bg-zinc-900/80">
       <div className={`mb-8 flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 p-3 shadow-lg ${colorClass} bg-black/40 group-hover:scale-110 transition-transform duration-500`}>