diff --git a/apps/web/src/lib/components/ActivityHeatmap.svelte b/apps/web/src/lib/components/ActivityHeatmap.svelte
new file mode 100644
index 00000000..acb0577a
--- /dev/null
+++ b/apps/web/src/lib/components/ActivityHeatmap.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  // Generate some dummy data for the heatmap
+  // 52 weeks * 7 days
+  const weeks = 52;
+  const daysPerWeek = 7;
+  
+  let heatmapData = $state<{ intensity: number, date: Date }[][]>([]);
+  
+  onMount(() => {
+    const today = new Date();
+    const generatedData = [];
+    for (let w = 0; w < weeks; w++) {
+      let weekData = [];
+      for (let d = 0; d < daysPerWeek; d++) {
+        const date = new Date(today);
+        date.setDate(date.getDate() - ((weeks - 1 - w) * 7 + (6 - d)));
+        const random = Math.random();
+        let intensity = 0;
+        if (random > 0.85) intensity = 4;
+        else if (random > 0.7) intensity = 3;
+        else if (random > 0.5) intensity = 2;
+        else if (random > 0.3) intensity = 1;
+        
+        weekData.push({ intensity, date });
+      }
+      generatedData.push(weekData);
+    }
+    heatmapData = generatedData;
+  });
+
+  function getIntensityColor(intensity: number): string {
+    switch(intensity) {
+      case 1: return 'var(--color-level-1)';
+      case 2: return 'var(--color-level-2)';
+      case 3: return 'var(--color-level-3)';
+      case 4: return 'var(--color-level-4)';
+      default: return 'var(--color-level-0)';
+    }
+  }
+</script>
+
+<div class="heatmap-container glass">
+  <div class="heatmap-header">
+    <h3>Realtime Contributor Activity</h3>
+    <span class="pulse-indicator">
+      <span class="pulse-dot"></span> Live
+    </span>
+  </div>
+  
+  <div class="heatmap-scroll-wrapper">
+    <div class="heatmap-grid">
+      {#each heatmapData as week, wIndex}
+        <div class="week">
+          {#each week as day, dIndex}
+            <div 
+              class="day" 
+              role="button"
+              aria-label="Contribution activity on {day.date.toDateString()}"
+              tabindex="0"
+              style="background-color: {getIntensityColor(day.intensity)};"
+              title="{day.date.toDateString()}: {day.intensity * 3} contributions"
+            ></div>
+          {/each}
+        </div>
+      {/each}
+    </div>
+  </div>
+  
+  <div class="heatmap-legend">
+    <span class="legend-text">Less</span>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-0);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-1);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-2);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-3);"></div>
+    <div class="day" role="button" aria-label="Contribution activity" style="background-color: var(--color-level-4);"></div>
+    <span class="legend-text">More</span>
+  </div>
+</div>
+
+<style>
+  .heatmap-container {
+    --color-level-0: rgba(100, 116, 139, 0.1);
+    --color-level-1: rgba(99, 102, 241, 0.4);
+    --color-level-2: rgba(99, 102, 241, 0.6);
+    --color-level-3: rgba(99, 102, 241, 0.8);
+    --color-level-4: var(--primary);
+    
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .heatmap-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .heatmap-header h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+  }
+
+  .pulse-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    font-weight: 500;
+  }
+
+  .pulse-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #22c55e;
+    border-radius: 50%;
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+    animation: pulse 2s infinite;
+  }
+
+  @keyframes pulse {
+    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
+    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+  }
+
+  .heatmap-scroll-wrapper {
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+  }
+
+  /* Custom scrollbar for heatmap */
+  .heatmap-scroll-wrapper::-webkit-scrollbar {
+    height: 6px;
+  }
+  .heatmap-scroll-wrapper::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+    border-radius: 999px;
+  }
+  .heatmap-scroll-wrapper::-webkit-scrollbar-thumb {
+    background: rgba(99, 102, 241, 0.3);
+    border-radius: 999px;
+  }
+
+  .heatmap-grid {
+    display: flex;
+    gap: 4px;
+    min-width: max-content;
+  }
+
+  .week {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .day {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    cursor: pointer;
+  }
+
+  .day:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 8px var(--primary-glow);
+    z-index: 10;
+  }
+
+  .heatmap-legend {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: flex-end;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+  
+  .legend-text {
+    margin: 0 0.25rem;
+  }
+</style>
diff --git a/apps/web/src/lib/components/AnalyticsWidget.svelte b/apps/web/src/lib/components/AnalyticsWidget.svelte
new file mode 100644
index 00000000..17d25bfe
--- /dev/null
+++ b/apps/web/src/lib/components/AnalyticsWidget.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+
+  let { 
+    title, 
+    value, 
+    trend, 
+    isPositive = true, 
+    icon = '📊' 
+  } = $props<{
+    title: string;
+    value: string;
+    trend: string;
+    isPositive?: boolean;
+    icon?: string;
+  }>();
+</script>
+
+<div class="analytics-widget glass">
+  <div class="widget-header">
+    <div class="icon-wrapper">
+      <span class="icon">{icon}</span>
+    </div>
+    <span class="trend {isPositive ? 'positive' : 'negative'}">
+      {isPositive ? '↑' : '↓'} {trend}
+    </span>
+  </div>
+  
+  <div class="widget-content">
+    <h3 class="title">{title}</h3>
+    <div class="value gradient-text">{value}</div>
+  </div>
+</div>
+
+<style>
+  .analytics-widget {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+    cursor: default;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .analytics-widget::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at top right, var(--primary-glow), transparent 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  }
+
+  .analytics-widget:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .analytics-widget:hover::before {
+    opacity: 1;
+  }
+
+  .widget-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .icon-wrapper {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: var(--bg-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-glass);
+  }
+  
+  .icon {
+    font-size: 1.25rem;
+  }
+
+  .trend {
+    font-size: 0.875rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+  }
+
+  .trend.positive {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+  }
+
+  .trend.negative {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+  }
+
+  .widget-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .title {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-family: 'Inter', sans-serif;
+  }
+
+  .value {
+    font-size: 2.25rem;
+    font-weight: 800;
+    font-family: 'Outfit', sans-serif;
+  }
+</style>
diff --git a/apps/web/src/lib/components/ContributionForecastChart.svelte b/apps/web/src/lib/components/ContributionForecastChart.svelte
new file mode 100644
index 00000000..a8f1b5cc
--- /dev/null
+++ b/apps/web/src/lib/components/ContributionForecastChart.svelte
@@ -0,0 +1,208 @@
+<script lang="ts">
+  let {
+    historicalData = [30, 45, 40, 60, 75, 70],
+    predictedData = [70, 85, 95, 110, 105, 120],
+    labels = ['W1', 'W2', 'W3', 'W4', 'W5', 'W6'],
+    title = '30-Day Contribution Forecast'
+  } = $props<{
+    historicalData?: number[];
+    predictedData?: number[];
+    labels?: string[];
+    title?: string;
+  }>();
+
+  let maxVal = $derived(Math.max(...historicalData, ...predictedData) * 1.1);
+  
+  // Calculate coordinates for SVG paths
+  function getPathData(data: number[], width: number, height: number): string {
+    if (!data.length) return '';
+    const stepX = width / (data.length - 1);
+    
+    return data.map((val, i) => {
+      const x = i * stepX;
+      const y = height - (val / maxVal) * height;
+      return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+    }).join(' ');
+  }
+
+  function getAreaPathData(data: number[], width: number, height: number): string {
+    if (!data.length) return '';
+    const linePath = getPathData(data, width, height);
+    return `${linePath} L ${width} ${height} L 0 ${height} Z`;
+  }
+</script>
+
+<div class="forecast-chart glass">
+  <div class="header">
+    <h3>{title}</h3>
+    <div class="legend">
+      <span class="legend-item"><span class="swatch historical"></span> Historical</span>
+      <span class="legend-item"><span class="swatch predicted"></span> Predicted</span>
+    </div>
+  </div>
+
+  <div class="chart-container" role="img" aria-label="Line chart showing historical and predicted contribution trends over 6 weeks">
+    <!-- SVG viewBox size provides a normalized coordinate system -->
+    <svg viewBox="0 0 400 200" preserveAspectRatio="none" class="chart-svg">
+      <!-- Grid lines -->
+      <line x1="0" y1="50" x2="400" y2="50" class="grid-line" />
+      <line x1="0" y1="100" x2="400" y2="100" class="grid-line" />
+      <line x1="0" y1="150" x2="400" y2="150" class="grid-line" />
+      <line x1="0" y1="200" x2="400" y2="200" class="grid-line" />
+
+      <!-- Historical Data Area and Line -->
+      <path d={getAreaPathData(historicalData, 400, 200)} class="area-historical" />
+      <path d={getPathData(historicalData, 400, 200)} class="line-historical" />
+
+      <!-- Predicted Data Area and Line -->
+      <!-- We offset the start to connect with the end of historical data for visual flow -->
+      <path d={getAreaPathData([historicalData[historicalData.length-1], ...predictedData.slice(1)], 400, 200)} class="area-predicted" />
+      <path d={getPathData([historicalData[historicalData.length-1], ...predictedData.slice(1)], 400, 200)} class="line-predicted" />
+      
+      <!-- Interactive Points -->
+      {#each historicalData as val, i}
+        <circle cx={(i / (historicalData.length - 1)) * 400} cy={200 - (val / maxVal) * 200} r="4" class="point-historical">
+          <title>{labels[i]}: {val} contributions</title>
+        </circle>
+      {/each}
+
+      {#each predictedData.slice(1) as val, i}
+        <circle cx={((i + 1) / (predictedData.length - 1)) * 400} cy={200 - (val / maxVal) * 200} r="4" class="point-predicted">
+          <title>{labels[i+1]} (Predicted): {val} contributions</title>
+        </circle>
+      {/each}
+    </svg>
+
+    <div class="x-axis">
+      {#each labels as label}
+        <span>{label}</span>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .forecast-chart {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    height: 100%;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .legend {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
+  .swatch {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+  }
+
+  .swatch.historical { background: rgba(99, 102, 241, 0.8); }
+  .swatch.predicted { background: rgba(139, 92, 246, 0.8); }
+
+  .chart-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-height: 200px;
+  }
+
+  .chart-svg {
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    overflow: visible;
+  }
+
+  .grid-line {
+    stroke: rgba(255, 255, 255, 0.05);
+    stroke-width: 1;
+    stroke-dasharray: 4;
+  }
+
+  .line-historical {
+    fill: none;
+    stroke: var(--primary);
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .area-historical {
+    fill: rgba(99, 102, 241, 0.1);
+  }
+
+  .line-predicted {
+    fill: none;
+    stroke: #8b5cf6;
+    stroke-width: 3;
+    stroke-dasharray: 6 4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    animation: dash 20s linear infinite;
+  }
+
+  .area-predicted {
+    fill: rgba(139, 92, 246, 0.1);
+  }
+
+  @keyframes dash {
+    to {
+      stroke-dashoffset: -100;
+    }
+  }
+
+  .point-historical {
+    fill: var(--bg-primary);
+    stroke: var(--primary);
+    stroke-width: 2;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .point-predicted {
+    fill: var(--bg-primary);
+    stroke: #8b5cf6;
+    stroke-width: 2;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .point-historical:hover, .point-predicted:hover {
+    transform: scale(1.5);
+  }
+
+  .x-axis {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+  }
+</style>
diff --git a/apps/web/src/lib/components/ContributionRadar.svelte b/apps/web/src/lib/components/ContributionRadar.svelte
new file mode 100644
index 00000000..dc6951d6
--- /dev/null
+++ b/apps/web/src/lib/components/ContributionRadar.svelte
@@ -0,0 +1,193 @@
+<script lang="ts">
+  let {
+    data = [
+      { label: 'Frontend', value: 85 },
+      { label: 'Backend', value: 60 },
+      { label: 'DevOps', value: 40 },
+      { label: 'Community', value: 75 },
+      { label: 'Architecture', value: 50 }
+    ],
+    size = 240
+  } = $props<{
+    data?: { label: string, value: number }[];
+    size?: number;
+  }>();
+
+  // Radar chart logic
+  let center = $derived(size / 2);
+  let radius = $derived(center * 0.7); // Leave room for labels
+  let sides = $derived(data.length);
+  let angle = $derived((Math.PI * 2) / sides);
+
+  // Calculate coordinates for a given value (0-100) at a specific index
+  function getCoordinates(value: number, index: number) {
+    const r = (value / 100) * radius;
+    // -Math.PI/2 to start at the top
+    const theta = index * angle - Math.PI / 2;
+    return {
+      x: center + r * Math.cos(theta),
+      y: center + r * Math.sin(theta)
+    };
+  }
+
+  // Generate the polygon points string for the data
+  let dataPoints = $derived(
+    data.map((d, i) => {
+      const { x, y } = getCoordinates(d.value, i);
+      return `${x},${y}`;
+    }).join(' ')
+  );
+
+  // Generate grid levels (20, 40, 60, 80, 100)
+  let gridLevels = [20, 40, 60, 80, 100];
+  
+  function getGridPolygon(level: number) {
+    let points = [];
+    for (let i = 0; i < sides; i++) {
+      const { x, y } = getCoordinates(level, i);
+      points.push(`${x},${y}`);
+    }
+    return points.join(' ');
+  }
+
+  // Generate label coordinates
+  let labels = $derived(
+    data.map((d, i) => {
+      // Push labels out slightly further than 100%
+      const { x, y } = getCoordinates(120, i);
+      return { x, y, text: d.label };
+    })
+  );
+</script>
+
+<div class="radar-container glass">
+  <h3>Contribution Radar</h3>
+  
+  <div class="svg-wrapper">
+    <svg width={size} height={size} viewBox="0 0 {size} {size}">
+      <!-- Grid polygons -->
+      {#each gridLevels as level}
+        <polygon 
+          points={getGridPolygon(level)} 
+          class="grid-polygon" 
+        />
+      {/each}
+
+      <!-- Axes lines -->
+      {#each data as _, i}
+        {@const { x, y } = getCoordinates(100, i)}
+        <line 
+          x1={center} y1={center} 
+          x2={x} y2={y} 
+          class="axis-line" 
+        />
+      {/each}
+
+      <!-- Data Polygon -->
+      <polygon 
+        points={dataPoints} 
+        class="data-polygon" 
+      />
+
+      <!-- Data Points -->
+      {#each data as d, i}
+        {@const { x, y } = getCoordinates(d.value, i)}
+        <circle 
+          cx={x} cy={y} r="4" 
+          class="data-point" 
+          role="button"
+          aria-label="{d.label}: {d.value}%"
+          tabindex="0"
+        >
+          <title>{d.label}: {d.value}%</title>
+        </circle>
+      {/each}
+
+      <!-- Labels -->
+      {#each labels as label}
+        <text 
+          x={label.x} y={label.y} 
+          class="radar-label"
+          text-anchor="middle"
+          dominant-baseline="middle"
+        >
+          {label.text}
+        </text>
+      {/each}
+    </svg>
+  </div>
+</div>
+
+<style>
+  .radar-container {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    height: 100%;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+    align-self: flex-start;
+  }
+
+  .svg-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .grid-polygon {
+    fill: rgba(255, 255, 255, 0.02);
+    stroke: rgba(255, 255, 255, 0.1);
+    stroke-width: 1;
+  }
+
+  .axis-line {
+    stroke: rgba(255, 255, 255, 0.1);
+    stroke-width: 1;
+  }
+
+  .data-polygon {
+    fill: rgba(99, 102, 241, 0.3);
+    stroke: var(--primary);
+    stroke-width: 2;
+    stroke-linejoin: round;
+    transition: all 0.3s ease;
+  }
+
+  .data-polygon:hover {
+    fill: rgba(99, 102, 241, 0.45);
+  }
+
+  .data-point {
+    fill: var(--bg-primary);
+    stroke: var(--primary);
+    stroke-width: 2;
+    cursor: pointer;
+    transition: transform 0.2s ease, stroke-width 0.2s ease;
+  }
+
+  .data-point:hover, .data-point:focus-visible {
+    transform: scale(1.5);
+    stroke-width: 3;
+    outline: none;
+  }
+
+  .data-point:focus-visible {
+    stroke: #818cf8;
+  }
+
+  .radar-label {
+    fill: var(--text-secondary);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+</style>
diff --git a/apps/web/src/lib/components/GrowthRadar.svelte b/apps/web/src/lib/components/GrowthRadar.svelte
new file mode 100644
index 00000000..f778d526
--- /dev/null
+++ b/apps/web/src/lib/components/GrowthRadar.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+  let {
+    data = [
+      { label: 'Consistency', value: 90 },
+      { label: 'Reach', value: 65 },
+      { label: 'Engagement', value: 80 },
+      { label: 'Visibility', value: 70 },
+      { label: 'Velocity', value: 85 }
+    ],
+    size = 240
+  } = $props<{
+    data?: { label: string, value: number }[];
+    size?: number;
+  }>();
+
+  // Radar chart math identical to ContributionRadar but heavily optimized
+  let center = $derived(size / 2);
+  let radius = $derived(center * 0.65); // Give labels a bit more breathing room
+  let sides = $derived(data.length);
+  let angle = $derived((Math.PI * 2) / sides);
+
+  function getCoordinates(value: number, index: number) {
+    const r = (value / 100) * radius;
+    const theta = index * angle - Math.PI / 2;
+    return {
+      x: center + r * Math.cos(theta),
+      y: center + r * Math.sin(theta)
+    };
+  }
+
+  let dataPoints = $derived(
+    data.map((d, i) => `${getCoordinates(d.value, i).x},${getCoordinates(d.value, i).y}`).join(' ')
+  );
+
+  let gridLevels = [25, 50, 75, 100];
+  
+  function getGridPolygon(level: number) {
+    return Array.from({ length: sides }).map((_, i) => {
+      const { x, y } = getCoordinates(level, i);
+      return `${x},${y}`;
+    }).join(' ');
+  }
+</script>
+
+<div class="radar-container glass">
+  <h3>Growth Analytics Radar</h3>
+  
+  <div class="svg-wrapper">
+    <svg width={size} height={size} viewBox="0 0 {size} {size}" role="img" aria-label="Radar chart showing multi-dimensional growth metrics">
+      <!-- Grid polygons -->
+      {#each gridLevels as level}
+        <polygon points={getGridPolygon(level)} class="grid-polygon" />
+      {/each}
+
+      <!-- Axes lines -->
+      {#each data as _, i}
+        {@const { x, y } = getCoordinates(100, i)}
+        <line x1={center} y1={center} x2={x} y2={y} class="axis-line" />
+      {/each}
+
+      <!-- Data Polygon -->
+      <polygon points={dataPoints} class="data-polygon" />
+
+      <!-- Data Points -->
+      {#each data as d, i}
+        {@const { x, y } = getCoordinates(d.value, i)}
+        <circle cx={x} cy={y} r="5" class="data-point" role="button" tabindex="0">
+          <title>{d.label}: {d.value}%</title>
+        </circle>
+      {/each}
+
+      <!-- Labels -->
+      {#each data as d, i}
+        {@const { x, y } = getCoordinates(125, i)}
+        <text 
+          x={x} y={y} 
+          class="radar-label"
+          text-anchor="middle"
+          dominant-baseline="middle"
+        >
+          {d.label}
+        </text>
+      {/each}
+    </svg>
+  </div>
+</div>
+
+<style>
+  .radar-container {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    height: 100%;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+    align-self: flex-start;
+  }
+
+  .svg-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .grid-polygon {
+    fill: rgba(255, 255, 255, 0.02);
+    stroke: rgba(255, 255, 255, 0.08);
+    stroke-width: 1;
+  }
+
+  .axis-line {
+    stroke: rgba(255, 255, 255, 0.08);
+    stroke-width: 1;
+    stroke-dasharray: 4;
+  }
+
+  .data-polygon {
+    fill: rgba(139, 92, 246, 0.25);
+    stroke: #8b5cf6;
+    stroke-width: 2;
+    stroke-linejoin: round;
+    transition: all 0.3s ease;
+  }
+
+  .data-polygon:hover {
+    fill: rgba(139, 92, 246, 0.4);
+  }
+
+  .data-point {
+    fill: var(--bg-primary);
+    stroke: #8b5cf6;
+    stroke-width: 2;
+    cursor: pointer;
+    transition: transform 0.2s ease, stroke-width 0.2s ease;
+  }
+
+  .data-point:hover, .data-point:focus-visible {
+    transform: scale(1.5);
+    stroke-width: 3;
+    outline: none;
+  }
+
+  .radar-label {
+    fill: var(--text-secondary);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+</style>
diff --git a/apps/web/src/lib/components/MomentumInsights.svelte b/apps/web/src/lib/components/MomentumInsights.svelte
new file mode 100644
index 00000000..6cc2d944
--- /dev/null
+++ b/apps/web/src/lib/components/MomentumInsights.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  let {
+    insights = [
+      { type: 'positive', text: 'You are on a <strong>14-day contribution streak</strong>! Predicted to hit 21 days based on velocity.' },
+      { type: 'warning', text: 'Your networking reach has decreased by 5% this week. Engage with 3 new issues to recover momentum.' },
+      { type: 'neutral', text: 'OSS Engagement is stable. Your next major tier milestone is 150 points away.' }
+    ]
+  } = $props<{
+    insights?: { type: 'positive' | 'warning' | 'neutral', text: string }[];
+  }>();
+</script>
+
+<div class="momentum-insights glass">
+  <div class="header">
+    <h3>⚡ Momentum Insights</h3>
+  </div>
+  
+  <ul class="insights-list">
+    {#each insights as insight}
+      <li class="insight-item {insight.type}">
+        <span class="indicator"></span>
+        <p class="insight-text">{@html insight.text}</p>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .momentum-insights {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    height: 100%;
+  }
+
+  .header h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .insights-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0;
+    margin: 0;
+    flex: 1;
+  }
+
+  .insight-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    background: rgba(255, 255, 255, 0.02);
+    padding: 1rem;
+    border-radius: var(--radius);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: transform 0.2s ease, background 0.2s ease;
+  }
+
+  .insight-item:hover {
+    transform: translateX(4px);
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .indicator {
+    min-width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-top: 0.4rem;
+  }
+
+  .insight-item.positive .indicator { background-color: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.4); }
+  .insight-item.warning .indicator { background-color: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.4); }
+  .insight-item.neutral .indicator { background-color: var(--primary); box-shadow: 0 0 8px rgba(99,102,241,0.4); }
+
+  .insight-text {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--text-secondary);
+    margin: 0;
+  }
+
+  /* Since we use @html, we need global targeting for the strong tag */
+  :global(.insight-text strong) {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+</style>
diff --git a/apps/web/src/lib/components/OSSImpactGraph.svelte b/apps/web/src/lib/components/OSSImpactGraph.svelte
new file mode 100644
index 00000000..3fe7518b
--- /dev/null
+++ b/apps/web/src/lib/components/OSSImpactGraph.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+  let {
+    data = [
+      { label: 'Jan', value: 45 },
+      { label: 'Feb', value: 72 },
+      { label: 'Mar', value: 58 },
+      { label: 'Apr', value: 89 },
+      { label: 'May', value: 114 },
+      { label: 'Jun', value: 92 }
+    ],
+    title = 'OSS Impact (Commits/PRs)',
+    maxExpected = 150
+  } = $props<{
+    data?: { label: string, value: number }[];
+    title?: string;
+    maxExpected?: number;
+  }>();
+
+  let maxVal = $derived(Math.max(...data.map(d => d.value), maxExpected));
+</script>
+
+<div class="impact-graph glass">
+  <div class="graph-header">
+    <h3>{title}</h3>
+  </div>
+
+  <div class="graph-container">
+    <div class="y-axis">
+      <span>{maxVal}</span>
+      <span>{Math.round(maxVal / 2)}</span>
+      <span>0</span>
+    </div>
+    
+    <div class="bars-area">
+      {#each data as item}
+        <div class="bar-group">
+          <div 
+            class="bar" 
+            style="height: {(item.value / maxVal) * 100}%"
+            title="{item.value} contributions in {item.label}"
+            role="button"
+            aria-label="{item.value} contributions in {item.label}"
+            tabindex="0"
+          >
+            <div class="bar-fill"></div>
+          </div>
+          <span class="x-label">{item.label}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .impact-graph {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    height: 100%;
+  }
+
+  .graph-header h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .graph-container {
+    display: flex;
+    flex: 1;
+    gap: 1rem;
+    min-height: 200px;
+  }
+
+  .y-axis {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    padding-bottom: 24px; /* Space for x-labels */
+    text-align: right;
+  }
+
+  .bars-area {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 24px; /* Space for x-labels */
+    position: relative;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .bar-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+    position: relative;
+    width: 32px;
+  }
+
+  .bar {
+    width: 100%;
+    background: rgba(99, 102, 241, 0.15);
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .bar-fill {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background: linear-gradient(to top, rgba(99, 102, 241, 0.6), var(--primary));
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+  }
+
+  .bar:hover, .bar:focus-visible {
+    transform: translateY(-2px);
+    background: rgba(99, 102, 241, 0.25);
+  }
+
+  .bar:hover .bar-fill, .bar:focus-visible .bar-fill {
+    opacity: 1;
+    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
+  }
+
+  .bar:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 4px;
+  }
+
+  .x-label {
+    position: absolute;
+    bottom: -24px;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+</style>
diff --git a/apps/web/src/lib/components/ReputationScoreCard.svelte b/apps/web/src/lib/components/ReputationScoreCard.svelte
new file mode 100644
index 00000000..f59f4133
--- /dev/null
+++ b/apps/web/src/lib/components/ReputationScoreCard.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+  let { 
+    score = 850,
+    tier = 'Diamond',
+    rank = 42,
+    percentile = 'Top 1%',
+    trend = '+15'
+  } = $props<{
+    score?: number;
+    tier?: string;
+    rank?: number;
+    percentile?: string;
+    trend?: string;
+  }>();
+
+  // Basic animation for score could be added later, static for now
+</script>
+
+<div class="reputation-card glass">
+  <div class="header">
+    <div class="title-group">
+      <h3>AI Reputation Score</h3>
+      <span class="tier-badge {tier.toLowerCase()}">{tier} Tier</span>
+    </div>
+    <div class="trend positive">
+      ↑ {trend} pts
+    </div>
+  </div>
+
+  <div class="score-display">
+    <svg class="progress-ring" width="120" height="120" viewBox="0 0 120 120">
+      <circle class="ring-bg" cx="60" cy="60" r="54" />
+      <circle 
+        class="ring-progress {tier.toLowerCase()}" 
+        cx="60" cy="60" r="54" 
+        stroke-dasharray="339.292" 
+        stroke-dashoffset="{339.292 - (339.292 * (score / 1000))}" 
+      />
+    </svg>
+    <div class="score-value">
+      <span class="number">{score}</span>
+      <span class="label">/ 1000</span>
+    </div>
+  </div>
+
+  <div class="stats-footer">
+    <div class="stat">
+      <span class="stat-label">Global Rank</span>
+      <span class="stat-value">#{rank}</span>
+    </div>
+    <div class="divider"></div>
+    <div class="stat">
+      <span class="stat-label">Percentile</span>
+      <span class="stat-value">{percentile}</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .reputation-card {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .tier-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    width: max-content;
+  }
+
+  .tier-badge.diamond { background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
+  .tier-badge.gold { background: rgba(250, 204, 21, 0.15); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.3); }
+  .tier-badge.silver { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }
+
+  .trend {
+    font-size: 0.875rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+  }
+
+  .trend.positive {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+  }
+
+  .score-display {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 0;
+  }
+
+  .progress-ring {
+    transform: rotate(-90deg);
+  }
+
+  .ring-bg {
+    fill: none;
+    stroke: rgba(255, 255, 255, 0.05);
+    stroke-width: 8;
+  }
+
+  .ring-progress {
+    fill: none;
+    stroke-width: 8;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 1s ease-out;
+  }
+
+  .ring-progress.diamond { stroke: #818cf8; }
+  .ring-progress.gold { stroke: #facc15; }
+  .ring-progress.silver { stroke: #94a3b8; }
+
+  .score-value {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .score-value .number {
+    font-size: 2.5rem;
+    font-weight: 800;
+    font-family: 'Outfit', sans-serif;
+    color: var(--text-primary);
+    line-height: 1;
+  }
+
+  .score-value .label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+  }
+
+  .stats-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1.25rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1;
+  }
+
+  .stat:last-child {
+    text-align: right;
+  }
+
+  .divider {
+    width: 1px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .stat-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .stat-value {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+</style>
diff --git a/apps/web/src/lib/components/VelocityScoreCard.svelte b/apps/web/src/lib/components/VelocityScoreCard.svelte
new file mode 100644
index 00000000..cc8971cd
--- /dev/null
+++ b/apps/web/src/lib/components/VelocityScoreCard.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+  let { 
+    velocityScore = 1240,
+    growthPercentage = '+28%',
+    predictedScore = 1450,
+    confidence = 'High',
+    status = 'Surging'
+  } = $props<{
+    velocityScore?: number;
+    growthPercentage?: string;
+    predictedScore?: number;
+    confidence?: string;
+    status?: string;
+  }>();
+</script>
+
+<div class="velocity-card glass">
+  <div class="header">
+    <div class="title-group">
+      <h3>Contribution Velocity</h3>
+      <span class="status-badge {status.toLowerCase()}">{status}</span>
+    </div>
+    <div class="growth">
+      {growthPercentage}
+    </div>
+  </div>
+
+  <div class="score-display">
+    <div class="current-score">
+      <span class="number">{velocityScore}</span>
+      <span class="label">Current Momentum</span>
+    </div>
+    
+    <div class="divider"></div>
+
+    <div class="predicted-score">
+      <span class="number gradient-text">{predictedScore}</span>
+      <span class="label">Predicted (30d)</span>
+    </div>
+  </div>
+
+  <div class="footer">
+    <div class="confidence">
+      <span class="pulse-dot"></span>
+      AI Confidence: <strong>{confidence}</strong>
+    </div>
+  </div>
+</div>
+
+<style>
+  .velocity-card {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    margin: 0;
+  }
+
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    width: max-content;
+  }
+
+  .status-badge.surging { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); }
+  .status-badge.stable { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
+
+  .growth {
+    font-size: 0.875rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+  }
+
+  .score-display {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+  }
+
+  .current-score, .predicted-score {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .number {
+    font-size: 2.25rem;
+    font-weight: 800;
+    font-family: 'Outfit', sans-serif;
+    color: var(--text-primary);
+  }
+
+  .label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .divider {
+    width: 1px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .confidence {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+  }
+
+  .confidence strong {
+    color: var(--text-primary);
+  }
+
+  .pulse-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #8b5cf6;
+    border-radius: 50%;
+    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
+    animation: pulse 2s infinite;
+  }
+
+  @keyframes pulse {
+    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(139, 92, 246, 0); }
+    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
+  }
+</style>
diff --git a/apps/web/src/routes/dashboard/+page.svelte b/apps/web/src/routes/dashboard/+page.svelte
new file mode 100644
index 00000000..7854eb11
--- /dev/null
+++ b/apps/web/src/routes/dashboard/+page.svelte
@@ -0,0 +1,284 @@
+<script lang="ts">
+  import AnalyticsWidget from '$lib/components/AnalyticsWidget.svelte';
+  import ActivityHeatmap from '$lib/components/ActivityHeatmap.svelte';
+  import ReputationScoreCard from '$lib/components/ReputationScoreCard.svelte';
+  import OSSImpactGraph from '$lib/components/OSSImpactGraph.svelte';
+  import ContributionRadar from '$lib/components/ContributionRadar.svelte';
+  import VelocityScoreCard from '$lib/components/VelocityScoreCard.svelte';
+  import ContributionForecastChart from '$lib/components/ContributionForecastChart.svelte';
+  import MomentumInsights from '$lib/components/MomentumInsights.svelte';
+  import GrowthRadar from '$lib/components/GrowthRadar.svelte';
+
+  // Sample data for the dashboard
+  const stats = [
+    { title: 'Total Contributions', value: '1,429', trend: '12%', isPositive: true, icon: '🔥' },
+    { title: 'Merge Success Rate', value: '98.5%', trend: '2.1%', isPositive: true, icon: '✅' },
+    { title: 'Avg PR Review Time', value: '2.4h', trend: '1.2h', isPositive: false, icon: '⏱️' },
+    { title: 'Global Rank (GSSOC)', value: '#42', trend: '15', isPositive: true, icon: '🏆' }
+  ];
+</script>
+
+<svelte:head>
+  <title>Analytics Command Center | DevCard</title>
+</svelte:head>
+
+<div class="dashboard-layout">
+  <header class="dashboard-header">
+    <div class="title-group">
+      <h1 class="gradient-text">GitHub Analytics Command Center</h1>
+      <p class="subtitle">Realtime insights into contributor intelligence and repository health.</p>
+    </div>
+    <div class="actions">
+      <button class="btn-secondary">Export Report</button>
+      <button class="btn-primary">Sync GitHub</button>
+    </div>
+  </header>
+
+  <main class="dashboard-content">
+    <section class="kpi-grid">
+      {#each stats as stat}
+        <AnalyticsWidget 
+          title={stat.title} 
+          value={stat.value} 
+          trend={stat.trend} 
+          isPositive={stat.isPositive} 
+          icon={stat.icon} 
+        />
+      {/each}
+    </section>
+
+    <section class="main-widgets">
+      <div class="heatmap-section">
+        <ActivityHeatmap />
+      </div>
+      
+      <div class="ai-insights glass">
+        <div class="insights-header">
+          <h3>🤖 AI Contribution Insights</h3>
+        </div>
+        <ul class="insights-list">
+          <li class="insight-item positive">
+            <span class="bullet"></span>
+            <p><strong>High merge probability</strong> detected for your recent frontend PRs based on historical maintainer behavior.</p>
+          </li>
+          <li class="insight-item warning">
+            <span class="bullet"></span>
+            <p>Your PR review time is slightly above average today. Consider smaller, isolated commits.</p>
+          </li>
+          <li class="insight-item neutral">
+            <span class="bullet"></span>
+            <p>Found 3 open issues matching your <strong>React/Next.js</strong> skillset with "critical" priority.</p>
+          </li>
+        </ul>
+        <button class="btn-secondary view-all">View All Insights</button>
+      </div>
+    </section>
+
+    <div class="section-title">
+      <h2>AI Reputation & Impact</h2>
+    </div>
+
+    <section class="reputation-widgets">
+      <div class="rep-card">
+        <ReputationScoreCard />
+      </div>
+      <div class="rep-graph">
+        <OSSImpactGraph />
+      </div>
+      <div class="rep-radar">
+        <ContributionRadar />
+      </div>
+    </section>
+
+    <div class="section-title">
+      <h2>Contribution Velocity Predictor</h2>
+    </div>
+
+    <section class="velocity-widgets">
+      <div class="velocity-card-wrapper">
+        <VelocityScoreCard />
+        <MomentumInsights />
+      </div>
+      <div class="velocity-graph">
+        <ContributionForecastChart />
+      </div>
+      <div class="velocity-radar">
+        <GrowthRadar />
+      </div>
+    </section>
+  </main>
+</div>
+
+<style>
+  .dashboard-layout {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+
+  .dashboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+  }
+
+  .title-group h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .subtitle {
+    color: var(--text-secondary);
+    font-size: 1.125rem;
+    font-weight: 500;
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .dashboard-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  .kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .main-widgets {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 1024px) {
+    .main-widgets {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .ai-insights {
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .insights-header h3 {
+    font-size: 1.25rem;
+    color: var(--text-primary);
+  }
+
+  .insights-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    flex-grow: 1;
+  }
+
+  .insight-item {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: var(--text-secondary);
+  }
+
+  .bullet {
+    min-width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-top: 0.4rem;
+  }
+
+  .insight-item.positive .bullet { background-color: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.4); }
+  .insight-item.warning .bullet { background-color: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.4); }
+  .insight-item.neutral .bullet { background-color: var(--primary); box-shadow: 0 0 8px rgba(99,102,241,0.4); }
+
+  .insight-item p strong {
+    color: var(--text-primary);
+  }
+
+  .view-all {
+    width: 100%;
+    margin-top: auto;
+  }
+
+  .section-title {
+    margin-top: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .section-title h2 {
+    font-size: 1.5rem;
+    color: var(--text-primary);
+  }
+
+  .reputation-widgets {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 1200px) {
+    .reputation-widgets {
+      grid-template-columns: 1fr 1fr;
+    }
+    .rep-graph {
+      grid-column: span 2;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .reputation-widgets {
+      grid-template-columns: 1fr;
+    }
+    .rep-graph {
+      grid-column: span 1;
+    }
+  }
+
+  .velocity-widgets {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr 1fr;
+    gap: 1.5rem;
+  }
+
+  .velocity-card-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 1200px) {
+    .velocity-widgets {
+      grid-template-columns: 1fr 1fr;
+    }
+    .velocity-graph {
+      grid-column: span 2;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .velocity-widgets {
+      grid-template-columns: 1fr;
+    }
+    .velocity-graph {
+      grid-column: span 1;
+    }
+  }
+</style>