designkit-ai 1.0.0

package/components/web/marketing/hero-split-left.html

@@ -0,0 +1,41 @@
+<!--
+  @name: Hero — Split (Image Left)
+  @kit: web
+  @width: 1200
+  @height: 500
+  @tags: hero, split, image, landing
+-->
+<div data-component="Hero — Split (Image Left)" style="width:100%;box-sizing:border-box;padding:64px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;align-items:center;gap:60px;">
+  <!-- Left Image -->
+  <div style="flex:1;display:flex;justify-content:center;">
+    <img src="https://placehold.jp/540x400" alt="Dashboard Screenshot" style="width:100%;max-width:540px;height:auto;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);box-shadow:0 20px 60px rgba(0,0,0,0.08);" />
+  </div>
+
+  <!-- Right Content -->
+  <div style="flex:1;display:flex;flex-direction:column;">
+    <h1 style="margin:0 0 16px 0;font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);line-height:1.2;letter-spacing:-0.02em;">Analytics that help you grow smarter</h1>
+    <p style="margin:0 0 28px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-normal,400);color:var(--kit-text-2,#475569);line-height:1.6;">Get real-time insights into your product performance. Make data-driven decisions with powerful dashboards and reports.</p>
+
+    <!-- Buttons -->
+    <div style="display:flex;gap:12px;margin-bottom:32px;">
+      <a href="#" style="display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);text-decoration:none;">Start Free Trial</a>
+      <a href="#" style="display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:transparent;color:var(--kit-text,#0F172A);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);text-decoration:none;border:1px solid var(--kit-border,#E2E8F0);">Learn More</a>
+    </div>
+
+    <!-- Stats Row -->
+    <div style="display:flex;gap:32px;">
+      <div style="display:flex;flex-direction:column;">
+        <span style="font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-primary,#6366F1);">99.9%</span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Uptime SLA</span>
+      </div>
+      <div style="display:flex;flex-direction:column;">
+        <span style="font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-primary,#6366F1);">50M+</span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Events Tracked</span>
+      </div>
+      <div style="display:flex;flex-direction:column;">
+        <span style="font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-primary,#6366F1);">4.9/5</span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">User Rating</span>
+      </div>
+    </div>
+  </div>
+</div>

package/components/web/marketing/hero-split-right.html

@@ -0,0 +1,35 @@
+<!--
+  @name: Hero — Split (Image Right)
+  @kit: web
+  @width: 1200
+  @height: 500
+  @tags: hero, split, image, landing
+-->
+<div data-component="Hero — Split (Image Right)" style="width:100%;box-sizing:border-box;padding:64px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;align-items:center;gap:60px;">
+  <!-- Left Content -->
+  <div style="flex:1;display:flex;flex-direction:column;">
+    <h1 style="margin:0 0 16px 0;font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);line-height:1.2;letter-spacing:-0.02em;">Ship your next big idea in record time</h1>
+    <p style="margin:0 0 28px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-normal,400);color:var(--kit-text-2,#475569);line-height:1.6;">The all-in-one platform for teams who want to move fast. Design, build, and launch products without the hassle.</p>
+
+    <!-- Email Input + CTA -->
+    <div style="display:flex;gap:8px;margin-bottom:24px;">
+      <input type="email" placeholder="Enter your email" style="flex:1;padding:12px 16px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-md,16px);font-family:var(--kit-font,Inter,system-ui,sans-serif);color:var(--kit-text,#0F172A);background:var(--kit-bg,#FFFFFF);outline:none;" />
+      <button style="padding:12px 24px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border:none;border-radius:var(--kit-radius,8px);font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);font-family:var(--kit-font,Inter,system-ui,sans-serif);cursor:pointer;white-space:nowrap;">Get Started Free</button>
+    </div>
+
+    <!-- Social Proof -->
+    <div style="display:flex;align-items:center;gap:12px;">
+      <div style="display:flex;">
+        <img src="https://placehold.jp/32x32" style="width:32px;height:32px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);" alt="User" />
+        <img src="https://placehold.jp/32x32" style="width:32px;height:32px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);margin-left:-8px;" alt="User" />
+        <img src="https://placehold.jp/32x32" style="width:32px;height:32px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);margin-left:-8px;" alt="User" />
+      </div>
+      <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Join <strong style="color:var(--kit-text,#0F172A);">2,500+</strong> happy customers</span>
+    </div>
+  </div>
+
+  <!-- Right Image -->
+  <div style="flex:1;display:flex;justify-content:center;">
+    <img src="https://placehold.jp/540x400" alt="Product Screenshot" style="width:100%;max-width:540px;height:auto;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);box-shadow:0 20px 60px rgba(0,0,0,0.08);" />
+  </div>
+</div>

package/components/web/marketing/logo-cloud.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Logo Cloud
+  @kit: web
+  @width: 1200
+  @height: 120
+  @tags: logos, partners, trusted, brands
+-->
+<div data-component="Logo Cloud" style="width:100%;box-sizing:border-box;padding:32px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;flex-direction:column;align-items:center;gap:24px;">
+  <p style="margin:0;font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-3,#94A3B8);text-transform:uppercase;letter-spacing:0.05em;">Trusted by industry leaders</p>
+  <div style="display:flex;align-items:center;justify-content:center;gap:48px;width:100%;">
+    <span style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text-3,#94A3B8);opacity:0.6;">Acme Corp</span>
+    <span style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text-3,#94A3B8);opacity:0.6;">Globex</span>
+    <span style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text-3,#94A3B8);opacity:0.6;">Initech</span>
+    <span style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text-3,#94A3B8);opacity:0.6;">Hooli</span>
+    <span style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text-3,#94A3B8);opacity:0.6;">Pied Piper</span>
+    <span style="font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-bold,700);color:var(--kit-text-3,#94A3B8);opacity:0.6;">Umbrella</span>
+  </div>
+</div>

package/components/web/marketing/newsletter-signup.html

@@ -0,0 +1,25 @@
+<!--
+  @name: Newsletter Signup
+  @kit: web
+  @width: 600
+  @height: 140
+  @tags: newsletter, email, signup, subscribe
+-->
+<div data-component="Newsletter Signup" style="width:100%;box-sizing:border-box;padding:32px;background:var(--kit-surface,#F8FAFC);font-family:var(--kit-font,Inter,system-ui,sans-serif);border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+  <!-- Top Row: Icon + Text -->
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
+    <div style="width:40px;height:40px;border-radius:var(--kit-radius,8px);background:var(--kit-primary,#6366F1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" 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>
+    </div>
+    <div>
+      <h3 style="margin:0 0 2px 0;font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Subscribe to our newsletter</h3>
+      <p style="margin:0;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Get weekly tips, tutorials, and product updates.</p>
+    </div>
+  </div>
+
+  <!-- Input + Button Row -->
+  <div style="display:flex;gap:8px;">
+    <input type="email" placeholder="you@example.com" style="flex:1;padding:10px 14px;border:1px solid var(--kit-border,#E2E8F0);border-radius:var(--kit-radius,8px);font-size:var(--kit-text-sm,14px);font-family:var(--kit-font,Inter,system-ui,sans-serif);color:var(--kit-text,#0F172A);background:var(--kit-bg,#FFFFFF);outline:none;" />
+    <button style="padding:10px 20px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#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;">Subscribe</button>
+  </div>
+</div>

package/components/web/marketing/pricing-3tier.html

@@ -0,0 +1,72 @@
+<!--
+  @name: Pricing Table — 3 Tier
+  @kit: web
+  @width: 1200
+  @height: 550
+  @tags: pricing, plans, tier, marketing
+-->
+<div data-component="Pricing Table — 3 Tier" style="width:100%;box-sizing:border-box;padding:64px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);">
+  <!-- Header -->
+  <div style="text-align:center;margin-bottom:48px;">
+    <h2 style="margin:0 0 12px 0;font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">Simple, transparent pricing</h2>
+    <p style="margin:0;font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);">No hidden fees. No surprises. Pick the plan that fits your team.</p>
+  </div>
+
+  <!-- Pricing Cards -->
+  <div style="display:flex;gap:24px;align-items:stretch;">
+    <!-- Starter -->
+    <div style="flex:1;padding:32px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Starter</h3>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">For individuals and small projects</p>
+      <div style="margin-bottom:20px;">
+        <span style="font-size:var(--kit-text-3xl,30px);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-2,#475569);">/month</span>
+      </div>
+      <ul style="margin:0 0 24px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;">
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Up to 3 projects</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>1 GB storage</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Basic analytics</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Email support</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>API access</li>
+      </ul>
+      <a href="#" style="display:block;text-align:center;padding:12px 24px;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);color:var(--kit-text,#0F172A);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);text-decoration:none;">Get Started</a>
+    </div>
+
+    <!-- Professional (Popular) -->
+    <div style="flex:1;padding:32px;border-radius:var(--kit-radius-md,12px);border:2px solid var(--kit-primary,#6366F1);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;position:relative;">
+      <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 16px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border-radius:9999px;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);white-space:nowrap;">Most Popular</div>
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Professional</h3>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">For growing teams and businesses</p>
+      <div style="margin-bottom:20px;">
+        <span style="font-size:var(--kit-text-3xl,30px);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-2,#475569);">/month</span>
+      </div>
+      <ul style="margin:0 0 24px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;">
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Unlimited projects</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>50 GB storage</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Advanced analytics</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Priority support</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Custom integrations</li>
+      </ul>
+      <a href="#" style="display:block;text-align:center;padding:12px 24px;border-radius:var(--kit-radius,8px);border:none;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);text-decoration:none;">Get Started</a>
+    </div>
+
+    <!-- Enterprise -->
+    <div style="flex:1;padding:32px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Enterprise</h3>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">For large teams with advanced needs</p>
+      <div style="margin-bottom:20px;">
+        <span style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$99</span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">/month</span>
+      </div>
+      <ul style="margin:0 0 24px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;">
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Everything in Professional</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Unlimited storage</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>SSO &amp; SAML</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Dedicated account manager</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Custom SLA</li>
+      </ul>
+      <a href="#" style="display:block;text-align:center;padding:12px 24px;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);color:var(--kit-text,#0F172A);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);text-decoration:none;">Contact Sales</a>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,85 @@
+<!--
+  @name: Pricing Table — Toggle
+  @kit: web
+  @width: 1200
+  @height: 550
+  @tags: pricing, toggle, monthly, yearly
+-->
+<div data-component="Pricing Table — Toggle" style="width:100%;box-sizing:border-box;padding:64px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);">
+  <!-- Header -->
+  <div style="text-align:center;margin-bottom:32px;">
+    <h2 style="margin:0 0 12px 0;font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">Choose the right plan for you</h2>
+    <p style="margin:0;font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);">Start free, scale as you grow. Cancel anytime.</p>
+  </div>
+
+  <!-- Toggle -->
+  <div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:48px;">
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);">Monthly</span>
+    <div style="width:48px;height:26px;border-radius:13px;background:var(--kit-primary,#6366F1);padding:3px;box-sizing:border-box;cursor:pointer;">
+      <div style="width:20px;height:20px;border-radius:50%;background:var(--kit-primary-fg,#FFFFFF);margin-left:22px;"></div>
+    </div>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Yearly</span>
+    <span style="padding:4px 10px;border-radius:9999px;background:var(--kit-success,#22C55E);color:#FFFFFF;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);">Save 20%</span>
+  </div>
+
+  <!-- Pricing Cards -->
+  <div style="display:flex;gap:24px;align-items:stretch;">
+    <!-- Starter -->
+    <div style="flex:1;padding:32px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Starter</h3>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Perfect for getting started</p>
+      <div style="margin-bottom:4px;">
+        <span style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$7</span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">/month</span>
+      </div>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Billed annually ($84/year)</p>
+      <ul style="margin:0 0 24px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;">
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Up to 5 projects</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>5 GB storage</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Basic analytics</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Community support</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>API access</li>
+      </ul>
+      <a href="#" style="display:block;text-align:center;padding:12px 24px;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);color:var(--kit-text,#0F172A);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);text-decoration:none;">Start Free Trial</a>
+    </div>
+
+    <!-- Professional (Popular) -->
+    <div style="flex:1;padding:32px;border-radius:var(--kit-radius-md,12px);border:2px solid var(--kit-primary,#6366F1);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;position:relative;">
+      <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 16px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);border-radius:9999px;font-size:var(--kit-text-xs,12px);font-weight:var(--kit-font-semibold,600);white-space:nowrap;">Most Popular</div>
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Professional</h3>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">Best for growing teams</p>
+      <div style="margin-bottom:4px;">
+        <span style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);">$23</span>
+        <span style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">/month</span>
+      </div>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Billed annually ($276/year)</p>
+      <ul style="margin:0 0 24px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;">
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Unlimited projects</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>100 GB storage</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Advanced analytics</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Priority email &amp; chat support</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Custom integrations</li>
+      </ul>
+      <a href="#" style="display:block;text-align:center;padding:12px 24px;border-radius:var(--kit-radius,8px);border:none;background:var(--kit-primary,#6366F1);color:var(--kit-primary-fg,#FFFFFF);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);text-decoration:none;">Start Free Trial</a>
+    </div>
+
+    <!-- Enterprise -->
+    <div style="flex:1;padding:32px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);display:flex;flex-direction:column;">
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-lg,18px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Enterprise</h3>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">For large-scale organizations</p>
+      <div style="margin-bottom:4px;">
+        <span style="font-size:var(--kit-text-3xl,30px);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-2,#475569);">/month</span>
+      </div>
+      <p style="margin:0 0 20px 0;font-size:var(--kit-text-xs,12px);color:var(--kit-text-3,#94A3B8);">Billed annually ($948/year)</p>
+      <ul style="margin:0 0 24px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;">
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Everything in Professional</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Unlimited storage</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>SSO &amp; SAML authentication</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>24/7 phone support</li>
+        <li style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm,14px);color:var(--kit-text,#0F172A);"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success,#22C55E)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Custom SLA &amp; onboarding</li>
+      </ul>
+      <a href="#" style="display:block;text-align:center;padding:12px 24px;border-radius:var(--kit-radius,8px);border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);color:var(--kit-text,#0F172A);font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);text-decoration:none;">Contact Sales</a>
+    </div>
+  </div>
+</div>

package/components/web/marketing/social-proof-bar.html

@@ -0,0 +1,32 @@
+<!--
+  @name: Social Proof Bar
+  @kit: web
+  @width: 1200
+  @height: 60
+  @tags: social proof, trust, banner
+-->
+<div data-component="Social Proof Bar" style="width:100%;box-sizing:border-box;padding:16px 40px;background:var(--kit-surface,#F8FAFC);font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;align-items:center;justify-content:center;gap:24px;border-top:1px solid var(--kit-border,#E2E8F0);border-bottom:1px solid var(--kit-border,#E2E8F0);">
+  <!-- Text -->
+  <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text,#0F172A);">Join 50,000+ designers who trust Pixeliro</span>
+
+  <!-- Overlapping Avatars -->
+  <div style="display:flex;align-items:center;">
+    <img src="https://placehold.jp/28x28" alt="User" style="width:28px;height:28px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);" />
+    <img src="https://placehold.jp/28x28" alt="User" style="width:28px;height:28px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);margin-left:-8px;" />
+    <img src="https://placehold.jp/28x28" alt="User" style="width:28px;height:28px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);margin-left:-8px;" />
+    <img src="https://placehold.jp/28x28" alt="User" style="width:28px;height:28px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);margin-left:-8px;" />
+    <img src="https://placehold.jp/28x28" alt="User" style="width:28px;height:28px;border-radius:50%;border:2px solid var(--kit-bg,#FFFFFF);margin-left:-8px;" />
+  </div>
+
+  <!-- Stars -->
+  <div style="display:flex;align-items:center;gap:4px;">
+    <div style="display:flex;gap:1px;">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--kit-accent,#EC4899)" stroke="none"><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="var(--kit-accent,#EC4899)" stroke="none"><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="var(--kit-accent,#EC4899)" stroke="none"><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="var(--kit-accent,#EC4899)" stroke="none"><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="var(--kit-accent,#EC4899)" stroke="none"><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:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">4.9/5 rating</span>
+  </div>
+</div>

package/components/web/marketing/stats-row.html

@@ -0,0 +1,45 @@
+<!--
+  @name: Stats Row
+  @kit: web
+  @width: 1200
+  @height: 120
+  @tags: stats, numbers, metrics, social proof
+-->
+<div data-component="Stats Row" style="width:100%;box-sizing:border-box;padding:32px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;justify-content:center;gap:0;">
+  <!-- Stat 1 -->
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 24px;">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+    <span style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">10K+</span>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);">Active Users</span>
+  </div>
+
+  <!-- Divider -->
+  <div style="width:1px;background:var(--kit-border,#E2E8F0);margin:8px 0;"></div>
+
+  <!-- Stat 2 -->
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 24px;">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+    <span style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">99.9%</span>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);">Uptime</span>
+  </div>
+
+  <!-- Divider -->
+  <div style="width:1px;background:var(--kit-border,#E2E8F0);margin:8px 0;"></div>
+
+  <!-- Stat 3 -->
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 24px;">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">150+</span>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);">Countries</span>
+  </div>
+
+  <!-- Divider -->
+  <div style="width:1px;background:var(--kit-border,#E2E8F0);margin:8px 0;"></div>
+
+  <!-- Stat 4 -->
+  <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 24px;">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--kit-primary,#6366F1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+    <span style="font-size:var(--kit-text-3xl,30px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">24/7</span>
+    <span style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-medium,500);color:var(--kit-text-2,#475569);">Support</span>
+  </div>
+</div>

package/components/web/marketing/team-grid.html

@@ -0,0 +1,65 @@
+<!--
+  @name: Team Grid
+  @kit: web
+  @width: 1200
+  @height: 400
+  @tags: team, grid, people, about
+-->
+<div data-component="Team Grid" style="width:100%;box-sizing:border-box;padding:64px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);">
+  <!-- Header -->
+  <div style="text-align:center;margin-bottom:48px;">
+    <h2 style="margin:0 0 12px 0;font-size:var(--kit-text-2xl,24px);font-weight:var(--kit-font-bold,700);color:var(--kit-text,#0F172A);letter-spacing:-0.02em;">Our Team</h2>
+    <p style="margin:0;font-size:var(--kit-text-md,16px);color:var(--kit-text-2,#475569);max-width:480px;margin-left:auto;margin-right:auto;">Meet the talented people behind the product. We're a diverse team united by our passion for great design.</p>
+  </div>
+
+  <!-- Team Cards -->
+  <div style="display:flex;gap:24px;">
+    <!-- Member 1 -->
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+      <img src="https://placehold.jp/120x120" alt="Emily Zhang" style="width:120px;height:120px;border-radius:50%;margin-bottom:16px;object-fit:cover;" />
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Emily Zhang</h3>
+      <p style="margin:0 0 16px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-primary,#6366F1);font-weight:var(--kit-font-medium,500);">CEO &amp; Co-Founder</p>
+      <div style="display:flex;gap:12px;">
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a>
+      </div>
+    </div>
+
+    <!-- Member 2 -->
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+      <img src="https://placehold.jp/120x120" alt="Marcus Johnson" style="width:120px;height:120px;border-radius:50%;margin-bottom:16px;object-fit:cover;" />
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Marcus Johnson</h3>
+      <p style="margin:0 0 16px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-primary,#6366F1);font-weight:var(--kit-font-medium,500);">CTO &amp; Co-Founder</p>
+      <div style="display:flex;gap:12px;">
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a>
+      </div>
+    </div>
+
+    <!-- Member 3 -->
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+      <img src="https://placehold.jp/120x120" alt="Sofia Patel" style="width:120px;height:120px;border-radius:50%;margin-bottom:16px;object-fit:cover;" />
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Sofia Patel</h3>
+      <p style="margin:0 0 16px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-primary,#6366F1);font-weight:var(--kit-font-medium,500);">Head of Design</p>
+      <div style="display:flex;gap:12px;">
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a>
+      </div>
+    </div>
+
+    <!-- Member 4 -->
+    <div style="flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;border-radius:var(--kit-radius-md,12px);border:1px solid var(--kit-border,#E2E8F0);">
+      <img src="https://placehold.jp/120x120" alt="David Chen" style="width:120px;height:120px;border-radius:50%;margin-bottom:16px;object-fit:cover;" />
+      <h3 style="margin:0 0 4px 0;font-size:var(--kit-text-md,16px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">David Chen</h3>
+      <p style="margin:0 0 16px 0;font-size:var(--kit-text-sm,14px);color:var(--kit-primary,#6366F1);font-weight:var(--kit-font-medium,500);">Lead Engineer</p>
+      <div style="display:flex;gap:12px;">
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
+        <a href="#" style="color:var(--kit-text-3,#94A3B8);text-decoration:none;"><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="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a>
+      </div>
+    </div>
+  </div>
+</div>

package/components/web/marketing/testimonial-carousel.html

@@ -0,0 +1,45 @@
+<!--
+  @name: Testimonial — Carousel
+  @kit: web
+  @width: 1200
+  @height: 300
+  @tags: testimonial, carousel, review, social proof
+-->
+<div data-component="Testimonial — Carousel" style="width:100%;box-sizing:border-box;padding:64px 40px;background:var(--kit-bg,#FFFFFF);font-family:var(--kit-font,Inter,system-ui,sans-serif);display:flex;flex-direction:column;align-items:center;position:relative;">
+  <!-- Quote -->
+  <div style="max-width:720px;text-align:center;margin-bottom:32px;">
+    <svg width="32" height="32" viewBox="0 0 24 24" fill="var(--kit-primary,#6366F1)" stroke="none" style="margin-bottom:16px;opacity:0.2;"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
+    <p style="margin:0;font-size:var(--kit-text-xl,20px);font-weight:var(--kit-font-normal,400);color:var(--kit-text,#0F172A);line-height:1.6;font-style:italic;">"This platform completely transformed how our team collaborates. We shipped our product 3x faster and the quality improved dramatically. I can't imagine going back."</p>
+  </div>
+
+  <!-- Avatar + Info -->
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;">
+    <img src="https://placehold.jp/48x48" alt="Sarah Chen" style="width:48px;height:48px;border-radius:50%;" />
+    <div>
+      <div style="font-size:var(--kit-text-sm,14px);font-weight:var(--kit-font-semibold,600);color:var(--kit-text,#0F172A);">Sarah Chen</div>
+      <div style="font-size:var(--kit-text-sm,14px);color:var(--kit-text-2,#475569);">VP of Engineering, TechFlow</div>
+    </div>
+  </div>
+
+  <!-- Navigation -->
+  <div style="display:flex;align-items:center;gap:24px;">
+    <!-- Left Arrow -->
+    <button style="width:40px;height:40px;border-radius:50%;border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);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" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+    </button>
+
+    <!-- Dots -->
+    <div style="display:flex;gap:8px;">
+      <div style="width:8px;height:8px;border-radius:50%;background:var(--kit-border,#E2E8F0);"></div>
+      <div style="width:8px;height:8px;border-radius:50%;background:var(--kit-border,#E2E8F0);"></div>
+      <div style="width:8px;height:8px;border-radius:50%;background:var(--kit-primary,#6366F1);"></div>
+      <div style="width:8px;height:8px;border-radius:50%;background:var(--kit-border,#E2E8F0);"></div>
+      <div style="width:8px;height:8px;border-radius:50%;background:var(--kit-border,#E2E8F0);"></div>
+    </div>
+
+    <!-- Right Arrow -->
+    <button style="width:40px;height:40px;border-radius:50%;border:1px solid var(--kit-border,#E2E8F0);background:var(--kit-bg,#FFFFFF);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" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+    </button>
+  </div>
+</div>