designkit-ai 1.0.0

package/components/web/pricing/pricing-toggle.html

@@ -0,0 +1,62 @@
+<!--
+  @name: Pricing — Toggle Monthly/Annual
+  @kit: web
+  @width: 1440
+  @height: 640
+  @tags: pricing, toggle, monthly, annual, cards, plans, subscription, billing
+-->
+<div data-component="Pricing — Toggle Monthly/Annual" style="width:100%;box-sizing:border-box;background:var(--kit-bg, #FFFFFF);padding:48px 80px;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="text-align:center;margin-bottom:12px">
+    <div style="font-size:28px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:8px">Simple, Transparent Pricing</div>
+    <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text-2, #475569);margin-bottom:24px">Choose the plan that fits your needs</div>
+  </div>
+  <div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:40px">
+    <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">Monthly</span>
+    <div style="display:flex;align-items:center;width:52px;height:28px;background:var(--kit-primary, #6366F1);border-radius:var(--kit-radius-full, 9999px);padding:2px;box-sizing:border-box;cursor:pointer">
+      <div style="width:24px;height:24px;background:#FFFFFF;border-radius:50%;margin-left:auto;box-shadow:0 1px 3px rgba(0,0,0,0.1)"></div>
+    </div>
+    <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Annual</span>
+    <span style="font-size:11px;font-weight:var(--kit-font-semibold, 600);color:var(--kit-success, #22C55E);background:rgba(34,197,94,0.1);padding:3px 10px;border-radius:var(--kit-radius-full, 9999px)">Save 20%</span>
+  </div>
+  <div style="display:flex;gap:24px;justify-content:center;align-items:flex-start">
+    <div style="flex:1;max-width:380px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-lg, 16px);padding:32px;box-sizing:border-box">
+      <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:8px">Basic</div>
+      <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-bottom:20px">For individuals getting started</div>
+      <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:24px"><span style="font-size:40px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$9</span><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">/mo</span></div>
+      <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:28px">
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>5 projects</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>10 GB storage</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Email support</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Basic analytics</div>
+      </div>
+      <div style="display:flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--kit-border, #E2E8F0);color:var(--kit-text, #0F172A);border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);cursor:pointer">Get Started</div>
+    </div>
+    <div style="flex:1;max-width:380px;background:var(--kit-bg, #FFFFFF);border:2px solid var(--kit-primary, #6366F1);border-radius:var(--kit-radius-lg, 16px);padding:32px;box-sizing:border-box;position:relative;overflow:hidden">
+      <div style="position:absolute;top:12px;right:12px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-size:11px;font-weight:var(--kit-font-semibold, 600);padding:3px 10px;border-radius:var(--kit-radius-full, 9999px)">Popular</div>
+      <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:8px">Pro</div>
+      <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-bottom:20px">For professionals and small teams</div>
+      <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:24px"><span style="font-size:40px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$29</span><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">/mo</span></div>
+      <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:28px">
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Unlimited projects</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>50 GB storage</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Priority support</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Advanced analytics</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Team collaboration</div>
+      </div>
+      <div style="display:flex;align-items:center;justify-content:center;height:44px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);cursor:pointer">Get Started</div>
+    </div>
+    <div style="flex:1;max-width:380px;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-lg, 16px);padding:32px;box-sizing:border-box">
+      <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:8px">Team</div>
+      <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-bottom:20px">For growing teams and organizations</div>
+      <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:24px"><span style="font-size:40px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$79</span><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">/mo</span></div>
+      <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:28px">
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Unlimited everything</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>200 GB storage</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Dedicated support</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Custom integrations</div>
+        <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>SSO / SAML</div>
+      </div>
+      <div style="display:flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--kit-border, #E2E8F0);color:var(--kit-text, #0F172A);border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);cursor:pointer">Get Started</div>
+    </div>
+  </div>
+</div>

package/components/web/print/business-card.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Business Card — Modern
+  @kit: web
+  @width: 1050
+  @height: 600
+  @tags: print, business-card, card, contact, brand
+-->
+<div data-component="Business Card — Modern" style="width:100%;height:100%;background:#FFFFFF;border-radius:12px;display:flex;overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-shadow:0 4px 20px rgba(0,0,0,0.08)">
+  <div style="width:40%;background:linear-gradient(135deg, var(--kit-primary, #6366F1), #4338CA);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#FFFFFF">
+    <div style="width:80px;height:80px;border-radius:40px;border:3px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;margin-bottom:20px">AJ</div>
+    <div style="font-size:22px;font-weight:700;margin-bottom:4px">Alex Johnson</div>
+    <div style="font-size:14px;opacity:0.8">Lead Designer</div>
+  </div>
+  <div style="flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 48px;gap:16px">
+    <div style="display:flex;align-items:center;gap:12px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/></svg><span style="font-size:15px;color:var(--kit-text, #0F172A)">alex@company.com</span></div>
+    <div style="display:flex;align-items:center;gap:12px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg><span style="font-size:15px;color:var(--kit-text, #0F172A)">+1 (555) 000-0000</span></div>
+    <div style="display:flex;align-items:center;gap:12px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg><span style="font-size:15px;color:var(--kit-text, #0F172A)">www.company.com</span></div>
+    <div style="display:flex;align-items:center;gap:12px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg><span style="font-size:15px;color:var(--kit-text, #0F172A)">San Francisco, CA</span></div>
+  </div>
+</div>

package/components/web/products/product-card-horizontal.html

@@ -0,0 +1,19 @@
+<!--
+  @name: Product Card — Horizontal (List View)
+  @kit: web
+  @width: 640
+  @height: 140
+  @tags: product, card, horizontal, list, ecommerce
+-->
+<div data-component="Product Card — Horizontal (List View)" style="display:flex;width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">
+  <img src="https://placehold.jp/140x140.png" style="width:140px;height:140px;object-fit:cover;flex-shrink:0" alt="Product"/>
+  <div style="flex:1;padding:16px 20px;display:flex;flex-direction:column;justify-content:center;min-width:0">
+    <div style="font-size:12px;color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px">Electronics</div>
+    <div style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A);margin-bottom:4px">Wireless Headphones Pro</div>
+    <div style="display:flex;align-items:center;gap:4px;margin-bottom:8px"><svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">4.5 (256)</span></div>
+    <div style="display:flex;align-items:center;justify-content:space-between">
+      <div style="display:flex;align-items:baseline;gap:6px"><span style="font-size:20px;font-weight:700;color:var(--kit-text, #0F172A)">$74.99</span><span style="font-size:14px;color:var(--kit-text-3, #94A3B8);text-decoration:line-through">$99.99</span></div>
+      <div style="height:32px;padding:0 16px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:6px;display:flex;align-items:center;font-size:13px;font-weight:500;cursor:pointer;gap:6px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>Add</div>
+    </div>
+  </div>
+</div>

package/components/web/products/product-detail.html

@@ -0,0 +1,39 @@
+<!--
+  @name: Product Detail — Full Page
+  @kit: web
+  @width: 1200
+  @height: 600
+  @tags: product, detail, ecommerce, shop, page
+-->
+<div data-component="Product Detail — Full Page" style="display:flex;gap:40px;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif);flex-wrap:wrap">
+  <div style="flex:1;min-width:400px">
+    <img src="https://placehold.jp/560x560.png" style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block" alt="Product"/>
+    <div style="display:flex;gap:8px;margin-top:12px">
+      <img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:8px;object-fit:cover;border:2px solid var(--kit-primary, #6366F1);cursor:pointer" alt="Thumb 1"/>
+      <img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:8px;object-fit:cover;border:1px solid var(--kit-border, #E2E8F0);cursor:pointer" alt="Thumb 2"/>
+      <img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:8px;object-fit:cover;border:1px solid var(--kit-border, #E2E8F0);cursor:pointer" alt="Thumb 3"/>
+      <img src="https://placehold.jp/80x80.png" style="width:80px;height:80px;border-radius:8px;object-fit:cover;border:1px solid var(--kit-border, #E2E8F0);cursor:pointer" alt="Thumb 4"/>
+    </div>
+  </div>
+  <div style="flex:1;min-width:360px">
+    <div style="font-size:13px;color:var(--kit-primary, #6366F1);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Electronics</div>
+    <div style="font-size:28px;font-weight:700;color:var(--kit-text, #0F172A);margin-bottom:8px">Wireless Noise-Cancelling Headphones Pro</div>
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
+      <div style="display:flex;gap:2px"><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-border, #E2E8F0)" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
+      <span style="font-size:14px;color:var(--kit-text-2, #475569)">4.5 (256 reviews)</span>
+    </div>
+    <div style="display:flex;align-items:baseline;gap:12px;margin-bottom:20px"><span style="font-size:32px;font-weight:700;color:var(--kit-text, #0F172A)">$74.99</span><span style="font-size:18px;color:var(--kit-text-3, #94A3B8);text-decoration:line-through">$99.99</span><span style="background:var(--kit-danger-bg, #FEF2F2);color:var(--kit-danger, #EF4444);font-size:13px;font-weight:600;padding:3px 10px;border-radius:6px">-25%</span></div>
+    <div style="font-size:14px;color:var(--kit-text-2, #475569);line-height:1.6;margin-bottom:24px">Premium wireless headphones with active noise cancellation, 40-hour battery life, and Hi-Res Audio support. Comfortable over-ear design for all-day listening.</div>
+    <div style="margin-bottom:20px"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:8px">Color</div><div style="display:flex;gap:8px"><div style="width:32px;height:32px;border-radius:16px;background:#0F172A;border:2px solid var(--kit-primary, #6366F1);cursor:pointer"></div><div style="width:32px;height:32px;border-radius:16px;background:#F8FAFC;border:1px solid var(--kit-border, #E2E8F0);cursor:pointer"></div><div style="width:32px;height:32px;border-radius:16px;background:#1E40AF;border:1px solid var(--kit-border, #E2E8F0);cursor:pointer"></div></div></div>
+    <div style="display:flex;gap:12px;margin-bottom:20px">
+      <div style="display:flex;align-items:center;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;overflow:hidden"><div style="width:40px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"/></svg></div><div style="width:48px;height:44px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--kit-text, #0F172A);border-left:1px solid var(--kit-border, #E2E8F0);border-right:1px solid var(--kit-border, #E2E8F0)">1</div><div style="width:40px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div></div>
+      <div style="flex:1;height:44px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;cursor:pointer;gap:8px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>Add to Cart</div>
+      <div style="width:44px;height:44px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--kit-text-2, #475569)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+    </div>
+    <div style="display:flex;gap:16px;padding:16px;background:var(--kit-surface, #F8FAFC);border-radius:8px;font-size:13px;color:var(--kit-text-2, #475569)">
+      <div style="display:flex;align-items:center;gap:6px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>In Stock</div>
+      <div style="display:flex;align-items:center;gap:6px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>Free Shipping</div>
+      <div style="display:flex;align-items:center;gap:6px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>30-day Returns</div>
+    </div>
+  </div>
+</div>

package/components/web/products/product-grid.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Product Grid — 4 Column
+  @kit: web
+  @width: 1200
+  @height: 480
+  @tags: product, grid, ecommerce, shop, catalog
+-->
+<div data-component="Product Grid — 4 Column" style="display:flex;flex-wrap:wrap;gap:20px;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="flex:1 1 260px;min-width:0;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;overflow:hidden"><div style="position:relative"><img src="https://placehold.jp/280x220.png" style="width:100%;height:220px;object-fit:cover;display:block" alt="Product"/><div style="position:absolute;top:8px;left:8px;background:var(--kit-danger, #EF4444);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px">-25%</div><div style="position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:16px;background:var(--kit-bg, #FFFFFF);box-shadow:0 1px 3px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div></div><div style="padding:14px"><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px">Electronics</div><div style="font-size:15px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:6px">Wireless Headphones</div><div style="display:flex;align-items:center;gap:4px;margin-bottom:8px"><svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">4.8 (256)</span></div><div style="display:flex;align-items:baseline;gap:6px"><span style="font-size:18px;font-weight:700;color:var(--kit-text, #0F172A)">$74.99</span><span style="font-size:13px;color:var(--kit-text-3, #94A3B8);text-decoration:line-through">$99.99</span></div></div></div>
+  <div style="flex:1 1 260px;min-width:0;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;overflow:hidden"><div style="position:relative"><img src="https://placehold.jp/280x220.png" style="width:100%;height:220px;object-fit:cover;display:block" alt="Product"/></div><div style="padding:14px"><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px">Fashion</div><div style="font-size:15px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:6px">Classic Sneakers</div><div style="display:flex;align-items:center;gap:4px;margin-bottom:8px"><svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">4.5 (189)</span></div><div style="font-size:18px;font-weight:700;color:var(--kit-text, #0F172A)">$129.00</div></div></div>
+  <div style="flex:1 1 260px;min-width:0;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;overflow:hidden"><div style="position:relative"><img src="https://placehold.jp/280x220.png" style="width:100%;height:220px;object-fit:cover;display:block" alt="Product"/><div style="position:absolute;top:8px;left:8px;background:var(--kit-success, #22C55E);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px">New</div></div><div style="padding:14px"><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px">Home</div><div style="font-size:15px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:6px">Smart Lamp</div><div style="display:flex;align-items:center;gap:4px;margin-bottom:8px"><svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">4.7 (92)</span></div><div style="font-size:18px;font-weight:700;color:var(--kit-text, #0F172A)">$49.99</div></div></div>
+  <div style="flex:1 1 260px;min-width:0;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;overflow:hidden"><div style="position:relative"><img src="https://placehold.jp/280x220.png" style="width:100%;height:220px;object-fit:cover;display:block" alt="Product"/></div><div style="padding:14px"><div style="font-size:12px;color:var(--kit-text-3, #94A3B8);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px">Accessories</div><div style="font-size:15px;font-weight:500;color:var(--kit-text, #0F172A);margin-bottom:6px">Leather Watch</div><div style="display:flex;align-items:center;gap:4px;margin-bottom:8px"><svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">4.9 (340)</span></div><div style="font-size:18px;font-weight:700;color:var(--kit-text, #0F172A)">$199.00</div></div></div>
+</div>

package/components/web/products/review-section.html

@@ -0,0 +1,29 @@
+<!--
+  @name: Product Reviews Section
+  @kit: web
+  @width: 640
+  @height: 400
+  @tags: reviews, rating, product, ecommerce, feedback
+-->
+<div data-component="Product Reviews Section" style="width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
+    <div style="font-size:20px;font-weight:600;color:var(--kit-text, #0F172A)">Reviews (256)</div>
+    <div style="height:36px;padding:0 16px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:8px;display:flex;align-items:center;font-size:13px;font-weight:500;cursor:pointer">Write a Review</div>
+  </div>
+  <div style="display:flex;gap:32px;margin-bottom:24px;flex-wrap:wrap">
+    <div style="text-align:center"><div style="font-size:48px;font-weight:700;color:var(--kit-text, #0F172A)">4.5</div><div style="display:flex;gap:2px;justify-content:center;margin:4px 0"><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-border, #E2E8F0)" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div><div style="font-size:13px;color:var(--kit-text-3, #94A3B8)">256 reviews</div></div>
+    <div style="flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px">
+      <div style="display:flex;align-items:center;gap:8px;font-size:13px"><span style="width:20px;color:var(--kit-text-2, #475569)">5</span><div style="flex:1;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:3px"><div style="width:65%;height:100%;background:#FBBF24;border-radius:3px"></div></div><span style="width:30px;color:var(--kit-text-3, #94A3B8);text-align:right">65%</span></div>
+      <div style="display:flex;align-items:center;gap:8px;font-size:13px"><span style="width:20px;color:var(--kit-text-2, #475569)">4</span><div style="flex:1;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:3px"><div style="width:22%;height:100%;background:#FBBF24;border-radius:3px"></div></div><span style="width:30px;color:var(--kit-text-3, #94A3B8);text-align:right">22%</span></div>
+      <div style="display:flex;align-items:center;gap:8px;font-size:13px"><span style="width:20px;color:var(--kit-text-2, #475569)">3</span><div style="flex:1;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:3px"><div style="width:8%;height:100%;background:#FBBF24;border-radius:3px"></div></div><span style="width:30px;color:var(--kit-text-3, #94A3B8);text-align:right">8%</span></div>
+      <div style="display:flex;align-items:center;gap:8px;font-size:13px"><span style="width:20px;color:var(--kit-text-2, #475569)">2</span><div style="flex:1;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:3px"><div style="width:3%;height:100%;background:#FBBF24;border-radius:3px"></div></div><span style="width:30px;color:var(--kit-text-3, #94A3B8);text-align:right">3%</span></div>
+      <div style="display:flex;align-items:center;gap:8px;font-size:13px"><span style="width:20px;color:var(--kit-text-2, #475569)">1</span><div style="flex:1;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:3px"><div style="width:2%;height:100%;background:#FBBF24;border-radius:3px"></div></div><span style="width:30px;color:var(--kit-text-3, #94A3B8);text-align:right">2%</span></div>
+    </div>
+  </div>
+  <div style="border-top:1px solid var(--kit-border, #E2E8F0);padding-top:20px">
+    <div style="display:flex;gap:12px;margin-bottom:16px;align-items:flex-start">
+      <div style="width:36px;height:36px;border-radius:18px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0">SC</div>
+      <div style="flex:1"><div style="display:flex;align-items:center;gap:8px;margin-bottom:4px"><span style="font-size:14px;font-weight:600;color:var(--kit-text, #0F172A)">Sarah Chen</span><span style="font-size:12px;color:var(--kit-text-3, #94A3B8)">Mar 20, 2026</span><span style="background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px">Verified Purchase</span></div><div style="display:flex;gap:2px;margin-bottom:8px"><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg><svg width="14" height="14" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div><div style="font-size:14px;color:var(--kit-text, #0F172A);line-height:1.5">Amazing sound quality and the noise cancellation is incredible. Battery lasts forever. Best headphones I've ever owned.</div></div>
+    </div>
+  </div>
+</div>

package/components/web/promotions/coupon-card.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Coupon Card — Discount Code
+  @kit: web
+  @width: 360
+  @height: 120
+  @tags: coupon, discount, code, promo, ecommerce
+-->
+<div data-component="Coupon Card — Discount Code" style="width:100%;background:var(--kit-bg, #FFFFFF);border:2px dashed var(--kit-primary, #6366F1);border-radius:12px;padding:20px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;align-items:center;gap:16px">
+  <div style="width:56px;height:56px;border-radius:12px;background:rgba(99,102,241,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0"><span style="font-size:24px;font-weight:800;color:var(--kit-primary, #6366F1)">%</span></div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:16px;font-weight:700;color:var(--kit-text, #0F172A)">20% OFF your first order</div>
+    <div style="display:flex;align-items:center;gap:8px;margin-top:6px">
+      <div style="display:flex;align-items:center;height:28px;padding:0 12px;background:var(--kit-surface-2, #F1F5F9);border-radius:6px;font-family:ui-monospace, monospace;font-size:13px;font-weight:600;color:var(--kit-primary, #6366F1);letter-spacing:1px">WELCOME20</div>
+      <div style="font-size:12px;color:var(--kit-primary, #6366F1);font-weight:500;cursor:pointer">Copy</div>
+    </div>
+  </div>
+</div>

package/components/web/promotions/promo-banner.html

@@ -0,0 +1,24 @@
+<!--
+  @name: Promo Banner — Sale
+  @kit: web
+  @width: 1200
+  @height: 200
+  @tags: promo, banner, sale, discount, ecommerce
+-->
+<div data-component="Promo Banner — Sale" style="width:100%;background:linear-gradient(135deg, #EF4444, #DC2626);border-radius:16px;padding:32px 48px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);color:#FFFFFF;display:flex;align-items:center;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden">
+  <div style="position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:100px;background:rgba(255,255,255,0.08)"></div>
+  <div style="position:absolute;bottom:-60px;left:40%;width:250px;height:250px;border-radius:125px;background:rgba(255,255,255,0.05)"></div>
+  <div style="flex:1;min-width:300px;position:relative;z-index:1">
+    <div style="font-size:14px;font-weight:600;opacity:0.9;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px">Limited Time Offer</div>
+    <div style="font-size:36px;font-weight:800;line-height:1.1;margin-bottom:8px">Flash Sale — Up to 50% Off</div>
+    <div style="font-size:16px;opacity:0.85">Shop now and save on hundreds of products. Offer ends in 24 hours.</div>
+  </div>
+  <div style="display:flex;gap:16px;align-items:center;position:relative;z-index:1">
+    <div style="display:flex;gap:8px">
+      <div style="text-align:center"><div style="width:56px;height:56px;background:rgba(255,255,255,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700">12</div><div style="font-size:11px;margin-top:4px;opacity:0.7">Hours</div></div>
+      <div style="text-align:center"><div style="width:56px;height:56px;background:rgba(255,255,255,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700">34</div><div style="font-size:11px;margin-top:4px;opacity:0.7">Mins</div></div>
+      <div style="text-align:center"><div style="width:56px;height:56px;background:rgba(255,255,255,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700">56</div><div style="font-size:11px;margin-top:4px;opacity:0.7">Secs</div></div>
+    </div>
+    <div style="height:44px;padding:0 28px;background:#FFFFFF;color:#EF4444;border-radius:8px;display:flex;align-items:center;font-size:16px;font-weight:700;cursor:pointer">Shop Now</div>
+  </div>
+</div>

package/components/web/real-estate/agent-contact.html

@@ -0,0 +1,32 @@
+<!--
+  @name: Agent Contact Card
+  @kit: web
+  @width: 360
+  @height: 140
+  @tags: agent, contact, realtor, real estate
+-->
+<div data-component="Agent Contact Card" style="width:100%;max-width:360px;box-sizing:border-box;padding:16px;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);border:1px solid var(--kit-border, #E2E8F0)">
+  <div style="display:flex;gap:14px;margin-bottom:14px">
+    <div style="width:56px;height:56px;border-radius:var(--kit-radius-full, 9999px);overflow:hidden;flex-shrink:0">
+      <img src="https://placehold.jp/56x56.png" alt="Jennifer Martinez" style="width:100%;height:100%;object-fit:cover;display:block"/>
+    </div>
+    <div style="flex:1;min-width:0">
+      <div style="font-size:var(--kit-text-md, 16px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Jennifer Martinez</div>
+      <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:2px">Licensed Realtor &bull; Keller Williams</div>
+      <div style="display:flex;gap:12px;margin-top:6px">
+        <div style="display:flex;align-items:center;gap:4px">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+          <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">(512) 555-0147</span>
+        </div>
+        <div style="display:flex;align-items:center;gap:4px">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+          <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-2, #475569)">jennifer@kw.com</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="display:flex;gap:10px">
+    <button style="flex:1;padding:10px 0;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">Contact Agent</button>
+    <button style="flex:1;padding:10px 0;background:var(--kit-bg, #FFFFFF);color:var(--kit-primary, #6366F1);border:1px solid var(--kit-primary, #6366F1);border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">Schedule Tour</button>
+  </div>
+</div>

package/components/web/real-estate/listing-detail-hero.html

@@ -0,0 +1,44 @@
+<!--
+  @name: Listing Detail Hero
+  @kit: web
+  @width: 800
+  @height: 400
+  @tags: listing, detail, property, real estate
+-->
+<div data-component="Listing Detail Hero" style="width:100%;max-width:800px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF)">
+  <div style="position:relative;width:100%;height:250px;border-radius:var(--kit-radius-md, 12px);overflow:hidden;margin-bottom:10px">
+    <img src="https://placehold.jp/800x250.png" alt="Property" style="width:100%;height:100%;object-fit:cover;display:block"/>
+    <span style="position:absolute;bottom:10px;right:10px;padding:6px 12px;background:rgba(15,23,42,0.7);color:#FFFFFF;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);border-radius:var(--kit-radius, 8px);backdrop-filter:blur(4px)">1 / 12</span>
+  </div>
+  <div style="display:flex;gap:8px;margin-bottom:16px">
+    <div style="flex:1;height:60px;border-radius:var(--kit-radius, 8px);overflow:hidden"><img src="https://placehold.jp/190x60.png" alt="Photo 2" style="width:100%;height:100%;object-fit:cover;display:block"/></div>
+    <div style="flex:1;height:60px;border-radius:var(--kit-radius, 8px);overflow:hidden"><img src="https://placehold.jp/190x60.png" alt="Photo 3" style="width:100%;height:100%;object-fit:cover;display:block"/></div>
+    <div style="flex:1;height:60px;border-radius:var(--kit-radius, 8px);overflow:hidden"><img src="https://placehold.jp/190x60.png" alt="Photo 4" style="width:100%;height:100%;object-fit:cover;display:block"/></div>
+    <div style="flex:1;height:60px;border-radius:var(--kit-radius, 8px);overflow:hidden;position:relative"><img src="https://placehold.jp/190x60.png" alt="Photo 5" style="width:100%;height:100%;object-fit:cover;display:block"/><div style="position:absolute;inset:0;background:rgba(15,23,42,0.5);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600)">+8</div></div>
+  </div>
+  <div style="display:flex;justify-content:space-between;align-items:flex-start">
+    <div>
+      <div style="font-size:var(--kit-text-3xl, 30px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$485,000</div>
+      <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text-2, #475569);margin-top:4px">123 Oak Street, Austin TX 78701</div>
+    </div>
+    <button style="padding:10px 24px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer;white-space:nowrap">Contact Agent</button>
+  </div>
+  <div style="display:flex;gap:20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--kit-border, #E2E8F0)">
+    <div style="display:flex;align-items:center;gap:6px">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V7"/><path d="M21 7H3l2-4h14l2 4z"/></svg>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">3 Beds</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:6px">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4v-3a1 1 0 0 1 1-1z"/><path d="M6 12V5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v7"/></svg>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">2 Baths</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:6px">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">1,850 sqft</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:6px">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+      <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Built 2018</span>
+    </div>
+  </div>
+</div>

package/components/web/real-estate/price-range-slider.html

@@ -0,0 +1,20 @@
+<!--
+  @name: Price Range Slider
+  @kit: web
+  @width: 320
+  @height: 64
+  @tags: price, range, filter, real estate
+-->
+<div data-component="Price Range Slider" style="width:100%;max-width:320px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);padding:8px 0">
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:10px">Price Range</div>
+  <div style="display:flex;justify-content:space-between;margin-bottom:8px">
+    <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">$200K</span>
+    <span style="font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-primary, #6366F1)">$350K - $550K</span>
+    <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">$800K</span>
+  </div>
+  <div style="position:relative;width:100%;height:6px;background:var(--kit-surface-2, #F1F5F9);border-radius:var(--kit-radius-full, 9999px)">
+    <div style="position:absolute;left:25%;right:42%;height:100%;background:var(--kit-primary, #6366F1);border-radius:var(--kit-radius-full, 9999px)"></div>
+    <div style="position:absolute;left:calc(25% - 7px);top:-4px;width:14px;height:14px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-bg, #FFFFFF);border:2px solid var(--kit-primary, #6366F1);box-sizing:border-box;cursor:pointer"></div>
+    <div style="position:absolute;left:calc(58% - 7px);top:-4px;width:14px;height:14px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-bg, #FFFFFF);border:2px solid var(--kit-primary, #6366F1);box-sizing:border-box;cursor:pointer"></div>
+  </div>
+</div>

package/components/web/real-estate/property-card.html

@@ -0,0 +1,38 @@
+<!--
+  @name: Property Card
+  @kit: web
+  @width: 360
+  @height: 340
+  @tags: property, listing, house, real estate
+-->
+<div data-component="Property Card" style="width:100%;max-width:360px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius-md, 12px);overflow:hidden;border:1px solid var(--kit-border, #E2E8F0)">
+  <div style="position:relative;width:100%;height:180px;overflow:hidden">
+    <img src="https://placehold.jp/360x180.png" alt="123 Oak Street" style="width:100%;height:100%;object-fit:cover;display:block"/>
+    <div style="position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:var(--kit-radius-full, 9999px);background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;cursor:pointer">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+    </div>
+    <span style="position:absolute;bottom:10px;left:10px;padding:4px 10px;background:rgba(15,23,42,0.7);color:#FFFFFF;font-size:var(--kit-text-xs, 12px);font-weight:var(--kit-font-medium, 500);border-radius:var(--kit-radius-sm, 4px);backdrop-filter:blur(4px)">Single Family</span>
+  </div>
+  <div style="padding:14px 16px">
+    <div style="font-size:var(--kit-text-xl, 20px);font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$485,000</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-top:4px">123 Oak Street, Austin TX</div>
+    <div style="display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--kit-border, #E2E8F0)">
+      <div style="display:flex;align-items:center;gap:5px">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V7"/><path d="M21 7H3l2-4h14l2 4z"/><path d="M7 11v4"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569)">3 bed</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:5px">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4v-3a1 1 0 0 1 1-1z"/><path d="M6 12V5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v7"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569)">2 bath</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:5px">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-3, #94A3B8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
+        <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569)">1,850 sqft</span>
+      </div>
+    </div>
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px">
+      <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Listed 2 days ago</span>
+      <button style="padding:8px 18px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border:none;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer">View Details</button>
+    </div>
+  </div>
+</div>

package/components/web/real-estate/property-map-pin.html

@@ -0,0 +1,19 @@
+<!--
+  @name: Property Map Pin
+  @kit: web
+  @width: 200
+  @height: 72
+  @tags: map, pin, price, real estate
+-->
+<div data-component="Property Map Pin" style="width:100%;max-width:200px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center">
+  <div style="background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius, 8px);padding:8px 14px;box-shadow:0 2px 8px rgba(0,0,0,0.12);display:flex;align-items:center;gap:8px">
+    <div style="width:28px;height:28px;border-radius:var(--kit-radius-sm, 4px);background:var(--kit-surface-2, #F1F5F9);display:flex;align-items:center;justify-content:center;flex-shrink:0">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary, #6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+    </div>
+    <div>
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-bold, 700);color:var(--kit-primary, #6366F1)">$485K</div>
+      <div style="font-size:11px;color:var(--kit-text-3, #94A3B8);white-space:nowrap">123 Oak St</div>
+    </div>
+  </div>
+  <div style="width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--kit-bg, #FFFFFF);filter:drop-shadow(0 2px 2px rgba(0,0,0,0.06))"></div>
+</div>

package/components/web/real-estate/virtual-tour-button.html

@@ -0,0 +1,17 @@
+<!--
+  @name: Virtual Tour Button
+  @kit: web
+  @width: 240
+  @height: 56
+  @tags: virtual tour, 3d, walkthrough, real estate
+-->
+<div data-component="Virtual Tour Button" style="width:100%;max-width:240px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <button style="width:100%;padding:14px 20px;background:linear-gradient(135deg, var(--kit-primary, #6366F1) 0%, #818CF8 100%);color:#FFFFFF;border:none;border-radius:var(--kit-radius-md, 12px);font-family:var(--kit-font, Inter, system-ui, sans-serif);cursor:pointer;display:flex;align-items:center;gap:12px">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
+    <div style="text-align:left">
+      <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600)">Virtual Tour</div>
+      <div style="font-size:var(--kit-text-xs, 12px);opacity:0.8">3D Walkthrough</div>
+    </div>
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="#FFFFFF" stroke="none" style="margin-left:auto"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+  </button>
+</div>

package/components/web/saas/api-key-row.html

@@ -0,0 +1,31 @@
+<!--
+  @name: API Key Row
+  @kit: web
+  @width: 700
+  @height: 64
+  @tags: api, key, token, developer, saas
+-->
+<div data-component="API Key Row" style="width:100%;max-width:700px;box-sizing:border-box;padding:14px 16px;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-radius:var(--kit-radius, 8px);border:1px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;gap:12px">
+  <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:var(--kit-surface, #F8FAFC);display:flex;align-items:center;justify-content:center;flex-shrink:0">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
+  </div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Production Key</div>
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);font-family:monospace;margin-top:2px">sk_live_****************************7x2F</div>
+  </div>
+  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
+    <div style="text-align:right;margin-right:8px">
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Created Mar 15</div>
+      <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Last used 2h ago</div>
+    </div>
+    <div style="width:32px;height:32px;border-radius:var(--kit-radius, 8px);border:1px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;justify-content:center;cursor:pointer" title="Copy">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+    </div>
+    <div style="width:32px;height:32px;border-radius:var(--kit-radius, 8px);border:1px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;justify-content:center;cursor:pointer" title="Regenerate">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-text-2, #475569)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+    </div>
+    <div style="width:32px;height:32px;border-radius:var(--kit-radius, 8px);border:1px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;justify-content:center;cursor:pointer" title="Delete">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-danger, #EF4444)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+    </div>
+  </div>
+</div>

package/components/web/saas/audit-log-row.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Audit Log Row
+  @kit: web
+  @width: 700
+  @height: 48
+  @tags: audit, log, activity, admin, saas
+-->
+<div data-component="Audit Log Row" style="width:100%;max-width:700px;box-sizing:border-box;padding:10px 16px;font-family:var(--kit-font, Inter, system-ui, sans-serif);background:var(--kit-bg, #FFFFFF);border-bottom:1px solid var(--kit-border, #E2E8F0);display:flex;align-items:center;gap:12px">
+  <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);white-space:nowrap;width:100px;flex-shrink:0">Mar 25, 14:32</span>
+  <div style="display:flex;align-items:center;gap:6px;width:140px;flex-shrink:0">
+    <div style="width:24px;height:24px;border-radius:var(--kit-radius-full, 9999px);overflow:hidden;flex-shrink:0"><img src="https://placehold.jp/24x24.png" alt="Sarah Chen" style="width:100%;height:100%;object-fit:cover;display:block"/></div>
+    <span style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-medium, 500);color:var(--kit-text, #0F172A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Sarah Chen</span>
+  </div>
+  <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Updated billing plan</span>
+  <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);font-family:monospace;width:120px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Subscription #1234</span>
+  <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8);font-family:monospace;width:90px;flex-shrink:0">192.168.1.1</span>
+  <div style="display:flex;align-items:center;gap:5px;flex-shrink:0">
+    <span style="width:8px;height:8px;border-radius:var(--kit-radius-full, 9999px);background:var(--kit-info, #3B82F6)"></span>
+    <span style="font-size:var(--kit-text-xs, 12px);color:var(--kit-info, #3B82F6);font-weight:var(--kit-font-medium, 500)">Info</span>
+  </div>
+</div>