Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
| import React from 'react'; | |
| const CheckIcon = () => ( | |
| <div className="w-5 h-5 rounded-full bg-emerald-50 text-emerald-500 flex items-center justify-center mx-auto"> | |
| <svg className="w-3.5 h-3.5 stroke-[3]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| ); | |
| const CrossIcon = () => ( | |
| <div className="w-5 h-5 rounded-full bg-red-100/80 text-red-400 flex items-center justify-center mx-auto"> | |
| <svg className="w-3 h-3 stroke-[2.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </div> | |
| ); | |
| const HalfIcon = () => ( | |
| <div className="w-4 h-4 rounded-full bg-[#0B132B] flex items-center justify-center mx-auto shadow-sm"> | |
| <div className="w-1.5 h-1.5 rounded-full bg-white"></div> | |
| </div> | |
| ); | |
| export const FeatureComparison = () => { | |
| const comparisonData = [ | |
| { | |
| feature: "Real-Time Vulnerability Scanning", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "cross", | |
| qualys: "cross", | |
| }, | |
| { | |
| feature: "Integrated Multi-Scanner Security Engine", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "cross", | |
| qualys: "cross", | |
| isBold: true, | |
| }, | |
| { | |
| feature: "Automated Risk Prioritization (AI)", | |
| larshield: "check", | |
| nessus: "half", | |
| openvas: "cross", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Web Application Scanning (OWASP Top 10)", | |
| larshield: "check", | |
| nessus: "check", | |
| openvas: "check", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "API Security Scanning", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "cross", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Cloud Security Scanning (AWS, Azure, GCP)", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "cross", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Network & Port Scanning", | |
| larshield: "check", | |
| nessus: "check", | |
| openvas: "check", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Asset Discovery & Inventory", | |
| larshield: "check", | |
| nessus: "check", | |
| openvas: "check", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Custom Organization-Branded Security Reports", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "cross", | |
| qualys: "cross", | |
| isBold: true, | |
| }, | |
| { | |
| feature: "Automated Compliance Reporting", | |
| larshield: "check", | |
| nessus: "half", | |
| openvas: "cross", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Unified Dashboard", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "cross", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Customizable & Flexible Scans", | |
| larshield: "check", | |
| nessus: "check", | |
| openvas: "check", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Easy Deployment & Management", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "cross", | |
| qualys: "check", | |
| }, | |
| { | |
| feature: "Affordable & Scalable for Businesses", | |
| larshield: "check", | |
| nessus: "cross", | |
| openvas: "check", | |
| qualys: "cross", | |
| }, | |
| ]; | |
| const renderCell = (type) => { | |
| if (type === "check") return <CheckIcon />; | |
| if (type === "cross") return <CrossIcon />; | |
| if (type === "half") return <HalfIcon />; | |
| return null; | |
| }; | |
| return ( | |
| <section id="comparison" className="py-12 md:py-16 bg-gradient-to-b from-slate-50/50 to-white relative border-t border-slate-200/60"> | |
| <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| {/* Top Header Section matching reference screenshot */} | |
| <div className="text-center mb-8 md:mb-10"> | |
| <span className="text-[#4F46E5] font-extrabold text-xs uppercase tracking-widest mb-2 block"> | |
| WHY LARSHIELD | |
| </span> | |
| <h2 className="text-3xl md:text-4xl font-extrabold text-slate-900 tracking-tight mb-3"> | |
| One Platform. Every Security Advantage. | |
| </h2> | |
| <p className="text-slate-500 max-w-xl mx-auto text-xs md:text-sm font-medium leading-relaxed"> | |
| See how LarShield compares against legacy vulnerability scanners on coverage, automation, and reporting. | |
| </p> | |
| </div> | |
| {/* Comparison Table Card */} | |
| <div className="bg-white border border-slate-200/80 rounded-2xl shadow-xl shadow-slate-200/50 overflow-hidden"> | |
| <div className="overflow-x-auto custom-scrollbar"> | |
| <table className="w-full text-left border-collapse min-w-[680px]"> | |
| {/* Header Row */} | |
| <thead> | |
| <tr className="bg-[#0A1128] text-white"> | |
| <th className="py-3.5 px-5 font-bold text-xs sm:text-sm w-[34%]"> | |
| Feature | |
| </th> | |
| {/* LarShield Column Header - Highlighted with Brand Blue Accent */} | |
| <th className="py-3.5 px-4 font-extrabold text-xs sm:text-sm text-center w-[19%] bg-gradient-to-b from-blue-600 to-blue-700 text-white shadow-md"> | |
| LarShield | |
| </th> | |
| {/* Nessus Header */} | |
| <th className="py-3.5 px-4 font-bold text-xs sm:text-sm text-center w-[15%] text-slate-200"> | |
| Nessus | |
| </th> | |
| {/* OpenVAS Header */} | |
| <th className="py-3.5 px-4 font-bold text-xs sm:text-sm text-center w-[16%] text-slate-200"> | |
| OpenVAS | |
| </th> | |
| {/* Qualys Header */} | |
| <th className="py-3.5 px-4 font-bold text-xs sm:text-sm text-center w-[16%] text-slate-200"> | |
| Qualys | |
| </th> | |
| </tr> | |
| </thead> | |
| {/* Table Body */} | |
| <tbody className="divide-y divide-slate-100 text-xs sm:text-[13px]"> | |
| {comparisonData.map((row, idx) => ( | |
| <tr | |
| key={idx} | |
| className={`${idx % 2 === 0 ? 'bg-white' : 'bg-slate-50/50'} hover:bg-blue-50/20 transition-colors`} | |
| > | |
| {/* Feature Name */} | |
| <td className="py-2.5 px-5 text-slate-800"> | |
| {row.isBold ? ( | |
| <span className="font-black text-slate-950 tracking-tight">{row.feature}</span> | |
| ) : ( | |
| <span className="font-semibold text-slate-700">{row.feature}</span> | |
| )} | |
| </td> | |
| {/* LarShield Cell (Highlighted Ice-Blue Column) */} | |
| <td className="py-2.5 px-4 text-center bg-[#E0F2FE]/60 border-x border-blue-100/50"> | |
| {renderCell(row.larshield)} | |
| </td> | |
| {/* Nessus Cell */} | |
| <td className="py-2.5 px-4 text-center"> | |
| {renderCell(row.nessus)} | |
| </td> | |
| {/* OpenVAS Cell */} | |
| <td className="py-2.5 px-4 text-center"> | |
| {renderCell(row.openvas)} | |
| </td> | |
| {/* Qualys Cell */} | |
| <td className="py-2.5 px-4 text-center"> | |
| {renderCell(row.qualys)} | |
| </td> | |
| </tr> | |
| ))} | |
| {/* Pricing Row */} | |
| <tr className="bg-white font-bold border-t border-slate-200"> | |
| <td className="py-3 px-5 text-slate-900 text-xs sm:text-sm font-bold"> | |
| Pricing | |
| </td> | |
| {/* LarShield Pricing */} | |
| <td className="py-3 px-4 text-center bg-[#E0F2FE]/90 border-x border-blue-100 text-blue-700 text-xs sm:text-[13px] font-extrabold"> | |
| Affordable & Flexible | |
| </td> | |
| {/* Nessus Pricing */} | |
| <td className="py-3 px-4 text-center text-slate-800 font-bold text-xs sm:text-[13px]"> | |
| Subscription | |
| </td> | |
| {/* OpenVAS Pricing */} | |
| <td className="py-3 px-4 text-center text-slate-800 font-bold text-xs sm:text-[13px]"> | |
| Free (Open Source) | |
| </td> | |
| {/* Qualys Pricing */} | |
| <td className="py-3 px-4 text-center text-slate-800 font-bold text-xs sm:text-[13px]"> | |
| Subscription | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| export default FeatureComparison; | |