astro-component-kit 0.0.1 → 0.1.1

package/src/components/lib/cards/MinimalLinkCard.astro

@@ -1,12 +1,42 @@
 ---
+/**
+ * MinimalLinkCard — Elegant arrow-link card for site navigation sections.
+ * 
+ * @param {string} title - The text label of the link.
+ * @param {string} href - The destination URL.
+ */
+interface Props {
+  title: string;
+  href: string;
+}
+
+const { title, href } = Astro.props;
 ---
-<a href="#" class="link-card">
-  <span>Documentation</span>
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+
+<a href={href} class="link-card">
+  <span class="link-card__title">{title}</span>
+  <svg class="link-card__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M5 12h14M12 5l7 7-7 7"/>
+  </svg>
 </a>
+
 <style>
-  .link-card { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; text-decoration: none; color: #fff; font-weight: 600; transition: 0.2s; }
-  .link-card:hover { background: rgba(255,255,255,0.06); border-color: #6366f1; color: #818cf8; }
-  svg { transition: transform 0.2s; }
-  .link-card:hover svg { transform: translateX(5px); }
+  .link-card { 
+    display: flex; justify-content: space-between; align-items: center; 
+    padding: var(--sp-6, 1.5rem); 
+    background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-md, 12px); 
+    text-decoration: none; 
+    color: var(--c-text-1, #fff); 
+    font-weight: 600; 
+    transition: 0.2s; 
+  }
+  .link-card:hover { 
+    background: rgba(255,255,255,0.06); 
+    border-color: var(--c-primary, #6366f1); 
+    color: var(--c-primary-light, #818cf8); 
+  }
+  .link-card__icon { transition: transform 0.2s; }
+  .link-card:hover .link-card__icon { transform: translateX(5px); }
 </style>

package/src/components/lib/cards/MusicPlayerMini.astro

@@ -1,21 +1,61 @@
 ---
+/**
+ * MusicPlayerMini — Compact player widget with controls and progress bar.
+ * 
+ * @param {string} title - The song track title.
+ * @param {string} artist - The artist or band name.
+ * @param {string} coverUrl - Optional string matching the album cover image URL.
+ * @param {number} progress - The song progress representation (0 to 100). Default is 40.
+ */
+interface Props {
+  title: string;
+  artist: string;
+  coverUrl?: string;
+  progress?: number;
+}
+
+const { title, artist, coverUrl, progress = 40 } = Astro.props;
 ---
+
 <div class="music-mini">
-  <div class="art"></div>
-  <div class="track">
-    <h4>Moonlight Sonatina</h4>
-    <p>Astro Orchestra</p>
-    <div class="progress"><div class="bar"></div></div>
+  <div class="music-mini__art" style={coverUrl ? `background-image: url('${coverUrl}'); background-size: cover;` : ''}></div>
+  <div class="music-mini__track">
+    <h4 class="music-mini__title">{title}</h4>
+    <p class="music-mini__artist">{artist}</p>
+    <div class="music-mini__progress" role="progressbar" aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100">
+      <div class="music-mini__bar" style={`width: ${progress}%;`}></div>
+    </div>
   </div>
-  <div class="play">▶</div>
+  <button class="music-mini__play" type="button" aria-label="Play track">▶</button>
 </div>
+
 <style>
-  .music-mini { display: flex; align-items: center; gap: 1rem; background: #111; padding: 0.75rem; border-radius: 14px; border: 1px solid #333; width: 100%; max-width: 320px; }
-  .art { width: 50px; height: 50px; background: #818cf8; border-radius: 8px; flex-shrink: 0; }
-  .track { flex: 1; }
-  h4 { font-size: 0.85rem; color: #fff; margin: 0; }
-  p { font-size: 0.7rem; color: #64748b; margin: 0; }
-  .progress { height: 3px; background: #222; border-radius: 2px; margin-top: 8px; position: relative; }
-  .bar { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: #6366f1; border-radius: 2px; }
-  .play { font-size: 1.2rem; cursor: pointer; color: #fff; }
+  .music-mini { 
+    display: flex; align-items: center; gap: var(--sp-4, 1rem); 
+    background: var(--c-bg-elev, #111); 
+    padding: var(--sp-3, 0.75rem); 
+    border-radius: var(--r-md, 14px); border: 1px solid var(--c-border, #333); 
+    width: 100%; max-width: 320px; 
+  }
+  .music-mini__art { 
+    width: 50px; height: 50px; 
+    background-color: var(--c-primary-light, #818cf8); 
+    border-radius: var(--r-sm, 8px); flex-shrink: 0; 
+  }
+  .music-mini__track { flex: 1; }
+  .music-mini__title { font-size: 0.85rem; color: var(--c-text-1, #fff); margin: 0; }
+  .music-mini__artist { font-size: 0.7rem; color: var(--c-text-2, #64748b); margin: 0; }
+  .music-mini__progress { 
+    height: 3px; background: rgba(255,255,255,0.1); 
+    border-radius: 2px; margin-top: 8px; position: relative; overflow: hidden;
+  }
+  .music-mini__bar { 
+    position: absolute; left: 0; top: 0; height: 100%; 
+    background: var(--c-primary, #6366f1); border-radius: 2px; 
+  }
+  .music-mini__play { 
+    font-size: 1.2rem; cursor: pointer; color: var(--c-text-1, #fff); 
+    background: none; border: none; padding: 0.25rem; display: grid; place-items: center;
+  }
+  .music-mini__play:hover { color: var(--c-primary-light, #818cf8); }
 </style>

package/src/components/lib/cards/NeumorphicCard.astro

@@ -1,6 +1,36 @@
 ---
+/**
+ * NeumorphicCard — A soft UI card with deep shadows for a realistic elevated look.
+ * 
+ * @param {'sm'|'md'|'lg'} padding - Optional. Inner padding layout size. Default is 'md'.
+ */
+interface Props {
+  padding?: 'sm' | 'md' | 'lg';
+}
+
+const { padding = 'md' } = Astro.props;
 ---
-<div class="neu-card"><slot /></div>
+
+<div class={`neu-card neu-card--p${padding}`}>
+  <slot />
+</div>
+
 <style>
-  .neu-card { background: #e0e0e0; border-radius: 30px; box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff; padding: 2rem; color: #444; }
+  .neu-card {
+    background: var(--c-bg-elev, #e0e0e0);
+    border-radius: var(--r-xl, 30px);
+    box-shadow: 15px 15px 30px rgba(0,0,0,0.1), -15px -15px 30px rgba(255,255,255,0.7);
+    color: var(--c-text-1, #444);
+    transition: all 0.3s ease;
+  }
+  
+  .neu-card--psm { padding: var(--sp-4, 1rem); }
+  .neu-card--pmd { padding: var(--sp-8, 2rem); }
+  .neu-card--plg { padding: var(--sp-12, 3rem); }
+
+  @media (prefers-color-scheme: dark) {
+    .neu-card {
+      box-shadow: 15px 15px 30px rgba(0,0,0,0.4), -15px -15px 30px rgba(255,255,255,0.05);
+    }
+  }
 </style>

package/src/components/lib/cards/NotificationCard.astro

@@ -1,15 +1,50 @@
 ---
+/**
+ * NotificationCard — Toast-like card for app notifications and alerts.
+ * 
+ * @param {string} title - The notification headline.
+ * @param {string} message - The notification detail text.
+ * @param {'info'|'warning'|'success'|'error'} type - Optional. Changes the notification dot indicator color. Default is 'info'.
+ */
+interface Props {
+  title: string;
+  message: string;
+  type?: 'info' | 'warning' | 'success' | 'error';
+}
+
+const { title, message, type = 'info' } = Astro.props;
 ---
-<div class="notify-card">
-  <div class="dot"></div>
-  <div class="msg">
-    <strong>Updates Available</strong>
-    <p>Version 2.0 is now ready for install.</p>
+
+<div class={`notify-card notify-card--${type}`}>
+  <div class="notify-card__dot" aria-hidden="true"></div>
+  <div class="notify-card__content">
+    <strong class="notify-card__title">{title}</strong>
+    <p class="notify-card__message">{message}</p>
   </div>
 </div>
+
 <style>
-  .notify-card { display: flex; gap: 1rem; padding: 1rem; background: #0f172a; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.4); max-width: 300px; }
-  .dot { width: 8px; height: 8px; background: #6366f1; border-radius: 50%; margin-top: 5px; }
-  .msg p { margin: 2px 0 0; font-size: 0.82rem; color: #94a3b8; }
-  strong { font-size: 0.9rem; color: #fff; }
+  .notify-card { 
+    display: flex; gap: var(--sp-4, 1rem); 
+    padding: var(--sp-4, 1rem); 
+    background: var(--c-bg-elev, #0f172a); 
+    border-radius: var(--r-md, 12px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    box-shadow: 0 10px 40px rgba(0,0,0,0.4); 
+    max-width: 300px; 
+  }
+  .notify-card__dot { 
+    width: 8px; height: 8px; 
+    border-radius: var(--r-full, 50%); 
+    margin-top: 5px; 
+    flex-shrink: 0;
+  }
+  .notify-card__content { flex: 1; }
+  .notify-card__title { font-size: 0.9rem; color: var(--c-text-1, #fff); }
+  .notify-card__message { margin: 2px 0 0; font-size: 0.82rem; color: var(--c-text-2, #94a3b8); line-height: 1.4; }
+  
+  .notify-card--info .notify-card__dot { background: var(--c-primary, #6366f1); }
+  .notify-card--success .notify-card__dot { background: #10b981; }
+  .notify-card--warning .notify-card__dot { background: #f59e0b; }
+  .notify-card--error .notify-card__dot { background: #ef4444; }
 </style>

package/src/components/lib/cards/PricingCard.astro

@@ -1,17 +1,55 @@
 ---
+/**
+ * PricingCard — Optimized card for showing product plans and features.
+ * 
+ * @param {string} plan - The plan name (e.g. "Pro").
+ * @param {string} price - The integer/decimal price value.
+ * @param {boolean} featured - Applies a highlighted styling variant if true.
+ */
 interface Props { plan: string; price: string; featured?: boolean; }
 const { plan, price, featured = false } = Astro.props;
 ---
 <div class:list={["price-card", { "featured": featured }]}>
-  <span class="plan">{plan}</span>
-  <div class="price"><span>$</span>{price}</div>
-  <ul class="features"><li>Unlimited Projects</li><li>24/7 Support</li><li>Custom Domain</li></ul>
-  <button>Choose Plan</button>
+  <span class="price-card__plan">{plan}</span>
+  <div class="price-card__price"><span>$</span>{price}</div>
+  <ul class="price-card__features">
+    <slot />
+  </ul>
+  <button class="price-card__btn" type="button">Choose Plan</button>
 </div>
+
 <style>
-  .price-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
-  .featured { border-color: #6366f1; background: rgba(99,102,241,0.05); transform: scale(1.05); }
-  .price { font-size: 2.5rem; font-weight: 800; color: #fff; }
-  .features { list-style: none; padding: 0; font-size: 0.9rem; color: #94a3b8; }
-  button { background: #6366f1; color: #fff; border: none; padding: 0.8rem; border-radius: 12px; font-weight: 700; cursor: pointer; }
+  .price-card { 
+    background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-xl, 24px); 
+    padding: var(--sp-10, 2.5rem); 
+    display: flex; flex-direction: column; gap: var(--sp-6, 1.5rem); 
+  }
+  .featured { 
+    border-color: var(--c-primary, #6366f1); 
+    background: rgba(99,102,241,0.05); 
+    transform: scale(1.05); 
+  }
+  .price-card__plan { font-size: 1.1rem; font-weight: 600; color: var(--c-text-1, #fff); }
+  .price-card__price { font-size: 2.5rem; font-weight: 800; color: var(--c-text-1, #fff); }
+  .price-card__price span { font-size: 1.2rem; opacity: 0.7; margin-right: 2px; }
+  
+  .price-card__features { 
+    list-style: none; padding: 0; margin: 0;
+    font-size: 0.9rem; color: var(--c-text-2, #94a3b8); 
+    display: flex; flex-direction: column; gap: 0.5rem;
+  }
+  
+  /* Global sub-selector rule to style slotted list items cleanly */
+  .price-card__features :global(li) { position: relative; padding-left: 1.5rem; }
+  .price-card__features :global(li::before) { 
+    content: "✓"; position: absolute; left: 0; color: var(--c-primary, #6366f1); 
+  }
+  
+  .price-card__btn { 
+    background: var(--c-primary, #6366f1); color: #fff; 
+    border: none; padding: 0.8rem; border-radius: var(--r-md, 12px); 
+    font-weight: 700; cursor: pointer; transition: 0.2s;
+  }
 </style>

package/src/components/lib/cards/ProfileCard.astro

@@ -1,17 +1,56 @@
 ---
+/**
+ * ProfileCard — Image-centric profile card with social links and blur effect.
+ * 
+ * @param {string} name - The person's full name.
+ * @param {string} role - Their job title or role.
+ * @param {string} avatarUrl - Optional URL string pointing to their avatar image.
+ */
+interface Props {
+  name: string;
+  role: string;
+  avatarUrl?: string;
+}
+
+const { name, role, avatarUrl } = Astro.props;
 ---
+
 <div class="profile-card">
-  <div class="banner"></div>
-  <div class="avatar"></div>
-  <h3>Sarah Jenkins</h3>
-  <p>Lead Developer</p>
-  <div class="socials"><span>🐦</span><span>💼</span><span>🌐</span></div>
+  <div class="profile-card__banner"></div>
+  <div class="profile-card__avatar" style={avatarUrl ? `background-image: url('${avatarUrl}'); background-size: cover;` : ''}></div>
+  <h3 class="profile-card__name">{name}</h3>
+  <p class="profile-card__role">{role}</p>
+  <div class="profile-card__socials">
+    <slot name="socials">
+      <!-- Fallback generic icons if no socials slot passed -->
+      <span aria-hidden="true">🐦</span>
+      <span aria-hidden="true">💼</span>
+      <span aria-hidden="true">🌐</span>
+    </slot>
+  </div>
 </div>
+
 <style>
-  .profile-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; text-align: center; overflow: hidden; padding-bottom: 1.5rem; }
-  .banner { height: 80px; background: linear-gradient(135deg, #6366f1, #c084fc); }
-  .avatar { width: 80px; height: 80px; background: #334155; border: 4px solid #080b14; border-radius: 50%; margin: -40px auto 1rem; }
-  h3 { color: #fff; margin: 0; }
-  p { font-size: 0.85rem; color: #94a3b8; }
-  .socials { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; cursor: pointer; }
+  .profile-card { 
+    background: rgba(255,255,255,0.03); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-xl, 20px); 
+    text-align: center; 
+    overflow: hidden; 
+    padding-bottom: var(--sp-6, 1.5rem); 
+  }
+  .profile-card__banner { 
+    height: 80px; 
+    background: linear-gradient(135deg, var(--c-primary, #6366f1), var(--c-primary-light, #c084fc)); 
+  }
+  .profile-card__avatar { 
+    width: 80px; height: 80px; 
+    background-color: var(--c-bg-elev, #334155); 
+    border: 4px solid var(--c-bg, #080b14); 
+    border-radius: var(--r-full, 50%); 
+    margin: -40px auto 1rem; 
+  }
+  .profile-card__name { color: var(--c-text-1, #fff); margin: 0; }
+  .profile-card__role { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); margin: 4px 0 0; }
+  .profile-card__socials { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; cursor: pointer; }
 </style>

package/src/components/lib/cards/RetroGameCard.astro

@@ -1,15 +1,43 @@
 ---
+/**
+ * RetroGameCard — Bold gaming card with scanlines and pixel fonts.
+ * 
+ * @param {string} title - The retro game title.
+ * @param {string} level - Current stage or level string.
+ * @param {number|string} score - The player's score.
+ */
+interface Props {
+  title: string;
+  level: string;
+  score: number | string;
+}
+
+const { title, level, score } = Astro.props;
 ---
+
 <div class="retro-game">
-  <div class="scanlines"></div>
-  <div class="screen">LVL 01</div>
-  <h3>SUPER ASTRO</h3>
-  <div class="score">SCORE: 004820</div>
+  <div class="retro-game__scanlines"></div>
+  <div class="retro-game__screen">{level}</div>
+  <h3 class="retro-game__title">{title}</h3>
+  <div class="retro-game__score">SCORE: {score}</div>
 </div>
+
 <style>
-  .retro-game { background: #22c55e; border: 4px solid #000; padding: 1rem; position: relative; box-shadow: 8px 8px 0 #000; font-family: 'Courier New', monospace; }
-  .screen { background: #000; color: #22c55e; padding: 1rem; text-align: center; font-weight: 900; margin-bottom: 0.5rem; }
-  .scanlines { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,0.1) 50%, transparent 50%); background-size: 100% 4px; }
-  h3 { margin: 0; font-size: 1rem; color: #000; }
-  .score { font-size: 0.75rem; color: #000; margin-top: 0.5rem; }
+  .retro-game { 
+    background: #22c55e; border: 4px solid #000; 
+    padding: var(--sp-4, 1rem); position: relative; 
+    box-shadow: 8px 8px 0 #000; 
+    font-family: 'Courier New', Courier, monospace; 
+  }
+  .retro-game__screen { 
+    background: #000; color: #22c55e; 
+    padding: var(--sp-4, 1rem); text-align: center; 
+    font-weight: 900; margin-bottom: 0.5rem; text-transform: uppercase;
+  }
+  .retro-game__scanlines { 
+    position: absolute; inset: 0; pointer-events: none; 
+    background: linear-gradient(rgba(0,0,0,0.1) 50%, transparent 50%); background-size: 100% 4px; 
+  }
+  .retro-game__title { margin: 0; font-size: 1.1rem; color: #000; font-weight: 900; text-transform: uppercase; }
+  .retro-game__score { font-size: 0.8rem; color: #000; margin-top: 0.5rem; font-weight: bold; }
 </style>

package/src/components/lib/cards/StatCard.astro

@@ -1,15 +1,50 @@
 ---
+/**
+ * StatCard — Compact card for displaying key metrics with an icon.
+ * 
+ * @param {string} label - The metric name (e.g., "Total Revenue").
+ * @param {string} value - The primary statistic value (e.g., "$124,590").
+ * @param {string} icon - The emoji or text character representing the stat.
+ */
+interface Props {
+  label: string;
+  value: string;
+  icon: string;
+}
+
+const { label, value, icon } = Astro.props;
 ---
+
 <div class="stat-card">
-  <div class="icon">📈</div>
-  <div>
-    <span class="label">Total Revenue</span>
-    <span class="value">$124,590</span>
+  <div class="stat-card__icon" aria-hidden="true">{icon}</div>
+  <div class="stat-card__info">
+    <span class="stat-card__label">{label}</span>
+    <span class="stat-card__value">{value}</span>
   </div>
 </div>
+
 <style>
-  .stat-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.2); border-radius: 16px; }
-  .icon { font-size: 1.5rem; background: rgba(99,102,241,0.1); width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; }
-  .label { display: block; font-size: 0.8rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
-  .value { display: block; font-size: 1.4rem; font-weight: 800; color: #fff; }
+  .stat-card { 
+    display: flex; align-items: center; gap: var(--sp-5, 1.25rem); 
+    padding: var(--sp-6, 1.5rem); 
+    background: var(--c-bg-elev, rgba(99,102,241,0.06)); 
+    border: 1px solid var(--c-border, rgba(99,102,241,0.2)); 
+    border-radius: var(--r-lg, 16px); 
+  }
+  .stat-card__icon { 
+    font-size: 1.5rem; 
+    background: rgba(99,102,241,0.1); 
+    width: 50px; height: 50px; 
+    display: grid; place-items: center; 
+    border-radius: var(--r-md, 12px); 
+  }
+  .stat-card__label { 
+    display: block; font-size: 0.8rem; 
+    color: var(--c-text-2, #94a3b8); 
+    font-weight: 600; text-transform: uppercase; 
+  }
+  .stat-card__value { 
+    display: block; font-size: 1.4rem; 
+    font-weight: 800; color: var(--c-text-1, #fff); 
+  }
 </style>

package/src/components/lib/cards/TaskKanbanCard.astro

@@ -1,18 +1,57 @@
 ---
+/**
+ * TaskKanbanCard — Agile task card with priority labels and due dates.
+ * 
+ * @param {string} task - The description of the task being managed.
+ * @param {string} date - Visual date string indicator (e.g. "📅 Oct 24").
+ * @param {string} assigneeInitials - Short initials for the user avatar (e.g "MJ").
+ * @param {'low'|'med'|'high'} priority - Controls the appearance of the priority tag label. Default is 'low'.
+ */
+interface Props {
+  task: string;
+  date: string;
+  assigneeInitials: string;
+  priority?: 'low' | 'med' | 'high';
+}
+
+const { task, date, assigneeInitials, priority = 'low' } = Astro.props;
+
+const priorityLabels = { low: 'Low', med: 'Medium', high: 'High' };
 ---
+
 <div class="task-card">
-  <div class="tags"><span class="tag-high">High</span></div>
-  <p>Implement authentication middleware for the API.</p>
-  <div class="task-footer">
-    <span class="date">📅 Oct 24</span>
-    <div class="assign">MJ</div>
+  <div class="task-card__tags">
+    <span class={`task-card__tag task-card__tag--${priority}`}>{priorityLabels[priority]}</span>
+  </div>
+  <p class="task-card__desc">{task}</p>
+  <div class="task-card__footer">
+    <span class="task-card__date">{date}</span>
+    <div class="task-card__assignee">{assigneeInitials}</div>
   </div>
 </div>
+
 <style>
-  .task-card { background: #1e293b; padding: 1rem; border-radius: 10px; border: 1px solid #334155; }
-  .tag-high { background: rgba(239,68,68,0.1); color: #f87171; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
-  p { font-size: 0.85rem; color: #e2e8f0; margin: 0.75rem 0; font-weight: 500; }
-  .task-footer { display: flex; justify-content: space-between; align-items: center; }
-  .date { font-size: 0.75rem; color: #64748b; }
-  .assign { width: 24px; height: 24px; background: #6366f1; color: #fff; font-size: 0.65rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
+  .task-card { 
+    background: var(--c-bg-elev, #1e293b); 
+    padding: var(--sp-4, 1rem); 
+    border-radius: var(--r-md, 10px); 
+    border: 1px solid var(--c-border, #334155); 
+  }
+  .task-card__tag { 
+    font-size: 0.7rem; font-weight: 700; 
+    padding: 2px 8px; border-radius: 4px; 
+  }
+  .task-card__tag--high { background: rgba(239,68,68,0.1); color: #f87171; }
+  .task-card__tag--med { background: rgba(245,158,11,0.1); color: #fbbf24; }
+  .task-card__tag--low { background: rgba(52,211,153,0.1); color: #34d399; }
+  
+  .task-card__desc { font-size: 0.85rem; color: var(--c-text-1, #e2e8f0); margin: 0.75rem 0; font-weight: 500; }
+  .task-card__footer { display: flex; justify-content: space-between; align-items: center; }
+  .task-card__date { font-size: 0.75rem; color: var(--c-text-2, #64748b); }
+  .task-card__assignee { 
+    width: 24px; height: 24px; 
+    background: var(--c-primary, #6366f1); color: #fff; 
+    font-size: 0.65rem; border-radius: 50%; 
+    display: grid; place-items: center; font-weight: 700; 
+  }
 </style>

package/src/components/lib/cards/TestimonialCardClean.astro

@@ -1,20 +1,51 @@
 ---
+/**
+ * TestimonialCardClean — Minimalist card for user quotes and reviews.
+ * 
+ * @param {string} quote - The body of the testimonial review.
+ * @param {string} name - The reviewer's full name.
+ * @param {string} role - The reviewer's job title or company role.
+ * @param {string} avatarUrl - Optional string tracking the avatar headshot URL.
+ */
+interface Props {
+  quote: string;
+  name: string;
+  role: string;
+  avatarUrl?: string;
+}
+
+const { quote, name, role, avatarUrl } = Astro.props;
 ---
+
 <div class="testi-card">
-  <div class="quote">"This component library transformed our workflow. The best Astro-first UI kit we've found."</div>
-  <div class="author">
-    <div class="pic"></div>
-    <div>
-      <h5>Alex Rivera</h5>
-      <span>CTO at TechFlow</span>
+  <blockquote class="testi-card__quote">"{quote}"</blockquote>
+  <div class="testi-card__author">
+    <div class="testi-card__pic" style={avatarUrl ? `background-image: url('${avatarUrl}'); background-size: cover;` : ''}></div>
+    <div class="testi-card__info">
+      <h5 class="testi-card__name">{name}</h5>
+      <span class="testi-card__role">{role}</span>
     </div>
   </div>
 </div>
+
 <style>
-  .testi-card { background: rgba(255,255,255,0.03); padding: 2rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); }
-  .quote { font-size: 1rem; color: #e2e8f0; font-style: italic; line-height: 1.6; margin-bottom: 2rem; }
-  .author { display: flex; align-items: center; gap: 1rem; }
-  .pic { width: 40px; height: 40px; background: #334155; border-radius: 50%; }
-  h5 { margin: 0; color: #fff; }
-  span { font-size: 0.75rem; color: #64748b; }
+  .testi-card { 
+    background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
+    padding: var(--sp-8, 2rem); 
+    border-radius: var(--r-xl, 20px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+  }
+  .testi-card__quote { 
+    font-size: 1rem; color: var(--c-text-1, #e2e8f0); 
+    font-style: italic; line-height: 1.6; 
+    margin: 0 0 2rem 0; 
+  }
+  .testi-card__author { display: flex; align-items: center; gap: var(--sp-4, 1rem); }
+  .testi-card__pic { 
+    width: 40px; height: 40px; 
+    background: var(--c-bg, #334155); 
+    border-radius: var(--r-full, 50%); 
+  }
+  .testi-card__name { margin: 0; color: var(--c-text-1, #fff); font-size: 0.95rem; }
+  .testi-card__role { font-size: 0.75rem; color: var(--c-text-2, #64748b); }
 </style>