Types – Kaleen Baba

+91 900 590 0831 info@kaleenbaba.com

INR

Rug Material Types

Good Quality

Indian Wool

A great everyday choice. Hand-tufted or hand-knotted using Indian wool, offering warmth and durability at an accessible price point. Ideal for high-traffic areas where comfort and value matter most.

Better Quality

Indian Fine Wool

A step above in softness and density. Fine Indian wool is carefully sorted for a more consistent, refined pile — richer colour saturation, smoother hand feel, and longer-lasting resilience underfoot.

Best Quality

New Zealand Premium Wool

The finest natural wool available. Sourced from New Zealand's free-ranging flocks — exceptionally clean, long-stapled, and silky to the touch, with superior colour clarity and lustrous sheen.

Good Quality

Viscose Silk

A plant-derived fibre that captures the luminous sheen of natural silk at a more accessible price. Produces beautifully soft, light-reflective rugs — ideal for bedrooms and lower-traffic formal spaces.

Better Quality

Natural Silk

Spun from silkworm cocoons, natural silk produces rugs of exceptional fineness and brilliance. The pile catches light from every angle, revealing intricate pattern detail with extraordinary depth and clarity.

Best Quality

Premium Silk

The pinnacle of rug-making. Hand-selected for the finest thread count — extraordinary density, jewel-like colour, and incomparable softness. Heirloom pieces intended to be treasured for generations.

Need Help Choosing?

Not Sure Which Material
is Right for You?

Our experts are happy to guide you toward the perfect material for your space, lifestyle, and budget — no obligation, just honest advice.

Get a Free Recommendation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Exomm – Lead Popup</title>
  <style>
    /* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: #f5f5f5;
      color: #111;
    }

    /* ── Demo Page Background ── */
    .demo-page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      padding: 40px 20px;
      text-align: center;
    }
    .demo-page h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: #111; }
    .demo-page p  { color: #666; font-size: 1rem; max-width: 400px; }
    .demo-btn {
      margin-top: 8px;
      padding: 12px 28px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background .2s;
    }
    .demo-btn:hover { background: #333; }

    /* ── Overlay ── */
    #popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    #popup-overlay.visible {
      opacity: 1;
      pointer-events: all;
    }

    /* ── Popup Card ── */
    .popup-card {
      background: #fff;
      border-radius: 20px;
      width: 100%;
      max-width: 480px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.18);
      transform: translateY(24px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
    }
    #popup-overlay.visible .popup-card {
      transform: translateY(0) scale(1);
    }

    /* ── Top Banner ── */
    .popup-banner {
      background: linear-gradient(135deg, #0f0f0f 0%, #2a2a2a 100%);
      padding: 36px 36px 28px;
      text-align: center;
      position: relative;
    }
    .popup-badge {
      display: inline-block;
      background: rgba(255,255,255,0.12);
      color: #e0e0e0;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 16px;
      border: 1px solid rgba(255,255,255,0.15);
    }
    .popup-headline {
      font-size: clamp(1.35rem, 3.5vw, 1.75rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    .popup-headline span {
      background: linear-gradient(90deg, #a78bfa, #60a5fa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .popup-subtext {
      font-size: 0.88rem;
      color: #aaa;
      line-height: 1.6;
    }

    /* ── Perks List ── */
    .popup-perks {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 24px 36px 0;
    }
    .perk-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
      color: #444;
    }
    .perk-icon {
      width: 22px;
      height: 22px;
      background: #f0f0f0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.75rem;
    }

    /* ── Form Area ── */
    .popup-form {
      padding: 20px 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .input-row {
      display: flex;
      gap: 10px;
    }
    .popup-input {
      flex: 1;
      padding: 13px 16px;
      border: 1.5px solid #e5e5e5;
      border-radius: 10px;
      font-size: 0.92rem;
      color: #111;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      background: #fafafa;
      width: 100%;
    }
    .popup-input::placeholder { color: #bbb; }
    .popup-input:focus {
      border-color: #a78bfa;
      box-shadow: 0 0 0 3px rgba(167,139,250,0.12);
      background: #fff;
    }
    .popup-cta {
      padding: 14px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s, transform .15s;
      letter-spacing: 0.01em;
    }
    .popup-cta:hover  { background: #2a2a2a; transform: translateY(-1px); }
    .popup-cta:active { transform: translateY(0); }

    /* ── Success State ── */
    .success-state {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 36px;
      text-align: center;
      gap: 12px;
    }
    .success-icon {
      width: 60px;
      height: 60px;
      background: #f0fdf4;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      margin-bottom: 4px;
    }
    .success-title { font-size: 1.3rem; font-weight: 700; color: #111; }
    .success-msg   { font-size: 0.88rem; color: #666; max-width: 280px; line-height: 1.6; }
    .success-close {
      margin-top: 8px;
      padding: 11px 28px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
      cursor: pointer;
    }

    /* ── Footer note ── */
    .popup-footnote {
      text-align: center;
      font-size: 0.75rem;
      color: #bbb;
      padding: 0 36px 24px;
    }
    .popup-footnote a { color: #bbb; text-decoration: underline; }

    /* ── Close Button ── */
    .popup-close {
      position: absolute;
      top: 14px;
      right: 16px;
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,0.1);
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s;
      line-height: 1;
    }
    .popup-close:hover { background: rgba(255,255,255,0.2); }

    /* ── Mobile tweaks ── */
    @media (max-width: 480px) {
      .popup-banner { padding: 28px 24px 22px; }
      .popup-perks  { padding: 20px 24px 0; }
      .popup-form   { padding: 16px 24px 28px; }
      .popup-footnote { padding: 0 24px 20px; }
      .input-row    { flex-direction: column; }
      .success-state { padding: 40px 24px; }
    }
  </style>
</head>
<body>

<!-- ── Demo Page ── -->
<div class="demo-page">
  <h1>Exomm</h1>
  <p>Your homepage content goes here. The popup will appear automatically after 3 seconds.</p>
  <button class="demo-btn" onclick="showPopup()">Preview Popup Again</button>
</div>

<!-- ── Popup ── -->
<div id="popup-overlay" role="dialog" aria-modal="true" aria-labelledby="popup-title">
  <div class="popup-card">

    <!-- Banner -->
    <div class="popup-banner">
      <button class="popup-close" onclick="closePopup()" aria-label="Close">&times;</button>
      <div class="popup-badge">Free Resource</div>
      <h2 class="popup-headline" id="popup-title">
        Grow Smarter with<br><span>Exomm Insights</span>
      </h2>
      <p class="popup-subtext">Join 5,000+ professionals getting our weekly playbook — free.</p>
    </div>

    <!-- Default Form State -->
    <div id="form-state">
      <!-- Perks -->
      <ul class="popup-perks" role="list">
        <li class="perk-item">
          <div class="perk-icon">✦</div>
          Actionable strategies delivered weekly
        </li>
        <li class="perk-item">
          <div class="perk-icon">✦</div>
          Exclusive templates & frameworks
        </li>
        <li class="perk-item">
          <div class="perk-icon">✦</div>
          No spam. Unsubscribe anytime.
        </li>
      </ul>

      <!-- Form -->
      <div class="popup-form">
        <div class="input-row">
          <input class="popup-input" type="text"  id="lead-name"  placeholder="First name" autocomplete="given-name" />
          <input class="popup-input" type="text"  id="lead-last"  placeholder="Last name"  autocomplete="family-name" />
        </div>
        <input class="popup-input" type="email" id="lead-email" placeholder="Your email address" autocomplete="email" />
        <button class="popup-cta" onclick="handleSubmit()">Get Free Access →</button>
      </div>

      <p class="popup-footnote">
        By signing up you agree to our <a href="#">Privacy Policy</a>. We respect your inbox.
      </p>
    </div>

    <!-- Success State -->
    <div class="success-state" id="success-state">
      <div class="success-icon">🎉</div>
      <p class="success-title">You're in!</p>
      <p class="success-msg">Thanks for joining Exomm. Check your inbox for your first edition shortly.</p>
      <button class="success-close" onclick="closePopup()">Back to Site</button>
    </div>

  </div>
</div>

<script>
  // ── Auto-trigger after 3 seconds ──
  setTimeout(showPopup, 3000);

  function showPopup() {
    document.getElementById('popup-overlay').classList.add('visible');
    document.body.style.overflow = 'hidden';
  }

  function closePopup() {
    document.getElementById('popup-overlay').classList.remove('visible');
    document.body.style.overflow = '';
  }

  // Close on overlay click
  document.getElementById('popup-overlay').addEventListener('click', function(e) {
    if (e.target === this) closePopup();
  });

  // Close on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePopup();
  });

  function handleSubmit() {
    const name  = document.getElementById('lead-name').value.trim();
    const email = document.getElementById('lead-email').value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!name) { alert('Please enter your first name.'); return; }
    if (!emailRegex.test(email)) { alert('Please enter a valid email address.'); return; }

    // ── Hook your form submission here (e.g. Mailchimp, HubSpot, etc.) ──
    // fetch('/your-api-endpoint', { method: 'POST', body: JSON.stringify({ name, email }) });

    document.getElementById('form-state').style.display = 'none';
    const s = document.getElementById('success-state');
    s.style.display = 'flex';
  }
</script>
</body>
</html>