VibeCoderzVibeCoderz
Telegram
All Prompts
Analytics Showcase Section with Gradient Stat Cards preview
sectionanalyticstailwindresponsivestatscardsdashboardlanding-pagegradientsvg

Analytics Showcase Section with Gradient Stat Cards

Секция с карточками статистики и SVG-графиками на Tailwind CSS. Идеально для дашбордов и лендингов SaaS для демонстрации аналитики.

Prompt

<section id="analytics" class="pt-16 pb-16">
  <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
  <div class="text-center mb-10">
    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs bg-white/5 border border-white/10 text-gray-300">Analytics</span>
    <h2 class="mt-4 text-3xl sm:text-4xl lg:text-5xl tracking-tight" style="font-weight: 600">
      Intelligent insights for <span class="italic" style="font-weight: 500">smarter</span> workflows
    </h2>
    <p class="mt-3 text-gray-300 max-w-3xl mx-auto">
      From brand verification to enterprise automation and data-driven growth strategies.
    </p>
  </div>

  <div class="grid gap-6 lg:grid-cols-2">
    <!-- Distinguish yourself -->
    <div class="relative overflow-hidden bg-black/40 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6">
  <div class="absolute inset-0 pointer-events-none" style="background:
      radial-gradient(220px 160px at 10% 0%, rgba(59,130,246,0.25), transparent 60%),
      radial-gradient(280px 200px at 100% 100%, rgba(147,197,253,0.08), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
  
  <div class="flex items-start justify-between mb-4">
    <div class="">
      <h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Distinguish yourself</h3>
      <p class="mt-2 text-sm sm:text-base text-gray-300">Elevate your brand with a golden tick and connect with top‑tier associates.</p>
    </div>
    <div class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-yellow-300/10 border border-yellow-300/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="crown" class="lucide lucide-crown w-3 h-3 text-yellow-300"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" class=""></path><path d="M5 21h14" class=""></path></svg>
      <span class="text-xs font-medium text-yellow-300">Premium</span>
    </div>
  </div>

  <div class="mt-4 rounded-lg bg-white/5 border border-white/10 p-3">
    <div class="flex items-center justify-between mb-3">
      <p class="text-sm font-medium">Verified Partners</p>
      <span class="text-xs px-2 py-1 rounded-md bg-blue-500/10 border border-blue-400/20 text-blue-300">8 Active</span>
    </div>
    
    <div class="space-y-3">
      <div class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10">
        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-blue-500/20 ring-1 ring-white/10 flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-3.5 h-3.5"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
        </span>
        <div class="flex-1 min-w-0">
          <span class="text-sm font-medium">LanderX</span>
          <p class="text-xs text-gray-400">Design Systems • 2.4k followers</p>
        </div>
        <div class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3.5 h-3.5 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          <span class="text-xs text-yellow-300 font-medium">Gold</span>
        </div>
      </div>

      <div class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10">
        <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&amp;w=80&amp;auto=format&amp;fit=crop" alt="Avatar" class="w-7 h-7 rounded-md object-cover ring-1 ring-white/10 flex-shrink-0">
        <div class="flex-1 min-w-0">
          <span class="text-sm font-medium">Robinson jr</span>
          <p class="text-xs text-gray-400">Product Manager • 1.8k connections</p>
        </div>
        <div class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3.5 h-3.5 text-blue-400 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          <span class="text-xs text-blue-400 font-medium">Pro</span>
        </div>
      </div>

      
    </div>
  </div>

  <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
    <div class="rounded-lg bg-white/5 border border-white/10 p-3">
      <div class="flex items-center gap-2 mb-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-emerald-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        <span class="text-xs font-medium">Network Growth</span>
      </div>
      <p class="text-lg font-semibold text-emerald-400">+127%</p>
      <p class="text-xs text-gray-400">vs last month</p>
    </div>

    <div class="rounded-lg bg-white/5 border border-white/10 p-3">
      <div class="flex items-center gap-2 mb-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-3.5 h-3.5 text-blue-400"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
        <span class="text-xs font-medium">Active Partners</span>
      </div>
      <p class="text-lg font-semibold text-blue-400">24</p>
      <p class="text-xs text-gray-400">verified connections</p>
    </div>
  </div>

  
</div>

    <!-- Enterprise Insights -->
    <div class="relative overflow-hidden rounded-2xl border border-white/10 bg-black/40 p-6">
      <div class="absolute inset-0 pointer-events-none" style="background:
          radial-gradient(220px 160px at 100% 0%, rgba(251,146,60,0.25), transparent 60%),
          radial-gradient(260px 180px at 0% 100%, rgba(34,197,94,0.10), transparent 70%),
          linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
      <h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Enterprise Insights</h3>
      <p class="mt-2 text-sm sm:text-base text-gray-300">Automate everything from workflow optimization to real‑time sentiment analysis and market monitoring.</p>

      <div class="mt-5 rounded-xl bg-white/5 border border-white/10 p-4">
        <div class="flex flex-wrap items-center gap-2 mb-3">
          <div class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
            <span class="inline-flex h-6 w-6 items-center justify-center rounded bg-orange-500/20 ring-1 ring-white/10 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="flame" class="lucide lucide-flame w-3.5 h-3.5"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" class=""></path></svg>
            </span>
            <span class="text-xs font-medium">Your Brand</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3.5 h-3.5 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          </div>
          <div class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
            <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&amp;w=80&amp;auto=format&amp;fit=crop" alt="Avatar" class="w-6 h-6 rounded ring-1 ring-white/10 flex-shrink-0">
            <span class="text-xs font-medium">Robinson jr</span>
          </div>
        </div>
        <div class="mt-3 rounded-lg bg-gradient-to-b from-gray-900/60 to-transparent h-24 border border-white/10 overflow-hidden">
          <svg viewBox="0 0 400 96" class="w-full h-full">
            <defs class="">
              
            </defs>
            <path d="M0 70 C60 30, 120 85, 180 48 S300 70, 400 40" stroke="#818cf8" stroke-width="2" fill="url(#aiGrad)" class=""></path>
          </svg>
        </div>
      </div>

      <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
        <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-xs">
          <span>Web Business</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-blue-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        </div>
        <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-xs">
          <span>E‑commerce Brands</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-blue-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        </div>
        <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-xs">
          <span>SAAS Startup's</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-blue-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        </div>
        <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-xs">
          <span>Tech Innovators</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-blue-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        </div>
        <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-xs">
          <span class="">Marketing Agencies</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-blue-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        </div>
        <div class="flex items-center justify-between px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-xs">
          <span class="">Creative Studios</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-blue-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        </div>
      </div>
    </div>

    <!-- Business Data Solutions -->
    <div class="relative overflow-hidden rounded-2xl border border-white/10 bg-black/40 p-6">
      <div class="absolute inset-0 pointer-events-none" style="background:
          radial-gradient(220px 160px at 8% 100%, rgba(139,92,246,0.25), transparent 60%),
          radial-gradient(260px 180px at 100% 0%, rgba(59,130,246,0.10), transparent 70%),
          linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
      <h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Business Data Solutions</h3>
      <p class="mt-2 text-sm sm:text-base text-gray-300">Your data‑driven guide to making informed business decisions.</p>

      <div class="mt-6 relative">
        <div class="rounded-xl bg-white/5 border border-white/10 p-4">
          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-3">
            <p class="text-sm font-medium">See Growth</p>
            <div class="flex items-center gap-2">
              <span class="text-[11px] px-2 py-1 rounded bg-black/40 border border-white/10">Monthly Visits</span>
              <span class="text-[11px] px-2 py-1 rounded bg-black/40 border border-white/10">Last 24hrs</span>
            </div>
          </div>
          <div class="mt-3 h-28 rounded-lg bg-gradient-to-b from-gray-900/60 to-transparent border border-white/10 overflow-hidden">
            <svg viewBox="0 0 400 112" class="w-full h-full">
              <defs class="">
                
              </defs>
              <path d="M0 90 C70 40, 140 100, 200 55 S330 90, 400 65" stroke="#34d399" stroke-width="2" fill="url(#growthGrad)" class=""></path>
            </svg>
          </div>
          <div class="mt-3 inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
            <span class="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500/20 ring-1 ring-white/10 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-3.5 h-3.5"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
            </span>
            <span class="text-xs font-medium">LanderX</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3.5 h-3.5 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          </div>
        </div>

        <!-- Floating checklist -->
        <div class="mt-6 lg:absolute lg:right-0 lg:bottom-0 lg:translate-x-0 lg:translate-y-6 lg:mt-0 rounded-xl bg-black/60 backdrop-blur border border-white/10 p-4 w-full lg:w-80">
          <div class="flex items-center justify-between mb-3">
            <p class="text-sm font-medium">See Growth</p>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 flex-shrink-0"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </div>
          <ul class="space-y-2 text-sm text-gray-300">
            <li class="flex items-center gap-2">
              <span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              100% score anytime
            </li>
            <li class="flex items-center gap-2">
              <span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              Watch Stats &amp; Growth like master
            </li>
            <li class="flex items-center gap-2">
              <span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
              </span>
              Start Growing Now
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Boost Sales -->
    <div class="relative overflow-hidden rounded-2xl border border-white/10 bg-black/40 p-6">
      <div class="absolute inset-0 pointer-events-none" style="background:
          radial-gradient(220px 160px at 100% 100%, rgba(45,212,191,0.25), transparent 60%),
          radial-gradient(260px 180px at 0% 0%, rgba(56,189,248,0.08), transparent 70%),
          linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
      <h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Boost Sales</h3>
      <p class="mt-2 text-sm sm:text-base text-gray-300">Convert more leads with targeted strategies and smarter tools.</p>

      <div class="mt-5 rounded-xl bg-white/5 border border-white/10 p-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs mb-4">
          <div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chart-bar" class="lucide lucide-chart-bar w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M7 16h8" class=""></path><path d="M7 11h12" class=""></path><path d="M7 6h3" class=""></path></svg>
            Monthly Visits
          </div>
          <div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
            Last 24hrs
          </div>
          <div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat" class="lucide lucide-repeat w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="m17 2 4 4-4 4" class=""></path><path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path><path d="m7 22-4-4 4-4" class=""></path><path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path></svg>
            Retention
          </div>
          <div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
            Top Referrals
          </div>
          <div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="percent" class="lucide lucide-percent w-3.5 h-3.5 text-gray-300 flex-shrink-0"><line x1="19" x2="5" y1="5" y2="19" class=""></line><circle cx="6.5" cy="6.5" r="2.5" class=""></circle><circle cx="17.5" cy="17.5" r="2.5" class=""></circle></svg>
            % Conversion
          </div>
          <div class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-black/40 border border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-gray-300 flex-shrink-0"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
            Grow Income
          </div>
        </div>

        <div class="flex flex-wrap items-center gap-2">
          <div class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
            <span class="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500/20 ring-1 ring-white/10 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-3 h-3"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
            </span>
            <span class="text-[11px] font-medium">LanderX</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3 h-3 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          </div>
          <div class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
            <span class="inline-flex h-6 w-6 items-center justify-center rounded bg-pink-500/20 ring-1 ring-white/10 flex-shrink-0">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="gem" class="lucide lucide-gem w-3 h-3"><path d="M10.5 3 8 9l4 13 4-13-2.5-6" class=""></path><path d="M17 3a2 2 0 0 1 1.6.8l3 4a2 2 0 0 1 .013 2.382l-7.99 10.986a2 2 0 0 1-3.247 0l-7.99-10.986A2 2 0 0 1 2.4 7.8l2.998-3.997A2 2 0 0 1 7 3z" class=""></path><path d="M2 9h20" class=""></path></svg>
            </span>
            <span class="text-[11px] font-medium">Crystal</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3 h-3 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </section>
All Prompts