astro-component-kit 0.3.0 → 0.4.0

package/src/components/index.ts

@@ -1,8 +1,11 @@
 // ============================================================
 // Astro Components Library - Main Barrel Export
 // ============================================================
-// Import any component from a single entry point:
-//   import { GlowButton, GlassCard, GlassNavbar } from '@/components';
+// Import any component from a single root entry point:
+//   import { GlowButton, GlassCard, StatsMetricShowcase } from 'astro-component-kit';
+// Or from category subpaths:
+//   import { GlowButton } from 'astro-component-kit/buttons';
+//   import { StatsMetricShowcase } from 'astro-component-kit/sections';
 // ============================================================
 
 // Root-level unique components
@@ -10,204 +13,15 @@ export { default as AnimatedGalaxy } from './lib/AnimatedGalaxy.astro';
 export { default as Galaxy3D } from './lib/Galaxy3D.astro';
 export { default as LogoWithGalaxy } from './lib/LogoWithGalaxy.astro';
 
-// Buttons
-export { default as ThreeDPushButton } from './lib/buttons/ThreeDPushButton.astro';
-export { default as AnimatedIconButton } from './lib/buttons/AnimatedIconButton.astro';
-export { default as BorderDrawButton } from './lib/buttons/BorderDrawButton.astro';
-export { default as CyberpunkButton } from './lib/buttons/CyberpunkButton.astro';
-export { default as DoubleBorderButton } from './lib/buttons/DoubleBorderButton.astro';
-export { default as GhostOutlineButton } from './lib/buttons/GhostOutlineButton.astro';
-export { default as GlassButton } from './lib/buttons/GlassButton.astro';
-export { default as GlowButton } from './lib/buttons/GlowButton.astro';
-export { default as LiquidButton } from './lib/buttons/LiquidButton.astro';
-export { default as LoadingButton } from './lib/buttons/LoadingButton.astro';
-export { default as MagneticButton } from './lib/buttons/MagneticButton.astro';
-export { default as MinimalPillButton } from './lib/buttons/MinimalPillButton.astro';
-export { default as NeumorphicButton } from './lib/buttons/NeumorphicButton.astro';
-export { default as PulseButton } from './lib/buttons/PulseButton.astro';
-export { default as RetroArcadeButton } from './lib/buttons/RetroArcadeButton.astro';
-export { default as RetroShadowButton } from './lib/buttons/RetroShadowButton.astro';
-export { default as ShimmerButton } from './lib/buttons/ShimmerButton.astro';
-export { default as ShinyButton } from './lib/buttons/ShinyButton.astro';
-export { default as TiltGlowButton } from './lib/buttons/TiltGlowButton.astro';
-
-// Cards
-export { default as BlogHorizontalCard } from './lib/cards/BlogHorizontalCard.astro';
-export { default as CyberFeatureCard } from './lib/cards/CyberFeatureCard.astro';
-export { default as EcommerceProductCard } from './lib/cards/EcommerceProductCard.astro';
-export { default as GlassCard } from './lib/cards/GlassCard.astro';
-export { default as GlassEventCard } from './lib/cards/GlassEventCard.astro';
-export { default as GlowPortfolioCard } from './lib/cards/GlowPortfolioCard.astro';
-export { default as InteractiveTiltCard } from './lib/cards/InteractiveTiltCard.astro';
-export { default as KanbanItemCard } from './lib/cards/KanbanItemCard.astro';
-export { default as MinimalLinkCard } from './lib/cards/MinimalLinkCard.astro';
-export { default as MusicPlayerMini } from './lib/cards/MusicPlayerMini.astro';
-export { default as NeumorphicCard } from './lib/cards/NeumorphicCard.astro';
-export { default as NotificationCard } from './lib/cards/NotificationCard.astro';
-export { default as PricingCard } from './lib/cards/PricingCard.astro';
-export { default as ProfileCard } from './lib/cards/ProfileCard.astro';
-export { default as RetroGameCard } from './lib/cards/RetroGameCard.astro';
-export { default as StatCard } from './lib/cards/StatCard.astro';
-export { default as TaskKanbanCard } from './lib/cards/TaskKanbanCard.astro';
-export { default as TestimonialCardClean } from './lib/cards/TestimonialCardClean.astro';
-export { default as WeatherWidgetCard } from './lib/cards/WeatherWidgetCard.astro';
-
-// Data
-export { default as AccordionGroupGlass } from './lib/data/AccordionGroupGlass.astro';
-export { default as AvatarGroupStack } from './lib/data/AvatarGroupStack.astro';
-export { default as CalendarGridView } from './lib/data/CalendarGridView.astro';
-export { default as DataChipsGroup } from './lib/data/DataChipsGroup.astro';
-export { default as DescriptionListHoriz } from './lib/data/DescriptionListHoriz.astro';
-export { default as FileTreeView } from './lib/data/FileTreeView.astro';
-export { default as GanttChartMinimal } from './lib/data/GanttChartMinimal.astro';
-export { default as GlassTable } from './lib/data/GlassTable.astro';
-export { default as KeyValuePillGroup } from './lib/data/KeyValuePillGroup.astro';
-export { default as PriceCompareTable } from './lib/data/PriceCompareTable.astro';
-export { default as ProgressListSmall } from './lib/data/ProgressListSmall.astro';
-export { default as RatingBreakdownBar } from './lib/data/RatingBreakdownBar.astro';
-export { default as SparklineStatCard } from './lib/data/SparklineStatCard.astro';
-export { default as StatsGridDashboard } from './lib/data/StatsGridDashboard.astro';
-export { default as StepperDataVertical } from './lib/data/StepperDataVertical.astro';
-export { default as TagCloudData } from './lib/data/TagCloudData.astro';
-export { default as TimelineHorizSteps } from './lib/data/TimelineHorizSteps.astro';
-export { default as TreeItemInteractive } from './lib/data/TreeItemInteractive.astro';
-export { default as UserDirectoryItem } from './lib/data/UserDirectoryItem.astro';
-export { default as VerticalTimeline } from './lib/data/VerticalTimeline.astro';
-
-// Feedback
-export { default as AnimatedCheckmark } from './lib/feedback/AnimatedCheckmark.astro';
-export { default as Badge } from './lib/feedback/Badge.astro';
-export { default as CircleProgress } from './lib/feedback/CircleProgress.astro';
-export { default as ConfettiFeedback } from './lib/feedback/ConfettiFeedback.astro';
-export { default as CyberGlitchAlert } from './lib/feedback/CyberGlitchAlert.astro';
-export { default as EmptyStateCard } from './lib/feedback/EmptyStateCard.astro';
-export { default as GlassAlert } from './lib/feedback/GlassAlert.astro';
-export { default as GlassModal } from './lib/feedback/GlassModal.astro';
-export { default as GlassProgress } from './lib/feedback/GlassProgress.astro';
-export { default as IndicatorBadgeMinimal } from './lib/feedback/IndicatorBadgeMinimal.astro';
-export { default as NeonSpinner } from './lib/feedback/NeonSpinner.astro';
-export { default as PulseDot } from './lib/feedback/PulseDot.astro';
-export { default as RatingPill } from './lib/feedback/RatingPill.astro';
-export { default as ShakeErrorGroup } from './lib/feedback/ShakeErrorGroup.astro';
-export { default as SimpleTooltip } from './lib/feedback/SimpleTooltip.astro';
-export { default as SkeletonList } from './lib/feedback/SkeletonList.astro';
-export { default as Spotlight } from './lib/feedback/Spotlight.astro';
-export { default as StepProgress } from './lib/feedback/StepProgress.astro';
-export { default as ToastNotif } from './lib/feedback/ToastNotif.astro';
-export { default as TypingIndicator } from './lib/feedback/TypingIndicator.astro';
-
-// Forms
-export { default as AnimatedInput } from './lib/forms/AnimatedInput.astro';
-export { default as ChipInput } from './lib/forms/ChipInput.astro';
-export { default as ColorPickerInput } from './lib/forms/ColorPickerInput.astro';
-export { default as CurrencyInput } from './lib/forms/CurrencyInput.astro';
-export { default as CustomRadioGroup } from './lib/forms/CustomRadioGroup.astro';
-export { default as CyberpunkCheckbox } from './lib/forms/CyberpunkCheckbox.astro';
-export { default as DragDropUpload } from './lib/forms/DragDropUpload.astro';
-export { default as ErrorInput } from './lib/forms/ErrorInput.astro';
-export { default as FloatingPassword } from './lib/forms/FloatingPassword.astro';
-export { default as FormGroupVertical } from './lib/forms/FormGroupVertical.astro';
-export { default as GlassSlider } from './lib/forms/GlassSlider.astro';
-export { default as GlassTextarea } from './lib/forms/GlassTextarea.astro';
-export { default as ModernSelect } from './lib/forms/ModernSelect.astro';
-export { default as NeumorphicSwitch } from './lib/forms/NeumorphicSwitch.astro';
-export { default as OTPInput } from './lib/forms/OTPInput.astro';
-export { default as RatingStars } from './lib/forms/RatingStars.astro';
-export { default as SearchReveal } from './lib/forms/SearchReveal.astro';
-export { default as SegmentedControl } from './lib/forms/SegmentedControl.astro';
-export { default as SimpleFileInput } from './lib/forms/SimpleFileInput.astro';
-export { default as StepperInput } from './lib/forms/StepperInput.astro';
-
-// Layout
-export { default as BentoGrid3 } from './lib/layout/BentoGrid3.astro';
-export { default as CenterFixedBox } from './lib/layout/CenterFixedBox.astro';
-export { default as CenteredContainer } from './lib/layout/CenteredContainer.astro';
-export { default as ClusterHorizontal } from './lib/layout/ClusterHorizontal.astro';
-export { default as FeatureHero } from './lib/layout/FeatureHero.astro';
-export { default as FooterCenteredMinimal } from './lib/layout/FooterCenteredMinimal.astro';
-export { default as FullBleedSection } from './lib/layout/FullBleedSection.astro';
-export { default as GalleryGrid4 } from './lib/layout/GalleryGrid4.astro';
-export { default as GlassCardGrid } from './lib/layout/GlassCardGrid.astro';
-export { default as GlassSectionHeader } from './lib/layout/GlassSectionHeader.astro';
-export { default as LandingSectionSplit } from './lib/layout/LandingSectionSplit.astro';
-export { default as MasonryGrid } from './lib/layout/MasonryGrid.astro';
-export { default as MinimalFooterGrid } from './lib/layout/MinimalFooterGrid.astro';
-export { default as ScrollSnapSection } from './lib/layout/ScrollSnapSection.astro';
-export { default as SectionDividerText } from './lib/layout/SectionDividerText.astro';
-export { default as SidebarLayoutWrapper } from './lib/layout/SidebarLayoutWrapper.astro';
-export { default as SplitScreenLayout } from './lib/layout/SplitScreenLayout.astro';
-export { default as StepLayoutVertical } from './lib/layout/StepLayoutVertical.astro';
-export { default as StickySidebarWrapper } from './lib/layout/StickySidebarWrapper.astro';
-export { default as VerticalStack } from './lib/layout/VerticalStack.astro';
-
-// Navigation
-export { default as AnchorSideNav } from './lib/navigation/AnchorSideNav.astro';
-export { default as BottomNavMobile } from './lib/navigation/BottomNavMobile.astro';
-export { default as BreadcrumbsMinimal } from './lib/navigation/BreadcrumbsMinimal.astro';
-export { default as BurgerMorphIcon } from './lib/navigation/BurgerMorphIcon.astro';
-export { default as CommandPaletteUI } from './lib/navigation/CommandPaletteUI.astro';
-export { default as DotNavigationSlider } from './lib/navigation/DotNavigationSlider.astro';
-export { default as FloatingTabBar } from './lib/navigation/FloatingTabBar.astro';
-export { default as GlassNavbar } from './lib/navigation/GlassNavbar.astro';
-export { default as LangSwitcherPill } from './lib/navigation/LangSwitcherPill.astro';
-export { default as MegaMenuGlass } from './lib/navigation/MegaMenuGlass.astro';
-export { default as MinimalSidebar } from './lib/navigation/MinimalSidebar.astro';
-export { default as PaginationGlass } from './lib/navigation/PaginationGlass.astro';
-export { default as PaginationInfiniteUI } from './lib/navigation/PaginationInfiniteUI.astro';
-export { default as RadialIconMenu } from './lib/navigation/RadialIconMenu.astro';
-export { default as RetroArcadeMenu } from './lib/navigation/RetroArcadeMenu.astro';
-export { default as ScrollProgressTop } from './lib/navigation/ScrollProgressTop.astro';
-export { default as SimpleFooterGlass } from './lib/navigation/SimpleFooterGlass.astro';
-export { default as TabUnderline } from './lib/navigation/TabUnderline.astro';
-export { default as UserProfileNav } from './lib/navigation/UserProfileNav.astro';
-export { default as VerticalTabs } from './lib/navigation/VerticalTabs.astro';
-
-// Overlays
-export { default as AgeVerificationOverlay } from './lib/overlays/AgeVerificationOverlay.astro';
-export { default as BackdropBlurMask } from './lib/overlays/BackdropBlurMask.astro';
-export { default as BottomSheetMobile } from './lib/overlays/BottomSheetMobile.astro';
-export { default as CommandDialog } from './lib/overlays/CommandDialog.astro';
-export { default as ContextMenuOverlay } from './lib/overlays/ContextMenuOverlay.astro';
-export { default as CookieBannerGlass } from './lib/overlays/CookieBannerGlass.astro';
-export { default as ExitIntentOverlay } from './lib/overlays/ExitIntentOverlay.astro';
-export { default as FloatingTrayActions } from './lib/overlays/FloatingTrayActions.astro';
-export { default as HelpBubbleOverlay } from './lib/overlays/HelpBubbleOverlay.astro';
-export { default as LightboxOverlay } from './lib/overlays/LightboxOverlay.astro';
-export { default as LoadingOverlayFull } from './lib/overlays/LoadingOverlayFull.astro';
-export { default as MobileNavOverlay } from './lib/overlays/MobileNavOverlay.astro';
-export { default as OverlayModal } from './lib/overlays/OverlayModal.astro';
-export { default as PopoverMenuGlass } from './lib/overlays/PopoverMenuGlass.astro';
-export { default as SearchOverlayFullscreen } from './lib/overlays/SearchOverlayFullscreen.astro';
-export { default as SideDrawerRight } from './lib/overlays/SideDrawerRight.astro';
-export { default as SplashIntroOverlay } from './lib/overlays/SplashIntroOverlay.astro';
-export { default as SpotlightIndicator } from './lib/overlays/SpotlightIndicator.astro';
-export { default as ToastStackOverlay } from './lib/overlays/ToastStackOverlay.astro';
-export { default as TooltipActionTray } from './lib/overlays/TooltipActionTray.astro';
-
-// Typography
-export { default as AnimatedUnderlineLink } from './lib/typography/AnimatedUnderlineLink.astro';
-export { default as BackgroundClipMask } from './lib/typography/BackgroundClipMask.astro';
-export { default as CodeInlineGlass } from './lib/typography/CodeInlineGlass.astro';
-export { default as CyberpunkGlitchText } from './lib/typography/CyberpunkGlitchText.astro';
-export { default as DropCapParagraph } from './lib/typography/DropCapParagraph.astro';
-export { default as FadedVerticalText } from './lib/typography/FadedVerticalText.astro';
-export { default as FloatingTextLabel } from './lib/typography/FloatingTextLabel.astro';
-export { default as GlassBlockQuote } from './lib/typography/GlassBlockQuote.astro';
-export { default as GlassTextReveal } from './lib/typography/GlassTextReveal.astro';
-export { default as GradientHeading } from './lib/typography/GradientHeading.astro';
-export { default as GradientUnderlineLink } from './lib/typography/GradientUnderlineLink.astro';
-export { default as KbdIndicator } from './lib/typography/KbdIndicator.astro';
-export { default as LetterSpacingWide } from './lib/typography/LetterSpacingWide.astro';
-export { default as MinimalListMarkers } from './lib/typography/MinimalListMarkers.astro';
-export { default as MonospaceStatLine } from './lib/typography/MonospaceStatLine.astro';
-export { default as NeonTextHighlight } from './lib/typography/NeonTextHighlight.astro';
-export { default as ShadowRevealText } from './lib/typography/ShadowRevealText.astro';
-export { default as StrokeHeadingOutline } from './lib/typography/StrokeHeadingOutline.astro';
-export { default as Text3DLayer } from './lib/typography/Text3DLayer.astro';
-export { default as TypewriterText } from './lib/typography/TypewriterText.astro';
-
-// Sections
-export * from './lib/sections';
-
-// Charts
+// Re-export all categories completely
+export * from './lib/buttons';
+export * from './lib/cards';
 export * from './lib/charts';
+export * from './lib/data';
+export * from './lib/feedback';
+export * from './lib/forms';
+export * from './lib/layout';
+export * from './lib/navigation';
+export * from './lib/overlays';
+export * from './lib/sections';
+export * from './lib/typography';

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

@@ -0,0 +1,162 @@
+---
+/**
+ * NeonBorderButton — Futuristic button wrapped in an animated rotating neon conic-gradient border.
+ * 
+ * @param {string} color - Primary neon hue (e.g. '#fbbf24', '#38bdf8', '#a855f7'). Default is '#d4a017'.
+ * @param {'sm' | 'md' | 'lg'} size - Button size variant. Default is 'md'.
+ * @param {string} href - Optional link destination.
+ * @param {boolean} disabled - Whether the button is disabled.
+ * @param {string} className - Additional CSS class names.
+ */
+interface Props {
+  color?: string;
+  size?: 'sm' | 'md' | 'lg';
+  href?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const {
+  color = '#d4a017',
+  size = 'md',
+  href,
+  disabled = false,
+  className = '',
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag
+  href={href}
+  disabled={!href && disabled ? true : undefined}
+  aria-disabled={disabled ? 'true' : undefined}
+  class:list={['neon-border-btn', `neon-border-btn--${size}`, className]}
+  style={`--neon-accent: ${color};`}
+>
+  <span class="neon-border-btn__glow" aria-hidden="true"></span>
+  <span class="neon-border-btn__border" aria-hidden="true"></span>
+  <span class="neon-border-btn__content">
+    <slot />
+  </span>
+</Tag>
+
+<style>
+  .neon-border-btn {
+    --neon-speed: 4s;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    border: none;
+    background: transparent;
+    border-radius: var(--r-md, 12px);
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.25s ease;
+  }
+
+  .neon-border-btn:hover {
+    transform: translateY(-2px);
+  }
+
+  .neon-border-btn:focus-visible {
+    outline: 2px solid var(--neon-accent);
+    outline-offset: 4px;
+  }
+
+  .neon-border-btn[disabled],
+  .neon-border-btn[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Sizes */
+  .neon-border-btn--sm .neon-border-btn__content {
+    padding: 0.45rem 1rem;
+    font-size: 0.8rem;
+  }
+  .neon-border-btn--md .neon-border-btn__content {
+    padding: 0.75rem 1.6rem;
+    font-size: 0.92rem;
+  }
+  .neon-border-btn--lg .neon-border-btn__content {
+    padding: 1rem 2.2rem;
+    font-size: 1.05rem;
+  }
+
+  /* Border track & animated beam */
+  .neon-border-btn__border {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1.5px;
+    background: conic-gradient(
+      from 0deg,
+      transparent 0deg,
+      transparent 90deg,
+      var(--neon-accent) 180deg,
+      transparent 270deg,
+      transparent 360deg
+    );
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    -webkit-mask-composite: xor;
+    animation: neon-spin var(--neon-speed) linear infinite;
+    pointer-events: none;
+  }
+
+  .neon-border-btn__glow {
+    position: absolute;
+    inset: -3px;
+    border-radius: inherit;
+    background: radial-gradient(circle, var(--neon-accent), transparent 70%);
+    opacity: 0;
+    filter: blur(14px);
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  }
+
+  .neon-border-btn:hover .neon-border-btn__glow {
+    opacity: 0.5;
+  }
+
+  .neon-border-btn__content {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2, 0.5rem);
+    width: 100%;
+    height: 100%;
+    background: rgba(10, 10, 12, 0.95);
+    border-radius: inherit;
+    color: var(--c-text-1, #ffffff);
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    backdrop-filter: blur(16px);
+    transition: background 0.2s ease, color 0.2s ease;
+  }
+
+  .neon-border-btn:hover .neon-border-btn__content {
+    background: rgba(16, 16, 20, 0.98);
+    color: var(--neon-accent);
+  }
+
+  @keyframes neon-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .neon-border-btn__border {
+      animation: none;
+      background: var(--neon-accent);
+    }
+  }
+</style>

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

@@ -0,0 +1,199 @@
+---
+/**
+ * RippleButton — Interactive button featuring an expanding click ripple effect with glass styling.
+ * 
+ * @param {'primary' | 'secondary' | 'ghost'} variant - Visual style variant. Default is 'primary'.
+ * @param {'sm' | 'md' | 'lg'} size - Button size variant. Default is 'md'.
+ * @param {string} href - Optional link destination.
+ * @param {boolean} disabled - Whether the button is disabled.
+ * @param {string} className - Additional CSS class names.
+ */
+interface Props {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  href?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const {
+  variant = 'primary',
+  size = 'md',
+  href,
+  disabled = false,
+  className = '',
+} = Astro.props;
+
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag
+  href={href}
+  disabled={!href && disabled ? true : undefined}
+  aria-disabled={disabled ? 'true' : undefined}
+  class:list={['ripple-btn', `ripple-btn--${variant}`, `ripple-btn--${size}`, className]}
+  data-ripple-btn
+>
+  <span class="ripple-btn__label"><slot /></span>
+  <span class="ripple-btn__container" aria-hidden="true"></span>
+</Tag>
+
+<style>
+  .ripple-btn {
+    --btn-primary-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.9), rgba(212, 160, 23, 0.9));
+    --btn-primary-color: #050505;
+    --btn-secondary-bg: rgba(255, 255, 255, 0.05);
+    --btn-secondary-color: var(--c-text-1, #ffffff);
+    --btn-ghost-bg: transparent;
+    --btn-ghost-color: var(--c-primary-light, #d4a017);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-weight: 700;
+    text-decoration: none;
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
+  }
+
+  .ripple-btn:focus-visible {
+    outline: 2px solid var(--c-primary-light, #d4a017);
+    outline-offset: 3px;
+  }
+
+  .ripple-btn[disabled],
+  .ripple-btn[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Variants */
+  .ripple-btn--primary {
+    background: var(--btn-primary-bg);
+    color: var(--btn-primary-color);
+    box-shadow: 0 4px 20px rgba(184, 134, 11, 0.25);
+  }
+  .ripple-btn--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(184, 134, 11, 0.4);
+    border-color: rgba(254, 243, 199, 0.4);
+  }
+
+  .ripple-btn--secondary {
+    background: var(--btn-secondary-bg);
+    color: var(--btn-secondary-color);
+    backdrop-filter: blur(12px);
+  }
+  .ripple-btn--secondary:hover {
+    background: rgba(255, 255, 255, 0.09);
+    border-color: rgba(184, 134, 11, 0.3);
+    transform: translateY(-2px);
+  }
+
+  .ripple-btn--ghost {
+    background: var(--btn-ghost-bg);
+    color: var(--btn-ghost-color);
+    border-color: transparent;
+  }
+  .ripple-btn--ghost:hover {
+    background: rgba(184, 134, 11, 0.1);
+    border-color: rgba(184, 134, 11, 0.2);
+  }
+
+  /* Sizes */
+  .ripple-btn--sm {
+    padding: 0.45rem 1rem;
+    font-size: 0.8rem;
+    letter-spacing: 0.02em;
+  }
+  .ripple-btn--md {
+    padding: 0.75rem 1.6rem;
+    font-size: 0.92rem;
+    letter-spacing: 0.02em;
+  }
+  .ripple-btn--lg {
+    padding: 1rem 2.2rem;
+    font-size: 1.05rem;
+    letter-spacing: 0.03em;
+  }
+
+  .ripple-btn__label {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2, 0.5rem);
+    pointer-events: none;
+  }
+
+  .ripple-btn__container {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  :global(.ripple-effect) {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple-grow 0.6s cubic-bezier(0, 0, 0.2, 1) forwards;
+    background: rgba(255, 255, 255, 0.35);
+    pointer-events: none;
+  }
+
+  @keyframes ripple-grow {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ripple-btn { transition: none; }
+    :global(.ripple-effect) { display: none; }
+  }
+</style>
+
+<script>
+  function setupRipples() {
+    const buttons = document.querySelectorAll('[data-ripple-btn]');
+    buttons.forEach((btn) => {
+      if (btn.getAttribute('data-ripple-init')) return;
+      btn.setAttribute('data-ripple-init', 'true');
+
+      btn.addEventListener('pointerdown', (e: Event) => {
+        const mouseEvent = e as MouseEvent;
+        const target = mouseEvent.currentTarget as HTMLElement;
+        const container = target.querySelector('.ripple-btn__container');
+        if (!container) return;
+
+        const rect = target.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = mouseEvent.clientX - rect.left - size / 2;
+        const y = mouseEvent.clientY - rect.top - size / 2;
+
+        const ripple = document.createElement('span');
+        ripple.className = 'ripple-effect';
+        ripple.style.width = `${size}px`;
+        ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+
+        container.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 650);
+      });
+    });
+  }
+
+  setupRipples();
+  document.addEventListener('astro:page-load', setupRipples);
+</script>