astro-component-kit 0.2.2 → 0.3.1

package/src/components/lib/layout/StickySidebarWrapper.astro

@@ -1,10 +1,73 @@
 ---
+/**
+ * StickySidebarWrapper — A two-column layout where the sidebar content stays visible while scrolling.
+ *
+ * Creates a main + sidebar layout where the sidebar column uses CSS sticky positioning
+ * to remain visible as the user scrolls through the main content. Stacks vertically on mobile.
+ *
+ * @param {string} sidebarWidth - Width of the sidebar. Default: '280px'.
+ * @param {string} stickyTop - Distance from the top when sticky. Default: '100px'.
+ * @param {string} gap - Gap between main and sidebar columns. Default: '2rem'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```astro
+ * <StickySidebarWrapper sidebarWidth="260px" stickyTop="120px">
+ *   <div slot="main">
+ *     <p>Long scrolling content...</p>
+ *   </div>
+ *   <div slot="sidebar">
+ *     <TableOfContents />
+ *   </div>
+ * </StickySidebarWrapper>
+ * ```
+ */
+interface Props {
+  sidebarWidth?: string;
+  stickyTop?: string;
+  gap?: string;
+  className?: string;
+}
+
+const { sidebarWidth = '280px', stickyTop = '100px', gap = '2rem', className = '' } = Astro.props;
 ---
-<div class="stick-lay">
-  <main><slot name="main" /></main>
-  <aside><slot name="sidebar" /></aside>
+
+<div class:list=['sticky-sidebar', className]} style={`--sidebar-w: ${sidebarWidth}; --sticky-top: ${stickyTop}; --col-gap: ${gap}`}>
+  <main class="sticky-sidebar__main">
+    <slot name="main" />
+  </main>
+  <aside class="sticky-sidebar__aside">
+    <div class="sticky-sidebar__inner">
+      <slot name="sidebar" />
+    </div>
+  </aside>
 </div>
+
 <style>
-  .stick-lay { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; }
-  aside :global(> *) { position: sticky; top: 100px; }
-</style>
+  .sticky-sidebar {
+    display: grid;
+    grid-template-columns: 1fr var(--sidebar-w, 280px);
+    gap: var(--col-gap, 2rem);
+    align-items: start;
+  }
+  .sticky-sidebar__main {
+    min-width: 0;
+  }
+  .sticky-sidebar__aside {
+    min-width: 0;
+  }
+  .sticky-sidebar__inner {
+    position: sticky;
+    top: var(--sticky-top, 100px);
+  }
+
+  @media (max-width: 768px) {
+    .sticky-sidebar {
+      grid-template-columns: 1fr;
+      gap: var(--sp-6);
+    }
+    .sticky-sidebar__inner {
+      position: static;
+    }
+  }
+</style>

package/src/components/lib/layout/VerticalStack.astro

@@ -1,8 +1,38 @@
 ---
-interface Props { gap?: string; }
-const { gap = '1.5rem' } = Astro.props;
+/**
+ * VerticalStack — A flexible vertical layout with configurable gap spacing.
+ *
+ * Stacks children vertically with consistent spacing between them.
+ * Ideal for grouping related content like form fields, card lists, or text blocks.
+ *
+ * @param {string} gap - Space between children. Default: '1.5rem'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```astro
+ * <VerticalStack gap="2rem">
+ *   <Card title="First" />
+ *   <Card title="Second" />
+ *   <Card title="Third" />
+ * </VerticalStack>
+ * ```
+ */
+interface Props {
+  gap?: string;
+  className?: string;
+}
+
+const { gap = '1.5rem', className = '' } = Astro.props;
 ---
-<div class="v-stack" style={`--gap: ${gap}`}><slot /></div>
+
+<div class:list={['vertical-stack', className]} style={`--stack-gap: ${gap}`}>
+  <slot />
+</div>
+
 <style>
-  .v-stack { display: flex; flex-direction: column; gap: var(--gap); }
-</style>
+  .vertical-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap);
+  }
+</style>

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

@@ -1,20 +1,23 @@
-export { default as BentoGrid3 } from './BentoGrid3.astro';
+// src/components/lib/layout/index.ts
+// Barrel export for layout components
+
 export { default as CenteredContainer } from './CenteredContainer.astro';
-export { default as CenterFixedBox } from './CenterFixedBox.astro';
-export { default as ClusterHorizontal } from './ClusterHorizontal.astro';
-export { default as FeatureHero } from './FeatureHero.astro';
-export { default as FooterCenteredMinimal } from './FooterCenteredMinimal.astro';
-export { default as FullBleedSection } from './FullBleedSection.astro';
-export { default as GalleryGrid4 } from './GalleryGrid4.astro';
 export { default as GlassCardGrid } from './GlassCardGrid.astro';
-export { default as GlassSectionHeader } from './GlassSectionHeader.astro';
-export { default as LandingSectionSplit } from './LandingSectionSplit.astro';
+export { default as SplitScreenLayout } from './SplitScreenLayout.astro';
 export { default as MasonryGrid } from './MasonryGrid.astro';
-export { default as MinimalFooterGrid } from './MinimalFooterGrid.astro';
-export { default as ScrollSnapSection } from './ScrollSnapSection.astro';
 export { default as SectionDividerText } from './SectionDividerText.astro';
+export { default as FeatureHero } from './FeatureHero.astro';
+export { default as VerticalStack } from './VerticalStack.astro';
 export { default as SidebarLayoutWrapper } from './SidebarLayoutWrapper.astro';
-export { default as SplitScreenLayout } from './SplitScreenLayout.astro';
-export { default as StepLayoutVertical } from './StepLayoutVertical.astro';
+export { default as BentoGrid3 } from './BentoGrid3.astro';
+export { default as GlassSectionHeader } from './GlassSectionHeader.astro';
+export { default as FullBleedSection } from './FullBleedSection.astro';
+export { default as MinimalFooterGrid } from './MinimalFooterGrid.astro';
+export { default as ScrollSnapSection } from './ScrollSnapSection.astro';
 export { default as StickySidebarWrapper } from './StickySidebarWrapper.astro';
-export { default as VerticalStack } from './VerticalStack.astro';
+export { default as ClusterHorizontal } from './ClusterHorizontal.astro';
+export { default as CenterFixedBox } from './CenterFixedBox.astro';
+export { default as GalleryGrid4 } from './GalleryGrid4.astro';
+export { default as StepLayoutVertical } from './StepLayoutVertical.astro';
+export { default as LandingSectionSplit } from './LandingSectionSplit.astro';
+export { default as FooterCenteredMinimal } from './FooterCenteredMinimal.astro';

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

@@ -1,3 +1,6 @@
+// src/components/lib/navigation/index.ts
+// Barrel export for navigation components
+
 export { default as AnchorSideNav } from './AnchorSideNav.astro';
 export { default as BottomNavMobile } from './BottomNavMobile.astro';
 export { default as BreadcrumbsMinimal } from './BreadcrumbsMinimal.astro';

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

@@ -1,3 +1,6 @@
+// src/components/lib/overlays/index.ts
+// Barrel export for overlay components
+
 export { default as AgeVerificationOverlay } from './AgeVerificationOverlay.astro';
 export { default as BackdropBlurMask } from './BackdropBlurMask.astro';
 export { default as BottomSheetMobile } from './BottomSheetMobile.astro';

package/src/components/lib/sections/ContactGlassForm.astro

@@ -0,0 +1,361 @@
+---
+/**
+ * ContactGlassForm — Full-page interactive contact and support section with glassmorphism form and live channel indicators.
+ * 
+ * @param {string} badge - Eyebrow badge text.
+ * @param {string} title - Section main heading.
+ * @param {string} subtitle - Description text.
+ */
+interface Props {
+  badge?: string;
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+const {
+  badge = "Get In Touch",
+  title = "Let's Build Something Exceptional Together",
+  subtitle = "Have a question, custom component inquiry, or need enterprise support? Our team is here to assist.",
+  className = ""
+} = Astro.props;
+---
+
+<section class={`contact-section ${className}`} aria-labelledby="contact-title">
+  <div class="contact-bg" aria-hidden="true">
+    <div class="contact-glow"></div>
+  </div>
+
+  <div class="container">
+    <div class="contact-grid">
+      <!-- Left Column: Info & Channels -->
+      <div class="contact-info">
+        {badge && <span class="contact-badge">{badge}</span>}
+        <h2 id="contact-title" class="contact-title">{title}</h2>
+        <p class="contact-subtitle">{subtitle}</p>
+
+        <!-- Response SLA Badge -->
+        <div class="sla-badge">
+          <span class="sla-dot"></span>
+          <span>Average response time: <strong>under 2 hours</strong></span>
+        </div>
+
+        <!-- Channels List -->
+        <div class="channels-list">
+          <div class="channel-card">
+            <div class="channel-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+            </div>
+            <div class="channel-details">
+              <span class="channel-label">Direct Email</span>
+              <a href="mailto:support@astrocomponents.dev" class="channel-link">support@astrocomponents.dev</a>
+            </div>
+          </div>
+
+          <div class="channel-card">
+            <div class="channel-icon">
+              <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="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
+            </div>
+            <div class="channel-details">
+              <span class="channel-label">Open Source GitHub</span>
+              <a href="https://github.com" target="_blank" rel="noopener" class="channel-link">github.com/astro-components</a>
+            </div>
+          </div>
+
+          <div class="channel-card">
+            <div class="channel-icon">
+              <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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            </div>
+            <div class="channel-details">
+              <span class="channel-label">Community Discord</span>
+              <a href="https://discord.com" target="_blank" rel="noopener" class="channel-link">discord.gg/astro-components</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column: Interactive Glass Form -->
+      <div class="contact-form-wrap">
+        <form class="contact-form" onsubmit="event.preventDefault(); alert('Message sent successfully!');">
+          <h3 class="form-title">Send us a message</h3>
+          <p class="form-desc">Fill in the details below and we will get back to you promptly.</p>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="c-name">Full Name</label>
+              <input type="text" id="c-name" required placeholder="Alex Morgan" class="form-input" />
+            </div>
+            <div class="form-group">
+              <label for="c-email">Work Email</label>
+              <input type="email" id="c-email" required placeholder="alex@company.com" class="form-input" />
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="c-subject">Subject / Inquiry Type</label>
+            <select id="c-subject" class="form-select">
+              <option value="general">General Question</option>
+              <option value="enterprise">Enterprise Custom Components</option>
+              <option value="bug">Bug Report / Issue</option>
+              <option value="partnership">Partnership & Sponsorship</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="c-message">Your Message</label>
+            <textarea id="c-message" required rows="4" placeholder="Tell us how we can help..." class="form-textarea"></textarea>
+          </div>
+
+          <button type="submit" class="submit-btn">
+            <span>Send Message</span>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .contact-section {
+    position: relative;
+    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
+    background: var(--c-bg-primary, #030712);
+    overflow: hidden;
+  }
+
+  .contact-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .contact-glow {
+    position: absolute;
+    top: 30%;
+    right: 15%;
+    width: 550px;
+    height: 550px;
+    background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%);
+    filter: blur(120px);
+  }
+
+  .container {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .contact-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+  }
+
+  .contact-badge {
+    display: inline-flex;
+    padding: 0.35rem 0.9rem;
+    border-radius: 9999px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    background: rgba(184, 134, 11, 0.12);
+    color: #eab308;
+    border: 1px solid rgba(234, 179, 8, 0.25);
+    margin-bottom: var(--sp-4, 1rem);
+  }
+
+  .contact-title {
+    font-size: clamp(2rem, 4vw, 2.8rem);
+    font-weight: 900;
+    color: #fff;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    margin: 0 0 1rem;
+  }
+
+  .contact-subtitle {
+    font-size: 1.05rem;
+    color: #94a3b8;
+    line-height: 1.6;
+    margin: 0 0 2rem;
+  }
+
+  .sla-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.5rem 1rem;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.25);
+    border-radius: 9999px;
+    font-size: 0.82rem;
+    color: #cbd5e1;
+    margin-bottom: 2.5rem;
+  }
+
+  .sla-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #10b981;
+    box-shadow: 0 0 8px #10b981;
+  }
+
+  .channels-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .channel-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background: rgba(15, 23, 42, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 14px;
+    backdrop-filter: blur(10px);
+  }
+
+  .channel-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    color: #eab308;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .channel-details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .channel-label {
+    font-size: 0.75rem;
+    color: #64748b;
+    font-weight: 600;
+  }
+
+  .channel-link {
+    font-size: 0.92rem;
+    color: #cbd5e1;
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s ease;
+  }
+
+  .channel-link:hover {
+    color: #fff;
+  }
+
+  /* Form */
+  .contact-form {
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(24px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--r-2xl, 24px);
+    padding: clamp(1.75rem, 4vw, 2.5rem);
+    box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
+  }
+
+  .form-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    color: #fff;
+    margin: 0 0 0.4rem;
+  }
+
+  .form-desc {
+    font-size: 0.88rem;
+    color: #94a3b8;
+    margin: 0 0 1.75rem;
+  }
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .form-group label {
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #cbd5e1;
+  }
+
+  .form-input, .form-select, .form-textarea {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    color: #fff;
+    font-size: 0.92rem;
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .form-input:focus, .form-select:focus, .form-textarea:focus {
+    border-color: #eab308;
+    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
+  }
+
+  .form-select option {
+    background: #0f172a;
+    color: #fff;
+  }
+
+  .submit-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.85rem 1.5rem;
+    background: linear-gradient(135deg, #eab308, #d97706);
+    border: none;
+    border-radius: 10px;
+    color: #000;
+    font-size: 0.95rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.3);
+  }
+
+  .submit-btn:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.45);
+  }
+
+  @media (max-width: 960px) {
+    .contact-grid {
+      grid-template-columns: 1fr;
+      gap: 3rem;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .form-row {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>