From 27e38d98e5ee7ac9bd0a5537de700d224e415d3b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 30 Aug 2025 18:44:18 +0200
Subject: [PATCH] Fix Icon component to use Lucide icons library

- Installed lucide-vue-next package
- Rewrote Icon.vue to use Lucide icons instead of non-existent icon files
- Added comprehensive icon mapping for all commonly used icons
- Build now succeeds without errors
---
 .claude/settings.local.json             |    3 +-
 components/ui/Icon.vue                  |  204 +++-
 components/ui/icons/ChevronDownIcon.vue |    5 -
 package-lock.json                       |   10 +
 package.json                            |    1 +
 pages/profile/mockup.vue                | 1132 +++++++++++++++++++++++
 6 files changed, 1321 insertions(+), 34 deletions(-)
 delete mode 100644 components/ui/icons/ChevronDownIcon.vue
 create mode 100644 pages/profile/mockup.vue

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index ecf7759..d0fdbc3 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -21,7 +21,8 @@
       "Bash(npm install:*)",
       "Bash(git add:*)",
       "Bash(git push:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(npm run build:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/components/ui/Icon.vue b/components/ui/Icon.vue
index ce87314..ea28c4a 100644
--- a/components/ui/Icon.vue
+++ b/components/ui/Icon.vue
@@ -2,48 +2,196 @@
   <component 
     :is="iconComponent" 
     v-if="iconComponent"
-    v-bind="$attrs"
+    :size="size"
+    :stroke-width="strokeWidth"
+    :color="color"
+    class="lucide-icon"
   />
-  <span v-else class="icon-placeholder">
-    {{ name }}
-  </span>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue'
+import { computed } from 'vue'
+import * as icons from 'lucide-vue-next'
 
 interface Props {
   name: string
+  size?: number | string
+  strokeWidth?: number
+  color?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  strokeWidth: 2,
+  color: 'currentColor'
+})
 
-// Map common icon names to Heroicons components
-// This is a simplified version - in production you'd import the actual icons
-const iconMap: Record<string, any> = {
-  'chevron-down': defineAsyncComponent(() => import('./icons/ChevronDownIcon.vue')),
-  'chevron-up': defineAsyncComponent(() => import('./icons/ChevronUpIcon.vue')),
-  'x': defineAsyncComponent(() => import('./icons/XIcon.vue')),
-  'check': defineAsyncComponent(() => import('./icons/CheckIcon.vue')),
-  'alert-circle': defineAsyncComponent(() => import('./icons/AlertCircleIcon.vue')),
-  'trending-up': defineAsyncComponent(() => import('./icons/TrendingUpIcon.vue')),
-  'trending-down': defineAsyncComponent(() => import('./icons/TrendingDownIcon.vue')),
-  'minus': defineAsyncComponent(() => import('./icons/MinusIcon.vue')),
+// Convert kebab-case to PascalCase for icon component names
+const toPascalCase = (str: string) => {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
 }
 
-const iconComponent = computed(() => iconMap[props.name])
+const iconComponent = computed(() => {
+  // Handle special cases and common mappings
+  const iconMap: Record<string, string> = {
+    'alert-circle': 'AlertCircle',
+    'chevron-down': 'ChevronDown',
+    'chevron-up': 'ChevronUp',
+    'x': 'X',
+    'check': 'Check',
+    'trending-up': 'TrendingUp',
+    'trending-down': 'TrendingDown',
+    'minus': 'Minus',
+    'search': 'Search',
+    'filter': 'Filter',
+    'calendar': 'Calendar',
+    'map-pin': 'MapPin',
+    'users': 'Users',
+    'clock': 'Clock',
+    'star': 'Star',
+    'grid': 'Grid',
+    'list': 'List',
+    'plus': 'Plus',
+    'user': 'User',
+    'mail': 'Mail',
+    'phone': 'Phone',
+    'globe': 'Globe',
+    'briefcase': 'Briefcase',
+    'building': 'Building',
+    'award': 'Award',
+    'shield': 'Shield',
+    'heart': 'Heart',
+    'edit': 'Edit',
+    'settings': 'Settings',
+    'log-out': 'LogOut',
+    'bell': 'Bell',
+    'home': 'Home',
+    'activity': 'Activity',
+    'message-square': 'MessageSquare',
+    'arrow-right': 'ArrowRight',
+    'external-link': 'ExternalLink',
+    'download': 'Download',
+    'upload': 'Upload',
+    'share': 'Share',
+    'copy': 'Copy',
+    'trash': 'Trash',
+    'eye': 'Eye',
+    'eye-off': 'EyeOff',
+    'lock': 'Lock',
+    'unlock': 'Unlock',
+    'camera': 'Camera',
+    'image': 'Image',
+    'video': 'Video',
+    'file-text': 'FileText',
+    'bar-chart': 'BarChart',
+    'pie-chart': 'PieChart',
+    'dollar-sign': 'DollarSign',
+    'credit-card': 'CreditCard',
+    'gift': 'Gift',
+    'bookmark': 'Bookmark',
+    'tag': 'Tag',
+    'folder': 'Folder',
+    'layers': 'Layers',
+    'zap': 'Zap',
+    'sun': 'Sun',
+    'moon': 'Moon',
+    'more-horizontal': 'MoreHorizontal',
+    'more-vertical': 'MoreVertical',
+    'menu': 'Menu',
+    'arrow-left': 'ArrowLeft',
+    'arrow-up': 'ArrowUp',
+    'arrow-down': 'ArrowDown',
+    'chevron-left': 'ChevronLeft',
+    'chevron-right': 'ChevronRight',
+    'check-circle': 'CheckCircle',
+    'x-circle': 'XCircle',
+    'alert-triangle': 'AlertTriangle',
+    'info': 'Info',
+    'help-circle': 'HelpCircle',
+    'loader': 'Loader',
+    'refresh-cw': 'RefreshCw',
+    'link': 'Link',
+    'paperclip': 'Paperclip',
+    'send': 'Send',
+    'inbox': 'Inbox',
+    'archive': 'Archive',
+    'flag': 'Flag',
+    'save': 'Save',
+    'wifi': 'Wifi',
+    'wifi-off': 'WifiOff',
+    'mic': 'Mic',
+    'mic-off': 'MicOff',
+    'volume': 'Volume',
+    'volume-x': 'VolumeX',
+    'play': 'Play',
+    'pause': 'Pause',
+    'skip-forward': 'SkipForward',
+    'skip-back': 'SkipBack',
+    'maximize': 'Maximize',
+    'minimize': 'Minimize',
+    'expand': 'Expand',
+    'compass': 'Compass',
+    'map': 'Map',
+    'navigation': 'Navigation',
+    'target': 'Target',
+    'crown': 'Crown',
+    'key': 'Key',
+    'code': 'Code',
+    'terminal': 'Terminal',
+    'database': 'Database',
+    'server': 'Server',
+    'cpu': 'Cpu',
+    'hard-drive': 'HardDrive',
+    'monitor': 'Monitor',
+    'smartphone': 'Smartphone',
+    'tablet': 'Tablet',
+    'watch': 'Watch',
+    'printer': 'Printer',
+    'headphones': 'Headphones',
+    'bluetooth': 'Bluetooth',
+    'battery': 'Battery',
+    'battery-charging': 'BatteryCharging',
+    'clipboard': 'Clipboard',
+    'hash': 'Hash',
+    'at-sign': 'AtSign',
+    'percent': 'Percent',
+    'thumbs-up': 'ThumbsUp',
+    'thumbs-down': 'ThumbsDown',
+    'smile': 'Smile',
+    'frown': 'Frown',
+    'coffee': 'Coffee',
+    'shopping-cart': 'ShoppingCart',
+    'shopping-bag': 'ShoppingBag',
+    'package': 'Package',
+    'truck': 'Truck',
+    'book': 'Book',
+    'book-open': 'BookOpen',
+    'feather': 'Feather',
+    'sliders': 'Sliders',
+    'toggle-left': 'ToggleLeft',
+    'toggle-right': 'ToggleRight',
+    'power': 'Power',
+    'log-in': 'LogIn',
+    'circle': 'Circle',
+    'square': 'Square',
+    'triangle': 'Triangle'
+  }
+  
+  // Get the icon name from the map or convert from kebab-case
+  const iconName = iconMap[props.name] || toPascalCase(props.name)
+  
+  // Return the icon component from lucide-vue-next
+  return (icons as any)[iconName] || (icons as any)[iconName + 'Icon'] || null
+})
 </script>
 
 <style scoped>
-.icon-placeholder {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1em;
-  height: 1em;
-  font-size: 0.75em;
-  color: currentColor;
-  background: rgba(220, 38, 38, 0.1);
-  border-radius: 4px;
+.lucide-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
 }
 </style>
\ No newline at end of file
diff --git a/components/ui/icons/ChevronDownIcon.vue b/components/ui/icons/ChevronDownIcon.vue
deleted file mode 100644
index 7b0a457..0000000
--- a/components/ui/icons/ChevronDownIcon.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-  </svg>
-</template>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 480b40e..f8c7c01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "handlebars": "^4.7.8",
         "jsonwebtoken": "^9.0.2",
         "libphonenumber-js": "^1.12.10",
+        "lucide-vue-next": "^0.542.0",
         "mime-types": "^3.0.1",
         "minio": "^8.0.5",
         "nodemailer": "^7.0.5",
@@ -11535,6 +11536,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.542.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.542.0.tgz",
+      "integrity": "sha512-cJfyhFoneDgYTouHwUJEutXaCW5EQuRrBsvfELudWnMiwfqvcEtpZTFZLdZ5Nrqow+znzn+Iyhu3KeYIfa3mEg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/luxon": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.1.tgz",
diff --git a/package.json b/package.json
index 08e798a..4b6b7b2 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "handlebars": "^4.7.8",
     "jsonwebtoken": "^9.0.2",
     "libphonenumber-js": "^1.12.10",
+    "lucide-vue-next": "^0.542.0",
     "mime-types": "^3.0.1",
     "minio": "^8.0.5",
     "nodemailer": "^7.0.5",
diff --git a/pages/profile/mockup.vue b/pages/profile/mockup.vue
new file mode 100644
index 0000000..568d99e
--- /dev/null
+++ b/pages/profile/mockup.vue
@@ -0,0 +1,1132 @@
+<template>
+  <div class="profile-mockup">
+    <!-- Profile Header -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: -20 }"
+      :enter="{ opacity: 1, y: 0 }"
+      class="profile-header"
+    >
+      <div class="profile-header__background">
+        <div class="profile-header__gradient"></div>
+      </div>
+      
+      <div class="profile-header__content">
+        <div class="profile-header__avatar-section">
+          <div class="profile-avatar">
+            <img 
+              v-if="profile.avatar" 
+              :src="profile.avatar" 
+              :alt="profile.name" 
+            />
+            <div v-else class="profile-avatar__placeholder">
+              {{ initials }}
+            </div>
+            <button class="profile-avatar__edit">
+              <span>📷</span>
+            </button>
+          </div>
+          
+          <div class="profile-status">
+            <span class="profile-status__indicator"></span>
+            <span class="profile-status__text">Online</span>
+          </div>
+        </div>
+        
+        <div class="profile-header__info">
+          <h1 class="profile-name">{{ profile.name }}</h1>
+          <p class="profile-title">{{ profile.title }} at {{ profile.company }}</p>
+          <p class="profile-bio">{{ profile.bio }}</p>
+          
+          <div class="profile-badges">
+            <span class="badge badge--verified">✓ Verified Member</span>
+            <span class="badge badge--board">Board Member</span>
+            <span class="badge badge--year">Member Since {{ profile.memberSince }}</span>
+          </div>
+        </div>
+        
+        <div class="profile-header__actions">
+          <MonacoButton variant="primary" icon="edit">
+            Edit Profile
+          </MonacoButton>
+          <MonacoButton variant="glass" icon="share">
+            Share
+          </MonacoButton>
+          <MonacoButton variant="ghost" icon="settings">
+            Settings
+          </MonacoButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Stats Overview -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: 20 }"
+      :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
+      class="profile-stats"
+    >
+      <div class="stat-card" v-for="stat in stats" :key="stat.label">
+        <span class="stat-card__value">{{ stat.value }}</span>
+        <span class="stat-card__label">{{ stat.label }}</span>
+      </div>
+    </div>
+
+    <!-- Main Content Grid -->
+    <div class="profile-grid">
+      <!-- Left Column -->
+      <div class="profile-grid__sidebar">
+        <!-- Contact Information -->
+        <GlassCard 
+          title="Contact Information" 
+          variant="glass"
+          :delay="300"
+        >
+          <div class="contact-list">
+            <div class="contact-item">
+              <span class="contact-item__icon">✉</span>
+              <div class="contact-item__content">
+                <span class="contact-item__label">Email</span>
+                <span class="contact-item__value">{{ profile.email }}</span>
+              </div>
+            </div>
+            <div class="contact-item">
+              <span class="contact-item__icon">📱</span>
+              <div class="contact-item__content">
+                <span class="contact-item__label">Phone</span>
+                <span class="contact-item__value">{{ profile.phone }}</span>
+              </div>
+            </div>
+            <div class="contact-item">
+              <span class="contact-item__icon">🔗</span>
+              <div class="contact-item__content">
+                <span class="contact-item__label">LinkedIn</span>
+                <a class="contact-item__value contact-item__value--link">
+                  {{ profile.linkedin }}
+                </a>
+              </div>
+            </div>
+            <div class="contact-item">
+              <span class="contact-item__icon">📍</span>
+              <div class="contact-item__content">
+                <span class="contact-item__label">Location</span>
+                <span class="contact-item__value">{{ profile.location }}</span>
+              </div>
+            </div>
+          </div>
+        </GlassCard>
+
+        <!-- Skills & Expertise -->
+        <GlassCard 
+          title="Skills & Expertise" 
+          variant="glass"
+          :delay="400"
+        >
+          <div class="skills-cloud">
+            <span 
+              v-for="skill in profile.skills" 
+              :key="skill"
+              class="skill-tag"
+              :class="`skill-tag--${getSkillLevel(skill)}`"
+            >
+              {{ skill }}
+            </span>
+          </div>
+        </GlassCard>
+
+        <!-- Membership Details -->
+        <GlassCard 
+          title="Membership" 
+          variant="gradient"
+          :delay="500"
+        >
+          <div class="membership-details">
+            <div class="membership-item">
+              <span class="membership-item__label">Status</span>
+              <span class="membership-item__value membership-item__value--active">
+                Active
+              </span>
+            </div>
+            <div class="membership-item">
+              <span class="membership-item__label">Type</span>
+              <span class="membership-item__value">Executive</span>
+            </div>
+            <div class="membership-item">
+              <span class="membership-item__label">Dues</span>
+              <span class="membership-item__value membership-item__value--paid">
+                Paid through 2025
+              </span>
+            </div>
+            <div class="membership-item">
+              <span class="membership-item__label">Next Renewal</span>
+              <span class="membership-item__value">January 2025</span>
+            </div>
+          </div>
+          <MonacoButton variant="primary" size="sm" block>
+            Manage Membership
+          </MonacoButton>
+        </GlassCard>
+      </div>
+
+      <!-- Main Column -->
+      <div class="profile-grid__main">
+        <!-- Activity Timeline -->
+        <GlassCard 
+          title="Recent Activity" 
+          variant="glass"
+          :delay="350"
+        >
+          <div class="timeline">
+            <div 
+              v-for="(activity, index) in activities" 
+              :key="index"
+              v-motion
+              :initial="{ opacity: 0, x: -20 }"
+              :enter="{ 
+                opacity: 1, 
+                x: 0,
+                transition: { delay: 600 + (index * 50) }
+              }"
+              class="timeline-item"
+            >
+              <div class="timeline-item__marker">
+                <span :class="`timeline-icon timeline-icon--${activity.type}`">
+                  {{ activity.icon }}
+                </span>
+              </div>
+              <div class="timeline-item__content">
+                <h4 class="timeline-item__title">{{ activity.title }}</h4>
+                <p class="timeline-item__description">{{ activity.description }}</p>
+                <span class="timeline-item__time">{{ activity.time }}</span>
+              </div>
+            </div>
+          </div>
+        </GlassCard>
+
+        <!-- Achievements -->
+        <GlassCard 
+          title="Achievements" 
+          variant="glass"
+          :delay="450"
+        >
+          <div class="achievements-grid">
+            <div 
+              v-for="achievement in achievements" 
+              :key="achievement.id"
+              class="achievement-card"
+            >
+              <div class="achievement-card__icon">{{ achievement.icon }}</div>
+              <h4 class="achievement-card__title">{{ achievement.title }}</h4>
+              <p class="achievement-card__description">{{ achievement.description }}</p>
+              <span class="achievement-card__date">{{ achievement.date }}</span>
+            </div>
+          </div>
+        </GlassCard>
+
+        <!-- Events Attended -->
+        <GlassCard 
+          title="Events Attended" 
+          variant="glass"
+          :delay="550"
+        >
+          <div class="events-list">
+            <div 
+              v-for="event in eventsAttended" 
+              :key="event.id"
+              class="event-mini"
+            >
+              <div class="event-mini__date">
+                <span class="event-mini__day">{{ event.day }}</span>
+                <span class="event-mini__month">{{ event.month }}</span>
+              </div>
+              <div class="event-mini__info">
+                <h4 class="event-mini__title">{{ event.title }}</h4>
+                <p class="event-mini__role">{{ event.role }}</p>
+              </div>
+            </div>
+          </div>
+          <MonacoButton variant="ghost" size="sm" block>
+            View All Events
+          </MonacoButton>
+        </GlassCard>
+      </div>
+
+      <!-- Right Column -->
+      <div class="profile-grid__aside">
+        <!-- Quick Stats -->
+        <GlassCard 
+          variant="glass"
+          :delay="400"
+        >
+          <h3 class="card-title">Network Stats</h3>
+          <div class="quick-stats">
+            <div class="quick-stat">
+              <span class="quick-stat__icon">👥</span>
+              <span class="quick-stat__value">234</span>
+              <span class="quick-stat__label">Connections</span>
+            </div>
+            <div class="quick-stat">
+              <span class="quick-stat__icon">📅</span>
+              <span class="quick-stat__value">45</span>
+              <span class="quick-stat__label">Events</span>
+            </div>
+            <div class="quick-stat">
+              <span class="quick-stat__icon">🏆</span>
+              <span class="quick-stat__value">12</span>
+              <span class="quick-stat__label">Awards</span>
+            </div>
+          </div>
+        </GlassCard>
+
+        <!-- Connected Members -->
+        <GlassCard 
+          title="Connections" 
+          variant="glass"
+          :delay="500"
+        >
+          <div class="connections-list">
+            <div 
+              v-for="connection in connections" 
+              :key="connection.id"
+              class="connection-item"
+            >
+              <img 
+                v-if="connection.avatar" 
+                :src="connection.avatar" 
+                :alt="connection.name"
+                class="connection-item__avatar"
+              />
+              <div v-else class="connection-item__avatar-placeholder">
+                {{ connection.name.split(' ').map(n => n[0]).join('') }}
+              </div>
+              <div class="connection-item__info">
+                <h5 class="connection-item__name">{{ connection.name }}</h5>
+                <p class="connection-item__title">{{ connection.title }}</p>
+              </div>
+            </div>
+          </div>
+          <MonacoButton variant="primary" size="sm" block>
+            View All Connections
+          </MonacoButton>
+        </GlassCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import GlassCard from '~/components/ui/GlassCard.vue'
+import MonacoButton from '~/components/ui/MonacoButton.vue'
+
+const profile = ref({
+  name: 'Alexandra Martin',
+  title: 'CEO & Founder',
+  company: 'Monaco Ventures',
+  bio: 'Passionate about fostering Monaco-US business relationships and cultural exchange. Leading innovation in international commerce.',
+  avatar: '/api/placeholder/200/200',
+  email: 'alexandra@monacoventures.com',
+  phone: '+1 (555) 123-4567',
+  linkedin: 'linkedin.com/in/alexandra-martin',
+  location: 'Monaco & New York',
+  memberSince: '2021',
+  skills: [
+    'Leadership', 'Strategy', 'Investment', 'International Business',
+    'Networking', 'Public Speaking', 'Venture Capital', 'M&A'
+  ]
+})
+
+const initials = computed(() => {
+  return profile.value.name.split(' ').map(n => n[0]).join('').toUpperCase()
+})
+
+const stats = ref([
+  { label: 'Years Active', value: '3' },
+  { label: 'Events Hosted', value: '24' },
+  { label: 'Connections', value: '234' },
+  { label: 'Contributions', value: '156' }
+])
+
+const activities = ref([
+  {
+    type: 'event',
+    icon: '📅',
+    title: 'Attended Monaco Winter Gala',
+    description: 'Networked with 50+ members at the annual gala',
+    time: '2 days ago'
+  },
+  {
+    type: 'achievement',
+    icon: '🏆',
+    title: 'Earned Top Contributor Badge',
+    description: 'Recognized for outstanding community engagement',
+    time: '1 week ago'
+  },
+  {
+    type: 'connection',
+    icon: '🤝',
+    title: 'Connected with 5 new members',
+    description: 'Expanded network in the Tech sector',
+    time: '2 weeks ago'
+  },
+  {
+    type: 'post',
+    icon: '📝',
+    title: 'Published article on Monaco innovation',
+    description: 'Shared insights on emerging markets',
+    time: '3 weeks ago'
+  }
+])
+
+const achievements = ref([
+  {
+    id: 1,
+    icon: '🌟',
+    title: 'Founding Member',
+    description: 'One of the first 100 members',
+    date: 'March 2021'
+  },
+  {
+    id: 2,
+    icon: '🎯',
+    title: 'Event Champion',
+    description: 'Hosted 10+ successful events',
+    date: 'June 2023'
+  },
+  {
+    id: 3,
+    icon: '💎',
+    title: 'Diamond Contributor',
+    description: 'Top 1% activity level',
+    date: 'December 2023'
+  }
+])
+
+const eventsAttended = ref([
+  { id: 1, day: '15', month: 'DEC', title: 'Winter Gala 2024', role: 'Speaker' },
+  { id: 2, day: '01', month: 'NOV', title: 'Business Summit', role: 'Attendee' },
+  { id: 3, day: '20', month: 'OCT', title: 'Tech Innovation Day', role: 'Panelist' }
+])
+
+const connections = ref([
+  { id: 1, name: 'John Doe', title: 'CFO at TechCorp', avatar: '/api/placeholder/40/40' },
+  { id: 2, name: 'Sarah Smith', title: 'Director at Monaco Bank', avatar: '' },
+  { id: 3, name: 'Marc Blanc', title: 'Partner at Law Firm', avatar: '/api/placeholder/40/40' },
+  { id: 4, name: 'Lisa Chen', title: 'VP Marketing', avatar: '/api/placeholder/40/40' }
+])
+
+const getSkillLevel = (skill: string) => {
+  const expertSkills = ['Leadership', 'Strategy', 'Investment']
+  const advancedSkills = ['International Business', 'Networking']
+  
+  if (expertSkills.includes(skill)) return 'expert'
+  if (advancedSkills.includes(skill)) return 'advanced'
+  return 'intermediate'
+}
+</script>
+
+<style scoped lang="scss">
+.profile-mockup {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 0 2rem;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  min-height: 100vh;
+}
+
+.profile-header {
+  position: relative;
+  margin-bottom: 2rem;
+  
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 250px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  }
+  
+  &__gradient {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(255, 255, 255, 0.1) 50%,
+      rgba(255, 255, 255, 0.3) 100%
+    );
+  }
+  
+  &__content {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    gap: 2rem;
+    padding: 2rem 2rem 2rem;
+    z-index: 1;
+  }
+  
+  &__avatar-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  &__info {
+    flex: 1;
+    padding-top: 4rem;
+  }
+  
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+    padding-top: 4rem;
+  }
+}
+
+.profile-avatar {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  border-radius: 20px;
+  overflow: hidden;
+  background: white;
+  padding: 4px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 16px;
+  }
+  
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+    border-radius: 16px;
+    font-size: 3rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
+  
+  &__edit {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: all 0.2s;
+    
+    &:hover {
+      transform: scale(1.1);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+.profile-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  &__indicator {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: #10b981;
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+  }
+  
+  &__text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #10b981;
+  }
+}
+
+.profile-name {
+  margin: 0 0 0.5rem;
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.profile-title {
+  margin: 0 0 1rem;
+  font-size: 1.125rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.profile-bio {
+  margin: 0 0 1.5rem;
+  font-size: 1rem;
+  color: #27272a;
+  max-width: 600px;
+}
+
+.profile-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.badge {
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  
+  &--verified {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+  }
+  
+  &--board {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+  }
+  
+  &--year {
+    background: rgba(107, 114, 128, 0.1);
+    color: #6b7280;
+  }
+}
+
+.profile-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
+  padding: 0 2rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  
+  &__value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #dc2626;
+    margin-bottom: 0.25rem;
+  }
+  
+  &__label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+}
+
+.profile-grid {
+  display: grid;
+  grid-template-columns: 320px 1fr 280px;
+  gap: 1.5rem;
+  padding: 0 2rem;
+  
+  &__sidebar,
+  &__main,
+  &__aside {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+}
+
+.contact-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.contact-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    background: rgba(220, 38, 38, 0.1);
+    border-radius: 8px;
+    font-size: 1rem;
+  }
+  
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  
+  &__label {
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+  
+  &__value {
+    font-size: 0.875rem;
+    color: #27272a;
+    word-break: break-all;
+    
+    &--link {
+      color: #dc2626;
+      cursor: pointer;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.skills-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.skill-tag {
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  cursor: pointer;
+  
+  &--expert {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+  }
+  
+  &--advanced {
+    background: rgba(220, 38, 38, 0.15);
+    color: #dc2626;
+  }
+  
+  &--intermediate {
+    background: rgba(107, 114, 128, 0.1);
+    color: #6b7280;
+  }
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.membership-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.membership-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  
+  &__label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  &__value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #27272a;
+    
+    &--active {
+      color: #10b981;
+    }
+    
+    &--paid {
+      color: #10b981;
+    }
+  }
+}
+
+.timeline {
+  position: relative;
+  padding-left: 2rem;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0.75rem;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(
+      to bottom,
+      #dc2626 0%,
+      rgba(220, 38, 38, 0.1) 100%
+    );
+  }
+}
+
+.timeline-item {
+  position: relative;
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  
+  &__marker {
+    position: absolute;
+    left: -2rem;
+  }
+  
+  &__content {
+    flex: 1;
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 12px;
+    transition: all 0.2s;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.7);
+      transform: translateX(4px);
+    }
+  }
+  
+  &__title {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__description {
+    margin: 0 0 0.5rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  &__time {
+    font-size: 0.75rem;
+    color: #a3a3a3;
+  }
+}
+
+.timeline-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-size: 0.875rem;
+  
+  &--event {
+    background: rgba(168, 85, 247, 0.1);
+  }
+  
+  &--achievement {
+    background: rgba(251, 146, 60, 0.1);
+  }
+  
+  &--connection {
+    background: rgba(59, 130, 246, 0.1);
+  }
+  
+  &--post {
+    background: rgba(16, 185, 129, 0.1);
+  }
+}
+
+.achievements-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.achievement-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem;
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.05) 0%, 
+    rgba(220, 38, 38, 0.02) 100%);
+  border-radius: 12px;
+  text-align: center;
+  transition: all 0.2s;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  }
+  
+  &__icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  &__title {
+    margin: 0 0 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__description {
+    margin: 0 0 0.5rem;
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+  
+  &__date {
+    font-size: 0.75rem;
+    color: #dc2626;
+    font-weight: 500;
+  }
+}
+
+.events-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.event-mini {
+  display: flex;
+  gap: 1rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.7);
+    transform: translateX(4px);
+  }
+  
+  &__date {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: white;
+    border-radius: 8px;
+    flex-shrink: 0;
+  }
+  
+  &__day {
+    font-size: 1.125rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+  
+  &__month {
+    font-size: 0.625rem;
+    text-transform: uppercase;
+  }
+  
+  &__info {
+    flex: 1;
+  }
+  
+  &__title {
+    margin: 0 0 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__role {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #6b7280;
+  }
+}
+
+.card-title {
+  margin: 0 0 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.quick-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.quick-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 0.5rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  
+  &__icon {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  &__value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #dc2626;
+    margin-bottom: 0.25rem;
+  }
+  
+  &__label {
+    font-size: 0.625rem;
+    color: #6b7280;
+    text-align: center;
+  }
+}
+
+.connections-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.connection-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+  cursor: pointer;
+  
+  &:hover {
+    background: rgba(220, 38, 38, 0.05);
+  }
+  
+  &__avatar,
+  &__avatar-placeholder {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 8px;
+    flex-shrink: 0;
+  }
+  
+  &__avatar {
+    object-fit: cover;
+  }
+  
+  &__avatar-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #dc2626;
+  }
+  
+  &__info {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  &__name {
+    margin: 0 0 0.125rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #27272a;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  &__title {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// Animations
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+// Responsive
+@media (max-width: 1200px) {
+  .profile-grid {
+    grid-template-columns: 280px 1fr;
+    
+    &__aside {
+      grid-column: 1 / -1;
+      order: 3;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .profile-header__content {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .profile-header__actions {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .profile-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .achievements-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file