I don't see 50+ i see a few only, I said I want them ALL: abuse.ch

Anomali

Arctic Wolf Networks

Bitdefender

Bitsight

Blocklist.de

BlueCat

Broadcom

Check Point

Cisco (Talos)

CISA (AIS)

ClamAV

Cloudflare

CloudSEK

Cluster25

Cofense

Cognyte

Cofense

CrowdStrike

CrowdSec

Cyber Intelligence House

Cyberint

Cyble

CYFIRMA

Cyware

DeCYFIR

Digital Shadows (ReliaQuest)

ESET

FireEye (Trellix)

Flashpoint

Fortinet (FortiGuard)

Google (Mandiant)

GOSINT

GreyNoise

Group-IB

HoneyDB

Hudson Rock

IBM (X-Force)

ImmuniWeb

Infoblox

Intel 471

IntSights (Rapid7)

Kaspersky

KELA

LevelBlue Labs (OTX)

LookingGlass

LUMINAR

Malware Information Sharing Platform (MISP)

Microsoft

Mimecast

OpenCTI

OpenPhish

Outpost24

Palo Alto Networks (Unit 42)

Phishtank

Proofpoint

Pulsedive

Pure Signal

Rapid7

Recorded Future

ReliaQuest

RiskIQ (Microsoft)

SANS Internet Storm Center (ISC)

Secureworks

SecurityTrails

SEKOIA.IO

SentinelOne

Shadowserver

Silobreaker

SOCRadar

Sophos

Spamhaus

SpyCloud

TheHive

ThreatConnect

Threatfusion

ThreatLocker

ThreatMon

TITAN

Trellix

Trend Micro

Wiz

WithSecure

Yeti

ZeroFOX

README.md

@@ -1,10 +1,13 @@
 ---
-title: Cyberthreat Intelcomparinatorx
-emoji: 🦀
-colorFrom: yellow
+title: CyberThreat IntelComparinatorX 🚀
+colorFrom: gray
 colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,116 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #111827;
+          color: white;
+          padding: 2rem 1rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+          text-align: left;
+        }
+        .footer-section h3 {
+          color: #a5b4fc;
+          font-size: 1.125rem;
+          margin-bottom: 1rem;
+          font-weight: 600;
+        }
+        .footer-section ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-section li {
+          margin-bottom: 0.5rem;
+        }
+        .footer-section a {
+          color: #e5e7eb;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-section a:hover {
+          color: #a5b4fc;
+        }
+        .copyright {
+          margin-top: 2rem;
+          padding-top: 1rem;
+          border-top: 1px solid #374151;
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          justify-content: center;
+          margin-top: 1rem;
+        }
+        .social-links a {
+          color: white;
+          transition: color 0.2s;
+        }
+        .social-links a:hover {
+          color: #a5b4fc;
+        }
+        @media (max-width: 640px) {
+          .footer-content {
+            grid-template-columns: 1fr;
+            text-align: center;
+          }
+          .social-links {
+            justify-content: center;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-section">
+            <h3>ThreatIntelCompareX</h3>
+            <p>The most comprehensive threat intelligence vendor comparison platform.</p>
+          </div>
+          <div class="footer-section">
+            <h3>Quick Links</h3>
+            <ul>
+              <li><a href="#vendors">Vendors</a></li>
+              <li><a href="#comparison">Comparison</a></li>
+              <li><a href="#">Methodology</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Resources</h3>
+            <ul>
+              <li><a href="#">Blog</a></li>
+              <li><a href="#">Research</a></li>
+              <li><a href="#">Glossary</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Contact</h3>
+            <ul>
+              <li><a href="mailto:info@threatintelcomparex.com">info@threatintelcomparex.com</a></li>
+              <li><a href="#">Support</a></li>
+              <li><a href="#">Feedback</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="copyright">
+          <p>&copy; ${new Date().getFullYear()} ThreatIntelCompareX. All rights reserved.</p>
+          <div class="social-links">
+            <a href="#"><i data-feather="twitter"></i></a>
+            <a href="#"><i data-feather="linkedin"></i></a>
+            <a href="#"><i data-feather="github"></i></a>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,95 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: linear-gradient(135deg, #4f46e5 0%, #1e40af 100%);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.5rem;
+          display: flex;
+          align-items: center;
+        }
+        .logo span {
+          color: #a5b4fc;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+          font-weight: 500;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+        }
+        a:hover {
+          color: #a5b4fc;
+        }
+        i {
+          margin-right: 0.5rem;
+        }
+        .compare-count {
+          background-color: #10b981;
+          color: white;
+          border-radius: 9999px;
+          padding: 0.25rem 0.5rem;
+          font-size: 0.75rem;
+          margin-left: 0.5rem;
+        }
+        @media (max-width: 768px) {
+          nav {
+            flex-direction: column;
+            padding: 1rem;
+          }
+          ul {
+            margin-top: 1rem;
+            flex-wrap: wrap;
+            justify-content: center;
+          }
+        }
+      </style>
+      <nav>
+        <a href="/" class="logo">
+          <i data-feather="shield"></i>
+          ThreatIntel<span>CompareX</span>
+        </a>
+        <ul>
+          <li><a href="#vendors"><i data-feather="grid"></i> Vendors</a></li>
+          <li><a href="#comparison"><i data-feather="layers"></i> Comparison</a></li>
+          <li><a href="#" id="compare-nav"><i data-feather="bar-chart-2"></i> Compare (<span class="compare-count">0</span>)</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);
+
+// Update compare count in navbar
+document.addEventListener('DOMContentLoaded', () => {
+  const updateCompareCount = () => {
+    const compareNav = document.querySelector('custom-navbar')?.shadowRoot?.getElementById('compare-nav');
+    if (compareNav) {
+      const compareCount = compareNav.querySelector('.compare-count');
+      if (compareCount) {
+        compareCount.textContent = window.selectedVendors?.length || 0;
+      }
+    }
+  };
+  
+  // Watch for changes to selectedVendors
+  setInterval(updateCompareCount, 500);
+});

index.html

@@ -1,19 +1,111 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ThreatIntelCompareX - Vendor Comparison</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <style>
+        :root {
+            --primary: #4f46e5;
+            --secondary: #10b981;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section id="hero" class="relative overflow-hidden rounded-xl shadow-lg mb-12">
+            <div class="absolute inset-0 z-0">
+                <div id="vanta-bg" class="w-full h-full"></div>
+            </div>
+            <div class="relative z-10 bg-black bg-opacity-50 text-white p-12">
+                <h1 class="text-4xl md:text-5xl font-bold mb-4">Threat Intelligence Vendor Comparison</h1>
+                <p class="text-xl mb-8 max-w-3xl">Compare 50+ leading threat intelligence vendors side-by-side</p>
+                <button id="compare-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition-colors flex items-center">
+                    <i data-feather="layers" class="mr-2"></i> Start Comparing
+                </button>
+            </div>
+        </section>
+
+        <!-- Vendor Grid -->
+        <section id="vendors" class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Featured Vendors</h2>
+                <div class="relative">
+                    <input type="text" placeholder="Search vendors..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
+                </div>
+            </div>
+            
+            <div id="vendor-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <!-- Vendors will be loaded here dynamically -->
+            </div>
+        </section>
+
+        <!-- Comparison Table -->
+        <section id="comparison" class="bg-white rounded-xl shadow-lg p-6 mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Comparison Dashboard</h2>
+                <button id="clear-btn" class="text-red-500 hover:text-red-700 flex items-center">
+                    <i data-feather="trash-2" class="mr-1"></i> Clear All
+                </button>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Feature</th>
+                            <!-- Selected vendors will appear here -->
+                        </tr>
+                    </thead>
+                    <tbody id="comparison-body" class="bg-white divide-y divide-gray-200">
+                        <!-- Comparison data will be loaded here -->
+                    </tbody>
+                </table>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- Vendor Modal -->
+    <div id="vendor-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-start mb-4">
+                    <h3 id="modal-title" class="text-2xl font-bold"></h3>
+                    <button id="close-modal" class="text-gray-400 hover:text-gray-500">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+                <div id="modal-content" class="space-y-4">
+                    <!-- Vendor details will be loaded here -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        VANTA.NET({
+            el: "#vanta-bg",
+            color: 0x4f46e5,
+            backgroundColor: 0x111827,
+            points: 12,
+            maxDistance: 20,
+            spacing: 15
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,493 @@
+
+// Threat Intelligence Vendor Data
+const vendors = [
+    {
+        id: 'abuse-ch',
+        name: 'abuse.ch',
+        logo: 'http://static.photos/technology/200x200/1',
+        description: 'Malware and botnet tracking platform',
+        features: ['Malware Tracking', 'Botnet Monitoring', 'IOC Feeds', 'Threat Intelligence'],
+        pricing: 'Freemium',
+        coverage: ['Network', 'Malware', 'Botnet'],
+        integrations: ['SIEM', 'Firewalls', 'EDR'],
+        freeTrial: true,
+        rating: 4.3
+    },
+    {
+        id: 'anomali',
+        name: 'Anomali',
+        logo: 'http://static.photos/technology/200x200/2',
+        description: 'Enterprise threat intelligence platform',
+        features: ['Threat Intelligence', 'Threat Hunting', 'SIEM Integration', 'Automation'],
+        pricing: 'Enterprise',
+        coverage: ['Network', 'Endpoint', 'Cloud'],
+        integrations: ['SIEM', 'Firewalls', 'EDR'],
+        freeTrial: false,
+        rating: 4.2
+    },
+    {
+        id: 'arctic-wolf',
+        name: 'Arctic Wolf Networks',
+        logo: 'http://static.photos/technology/200x200/3',
+        description: 'Security operations and threat intelligence',
+        features: ['Managed Detection', 'Threat Intelligence', 'Vulnerability Management', 'Cloud Monitoring'],
+        pricing: 'Subscription-based',
+        coverage: ['Network', 'Endpoint', 'Cloud'],
+        integrations: ['SIEM', 'SOAR', 'EDR'],
+        freeTrial: true,
+        rating: 4.5
+    },
+    {
+        id: 'bitdefender',
+        name: 'Bitdefender',
+        logo: 'http://static.photos/technology/200x200/4',
+        description: 'Endpoint protection with threat intelligence',
+        features: ['Endpoint Security', 'Threat Intelligence', 'Network Security', 'Cloud Security'],
+        pricing: 'Subscription-based',
+        coverage: ['Endpoint', 'Network', 'Cloud'],
+        integrations: ['SIEM', 'SOAR', 'EDR'],
+        freeTrial: true,
+        rating: 4.6
+    },
+    {
+        id: 'bitsight',
+        name: 'Bitsight',
+        logo: 'http://static.photos/technology/200x200/5',
+        description: 'Security ratings and risk intelligence',
+        features: ['Risk Assessment', 'Threat Intelligence', 'Third-Party Risk', 'Compliance'],
+        pricing: 'Enterprise',
+        coverage: ['Network', 'Web', 'Third-Party'],
+        integrations: ['SIEM', 'GRC', 'SOAR'],
+        freeTrial: false,
+        rating: 4.4
+    },
+    {
+        id: 'blocklist-de',
+        name: 'Blocklist.de',
+        logo: 'http://static.photos/technology/200x200/6',
+        description: 'Community-based IP blocklist',
+        features: ['IP Blocklist', 'Brute Force Protection', 'Attack Logs', 'Community Data'],
+        pricing: 'Free',
+        coverage: ['Network', 'IP Reputation'],
+        integrations: ['Firewalls', 'IDS/IPS', 'SIEM'],
+        freeTrial: true,
+        rating: 4.0
+    },
+{
+        id: 'mandiant',
+        name: 'Mandiant Threat Intelligence',
+        logo: 'http://static.photos/technology/200x200/3',
+        description: 'Expert-led threat intelligence services',
+        features: ['Incident Response', 'Threat Intelligence', 'Malware Analysis', 'Vulnerability Research'],
+        pricing: 'Enterprise',
+        coverage: ['Network', 'Endpoint', 'Cloud'],
+        integrations: ['Firewalls', 'SIEM', 'EDR'],
+        freeTrial: false,
+        rating: 4.7
+    },
+    {
+        id: 'palo-alto',
+        name: 'Palo Alto Unit 42',
+        logo: 'http://static.photos/technology/200x200/4',
+        description: 'Integrated threat intelligence with next-gen firewalls',
+        features: ['Network Security', 'Cloud Security', 'Threat Intelligence', 'Automated Response'],
+        pricing: 'Bundled with Products',
+        coverage: ['Network', 'Cloud', 'Endpoint'],
+        integrations: ['Firewalls', 'Cortex XSOAR', 'SIEM'],
+        freeTrial: true,
+        rating: 4.5
+    },
+    {
+        id: 'fireeye',
+        name: 'FireEye Threat Intelligence',
+        logo: 'http://static.photos/technology/200x200/5',
+        description: 'Comprehensive threat intelligence and analysis',
+        features: ['Malware Analysis', 'Threat Intelligence', 'Incident Response', 'Vulnerability Research'],
+        pricing: 'Enterprise',
+        coverage: ['Network', 'Endpoint', 'Email'],
+        integrations: ['SIEM', 'EDR', 'SOAR'],
+        freeTrial: false,
+        rating: 4.4
+    },
+    {
+        id: 'anomali',
+        name: 'Anomali ThreatStream',
+        logo: 'http://static.photos/technology/200x200/6',
+        description: 'Threat intelligence platform for security operations',
+        features: ['Threat Intelligence', 'Threat Hunting', 'SIEM Integration', 'Automation'],
+        pricing: 'Subscription-based',
+        coverage: ['Network', 'Endpoint', 'Cloud'],
+        integrations: ['SIEM', 'Firewalls', 'EDR'],
+        freeTrial: true,
+        rating: 4.3
+    },
+    {
+        id: 'flashpoint',
+        name: 'Flashpoint Intelligence',
+        logo: 'http://static.photos/technology/200x200/7',
+        description: 'Business risk intelligence from the deep and dark web',
+        features: ['Dark Web Monitoring', 'Vulnerability Intelligence', 'Brand Protection', 'Fraud Detection'],
+        pricing: 'Enterprise',
+        coverage: ['Dark Web', 'Web', 'Network'],
+        integrations: ['SIEM', 'SOAR', 'TIPS'],
+        freeTrial: false,
+        rating: 4.5
+    },
+    {
+        id: 'threatconnect',
+        name: 'ThreatConnect',
+        logo: 'http://static.photos/technology/200x200/8',
+        description: 'Threat intelligence platform (TIP) with automation',
+        features: ['Threat Intelligence', 'Analytics', 'Automation', 'Collaboration'],
+        pricing: 'Subscription-based',
+        coverage: ['Network', 'Endpoint', 'Cloud'],
+        integrations: ['SIEM', 'SOAR', 'EDR'],
+        freeTrial: true,
+        rating: 4.2
+    },
+    {
+        id: 'alienvault',
+        name: 'AT&T Alien Labs',
+        logo: 'http://static.photos/technology/200x200/9',
+        description: 'Open threat intelligence community and platform',
+        features: ['Threat Intelligence', 'USM Platform', 'Open Source', 'Community'],
+        pricing: 'Freemium',
+        coverage: ['Network', 'Endpoint', 'Cloud'],
+        integrations: ['SIEM', 'USM', 'OSSIM'],
+        freeTrial: true,
+        rating: 4.0
+    },
+    {
+        id: 'wiz',
+        name: 'Wiz',
+        logo: 'http://static.photos/technology/200x200/50',
+        description: 'Cloud security and threat intelligence',
+        features: ['Cloud Security', 'Threat Detection', 'Vulnerability Management', 'Compliance'],
+        pricing: 'Subscription-based',
+        coverage: ['Cloud', 'Container', 'Serverless'],
+        integrations: ['SIEM', 'SOAR', 'CSPM'],
+        freeTrial: true,
+        rating: 4.7
+    },
+    {
+        id: 'withsecure',
+        name: 'WithSecure',
+        logo: 'http://static.photos/technology/200x200/51',
+        description: 'Endpoint protection and threat intelligence',
+        features: ['Endpoint Security', 'Threat Intelligence', 'EDR', 'XDR'],
+        pricing: 'Subscription-based',
+        coverage: ['Endpoint', 'Network', 'Cloud'],
+        integrations: ['SIEM', 'SOAR', 'EDR'],
+        freeTrial: true,
+        rating: 4.5
+    },
+    {
+        id: 'yeti',
+        name: 'Yeti',
+        logo: 'http://static.photos/technology/200x200/52',
+        description: 'Open-source threat intelligence platform',
+        features: ['Threat Intelligence', 'Malware Analysis', 'IOC Management', 'Collaboration'],
+        pricing: 'Open Source',
+        coverage: ['Network', 'Endpoint', 'Malware'],
+        integrations: ['SIEM', 'SOAR', 'MISP'],
+        freeTrial: true,
+        rating: 4.2
+    },
+    {
+        id: 'zerofox',
+        name: 'ZeroFOX',
+        logo: 'http://static.photos/technology/200x200/53',
+        description: 'Digital risk protection platform',
+        features: ['Social Media Protection', 'Threat Intelligence', 'Brand Protection', 'Fraud Detection'],
+        pricing: 'Enterprise',
+        coverage: ['Social Media', 'Web', 'Dark Web'],
+        integrations: ['SIEM', 'SOAR', 'TIPS'],
+        freeTrial: false,
+        rating: 4.4
+    }
+];
+
+// Sort vendors alphabetically by name
+vendors.sort((a, b) => a.name.localeCompare(b.name));
+// Selected vendors for comparison
+let selectedVendors = [];
+
+// DOM elements
+const vendorGrid = document.getElementById('vendor-grid');
+const comparisonBody = document.getElementById('comparison-body');
+const compareBtn = document.getElementById('compare-btn');
+const clearBtn = document.getElementById('clear-btn');
+const vendorModal = document.getElementById('vendor-modal');
+const closeModal = document.getElementById('close-modal');
+const modalTitle = document.getElementById('modal-title');
+const modalContent = document.getElementById('modal-content');
+
+// Initialize the page
+document.addEventListener('DOMContentLoaded', () => {
+    renderVendorGrid();
+    setupEventListeners();
+});
+
+// Render all vendors in the grid
+function renderVendorGrid() {
+    vendorGrid.innerHTML = '';
+    
+    vendors.forEach(vendor => {
+        const isSelected = selectedVendors.includes(vendor.id);
+        
+        const card = document.createElement('div');
+        card.className = `vendor-card bg-white rounded-xl shadow-md overflow-hidden ${isSelected ? 'ring-2 ring-indigo-500' : ''}`;
+        card.innerHTML = `
+            <div class="p-6">
+                <div class="flex items-center mb-4">
+                    <img src="${vendor.logo}" alt="${vendor.name}" class="w-12 h-12 rounded-full object-cover mr-4">
+                    <div>
+                        <h3 class="font-bold text-lg">${vendor.name}</h3>
+                        <div class="flex items-center">
+                            <div class="flex text-yellow-400 mr-2">
+                                ${renderStars(vendor.rating)}
+                            </div>
+                            <span class="text-gray-600 text-sm">${vendor.rating}</span>
+                        </div>
+                    </div>
+                </div>
+                <p class="text-gray-600 mb-4">${vendor.description}</p>
+                <div class="flex flex-wrap mb-4">
+                    ${vendor.features.map(feature => `
+                        <span class="feature-badge bg-indigo-100 text-indigo-800">${feature}</span>
+                    `).join('')}
+                </div>
+                <div class="flex justify-between items-center">
+                    <button data-vendor-id="${vendor.id}" class="view-details-btn text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
+                        <i data-feather="info" class="w-4 h-4 mr-1"></i> Details
+                    </button>
+                    <button data-vendor-id="${vendor.id}" class="compare-btn ${isSelected ? 'bg-red-500 hover:bg-red-600' : 'bg-indigo-600 hover:bg-indigo-700'} text-white font-medium py-1 px-3 rounded-full text-sm flex items-center transition-colors">
+                        <i data-feather="${isSelected ? 'x' : 'plus'}" class="w-4 h-4 mr-1"></i>
+                        ${isSelected ? 'Remove' : 'Compare'}
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        vendorGrid.appendChild(card);
+    });
+    
+    feather.replace();
+}
+
+// Render stars based on rating
+function renderStars(rating) {
+    const fullStars = Math.floor(rating);
+    const hasHalfStar = rating % 1 >= 0.5;
+    let stars = '';
+    
+    for (let i = 0; i < fullStars; i++) {
+        stars += '<i data-feather="star" class="w-4 h-4 fill-current"></i>';
+    }
+    
+    if (hasHalfStar) {
+        stars += '<i data-feather="star" class="w-4 h-4 fill-current" fill="url(#half-star)"></i>';
+    }
+    
+    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
+    for (let i = 0; i < emptyStars; i++) {
+        stars += '<i data-feather="star" class="w-4 h-4"></i>';
+    }
+    
+    return stars;
+}
+
+// Set up event listeners
+function setupEventListeners() {
+    // Compare button click
+    compareBtn.addEventListener('click', () => {
+        if (selectedVendors.length < 2) {
+            alert('Please select at least 2 vendors to compare');
+            return;
+        }
+        
+        renderComparisonTable();
+        document.getElementById('comparison').scrollIntoView({ behavior: 'smooth' });
+    });
+    
+    // Clear comparison button
+    clearBtn.addEventListener('click', () => {
+        selectedVendors = [];
+        renderVendorGrid();
+        comparisonBody.innerHTML = '';
+    });
+    
+    // Close modal button
+    closeModal.addEventListener('click', () => {
+        vendorModal.classList.add('hidden');
+    });
+    
+    // Vendor grid event delegation
+    vendorGrid.addEventListener('click', (e) => {
+        const compareBtn = e.target.closest('.compare-btn');
+        const detailsBtn = e.target.closest('.view-details-btn');
+        
+        if (compareBtn) {
+            const vendorId = compareBtn.getAttribute('data-vendor-id');
+            toggleVendorSelection(vendorId);
+        }
+        
+        if (detailsBtn) {
+            const vendorId = detailsBtn.getAttribute('data-vendor-id');
+            showVendorDetails(vendorId);
+        }
+    });
+}
+
+// Toggle vendor selection for comparison
+function toggleVendorSelection(vendorId) {
+    const index = selectedVendors.indexOf(vendorId);
+    
+    if (index === -1) {
+        selectedVendors.push(vendorId);
+    } else {
+        selectedVendors.splice(index, 1);
+    }
+    
+    renderVendorGrid();
+}
+
+// Show vendor details in modal
+function showVendorDetails(vendorId) {
+    const vendor = vendors.find(v => v.id === vendorId);
+    
+    if (!vendor) return;
+    
+    modalTitle.textContent = vendor.name;
+    
+    modalContent.innerHTML = `
+        <div class="flex items-start mb-6">
+            <img src="${vendor.logo}" alt="${vendor.name}" class="w-20 h-20 rounded-full object-cover mr-6">
+            <div>
+                <div class="flex items-center mb-2">
+                    <div class="flex text-yellow-400 mr-2">
+                        ${renderStars(vendor.rating)}
+                    </div>
+                    <span class="text-gray-600">${vendor.rating}/5.0</span>
+                </div>
+                <p class="text-gray-700">${vendor.description}</p>
+            </div>
+        </div>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+                <h4 class="font-bold text-lg mb-3">Features</h4>
+                <ul class="space-y-2">
+                    ${vendor.features.map(feature => `
+                        <li class="flex items-center">
+                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
+                            <span>${feature}</span>
+                        </li>
+                    `).join('')}
+                </ul>
+            </div>
+            
+            <div>
+                <h4 class="font-bold text-lg mb-3">Coverage</h4>
+                <div class="flex flex-wrap gap-2">
+                    ${vendor.coverage.map(cov => `
+                        <span class="px-3 py-1 bg-emerald-100 text-emerald-800 rounded-full text-sm">${cov}</span>
+                    `).join('')}
+                </div>
+                
+                <h4 class="font-bold text-lg mt-4 mb-3">Integrations</h4>
+                <div class="flex flex-wrap gap-2">
+                    ${vendor.integrations.map(int => `
+                        <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">${int}</span>
+                    `).join('')}
+                </div>
+                
+                <div class="mt-4 p-4 bg-gray-50 rounded-lg">
+                    <p class="font-medium">Pricing: <span class="text-gray-700">${vendor.pricing}</span></p>
+                    <p class="font-medium mt-2">Free Trial: <span class="text-gray-700">${vendor.freeTrial ? 'Yes' : 'No'}</span></p>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    feather.replace();
+    vendorModal.classList.remove('hidden');
+}
+
+// Render the comparison table
+function renderComparisonTable() {
+    const selected = vendors.filter(v => selectedVendors.includes(v.id));
+    
+    if (selected.length < 2) {
+        comparisonBody.innerHTML = '<tr><td colspan="100%" class="text-center py-4">Please select at least 2 vendors to compare</td></tr>';
+        return;
+    }
+    
+    // Clear previous content
+    comparisonBody.innerHTML = '';
+    
+    // Update table headers
+    const headerRow = document.querySelector('#comparison thead tr');
+    headerRow.innerHTML = '<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Feature</th>';
+    
+    selected.forEach(vendor => {
+        headerRow.innerHTML += `
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                <div class="flex items-center">
+                    <img src="${vendor.logo}" alt="${vendor.name}" class="w-8 h-8 rounded-full mr-2">
+                    ${vendor.name}
+                </div>
+            </th>
+        `;
+    });
+    
+    // Comparison categories
+    const categories = [
+        { name: 'Features', key: 'features', type: 'list' },
+        { name: 'Coverage', key: 'coverage', type: 'list' },
+        { name: 'Integrations', key: 'integrations', type: 'list' },
+        { name: 'Pricing Model', key: 'pricing', type: 'text' },
+        { name: 'Free Trial', key: 'freeTrial', type: 'boolean' },
+        { name: 'Rating', key: 'rating', type: 'rating' }
+    ];
+    
+    // Add rows for each comparison category
+    categories.forEach(category => {
+        const row = document.createElement('tr');
+        row.innerHTML = `<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${category.name}</td>`;
+        
+        selected.forEach(vendor => {
+            const value = vendor[category.key];
+            
+            let cellContent = '';
+            if (category.type === 'list') {
+                cellContent = value.map(item => `
+                    <span class="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-medium text-gray-700 mr-1 mb-1">
+                        ${item}
+                    </span>
+                `).join('');
+            } else if (category.type === 'boolean') {
+                cellContent = value ? 
+                    '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Yes</span>' :
+                    '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">No</span>';
+            } else if (category.type === 'rating') {
+                cellContent = `
+                    <div class="flex items-center">
+                        <div class="flex text-yellow-400 mr-2">
+                            ${renderStars(value)}
+                        </div>
+                        <span class="text-gray-600">${value}</span>
+                    </div>
+                `;
+            } else {
+                cellContent = `<span class="text-gray-700">${value}</span>`;
+            }
+            
+            row.innerHTML += `<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${cellContent}</td>`;
+        });
+        
+        comparisonBody.appendChild(row);
+    });
+    
+    feather.replace();
+}

style.css

@@ -1,28 +1,51 @@
+/* Custom styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+#vanta-bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.vendor-card {
+    transition: all 0.3s ease;
+}
+
+.vendor-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.feature-badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 10px;
 }
+
+::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
+}