astro-component-kit 0.0.1

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

@@ -0,0 +1,113 @@
+---
+interface Props {
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { 
+  href, 
+  type = 'button', 
+  variant = 'primary', 
+  size = 'md',
+  disabled = false 
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled}
+  class={`shimmer-btn shimmer-btn--${variant} shimmer-btn--${size}`}
+>
+  <span class="shimmer-btn__content"><slot /></span>
+</Tag>
+
+<style>
+  .shimmer-btn {
+    --shimmer-speed: 3s;
+    --shimmer-color: rgba(255, 255, 255, 0.3);
+    
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: var(--r-full, 9999px);
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    user-select: none;
+    font-family: var(--font-sans, inherit);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .shimmer-btn__content {
+    display: block;
+    padding: 0.75rem 1.8rem;
+    z-index: 2;
+  }
+
+  .shimmer-btn::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      120deg, 
+      transparent 30%, 
+      var(--shimmer-color) 50%, 
+      transparent 70%
+    );
+    background-size: 200% 100%;
+    transform: translateX(-100%);
+    animation: sweep var(--shimmer-speed) infinite;
+    z-index: 1;
+  }
+
+  @keyframes sweep {
+    0% { transform: translateX(-100%); }
+    40%, 100% { transform: translateX(100%); }
+  }
+
+  .shimmer-btn:hover:not(:disabled) {
+    transform: scale(1.02);
+  }
+
+  .shimmer-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(1);
+  }
+
+  /* Variants */
+  .shimmer-btn--primary {
+    background: var(--c-bg-2, #1e293b);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .shimmer-btn--secondary {
+    background: var(--c-primary, #6366f1);
+    color: #fff;
+  }
+
+  .shimmer-btn--ghost {
+    background: transparent;
+    color: var(--c-primary-light, #818cf8);
+    border: 1px solid rgba(99, 102, 241, 0.4);
+    --shimmer-color: rgba(99, 102, 241, 0.2);
+  }
+
+  /* Sizes */
+  .shimmer-btn--sm .shimmer-btn__content { padding: 0.45rem 1.2rem; font-size: 0.8rem; }
+  .shimmer-btn--md .shimmer-btn__content { padding: 0.75rem 1.8rem; font-size: 0.95rem; }
+  .shimmer-btn--lg .shimmer-btn__content { padding: 1.1rem 2.6rem; font-size: 1.1rem; }
+</style>
+

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

@@ -0,0 +1,121 @@
+---
+interface Props {
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { 
+  href, 
+  type = 'button', 
+  variant = 'primary', 
+  size = 'md',
+  disabled = false 
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag 
+  href={href} 
+  type={href ? undefined : type}
+  disabled={disabled}
+  class={`shiny-btn shiny-btn--${variant} shiny-btn--${size}`}
+>
+  <span class="shiny-btn__content"><slot /></span>
+</Tag>
+
+<style>
+  .shiny-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #111;
+    color: #fff;
+    padding: 0;
+    border: none;
+    border-radius: var(--r-md, 12px);
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: 600;
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    font-family: var(--font-sans, inherit);
+  }
+
+  .shiny-btn__content {
+    display: block;
+    padding: 0.7rem 1.8rem;
+    z-index: 2;
+  }
+
+  .shiny-btn::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -150%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      45deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0) 30%,
+      rgba(255, 255, 255, 0.2) 50%,
+      rgba(255, 255, 255, 0) 70%,
+      transparent 100%
+    );
+    transform: rotate(45deg);
+    transition: left 0.6s ease;
+    z-index: 1;
+  }
+
+  .shiny-btn:hover:not(:disabled)::after {
+    left: 100%;
+  }
+
+  .shiny-btn:hover:not(:disabled) {
+    box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
+  }
+
+  .shiny-btn:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  .shiny-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(1);
+  }
+
+  /* Variants */
+  .shiny-btn--primary {
+    background: linear-gradient(135deg, #1e293b, #0f172a);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .shiny-btn--secondary {
+    background: var(--c-primary, #6366f1);
+  }
+
+  .shiny-btn--ghost {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: var(--c-text-2, #94a3b8);
+  }
+  .shiny-btn--ghost:hover:not(:disabled) {
+    color: #fff;
+    border-color: #fff;
+  }
+
+  /* Sizes */
+  .shiny-btn--sm .shiny-btn__content { padding: 0.45rem 1.2rem; font-size: 0.85rem; }
+  .shiny-btn--md .shiny-btn__content { padding: 0.75rem 1.8rem; font-size: 1rem; }
+  .shiny-btn--lg .shiny-btn__content { padding: 1.1rem 2.6rem; font-size: 1.15rem; }
+</style>
+

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

@@ -0,0 +1,145 @@
+---
+interface Props {
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
+  primaryColor?: string;
+  secondaryColor?: string;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const { 
+  href, 
+  type = 'button', 
+  primaryColor = '#6366f1', 
+  secondaryColor = '#c084fc',
+  size = 'md',
+  disabled = false 
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+---
+
+<div class={`tilt-wrapper tilt-wrapper--${size}`}>
+  <Tag 
+    href={href} 
+    type={href ? undefined : type}
+    disabled={disabled}
+    class="tilt-card"
+    style={`--primary-color: ${primaryColor}; --secondary-color: ${secondaryColor};`}
+  >
+    <div class="tilt-card__glow"></div>
+    <div class="tilt-card__content">
+      <slot />
+    </div>
+  </Tag>
+</div>
+
+<style>
+  .tilt-wrapper {
+    perspective: 1000px;
+    display: inline-block;
+  }
+
+  .tilt-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #0f172a;
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--r-md, 12px);
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    transition: transform 0.15s ease-out, box-shadow 0.3s ease;
+    transform-style: preserve-3d;
+    user-select: none;
+    font-family: var(--font-sans, inherit);
+    font-weight: 600;
+  }
+
+  .tilt-card__glow {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+      color-mix(in srgb, var(--primary-color), white 20%) 0%,
+      transparent 70%
+    );
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .tilt-card__content {
+    position: relative;
+    z-index: 2;
+    transform: translateZ(20px);
+    white-space: nowrap;
+  }
+
+  .tilt-card:hover {
+    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .tilt-card:hover .tilt-card__glow {
+    opacity: 0.15;
+  }
+
+  .tilt-card:active {
+    transform: scale(0.98) translateZ(0);
+  }
+
+  .tilt-card:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(1);
+  }
+
+  /* Sizes */
+  .tilt-wrapper--sm .tilt-card { padding: 0.5rem 1.4rem; font-size: 0.8rem; }
+  .tilt-wrapper--md .tilt-card { padding: 0.8rem 2rem; font-size: 0.95rem; }
+  .tilt-wrapper--lg .tilt-card { padding: 1.1rem 3rem; font-size: 1.1rem; }
+</style>
+
+<script>
+  function initTilt() {
+    const cards = document.querySelectorAll('.tilt-card:not([data-tilt-init])');
+    
+    cards.forEach(card => {
+      card.setAttribute('data-tilt-init', 'true');
+      const htmlCard = card as HTMLElement;
+
+      card.addEventListener('mousemove', (e: any) => {
+        const rect = htmlCard.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        
+        // Calculate percentages for the glow highlight
+        const xPerc = (x / rect.width) * 100;
+        const yPerc = (y / rect.height) * 100;
+        htmlCard.style.setProperty('--mouse-x', `${xPerc}%`);
+        htmlCard.style.setProperty('--mouse-y', `${yPerc}%`);
+
+        // Calculate rotation
+        const rotateY = (x / rect.width - 0.5) * 25;
+        const rotateX = (y / rect.height - 0.5) * -25;
+        htmlCard.style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg)`;
+      });
+
+      card.addEventListener('mouseleave', () => {
+        htmlCard.style.transform = 'rotateY(0deg) rotateX(0deg)';
+        htmlCard.style.setProperty('--mouse-x', '50%');
+        htmlCard.style.setProperty('--mouse-y', '50%');
+      });
+    });
+  }
+
+  initTilt();
+  document.addEventListener('astro:after-swap', initTilt);
+</script>
+

package/src/components/lib/buttons/index.ts

@@ -0,0 +1,19 @@
+export { default as AnimatedIconButton } from './AnimatedIconButton.astro';
+export { default as BorderDrawButton } from './BorderDrawButton.astro';
+export { default as CyberpunkButton } from './CyberpunkButton.astro';
+export { default as DoubleBorderButton } from './DoubleBorderButton.astro';
+export { default as GhostOutlineButton } from './GhostOutlineButton.astro';
+export { default as GlassButton } from './GlassButton.astro';
+export { default as GlowButton } from './GlowButton.astro';
+export { default as LiquidButton } from './LiquidButton.astro';
+export { default as LoadingButton } from './LoadingButton.astro';
+export { default as MagneticButton } from './MagneticButton.astro';
+export { default as MinimalPillButton } from './MinimalPillButton.astro';
+export { default as NeumorphicButton } from './NeumorphicButton.astro';
+export { default as PulseButton } from './PulseButton.astro';
+export { default as RetroArcadeButton } from './RetroArcadeButton.astro';
+export { default as RetroShadowButton } from './RetroShadowButton.astro';
+export { default as ShimmerButton } from './ShimmerButton.astro';
+export { default as ShinyButton } from './ShinyButton.astro';
+export { default as TiltGlowButton } from './TiltGlowButton.astro';
+export { default as ThreeDPushButton } from './3dPushButton.astro';

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

@@ -0,0 +1,18 @@
+---
+---
+<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>
+  </div>
+</div>
+<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; }
+</style>

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

@@ -0,0 +1,12 @@
+---
+---
+<div class="cyber-card">
+  <div class="glitch-line"></div>
+  <h3>System Core</h3>
+  <p>Advanced neural processing activated.</p>
+</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%; } }
+</style>

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

@@ -0,0 +1,24 @@
+---
+---
+<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>
+  </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; }
+</style>

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

@@ -0,0 +1,17 @@
+---
+interface Props { title?: string; subtitle?: string; hoverable?: boolean; padding?: 'sm' | 'md' | 'lg'; }
+const { title, subtitle, hoverable = true, padding = 'md' } = Astro.props;
+---
+<div class:list={['glass-card', `glass-card--p${padding}`, { 'glass-card--hoverable': hoverable }]}>
+  {title && (<div class="glass-card__header"><h3 class="glass-card__title">{title}</h3>{subtitle && <p class="glass-card__subtitle">{subtitle}</p>}</div>)}
+  <div class="glass-card__body"><slot /></div>
+</div>
+<style>
+  .glass-card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; position: relative; overflow: hidden; transition: 0.3s; }
+  .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); }
+  .glass-card--hoverable:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border-color: rgba(99, 102, 241, 0.25); }
+  .glass-card__header { border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 1rem; padding-bottom: 0.75rem; }
+  .glass-card__title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 600; color: #f1f5f9; }
+  .glass-card__subtitle { margin: 0; font-size: 0.82rem; color: #64748b; }
+  .glass-card--psm { padding: 1rem; } .glass-card--pmd { padding: 1.5rem; } .glass-card--plg { padding: 2rem; }
+</style>

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

@@ -0,0 +1,19 @@
+---
+---
+<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>
+  <button class="join-btn">+</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; }
+</style>

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

@@ -0,0 +1,16 @@
+---
+---
+<div class="glow-wrap">
+  <div class="glow-content">
+    <h3>Project Title</h3>
+    <p>Web design / 2024</p>
+  </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); } }
+</style>

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

@@ -0,0 +1,25 @@
+---
+---
+<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>
+  </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; }
+</style>
+<script>
+  document.querySelectorAll('.tilt-card-inner').forEach(card => {
+    card.addEventListener('mousemove', e => {
+      const rect = card.getBoundingClientRect();
+      const x = ((e as MouseEvent).clientX - rect.left - rect.width/2) / 10;
+      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)');
+  });
+</script>

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

@@ -0,0 +1,15 @@
+---
+---
+<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>
+</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; }
+</style>

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

@@ -0,0 +1,12 @@
+---
+---
+<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>
+<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); }
+</style>

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

@@ -0,0 +1,21 @@
+---
+---
+<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>
+  <div class="play">▶</div>
+</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; }
+</style>

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

@@ -0,0 +1,6 @@
+---
+---
+<div class="neu-card"><slot /></div>
+<style>
+  .neu-card { background: #e0e0e0; border-radius: 30px; box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff; padding: 2rem; color: #444; }
+</style>

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

@@ -0,0 +1,15 @@
+---
+---
+<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>
+</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; }
+</style>

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

@@ -0,0 +1,17 @@
+---
+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>
+</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; }
+</style>

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

@@ -0,0 +1,17 @@
+---
+---
+<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>
+<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; }
+</style>

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

@@ -0,0 +1,15 @@
+---
+---
+<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>
+<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; }
+</style>