astro-component-kit 0.3.1 → 0.4.1

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

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astro.props;
 ---
 
+<div class="cq-overlays-showcase-cq">
 <section class="overlays-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -77,8 +78,9 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-overlays-showcase-cq { container-type: inline-size; }
   .overlays-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -95,8 +97,8 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--c-primary-light);
-    background: rgba(184,134,11,0.1);
-    border: 1px solid rgba(184,134,11,0.25);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     border-radius: var(--r-full);
     margin-bottom: var(--sp-4);
   }
@@ -118,7 +120,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     padding: var(--sp-12);
     background: rgba(10, 10, 10, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl);
     margin-bottom: var(--sp-6);
     box-shadow: 0 20px 60px rgba(0,0,0,0.4);
@@ -160,9 +162,9 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     padding: var(--sp-6);
     background: rgba(30, 30, 30, 0.9);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-lg);
-    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
+    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgb(var(--ink-rgb, 255 255 255) / 0.05);
     transform: scale(1) translateY(0);
   }
   .overlay-card__header {
@@ -191,7 +193,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     transition: all 0.2s ease;
   }
   .overlay-close:hover {
-    background: rgba(255,255,255,0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
     color: var(--c-text-1);
   }
   .overlay-card__body {
@@ -226,7 +228,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     width: 200px;
     background: rgba(25, 25, 25, 0.95);
     backdrop-filter: blur(18px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-lg);
     box-shadow: -12px 0 40px rgba(0,0,0,0.4);
     transform: translateX(0);
@@ -278,15 +280,15 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--c-text-2);
-    background: rgba(255,255,255,0.04);
-    border: 1px solid rgba(255,255,255,0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-md);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   .popover-target:hover {
     color: var(--c-text-1);
-    border-color: rgba(184,134,11,0.3);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .popover-content {
     position: absolute;
@@ -297,7 +299,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     padding: var(--sp-3) var(--sp-4);
     background: rgba(40, 40, 40, 0.95);
     backdrop-filter: blur(14px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-md);
     box-shadow: 0 12px 32px rgba(0,0,0,0.4);
   }
@@ -309,8 +311,8 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     width: 10px;
     height: 10px;
     background: rgba(40, 40, 40, 0.95);
-    border-right: 1px solid rgba(255,255,255,0.1);
-    border-bottom: 1px solid rgba(255,255,255,0.1);
+    border-right: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     transform: translateX(-50%) rotate(45deg);
   }
   .popover-text {
@@ -334,12 +336,12 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
   }
   .btn--primary {
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
-    color: #0a0a0a;
-    box-shadow: 0 4px 20px rgba(184,134,11,0.3);
+    color: var(--c-on-primary, #0a0a0a);
+    box-shadow: 0 4px 20px color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .btn--primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 30px rgba(184,134,11,0.4);
+    box-shadow: 0 8px 30px color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
   }
   .btn--ghost {
     background: transparent;
@@ -354,7 +356,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
   .usage-code {
     text-align: center;
     padding: var(--sp-4);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
   }
   .usage-code code {
@@ -363,7 +365,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .preview-stage { padding: var(--sp-8) var(--sp-4); }
     .overlay-card { width: 240px; padding: var(--sp-4); }
     .drawer-panel { width: 160px; right: var(--sp-2); }

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

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-pricing-comparison-matrix-cq">
 <section class={`pricing-section ${className}`} aria-labelledby="pricing-title">
   <div class="pricing-bg" aria-hidden="true">
     <div class="pricing-glow"></div>
@@ -129,7 +130,7 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <script>
   const toggleBtn = document.getElementById('billingToggleBtn');
   const priceVals = document.querySelectorAll('.price-val');
@@ -149,6 +150,7 @@ const {
 </script>
 
 <style>
+  .cq-pricing-comparison-matrix-cq { container-type: inline-size; }
   .pricing-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -170,7 +172,7 @@ const {
     transform: translateX(-50%);
     width: 600px;
     height: 500px;
-    background: radial-gradient(circle, rgba(184, 134, 11, 0.12), transparent 70%);
+    background: radial-gradient(circle, color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent), transparent 70%);
     filter: blur(100px);
   }
 
@@ -195,7 +197,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -224,7 +226,7 @@ const {
     gap: 0.75rem;
     padding: 0.4rem 0.8rem;
     background: rgba(15, 23, 42, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: 9999px;
   }
 
@@ -248,7 +250,7 @@ const {
     width: 44px;
     height: 24px;
     border-radius: 9999px;
-    background: rgba(255, 255, 255, 0.15);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.15);
     border: none;
     position: relative;
     cursor: pointer;
@@ -286,7 +288,7 @@ const {
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 20px);
     padding: 2.25rem 2rem;
     display: flex;
@@ -297,7 +299,7 @@ const {
 
   .plan-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
   }
 
   .plan-card--popular {
@@ -393,19 +395,19 @@ const {
   }
 
   .plan-btn--ghost {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
   }
 
   .plan-btn--ghost:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25);
   }
 
   .plan-divider {
     height: 1px;
-    background: rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     margin: 1.5rem 0;
   }
 
@@ -454,7 +456,7 @@ const {
     color: #10b981;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .pricing-cards {
       grid-template-columns: 1fr;
     }

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

@@ -0,0 +1,159 @@
+---
+/**
+ * PricingSinglePlan — One-plan pricing section: price card on one side,
+ * full feature checklist on the other, with a money-back guarantee note.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {string} planName - Plan name.
+ * @param {string} price - Formatted price.
+ * @param {string} period - Billing period label.
+ * @param {string} originalPrice - Optional struck-through price.
+ * @param {string[]} features - Included features.
+ * @param {{label: string, href: string}} cta - CTA button.
+ * @param {string} guarantee - Reassurance note under the CTA.
+ * @param {string} variant - Card style (glow|glass|minimal).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  planName?: string;
+  price?: string;
+  period?: string;
+  originalPrice?: string;
+  features?: string[];
+  cta?: { label: string; href: string };
+  guarantee?: string;
+  variant?: 'glow' | 'glass' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'One price. Everything included.',
+  subtitle = 'Lifetime access to every component, section and future update.',
+  planName = 'Lifetime license',
+  price = '$149',
+  period = 'one-time payment',
+  originalPrice = '$249',
+  features = [
+    '250+ components & sections',
+    '45 dependency-free SVG charts',
+    'Lifetime updates',
+    'Unlimited projects',
+    'Commercial license',
+    'Figma design kit',
+    'Private community',
+    'Priority email support',
+  ],
+  cta = { label: 'Get lifetime access', href: '#' },
+  guarantee = '30-day money-back guarantee. No questions asked.',
+  variant = 'glow',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `psp-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<div class="cq-pricing-single-plan-cq">
+<section class={`psp psp--${variant} psp--${size} ${className}`} aria-labelledby={id}>
+  <div class="psp__inner">
+    <header class="psp__head">
+      <h2 id={id} class="psp__title">{title}</h2>
+      <p class="psp__subtitle">{subtitle}</p>
+    </header>
+    <div class="psp__card">
+      <div class="psp__price-col">
+        <p class="psp__plan">{planName}</p>
+        <p class="psp__price">
+          {originalPrice && <s class="psp__orig"><span class="psp__sr">Was </span>{originalPrice}</s>}
+          <span class="psp__amount"><span class="psp__sr">Now </span>{price}</span>
+        </p>
+        <p class="psp__period">{period}</p>
+        <a class="psp__cta" href={cta.href}>{cta.label}</a>
+        <p class="psp__guarantee">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 12 2 2 4-4" /></svg>
+          {guarantee}
+        </p>
+      </div>
+      <div class="psp__features-col">
+        <h3 class="psp__features-title">What’s included</h3>
+        <ul class="psp__features">
+          {features.map((f) => (
+            <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{f}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+</div>
+<style>
+  .cq-pricing-single-plan-cq { container-type: inline-size; }
+  .psp {
+    --psp-py: 5.5rem;
+    padding: var(--psp-py) var(--sp-6, 1.5rem);
+    background: var(--c-bg, #050505);
+  }
+  .psp--sm { --psp-py: 3.5rem; }
+  .psp--lg { --psp-py: 7.5rem; }
+  .psp__inner { max-width: 960px; margin: 0 auto; }
+  .psp__head { text-align: center; margin-bottom: 3rem; }
+  .psp__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
+  .psp__subtitle { margin: 0; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .psp__card {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1.3fr;
+    border-radius: var(--r-xl, 28px);
+    overflow: hidden;
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08));
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
+  }
+  .psp--glow .psp__card { border-color: color-mix(in srgb, var(--c-primary-light, #d4a017) 35%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-primary-light, #d4a017) 8%, transparent), 0 40px 100px -40px color-mix(in srgb, var(--c-primary-light, #d4a017) 40%, transparent); }
+  .psp--glass .psp__card { backdrop-filter: blur(16px); background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.06), rgb(var(--ink-rgb, 255 255 255) / 0.015)); }
+  .psp--minimal .psp__card { background: transparent; }
+  .psp__price-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: clamp(2rem, 5vw, 3rem);
+    background: radial-gradient(circle at 30% 0%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 18%, transparent)), transparent 70%), rgb(var(--ink-rgb, 255 255 255) / 0.02);
+    border-right: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
+  }
+  .psp__plan { margin: 0 0 1rem; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-primary-light, #d4a017); }
+  .psp__price { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; }
+  .psp__orig { font-size: 1.25rem; color: var(--c-text-3, #8a8a8a); }
+  .psp__amount { font-size: clamp(3rem, 7vw, 4rem); font-weight: 800; letter-spacing: -0.04em; color: var(--c-text-1, #fff); line-height: 1; }
+  .psp__period { margin: 0.5rem 0 2rem; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
+  .psp__cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 52px;
+    border-radius: var(--r-md, 12px);
+    background: var(--c-primary-light, #d4a017);
+    color: var(--c-on-primary, #0a0a0a);
+    font-weight: 700;
+    text-decoration: none;
+    transition: background 0.2s ease, transform 0.2s ease;
+  }
+  .psp__cta:hover { background: var(--c-accent, #fef3c7); color: var(--c-on-primary, #0a0a0a); transform: translateY(-1px); }
+  .psp__cta:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .psp__guarantee { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-2, #a3a3a3); }
+  .psp__guarantee svg { color: var(--chart-pos, #34c38f); flex-shrink: 0; margin-top: 1px; }
+  .psp__features-col { padding: clamp(2rem, 5vw, 3rem); }
+  .psp__features-title { margin: 0 0 1.5rem; font-size: 1rem; font-weight: 650; color: var(--c-text-1, #fff); }
+  .psp__features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
+  .psp__features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.4; color: var(--c-text-1, #fff); }
+  .psp__features svg { color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
+  .psp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @container (max-width: 760px) {
+    .psp__card { grid-template-columns: 1fr; }
+    .psp__price-col { border-right: 0; border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+    .psp__features { grid-template-columns: 1fr; }
+  }
+</style>

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

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-pricing-tier-cards-cq">
 <section class={`tier-pricing-section ${className}`} aria-labelledby="tier-pricing-title">
   <div class="container">
     <div class="section-header">
@@ -79,8 +80,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-pricing-tier-cards-cq { container-type: inline-size; }
   .tier-pricing-section {
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
     background: var(--c-bg-primary, #030712);
@@ -105,7 +107,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -136,7 +138,7 @@ const {
 
   .tier-card {
     background: rgba(15, 23, 42, 0.55);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 20px;
     padding: 2.5rem 2rem;
     display: flex;
@@ -146,7 +148,7 @@ const {
 
   .tier-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2);
   }
 
   .tier-card--highlight {
@@ -163,7 +165,7 @@ const {
     font-size: 0.72rem;
     font-weight: 700;
     text-transform: uppercase;
-    background: rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     color: #cbd5e1;
     margin-bottom: 1rem;
   }
@@ -225,13 +227,13 @@ const {
   }
 
   .tier-btn--ghost {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
     color: #fff;
   }
 
   .tier-btn--ghost:hover {
-    background: rgba(255, 255, 255, 0.12);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.12);
   }
 
   .tier-list {
@@ -248,7 +250,7 @@ const {
     color: #cbd5e1;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .tier-grid {
       grid-template-columns: 1fr;
     }

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

@@ -0,0 +1,171 @@
+---
+/**
+ * PricingToggleCards — Three pricing tiers with an accessible monthly/yearly
+ * switch (role="switch"), savings badge and a highlighted recommended plan.
+ *
+ * @param {string} title - Section heading.
+ * @param {string} subtitle - Section description.
+ * @param {Array<{name: string, monthly: number, yearly: number, description: string, features: string[], cta: string, href: string, featured?: boolean}>} plans - Tiers.
+ * @param {string} currency - Currency symbol.
+ * @param {string} savingsLabel - Badge next to the yearly option.
+ * @param {string} variant - Card style (glass|solid|outline).
+ * @param {string} size - Vertical rhythm (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+interface Plan { name: string; monthly: number; yearly: number; description: string; features: string[]; cta: string; href: string; featured?: boolean }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  plans?: Plan[];
+  currency?: string;
+  savingsLabel?: string;
+  variant?: 'glass' | 'solid' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Simple pricing that scales with you',
+  subtitle = 'Start free. Upgrade when your team grows. Cancel anytime.',
+  plans = [
+    { name: 'Starter', monthly: 0, yearly: 0, description: 'For side projects and prototypes.', features: ['All components', 'Community support', '1 project'], cta: 'Get started', href: '#' },
+    { name: 'Pro', monthly: 24, yearly: 19, description: 'For professionals shipping client work.', features: ['Everything in Starter', 'Premium sections', 'Unlimited projects', 'Priority support'], cta: 'Start 14-day trial', href: '#', featured: true },
+    { name: 'Team', monthly: 79, yearly: 63, description: 'For agencies and product teams.', features: ['Everything in Pro', '10 seats included', 'Figma kit', 'Private Discord'], cta: 'Contact sales', href: '#' },
+  ],
+  currency = '$',
+  savingsLabel = 'Save 20%',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const id = `ptc-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<section class={`ptc ptc--${variant} ptc--${size} ${className}`} aria-labelledby={id} data-ptc data-period="monthly">
+  <div class="ptc__inner">
+    <header class="ptc__head">
+      <h2 id={id} class="ptc__title">{title}</h2>
+      <p class="ptc__subtitle">{subtitle}</p>
+      <div class="ptc__toggle">
+        <span class="ptc__period" id={`${id}-m`}>Monthly</span>
+        <button type="button" class="ptc__switch" role="switch" aria-checked="false" aria-labelledby={`${id}-y`}>
+          <span class="ptc__knob" aria-hidden="true"></span>
+        </button>
+        <span class="ptc__period" id={`${id}-y`}>Yearly <span class="ptc__save">{savingsLabel}</span></span>
+      </div>
+    </header>
+
+    <ul class="ptc__grid">
+      {plans.map((p) => (
+        <li class={`ptc__card ${p.featured ? 'ptc__card--featured' : ''}`}>
+          {p.featured && <span class="ptc__ribbon">Most popular</span>}
+          <h3 class="ptc__name">{p.name}</h3>
+          <p class="ptc__desc">{p.description}</p>
+          <p class="ptc__price">
+            <span class="ptc__amount" data-monthly={`${currency}${p.monthly}`} data-yearly={`${currency}${p.yearly}`}>{currency}{p.monthly}</span>
+            <span class="ptc__per">/ month<span class="ptc__billed" data-yearly-only>, billed yearly</span></span>
+          </p>
+          <a class="ptc__cta" href={p.href}>{p.cta}</a>
+          <ul class="ptc__features">
+            {p.features.map((f) => (
+              <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>{f}</li>
+            ))}
+          </ul>
+        </li>
+      ))}
+    </ul>
+    <p class="ptc__live" role="status" aria-live="polite"></p>
+  </div>
+</section>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-ptc]').forEach((root) => {
+    const sw = root.querySelector<HTMLButtonElement>('.ptc__switch');
+    const live = root.querySelector('.ptc__live');
+    sw?.addEventListener('click', () => {
+      const yearly = sw.getAttribute('aria-checked') !== 'true';
+      sw.setAttribute('aria-checked', String(yearly));
+      root.dataset.period = yearly ? 'yearly' : 'monthly';
+      root.querySelectorAll<HTMLElement>('.ptc__amount').forEach((el) => {
+        el.textContent = (yearly ? el.dataset.yearly : el.dataset.monthly) || '';
+      });
+      if (live) live.textContent = yearly ? 'Showing yearly prices' : 'Showing monthly prices';
+    });
+  });
+</script>
+
+<style>
+  .ptc {
+    --ptc-py: 5.5rem;
+    padding: var(--ptc-py) var(--sp-6, 1.5rem);
+    background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent)), transparent 70%), var(--c-bg, #050505);
+  }
+  .ptc--sm { --ptc-py: 3.5rem; }
+  .ptc--lg { --ptc-py: 7.5rem; }
+  .ptc__inner { max-width: 1120px; margin: 0 auto; }
+  .ptc__head { text-align: center; margin-bottom: 3rem; }
+  .ptc__title { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-text-1, #fff); }
+  .ptc__subtitle { margin: 0 0 2rem; font-size: 1.0625rem; color: var(--c-text-2, #a3a3a3); }
+  .ptc__toggle { display: inline-flex; align-items: center; gap: 0.85rem; font-size: 0.9375rem; color: var(--c-text-2, #a3a3a3); }
+  .ptc__switch {
+    position: relative;
+    width: 52px;
+    height: 30px;
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
+    border-radius: 999px;
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    cursor: pointer;
+    transition: background 0.25s ease;
+  }
+  .ptc__switch::after { content: ''; position: absolute; inset: -8px; }
+  .ptc__switch[aria-checked='true'] { background: var(--c-primary, #b8860b); border-color: transparent; }
+  .ptc__switch:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .ptc__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
+  .ptc__switch[aria-checked='true'] .ptc__knob { transform: translateX(22px); }
+  [data-period='monthly'] .ptc__period:first-child,
+  [data-period='yearly'] .ptc__period:last-child { color: var(--c-text-1, #fff); }
+  .ptc__save { margin-left: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(52, 195, 143, 0.15); color: #7ee2b8; font-size: 0.75rem; font-weight: 650; }
+
+  .ptc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: stretch; }
+  .ptc__card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    border-radius: var(--r-xl, 24px);
+  }
+  .ptc--glass .ptc__card { background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.05), rgb(var(--ink-rgb, 255 255 255) / 0.015)); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); backdrop-filter: blur(12px); }
+  .ptc--solid .ptc__card { background: var(--c-bg-2, #111); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+  .ptc--outline .ptc__card { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12); }
+  .ptc__card--featured { border-color: color-mix(in srgb, var(--c-primary-light, #d4a017) 55%, transparent) !important; box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--c-primary-light, #d4a017) 35%, transparent); }
+  .ptc__ribbon { position: absolute; top: -12px; left: 2rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); font-size: 0.75rem; font-weight: 700; }
+  .ptc__name { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 650; color: var(--c-text-1, #fff); }
+  .ptc__desc { margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
+  .ptc__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 1.5rem; }
+  .ptc__amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; line-height: 1; }
+  .ptc__per { font-size: 0.875rem; color: var(--c-text-3, #8a8a8a); }
+  .ptc__billed { display: none; }
+  [data-period='yearly'] .ptc__billed { display: inline; }
+  .ptc__cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 48px;
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
+    color: var(--c-text-1, #fff);
+    font-weight: 650;
+    text-decoration: none;
+    transition: background 0.2s ease, border-color 0.2s ease;
+  }
+  .ptc__cta:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.3); color: var(--c-text-1, #fff); }
+  .ptc__card--featured .ptc__cta { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); border-color: transparent; }
+  .ptc__card--featured .ptc__cta:hover { background: var(--c-accent, #fef3c7); color: var(--c-on-primary, #0a0a0a); }
+  .ptc__cta:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
+  .ptc__features { list-style: none; margin: 1.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); display: grid; gap: 0.7rem; }
+  .ptc__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--c-text-1, #fff); }
+  .ptc__features svg { color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
+  .ptc__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  @media (prefers-reduced-motion: reduce) { .ptc__knob, .ptc__switch { transition: none; } }
+</style>