astro-component-kit 0.1.1 → 0.3.0

package/src/components/lib/GlassCard.astro

@@ -1,72 +0,0 @@
----
-// src/components/lib/GlassCard.astro
-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: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-  }
-
-  .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), 0 0 0 1px rgba(99, 102, 241, 0.2);
-    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/GlassNavbar.astro

@@ -1,67 +0,0 @@
----
-// src/components/lib/GlassNavbar.astro
-import LogoWithGalaxy from './LogoWithGalaxy.astro';
-
-interface Props {
-  brandHref?: string;
-}
-const { brandHref = '/' } = Astro.props;
----
-
-<header class="glass-nav">
-  <div class="glass-nav__inner">
-    <a href={brandHref} class="glass-nav__brand">
-      <LogoWithGalaxy size="small" />
-    </a>
-    <nav class="glass-nav__links">
-      <slot name="links" />
-    </nav>
-    <div class="glass-nav__actions">
-      <slot name="actions" />
-    </div>
-  </div>
-</header>
-
-<style>
-  .glass-nav {
-    background: rgba(10, 10, 20, 0.7);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    border-radius: 14px;
-  }
-
-  .glass-nav__inner {
-    padding: 0 1.5rem;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-  }
-
-  .glass-nav__brand {
-    text-decoration: none;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .glass-nav__brand:hover {
-    opacity: 0.9;
-  }
-
-  .glass-nav__links {
-    display: flex; align-items: center; gap: 0.25rem; flex: 1;
-  }
-
-  .glass-nav__links :global(a) {
-    padding: 0.4rem 0.8rem; font-size: 0.875rem; font-weight: 500;
-    color: #94a3b8; text-decoration: none; border-radius: 8px;
-    transition: color 0.2s ease, background 0.2s ease;
-  }
-
-  .glass-nav__links :global(a:hover) { color: #e2e8f0; background: rgba(255,255,255,0.06); }
-
-  .glass-nav__actions {
-    display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
-  }
-</style>

package/src/components/lib/GlowButton.astro

@@ -1,60 +0,0 @@
----
-// src/components/lib/GlowButton.astro
-interface Props {
-  color?: string;
-  href?: string;
-}
-const { color = '#6366f1', href } = Astro.props;
-const Tag = href ? 'a' : 'button';
----
-
-<Tag href={href} class="glow-btn" style={`--glow-color: ${color}`}>
-  <slot />
-</Tag>
-
-<style>
-  .glow-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.7rem 1.6rem;
-    font-family: inherit;
-    font-size: 0.9rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: #fff;
-    background: var(--glow-color);
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    transition: transform 0.2s ease;
-    box-shadow: 0 0 20px color-mix(in srgb, var(--glow-color) 60%, transparent);
-  }
-
-  .glow-btn::after {
-    content: '';
-    position: absolute;
-    inset: -3px;
-    border-radius: 13px;
-    background: var(--glow-color);
-    opacity: 0;
-    filter: blur(16px);
-    transition: opacity 0.3s ease;
-    z-index: -1;
-  }
-
-  .glow-btn:hover { transform: translateY(-2px); }
-
-  .glow-btn:hover::after {
-    opacity: 0.5;
-    animation: pulse-glow 1.5s ease-in-out infinite;
-  }
-
-  @keyframes pulse-glow {
-    0%, 100% { opacity: 0.4; }
-    50% { opacity: 0.8; }
-  }
-</style>