astro-component-kit 0.0.1 → 0.1.0

package/src/components/lib/buttons/NeumorphicButton.astro

@@ -1,4 +1,14 @@
 ---
+/**
+ * NeumorphicButton — A premium Soft UI button with beveled surface gradients and hue-tinted shadows.
+ * 
+ * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
+ * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
+ * @param {string} baseColor - Optional. Base surface color. Default is 'var(--c-bg-2, #111827)'.
+ * @param {'convex'|'concave'} variant - Optional. The visual style variant. Default is 'convex'.
+ * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
+ * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
+ */
 interface Props {
   href?: string;
   type?: 'button' | 'submit' | 'reset';

package/src/components/lib/buttons/PulseButton.astro

@@ -1,4 +1,14 @@
 ---
+/**
+ * PulseButton — A button with a persistent circular pulse effect to draw attention.
+ * 
+ * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
+ * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
+ * @param {'primary'|'secondary'|'ghost'} variant - Optional. The visual style variant. Default is 'primary'.
+ * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
+ * @param {string} color - Optional. Brand tone base for pulsating aura.
+ * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
+ */
 interface Props {
   href?: string;
   type?: 'button' | 'submit' | 'reset';

package/src/components/lib/buttons/RetroArcadeButton.astro

@@ -1,4 +1,13 @@
 ---
+/**
+ * RetroArcadeButton — An 8-bit style arcade button with chunky borders and pixelated interactions.
+ * 
+ * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
+ * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
+ * @param {'primary'|'secondary'|'ghost'} variant - Optional. The visual style variant. Default is 'primary'.
+ * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
+ * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
+ */
 interface Props {
   href?: string;
   type?: 'button' | 'submit' | 'reset';

package/src/components/lib/buttons/RetroShadowButton.astro

@@ -1,4 +1,13 @@
 ---
+/**
+ * RetroShadowButton — A sharp-edged neo-brutalist button with a thick solid block shadow.
+ * 
+ * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
+ * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
+ * @param {'pink'|'cyan'|'yellow'|'lime'} variant - Optional. The visual highly saturated retro style variant. Default is 'pink'.
+ * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
+ * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
+ */
 interface Props {
   href?: string;
   type?: 'button' | 'submit' | 'reset';

package/src/components/lib/buttons/ShimmerButton.astro

@@ -1,4 +1,13 @@
 ---
+/**
+ * ShimmerButton — A clean, elegant button with a continuous diagonal shimmer sweeping animation.
+ * 
+ * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
+ * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
+ * @param {'primary'|'secondary'|'ghost'} variant - Optional. The visual style variant. Default is 'primary'.
+ * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
+ * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
+ */
 interface Props {
   href?: string;
   type?: 'button' | 'submit' | 'reset';

package/src/components/lib/buttons/ShinyButton.astro

@@ -1,4 +1,13 @@
 ---
+/**
+ * ShinyButton — A button with a metallic shine effect that sweeps across on hover.
+ * 
+ * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
+ * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
+ * @param {'primary'|'secondary'|'ghost'} variant - Optional. The visual style variant. Default is 'primary'.
+ * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
+ * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
+ */
 interface Props {
   href?: string;
   type?: 'button' | 'submit' | 'reset';

package/src/components/lib/buttons/TiltGlowButton.astro

@@ -1,4 +1,14 @@
 ---
+/**
+ * TiltGlowButton — An interactive 3D button that tilts towards the cursor with dynamic lighting.
+ * 
+ * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
+ * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
+ * @param {string} primaryColor - Optional. The primary light/gradient effect color.
+ * @param {string} secondaryColor - Optional. The secondary lighting/gradient reflection color.
+ * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
+ * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
+ */
 interface Props {
   href?: string;
   type?: 'button' | 'submit' | 'reset';

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

@@ -1,18 +1,51 @@
 ---
+/**
+ * BlogHorizontalCard — Landscape card layout for blog feeds or news items.
+ * 
+ * @param {string} title - The blog post title.
+ * @param {string} description - Brief summary or excerpt.
+ * @param {string} tag - Featured label or category (e.g. "Tutorial").
+ * @param {string} thumbUrl - Optional thumbnail image URL.
+ */
+interface Props {
+  title: string;
+  description: string;
+  tag: string;
+  thumbUrl?: string;
+}
+
+const { title, description, tag, thumbUrl } = Astro.props;
 ---
-<div class="blog-h-card">
-  <div class="thumb"></div>
-  <div class="content">
-    <span class="tag">Tutorial</span>
-    <h4>Building with Astro components</h4>
-    <p>Learn how to scale your project with modular registry files.</p>
+
+<article class="blog-h-card">
+  <div class="blog-h-card__thumb" style={thumbUrl ? `background-image: url('${thumbUrl}'); background-size: cover;` : ''}></div>
+  <div class="blog-h-card__content">
+    <span class="blog-h-card__tag">{tag}</span>
+    <h4 class="blog-h-card__title">{title}</h4>
+    <p class="blog-h-card__desc">{description}</p>
   </div>
-</div>
+</article>
+
 <style>
-  .blog-h-card { display: flex; gap: 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; overflow: hidden; }
-  .thumb { width: 150px; background: #1e293b; flex-shrink: 0; }
-  .content { padding: 1.2rem; }
-  h4 { color: #fff; margin: 0.5rem 0; }
-  p { font-size: 0.85rem; color: #94a3b8; }
-  .tag { font-size: 0.7rem; color: #818cf8; font-weight: 700; text-transform: uppercase; }
+  .blog-h-card { 
+    display: flex; gap: var(--sp-6, 1.5rem); 
+    background: var(--c-bg-elev, rgba(255,255,255,0.02)); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-lg, 16px); 
+    overflow: hidden; 
+  }
+  .blog-h-card__thumb { 
+    width: 150px; 
+    background-color: var(--c-bg, #1e293b); 
+    flex-shrink: 0; 
+  }
+  .blog-h-card__content { padding: var(--sp-5, 1.2rem); }
+  .blog-h-card__title { color: var(--c-text-1, #fff); margin: 0.5rem 0; font-size: 1.1rem; }
+  .blog-h-card__desc { font-size: 0.85rem; color: var(--c-text-2, #94a3b8); margin: 0; }
+  .blog-h-card__tag { font-size: 0.7rem; color: var(--c-primary, #818cf8); font-weight: 700; text-transform: uppercase; }
+  
+  @media (max-width: 600px) {
+    .blog-h-card { flex-direction: column; }
+    .blog-h-card__thumb { width: 100%; height: 180px; }
+  }
 </style>

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

@@ -1,12 +1,56 @@
 ---
+/**
+ * CyberFeatureCard — A feature card with sharp angles and neon stroke animations.
+ * 
+ * @param {string} title - The main headline of the feature card.
+ * @param {string} subtitle - Optional description context.
+ */
+interface Props {
+  title: string;
+  subtitle?: string;
+}
+
+const { title, subtitle } = Astro.props;
 ---
+
 <div class="cyber-card">
-  <div class="glitch-line"></div>
-  <h3>System Core</h3>
-  <p>Advanced neural processing activated.</p>
+  <div class="cyber-card__glitch-line"></div>
+  <h3 class="cyber-card__title">{title}</h3>
+  {subtitle && <p class="cyber-card__subtitle">{subtitle}</p>}
+  <slot />
 </div>
+
 <style>
-  .cyber-card { background: #000; color: #00e0ff; border: 1px solid #ff003c; padding: 1.5rem; clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); position: relative; }
-  .glitch-line { position: absolute; height: 1px; width: 100%; background: #ff003c; top: 10%; left: 0; opacity: 0.5; animation: glitch 4s infinite; }
-  @keyframes glitch { 0%, 100% { top: 10%; } 50% { top: 90%; } }
+  .cyber-card { 
+    background: var(--c-bg-elev, #000); 
+    color: var(--c-text-1, #00e0ff); 
+    border: 1px solid var(--c-primary, #ff003c); 
+    padding: var(--sp-6, 1.5rem); 
+    clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); 
+    position: relative; 
+  }
+  .cyber-card__glitch-line { 
+    position: absolute; 
+    height: 1px; 
+    width: 100%; 
+    background: var(--c-primary, #ff003c); 
+    top: 10%; left: 0; 
+    opacity: 0.5; 
+    animation: glitch-anim 4s infinite; 
+  }
+  .cyber-card__title {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    color: var(--c-text-1);
+  }
+  .cyber-card__subtitle {
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--c-text-2, #ccc);
+  }
+  
+  @keyframes glitch-anim { 
+    0%, 100% { top: 10%; } 
+    50% { top: 90%; } 
+  }
 </style>

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

@@ -1,24 +1,77 @@
 ---
+/**
+ * EcommerceProductCard — Commercial card with price, rating and action buttons.
+ * 
+ * @param {string} title - The product name.
+ * @param {string} price - The parsed price string (e.g. "$299").
+ * @param {string} imageUrl - The URL mapping to the product's thumbnail.
+ * @param {string} tag - Optional. The highlight bubble tag (e.g. "New").
+ * @param {string} rating - Optional. Formatted rating string.
+ * @param {string} ctaText - Optional. Label for the call to action button. Default is "Add".
+ */
+interface Props {
+  title: string;
+  price: string;
+  imageUrl?: string;
+  tag?: string;
+  rating?: string;
+  ctaText?: string;
+}
+
+const { 
+  title, 
+  price, 
+  imageUrl,
+  tag,
+  rating,
+  ctaText = 'Add'
+} = Astro.props;
 ---
+
 <div class="prod-card">
-  <div class="image"></div>
-  <div class="info">
-    <div class="meta"><span>New</span><span>5.0 ★</span></div>
-    <h4>Premium Headphones</h4>
-    <div class="bot">
-      <span class="price">$299</span>
-      <button>Add</button>
+  <div class="prod-card__image" style={imageUrl ? `background-image: url('${imageUrl}'); background-size: cover;` : ''}></div>
+  <div class="prod-card__info">
+    <div class="prod-card__meta">
+      {tag ? <span>{tag}</span> : <span></span>}
+      {rating ? <span>{rating}</span> : null}
+    </div>
+    <h4 class="prod-card__title">{title}</h4>
+    <div class="prod-card__bot">
+      <span class="prod-card__price">{price}</span>
+      <button class="prod-card__cta" type="button">{ctaText}</button>
     </div>
   </div>
 </div>
+
 <style>
-  .prod-card { background: #0f172a; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; transition: 0.3s; }
-  .prod-card:hover { border-color: #6366f1; transform: translateY(-3px); }
-  .image { height: 180px; background: #1e293b; }
-  .info { padding: 1.25rem; }
-  .meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: #818cf8; font-weight: 700; margin-bottom: 0.5rem; }
-  h4 { color: #fff; margin: 0; font-size: 1.1rem; }
-  .bot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
-  .price { font-weight: 800; color: #fff; font-size: 1.25rem; }
-  button { background: #6366f1; border: none; color: #fff; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; cursor: pointer; }
+  .prod-card { 
+    background: var(--c-bg-elev, #0f172a); 
+    border-radius: var(--r-lg, 16px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    overflow: hidden; 
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease; 
+  }
+  .prod-card:hover { 
+    border-color: var(--c-primary, #6366f1); 
+    transform: translateY(-3px); 
+  }
+  .prod-card__image { 
+    height: 180px; 
+    background-color: var(--c-bg, #1e293b); 
+  }
+  .prod-card__info { padding: var(--sp-5, 1.25rem); }
+  .prod-card__meta { 
+    display: flex; justify-content: space-between; 
+    font-size: 0.75rem; color: var(--c-primary-light, #818cf8); 
+    font-weight: 700; margin-bottom: 0.5rem; 
+  }
+  .prod-card__title { color: var(--c-text-1, #fff); margin: 0; font-size: 1.1rem; }
+  .prod-card__bot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
+  .prod-card__price { font-weight: 800; color: var(--c-text-1, #fff); font-size: 1.25rem; }
+  .prod-card__cta { 
+    background: var(--c-primary, #6366f1); border: none; color: #fff; 
+    padding: 0.5rem 1.2rem; border-radius: var(--r-md, 8px); 
+    font-weight: 600; cursor: pointer; transition: 0.2s;
+  }
+  .prod-card__cta:hover { filter: brightness(1.1); }
 </style>

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

@@ -1,4 +1,12 @@
 ---
+/**
+ * GlassCard — A versatile glassmorphism card with hover lift effect and gradient border.
+ * 
+ * @param {string} title - Optional title for the glass card header.
+ * @param {string} subtitle - Optional description below the title.
+ * @param {boolean} hoverable - Whether the card lifts on hover. Default is true.
+ * @param {'sm'|'md'|'lg'} padding - Internal padding control. Default is 'md'.
+ */
 interface Props { title?: string; subtitle?: string; hoverable?: boolean; padding?: 'sm' | 'md' | 'lg'; }
 const { title, subtitle, hoverable = true, padding = 'md' } = Astro.props;
 ---

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

@@ -1,19 +1,60 @@
 ---
+/**
+ * GlassEventCard — Vibrant card for events with date badge and glass effect.
+ * 
+ * @param {string|number} day - The event date numeric segment.
+ * @param {string} month - The event month string indicator.
+ * @param {string} title - The name of the event.
+ * @param {string} details - Additional string metadata (e.g location and time).
+ */
+interface Props {
+  day: string | number;
+  month: string;
+  title: string;
+  details: string;
+}
+
+const { day, month, title, details } = Astro.props;
 ---
+
 <div class="event-card">
-  <div class="date-badge"><span>24</span>OCT</div>
-  <div class="event-info">
-    <h3>Developer Meetup</h3>
-    <p>San Francisco, CA · 6:00 PM</p>
+  <div class="event-card__badge">
+    <span class="event-card__day">{day}</span>
+    {month}
   </div>
-  <button class="join-btn">+</button>
+  <div class="event-card__info">
+    <h3 class="event-card__title">{title}</h3>
+    <p class="event-card__details">{details}</p>
+  </div>
+  <button class="event-card__join" type="button" aria-label="Join event">+</button>
 </div>
+
 <style>
-  .event-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; }
-  .date-badge { background: #6366f1; color: #fff; width: 50px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; border-radius: 12px; }
-  .date-badge span { font-size: 1.2rem; line-height: 1; }
-  .event-info h3 { font-size: 1rem; color: #fff; margin: 0; }
-  .event-info p { font-size: 0.8rem; color: #94a3b8; margin: 2px 0 0; }
-  .join-btn { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: none; color: #fff; font-size: 1.2rem; cursor: pointer; transition: 0.2s; }
-  .join-btn:hover { background: #fff; color: #000; }
+  .event-card { 
+    display: flex; align-items: center; gap: var(--sp-4, 1rem); 
+    padding: var(--sp-5, 1.25rem); 
+    background: var(--c-bg-elev, rgba(255,255,255,0.04)); 
+    backdrop-filter: blur(10px); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    border-radius: var(--r-xl, 20px); 
+  }
+  .event-card__badge { 
+    background: var(--c-primary, #6366f1); color: #fff; 
+    width: 50px; height: 60px; 
+    display: flex; flex-direction: column; align-items: center; justify-content: center; 
+    font-size: 0.7rem; font-weight: 800; border-radius: var(--r-md, 12px); 
+    text-transform: uppercase;
+  }
+  .event-card__day { font-size: 1.2rem; line-height: 1; margin-bottom: 2px; }
+  .event-card__info { flex: 1; }
+  .event-card__title { font-size: 1rem; color: var(--c-text-1, #fff); margin: 0; }
+  .event-card__details { font-size: 0.8rem; color: var(--c-text-2, #94a3b8); margin: 2px 0 0; }
+  .event-card__join { 
+    margin-left: auto; width: 40px; height: 40px; 
+    border-radius: var(--r-full, 50%); 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.2)); 
+    background: none; color: var(--c-text-1, #fff); 
+    font-size: 1.2rem; cursor: pointer; transition: 0.2s; 
+  }
+  .event-card__join:hover { background: var(--c-text-1, #fff); color: var(--c-bg, #000); }
 </style>

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

@@ -1,16 +1,53 @@
 ---
+/**
+ * GlowPortfolioCard — Card with a hovering background glow that follows the card edges.
+ * 
+ * @param {string} title - Project title heading.
+ * @param {string} subtitle - Project metadata (e.g. "Web design / 2024").
+ * @param {string} glowColor - Optional. Hex color for the animated border glow. Default is '#6366f1'.
+ */
+interface Props {
+  title: string;
+  subtitle: string;
+  glowColor?: string;
+}
+
+const { title, subtitle, glowColor = 'var(--c-primary, #6366f1)' } = Astro.props;
 ---
-<div class="glow-wrap">
+
+<div class="glow-wrap" style={`--glow-color: ${glowColor};`}>
   <div class="glow-content">
-    <h3>Project Title</h3>
-    <p>Web design / 2024</p>
+    <h3 class="glow-content__title">{title}</h3>
+    <p class="glow-content__subtitle">{subtitle}</p>
+    <slot />
   </div>
 </div>
+
 <style>
-  .glow-wrap { position: relative; padding: 2px; border-radius: 20px; background: rgba(255,255,255,0.1); overflow: hidden; }
-  .glow-wrap::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent, #6366f1, transparent); animation: rotate 4s linear infinite; }
-  .glow-content { position: relative; background: #080b14; padding: 2rem; border-radius: 18px; z-index: 1; text-align: center; }
-  h3 { margin: 0; color: #fff; }
-  p { color: #94a3b8; font-size: 0.9rem; }
-  @keyframes rotate { 100% { transform: rotate(360deg); } }
+  .glow-wrap { 
+    position: relative; 
+    padding: 2px; 
+    border-radius: var(--r-xl, 20px); 
+    background: var(--c-border, rgba(255,255,255,0.1)); 
+    overflow: hidden; 
+  }
+  .glow-wrap::before { 
+    content: ''; 
+    position: absolute; 
+    inset: -50%; 
+    background: conic-gradient(from 0deg, transparent, var(--glow-color), transparent); 
+    animation: rotate-glow 4s linear infinite; 
+  }
+  .glow-content { 
+    position: relative; 
+    background: var(--c-bg, #080b14); 
+    padding: var(--sp-8, 2rem); 
+    border-radius: calc(var(--r-xl, 20px) - 2px); 
+    z-index: 1; 
+    text-align: center; 
+  }
+  .glow-content__title { margin: 0; color: var(--c-text-1, #fff); font-size: 1.25rem; }
+  .glow-content__subtitle { color: var(--c-text-2, #94a3b8); font-size: 0.9rem; margin-top: 0.5rem; }
+  
+  @keyframes rotate-glow { 100% { transform: rotate(360deg); } }
 </style>

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

@@ -1,17 +1,55 @@
 ---
+/**
+ * InteractiveTiltCard — Card that tilts in 3D space based on mouse position.
+ * 
+ * @param {string} title - The card's heading text.
+ * @param {string} description - The descriptive paragraph attached to the card.
+ */
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
 ---
+
 <div class="tilt-card-wrap">
   <div class="tilt-card-inner">
-    <h3>3D Hover</h3>
-    <p>Move your mouse over me to see the magic effect.</p>
+    <h3 class="tilt-card__title">{title}</h3>
+    <p class="tilt-card__desc">{description}</p>
   </div>
 </div>
+
 <style>
-  .tilt-card-wrap { perspective: 1000px; width: 100%; max-width: 300px; }
-  .tilt-card-inner { background: #1e293b; padding: 3rem; border-radius: 24px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,0.1); transform-style: preserve-3d; transition: transform 0.1s; }
-  h3 { transform: translateZ(50px); font-size: 1.5rem; color: #818cf8; }
-  p { transform: translateZ(30px); color: #94a3b8; font-size: 0.9rem; margin-top: 1rem; }
+  .tilt-card-wrap { 
+    perspective: 1000px; 
+    width: 100%; 
+    max-width: 300px; 
+  }
+  .tilt-card-inner { 
+    background: var(--c-bg-elev, #1e293b); 
+    padding: var(--sp-12, 3rem); 
+    border-radius: var(--r-xl, 24px); 
+    color: var(--c-text-1, #fff); 
+    text-align: center; 
+    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
+    transform-style: preserve-3d; 
+    transition: transform 0.1s; 
+  }
+  .tilt-card__title { 
+    transform: translateZ(50px); 
+    font-size: 1.5rem; 
+    color: var(--c-primary, #818cf8); 
+    margin: 0;
+  }
+  .tilt-card__desc { 
+    transform: translateZ(30px); 
+    color: var(--c-text-2, #94a3b8); 
+    font-size: 0.9rem; 
+    margin-top: 1rem; 
+  }
 </style>
+
 <script>
   document.querySelectorAll('.tilt-card-inner').forEach(card => {
     card.addEventListener('mousemove', e => {
@@ -20,6 +58,8 @@
       const y = ((e as MouseEvent).clientY - rect.top - rect.height/2) / -10;
       (card as HTMLElement).style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
     });
-    card.addEventListener('mouseleave', () => (card as HTMLElement).style.transform = 'rotateY(0deg) rotateX(0deg)');
+    card.addEventListener('mouseleave', () => {
+      (card as HTMLElement).style.transform = 'rotateY(0deg) rotateX(0deg)';
+    });
   });
 </script>

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

@@ -1,15 +1,46 @@
 ---
+/**
+ * KanbanItemCard — Small card optimized for list-based project management.
+ * 
+ * @param {string} title - The description of the ticket/task.
+ * @param {string} priority - Priority level label (e.g. "Prio").
+ * @param {string} tag - Contextual label tag (e.g. "SEO", "Bug").
+ */
+interface Props {
+  title: string;
+  priority?: string;
+  tag?: string;
+}
+
+const { title, priority, tag } = Astro.props;
 ---
+
 <div class="k-item">
-  <p>Update site SEO metadata</p>
-  <div class="badges"><span class="b-prio">Prio</span><span class="b-opt">SEO</span></div>
+  <p class="k-item__title">{title}</p>
+  <div class="k-item__badges">
+    {priority && <span class="k-item__badge k-item__badge--prio">{priority}</span>}
+    {tag && <span class="k-item__badge k-item__badge--opt">{tag}</span>}
+  </div>
 </div>
+
 <style>
-  .k-item { background: #111; border: 1px solid #333; padding: 1rem; border-radius: 8px; cursor: pointer; transition: 0.2s; }
-  .k-item:hover { border-color: #6366f1; transform: scale(1.02); }
-  p { margin: 0 0 0.75rem; font-size: 0.85rem; color: #fff; font-weight: 500; }
-  .badges { display: flex; gap: 4px; }
-  .badges span { font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
-  .b-prio { background: rgba(245,158,11,0.1); color: #fbbf24; }
-  .b-opt { background: rgba(52,211,153,0.1); color: #34d399; }
+  .k-item { 
+    background: var(--c-bg-elev, #111); 
+    border: 1px solid var(--c-border, #333); 
+    padding: var(--sp-4, 1rem); 
+    border-radius: var(--r-md, 8px); 
+    cursor: pointer; 
+    transition: 0.2s; 
+  }
+  .k-item:hover { 
+    border-color: var(--c-primary, #6366f1); 
+    transform: scale(1.02); 
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+  .k-item__title { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--c-text-1, #fff); font-weight: 500; line-height: 1.4; }
+  .k-item__badges { display: flex; gap: 4px; flex-wrap: wrap; }
+  .k-item__badge { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
+  
+  .k-item__badge--prio { background: rgba(245,158,11,0.1); color: #fbbf24; }
+  .k-item__badge--opt { background: rgba(52,211,153,0.1); color: #34d399; }
 </style>