adding a profile page

src/layouts/DashboardLayout.vue

@@ -65,13 +65,17 @@ const pageTitle = computed(() => route.meta.title ?? '')
     <!-- Footer -->
     <div class="mx-4 border-t border-white/20" />
     <div class="space-y-0.5 px-4 py-4">
-      <a
+      <RouterLink
-        href="#"
+        to="/profile"
-        class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-white/60 transition-all hover:bg-white/10 hover:text-white"
+        class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200"
+        :class="isActive('/profile')
+          ? 'bg-gradient-primary shadow-primary text-white'
+          : 'text-white/60 hover:bg-white/10 hover:text-white'"
+        @click="sidebarOpen = false"
       >
         <span class="material-icons text-lg leading-none">person</span>
         Profile
-      </a>
+      </RouterLink>
       <a
         href="#"
         class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-white/60 transition-all hover:bg-white/10 hover:text-white"

src/router/index.js

@@ -10,5 +10,6 @@ export default createRouter({
     { path: '/icons',        component: () => import('../views/IconsView.vue'),           meta: { title: 'Icons' } },
     { path: '/maps',         component: () => import('../views/MapsView.vue'),           meta: { title: 'Maps' } },
     { path: '/notifications',component: () => import('../views/NotificationsView.vue'),  meta: { title: 'Notifications' } },
+    { path: '/profile',      component: () => import('../views/ProfileView.vue'),        meta: { title: 'Profile' } },
   ],
 })

src/views/ProfileView.vue

@@ -0,0 +1,240 @@
+<script setup>
+import DashboardLayout from '../layouts/DashboardLayout.vue'
+
+const stats = [
+  { label: 'Followers', value: '4,812' },
+  { label: 'Following', value: '294' },
+  { label: 'Projects', value: '32' },
+]
+
+const socials = [
+  { icon: 'facebook',  color: 'text-blue-600',  label: 'Facebook' },
+  { icon: 'twitter',   color: 'text-sky-500',   label: 'Twitter' },
+  { icon: 'instagram', color: 'text-pink-500',  label: 'Instagram' },
+]
+
+const conversations = [
+  { initials: 'OP', color: 'primary',   name: 'Olivia Park',    preview: 'Hey, I loved the new component library!', time: '5m' },
+  { initials: 'JD', color: 'info',      name: 'James Donovan',  preview: 'Can you review my PR when you get a chance?', time: '22m' },
+  { initials: 'SR', color: 'success',   name: 'Sofia Reyes',    preview: 'The design tokens look great in production.', time: '1h' },
+  { initials: 'ML', color: 'warning',   name: 'Marco Lin',      preview: 'Pushed the icon fix — all shadows resolved.', time: '3h' },
+  { initials: 'AM', color: 'secondary', name: 'Ally Maria',     preview: 'Updated the font preload entries in index.html.', time: '1d' },
+]
+
+const projects = [
+  { name: 'MK Design System',  role: 'Lead',        gradient: 'primary', members: ['PC', 'JD', 'SR'] },
+  { name: 'Dashboard Rework',  role: 'Contributor', gradient: 'info',    members: ['ML', 'AM'] },
+  { name: 'Icon Library',      role: 'Owner',       gradient: 'success', members: ['OP', 'JD'] },
+  { name: 'Typography Scale',  role: 'Reviewer',    gradient: 'warning', members: ['SR', 'ML', 'PC'] },
+]
+
+const memberColor = { PC: 'primary', JD: 'info', SR: 'success', ML: 'warning', AM: 'secondary', OP: 'danger' }
+</script>
+
+<template>
+  <DashboardLayout>
+
+    <!-- Cover + avatar -->
+    <div class="relative mb-20">
+      <div class="h-48 overflow-hidden rounded-2xl bg-gradient-dark shadow-dark">
+        <!-- Decorative grid -->
+        <svg class="h-full w-full opacity-10" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="pgrid" width="40" height="40" patternUnits="userSpaceOnUse">
+              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="0.5"/>
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#pgrid)" />
+        </svg>
+      </div>
+
+      <!-- Avatar -->
+      <div class="absolute -bottom-14 left-8 flex h-28 w-28 items-center justify-center rounded-2xl bg-gradient-primary text-4xl font-bold text-white shadow-primary ring-4 ring-white">
+        EC
+      </div>
+    </div>
+
+    <div class="grid gap-6 lg:grid-cols-3">
+
+      <!-- Left column -->
+      <div class="space-y-6">
+
+        <!-- Identity card -->
+        <div class="rounded-2xl bg-white p-6 shadow-soft-md">
+          <h4 class="text-xl font-bold text-dark">Esthera Carter</h4>
+          <p class="mt-0.5 text-sm text-secondary">Lead Designer · San Francisco, CA</p>
+
+          <!-- Stats -->
+          <div class="mt-5 grid grid-cols-3 divide-x divide-gray-100 rounded-xl border border-gray-100">
+            <div v-for="s in stats" :key="s.label" class="flex flex-col items-center py-3">
+              <span class="text-lg font-bold text-dark">{{ s.value }}</span>
+              <span class="text-xs text-secondary">{{ s.label }}</span>
+            </div>
+          </div>
+
+          <!-- Bio -->
+          <p class="mt-5 text-sm leading-relaxed text-secondary">
+            Building design systems and component libraries. Obsessed with typography,
+            spacing, and making sure every pixel is intentional.
+          </p>
+
+          <!-- Socials -->
+          <div class="mt-5 flex items-center gap-3">
+            <a
+              v-for="s in socials"
+              :key="s.icon"
+              href="#"
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100 transition-colors hover:bg-gray-200"
+              :title="s.label"
+            >
+              <span class="material-icons text-base" :class="s.color">tag</span>
+            </a>
+          </div>
+        </div>
+
+        <!-- Conversations -->
+        <div class="rounded-2xl bg-white p-6 shadow-soft-md">
+          <h6 class="mb-4 text-sm font-bold text-dark">Conversations</h6>
+          <div class="space-y-4">
+            <div
+              v-for="c in conversations"
+              :key="c.name"
+              class="flex items-start gap-3 cursor-pointer group"
+            >
+              <div
+                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-xs font-bold text-white"
+                :class="`bg-gradient-${c.color} shadow-${c.color}`"
+              >
+                {{ c.initials }}
+              </div>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium text-dark group-hover:text-primary transition-colors">{{ c.name }}</p>
+                <p class="text-xs text-secondary truncate">{{ c.preview }}</p>
+              </div>
+              <span class="shrink-0 text-xs text-secondary">{{ c.time }}</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Right column -->
+      <div class="space-y-6 lg:col-span-2">
+
+        <!-- Projects -->
+        <div class="rounded-2xl bg-white p-6 shadow-soft-md">
+          <div class="mb-4 flex items-center justify-between">
+            <h6 class="text-sm font-bold text-dark">Projects</h6>
+            <button class="rounded-lg bg-gradient-primary px-4 py-2 text-xs font-medium text-white shadow-primary">
+              + New
+            </button>
+          </div>
+
+          <div class="grid gap-4 sm:grid-cols-2">
+            <div
+              v-for="p in projects"
+              :key="p.name"
+              class="group relative overflow-hidden rounded-xl border border-gray-100 p-4 transition-shadow hover:shadow-soft-md"
+            >
+              <!-- Gradient accent bar -->
+              <div class="absolute left-0 top-0 h-full w-1 rounded-l-xl" :class="`bg-gradient-${p.gradient}`" />
+
+              <div class="pl-3">
+                <div class="flex items-start justify-between">
+                  <div>
+                    <p class="text-sm font-semibold text-dark">{{ p.name }}</p>
+                    <span
+                      class="mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium"
+                      :class="`bg-${p.gradient}/10 text-${p.gradient}`"
+                    >
+                      {{ p.role }}
+                    </span>
+                  </div>
+                  <button class="text-secondary hover:text-dark">
+                    <span class="material-icons text-base leading-none">more_vert</span>
+                  </button>
+                </div>
+
+                <!-- Member avatars -->
+                <div class="mt-3 flex items-center">
+                  <div class="flex -space-x-2">
+                    <div
+                      v-for="m in p.members"
+                      :key="m"
+                      class="flex h-7 w-7 items-center justify-center rounded-lg text-xs font-bold text-white ring-2 ring-white"
+                      :class="`bg-gradient-${memberColor[m]} shadow-${memberColor[m]}`"
+                      :title="m"
+                    >
+                      {{ m }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Settings -->
+        <div class="rounded-2xl bg-white p-6 shadow-soft-md">
+          <h6 class="mb-5 text-sm font-bold text-dark">Profile Settings</h6>
+          <div class="space-y-4">
+
+            <div class="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label class="mb-1 block text-xs font-medium text-secondary">First Name</label>
+                <input
+                  type="text"
+                  value="Esthera"
+                  class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+                />
+              </div>
+              <div>
+                <label class="mb-1 block text-xs font-medium text-secondary">Last Name</label>
+                <input
+                  type="text"
+                  value="Carter"
+                  class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label class="mb-1 block text-xs font-medium text-secondary">Email Address</label>
+              <input
+                type="email"
+                value="esthera@mkdesign.dev"
+                class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+              />
+            </div>
+
+            <div>
+              <label class="mb-1 block text-xs font-medium text-secondary">Location</label>
+              <input
+                type="text"
+                value="San Francisco, CA"
+                class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
+              />
+            </div>
+
+            <div>
+              <label class="mb-1 block text-xs font-medium text-secondary">Bio</label>
+              <textarea
+                rows="3"
+                class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-dark outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors resize-none"
+              >Building design systems and component libraries. Obsessed with typography, spacing, and making sure every pixel is intentional.</textarea>
+            </div>
+
+            <div class="flex justify-end">
+              <button class="rounded-lg bg-gradient-primary px-6 py-2.5 text-sm font-medium text-white shadow-primary hover:shadow-soft-md transition-shadow">
+                Save Changes
+              </button>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </DashboardLayout>
+</template>