Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Coosec Consulting — IT Security Experts</title> | |
| <meta name="description" content="Coosec Consulting provides enterprise-grade cybersecurity services: penetration testing, compliance, SOC, incident response, and training." /> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| brand: { | |
| yellow: '#f59e0b', // primary | |
| fuchsia: '#d946ef' // secondary | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'ui-sans-serif', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="antialiased bg-gray-50 text-gray-800"> | |
| <!-- Header / Navigation --> | |
| <header class="sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-gray-200"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <a href="#" class="flex items-center gap-2"> | |
| <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-brand-yellow/10 ring-1 ring-brand-yellow/20"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> | |
| </svg> | |
| </span> | |
| <span class="text-lg font-semibold tracking-tight">Coosec Consulting</span> | |
| </a> | |
| <nav class="hidden md:flex items-center gap-8 text-sm"> | |
| <a href="#projects" class="hover:text-brand-fuchsia">Projects</a> | |
| <a href="#services" class="hover:text-brand-fuchsia">Services</a> | |
| <a href="#team" class="hover:text-brand-fuchsia">Team</a> | |
| <a href="#testimonials" class="hover:text-brand-fuchsia">Testimonials</a> | |
| <a href="#awards" class="hover:text-brand-fuchsia">Awards</a> | |
| <a href="#contact" class="px-4 py-2 rounded-md bg-brand-yellow text-white hover:bg-brand-yellow/90 shadow-sm">Get a Quote</a> | |
| </nav> | |
| <button id="mobileMenuBtn" class="md:hidden inline-flex items-center justify-center p-2 rounded-md hover:bg-gray-100" aria-label="Open Menu" aria-expanded="false"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="mobileMenu" class="md:hidden hidden border-t border-gray-200 bg-white"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3 flex flex-col gap-2"> | |
| <a href="#projects" class="py-2 hover:text-brand-fuchsia">Projects</a> | |
| <a href="#services" class="py-2 hover:text-brand-fuchsia">Services</a> | |
| <a href="#team" class="py-2 hover:text-brand-fuchsia">Team</a> | |
| <a href="#testimonials" class="py-2 hover:text-brand-fuchsia">Testimonials</a> | |
| <a href="#awards" class="py-2 hover:text-brand-fuchsia">Awards</a> | |
| <a href="#contact" class="py-2 font-medium text-brand-fuchsia">Get a Quote</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero --> | |
| <section id="hero" class="relative overflow-hidden bg-gradient-to-b from-yellow-50 via-white to-fuchsia-50"> | |
| <!-- Animated background blobs --> | |
| <div aria-hidden="true" class="pointer-events-none absolute inset-0"> | |
| <div class="blob blob-yellow absolute -top-24 -left-20 h-72 w-72 rounded-full bg-brand-yellow/20 blur-3xl"></div> | |
| <div class="blob blob-fuchsia absolute top-1/2 -right-24 -translate-y-1/2 h-80 w-80 rounded-full bg-brand-fuchsia/20 blur-3xl"></div> | |
| <div class="blob blob-spin absolute bottom-[-6rem] left-1/2 -translate-x-1/2 h-96 w-96 rounded-full bg-fuchsia-300/20 blur-3xl"></div> | |
| <!-- Grid lines --> | |
| <div class="absolute inset-0 bg-[linear-gradient(to_right,rgba(0,0,0,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.06)_1px,transparent_1px)] bg-[size:24px_24px]"></div> | |
| </div> | |
| <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="py-20 md:py-28 grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="inline-flex items-center gap-2 rounded-full bg-white/80 px-3 py-1 ring-1 ring-gray-200 shadow-sm"> | |
| <span class="inline-flex h-2 w-2 rounded-full bg-brand-fuchsia animate-pulse"></span> | |
| <span class="text-sm text-gray-700">Trusted by 200+ enterprises</span> | |
| </div> | |
| <h1 class="mt-6 text-4xl md:text-6xl font-extrabold tracking-tight leading-tight"> | |
| Secure by design. | |
| <span class="block text-brand-fuchsia reveal">Future‑proof by practice.</span> | |
| </h1> | |
| <p class="mt-5 text-lg text-gray-600 max-w-2xl reveal"> | |
| Coosec Consulting helps organizations prevent breaches, pass audits, and respond faster. | |
| From penetration testing to 24/7 SOC, we tailor security to your business. | |
| </p> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-3 reveal"> | |
| <a href="#contact" class="inline-flex items-center justify-center rounded-md bg-brand-yellow px-6 py-3 text-white font-semibold shadow-sm hover:bg-yellow-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/50"> | |
| Get a free security assessment | |
| </a> | |
| <a href="#projects" class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-6 py-3 font-semibold text-gray-800 hover:bg-gray-50"> | |
| View case studies | |
| </a> | |
| </div> | |
| <!-- Trust Badges --> | |
| <div class="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-4 opacity-90 reveal"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="h-5 w-5 text-brand-fuchsia" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> | |
| <span class="text-sm text-gray-700">ISO 27001</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <svg class="h-5 w-5 text-brand-fuchsia" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> | |
| <span class="text-sm text-gray-700">SOC 2</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <svg class="h-5 w-5 text-brand-fuchsia" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> | |
| <span class="text-sm text-gray-700">PCI DSS</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <svg class="h-5 w-5 text-brand-fuchsia" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> | |
| <span class="text-sm text-gray-700">HIPAA</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative mx-auto w-full max-w-xl"> | |
| <div class="absolute -inset-4 bg-gradient-to-tr from-brand-yellow/30 via-brand-fuchsia/30 to-transparent blur-2xl rounded-3xl"></div> | |
| <div class="relative rounded-2xl border border-gray-200 bg-white/90 shadow-xl backdrop-blur p-6 md:p-8"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-500">Average time to contain</div> | |
| <div class="mt-1 text-3xl font-extrabold">14 <span class="text-lg font-medium text-gray-500">minutes</span></div> | |
| </div> | |
| <div class="h-12 w-12 rounded-full bg-brand-yellow/10 flex items-center justify-center"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"> | |
| <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-6 h-2 w-full rounded-full bg-gray-200 overflow-hidden"> | |
| <div class="h-full w-3/4 rounded-full bg-gradient-to-r from-brand-yellow to-brand-fuchsia animate-pulse"></div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <div class="text-2xl font-bold">99.99%</div> | |
| <div class="text-xs text-gray-500">Uptime</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold">150+</div> | |
| <div class="text-xs text-gray-500">IR cases</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold">0</div> | |
| <div class="text-xs text-gray-500">Breaches</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Projects --> | |
| <section id="projects" class="py-16 md:py-24"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-2xl"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight">Featured Projects & Case Studies</h2> | |
| <p class="mt-3 text-gray-600">Real results from recent engagements across fintech, healthcare, and SaaS.</p> | |
| </div> | |
| <div class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Project Card --> | |
| <article class="group relative rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-lg transition-shadow overflow-hidden"> | |
| <div class="aspect-[16/10] bg-gradient-to-br from-yellow-50 to-fuchsia-50 relative"> | |
| <div class="absolute inset-0 opacity-60 bg-[radial(circle_at_20%_20%,rgba(245,158,11,.25),transparent_40%),radial(circle_at_80%_30%,rgba(217,70,239,.25),transparent_45%)]"></div> | |
| <div class="absolute bottom-3 left-3 inline-flex items-center gap-1 rounded-md bg-white/90 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200"> | |
| <span class="h-2 w-2 rounded-full bg-brand-fuchsia"></span> | |
| Penetration Testing | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold">Fintech Red Team Engagement</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Breached critical systems using zero‑day chain; provided prioritized remediation.</p> | |
| <div class="mt-3 flex items-center gap-3 text-sm text-gray-500"> | |
| <span class="inline-flex items-center gap-1"> | |
| <svg class="h-4 w-4 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> | |
| 4 weeks | |
| </span> | |
| <span class="inline-flex items-center gap-1"> | |
| <svg class="h-4 w-4 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> | |
| 18 findings | |
| </span> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="case-study-btn text-sm font-semibold text-brand-fuchsia hover:underline" data-case="fintech">Read case study</button> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="group relative rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-lg transition-shadow overflow-hidden"> | |
| <div class="aspect-[16/10] bg-gradient-to-br from-yellow-50 to-fuchsia-50 relative"> | |
| <div class="absolute inset-0 opacity-60 bg-[radial(circle_at_70%_70%,rgba(245,158,11,.2),transparent_40%),radial(circle_at_30%_60%,rgba(217,70,239,.25),transparent_45%)]"></div> | |
| <div class="absolute bottom-3 left-3 inline-flex items-center gap-1 rounded-md bg-white/90 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200"> | |
| <span class="h-2 w-2 rounded-full bg-brand-fuchsia"></span> | |
| Compliance | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold">HIPAA Compliance Program</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Built HIPAA compliance framework, passed audit with zero major findings.</p> | |
| <div class="mt-3 flex items-center gap-3 text-sm text-gray-500"> | |
| <span class="inline-flex items-center gap-1"> | |
| <svg class="h-4 w-4 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> | |
| 3 months | |
| </span> | |
| <span class="inline-flex items-center gap-1"> | |
| <svg class="h-4 w-4 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> | |
| Passed | |
| </span> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="case-study-btn text-sm font-semibold text-brand-fuchsia hover:underline" data-case="hipaa">Read case study</button> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="group relative rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-lg transition-shadow overflow-hidden"> | |
| <div class="aspect-[16/10] bg-gradient-to-br from-yellow-50 to-fuchsia-50 relative"> | |
| <div class="absolute inset-0 opacity-60 bg-[radial(circle_at_50%_50%,rgba(245,158,11,.25),transparent_40%),radial(circle_at_80%_80%,rgba(217,70,239,.25),transparent_45%)]"></div> | |
| <div class="absolute bottom-3 left-3 inline-flex items-center gap-1 rounded-md bg-white/90 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-200"> | |
| <span class="h-2 w-2 rounded-full bg-brand-fuchsia"></span> | |
| Incident Response | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold">Ransomware Containment</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Isolated ransomware in 14 minutes; restored from clean backups with zero data loss.</p> | |
| <div class="mt-3 flex items-center gap-3 text-sm text-gray-500"> | |
| <span class="inline-flex items-center gap-1"> | |
| <svg class="h-4 w-4 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> | |
| 14 min MTTC | |
| </span> | |
| <span class="inline-flex items-center gap-1"> | |
| <svg class="h-4 w-4 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> | |
| 0 data loss | |
| </span> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="case-study-btn text-sm font-semibold text-brand-fuchsia hover:underline" data-case="ransomware">Read case study</button> | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services --> | |
| <section id="services" class="py-16 md:py-24 bg-white"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-2xl"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight">Services we provide</h2> | |
| <p class="mt-3 text-gray-600">End‑to‑end security to protect, detect, and respond.</p> | |
| </div> | |
| <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Service Card --> | |
| <div class="rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-shadow bg-white"> | |
| <div class="h-12 w-12 rounded-xl bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 2l7 4v6c0 5-3 8-7 10C8 20 5 17 5 12V6l7-4z"/></svg> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold">Penetration Testing</h3> | |
| <p class="mt-2 text-gray-600 text-sm">App, network, cloud, and social engineering tests with exploit validation and retesting.</p> | |
| <ul class="mt-4 space-y-1 text-sm text-gray-600"> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>OWASP, NIST, OSSTMM</li> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>Executive & technical reports</li> | |
| </ul> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-shadow bg-white"> | |
| <div class="h-12 w-12 rounded-xl bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 12h18M12 3v18"/></svg> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold">Compliance & Governance</h3> | |
| <p class="mt-2 text-gray-600 text-sm">ISO 27001, SOC 2, PCI DSS, HIPAA, GDPR programs with gap analysis and audit readiness.</p> | |
| <ul class="mt-4 space-y-1 text-sm text-gray-600"> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>Policy & control mapping</li> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>Vendor risk management</li> | |
| </ul> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-shadow bg-white"> | |
| <div class="h-12 w-12 rounded-xl bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 7h16M4 12h10M4 17h7"/></svg> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold">Security Operations (SOC)</h3> | |
| <p class="mt-2 text-gray-600 text-sm">24/7 monitoring, detection engineering, SIEM tuning, and incident response runbooks.</p> | |
| <ul class="mt-4 space-y-1 text-sm text-gray-600"> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>SOAR + Threat intel</li> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>MTTD < 5 minutes</li> | |
| </ul> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-shadow bg-white"> | |
| <div class="h-12 w-12 rounded-xl bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M8 11V7a4 4 0 118 0v4M5 11h14l-1 10H6L5 11z"/></svg> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold">Cloud Security</h3> | |
| <p class="mt-2 text-gray-600 text-sm">AWS, Azure, GCP posture management, IAM hardening, and container/K8s security.</p> | |
| <ul class="mt-4 space-y-1 text-sm text-gray-600"> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>CIS benchmarks</li> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>DevSecOps integration</li> | |
| </ul> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-shadow bg-white"> | |
| <div class="h-12 w-12 rounded-xl bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2"/></svg> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold">Incident Response</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Rapid triage, containment, forensics, and post‑incident improvement plans.</p> | |
| <ul class="mt-4 space-y-1 text-sm text-gray-600"> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>IR retainer options</li> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>Tabletop exercises</li> | |
| </ul> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 p-6 hover:shadow-lg transition-shadow bg-white"> | |
| <div class="h-12 w-12 rounded-xl bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5zM12 14l6.16-3.42a2 2 0 01.84 1.98v4.88a2 2 0 01-.84 1.98L12 22l-6.16-3.42a2 2 0 01-.84-1.98v-4.88a2 2 0 01.84-1.98L12 14z"/></svg> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold">Training & Awareness</h3> | |
| <p class="mt-2 text-gray-600 text-sm">Role‑based security training and phishing simulations to build a strong security culture.</p> | |
| <ul class="mt-4 space-y-1 text-sm text-gray-600"> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>Custom content</li> | |
| <li class="flex items-center gap-2"><span class="h-1.5 w-1.5 rounded-full bg-brand-fuchsia"></span>Metrics & reporting</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team --> | |
| <section id="team" class="py-16 md:py-24"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-2xl"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight">Meet our team</h2> | |
| <p class="mt-3 text-gray-600">Domain experts with real‑world offensive and defensive experience.</p> | |
| </div> | |
| <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Member --> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-5 text-center hover:shadow-lg transition-shadow"> | |
| <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-brand-yellow to-brand-fuchsia p-[2px]"> | |
| <img src="https://i.pravatar.cc/200?img=12" alt="Avatar — Alex Kim" class="h-full w-full rounded-full object-cover ring-2 ring-white" /> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Alex Kim</h3> | |
| <p class="text-sm text-gray-500">Principal Consultant</p> | |
| <div class="mt-3 flex justify-center gap-3"> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">LinkedIn</a> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">X</a> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-5 text-center hover:shadow-lg transition-shadow"> | |
| <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-brand-yellow to-brand-fuchsia p-[2px]"> | |
| <img src="https://i.pravatar.cc/200?img=32" alt="Avatar — Priya Nair" class="h-full w-full rounded-full object-cover ring-2 ring-white" /> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Priya Nair</h3> | |
| <p class="text-sm text-gray-500">Red Team Lead</p> | |
| <div class="mt-3 flex justify-center gap-3"> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">LinkedIn</a> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">X</a> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-5 text-center hover:shadow-lg transition-shadow"> | |
| <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-brand-yellow to-brand-fuchsia p-[2px]"> | |
| <img src="https://i.pravatar.cc/200?img=5" alt="Avatar — Mateo García" class="h-full w-full rounded-full object-cover ring-2 ring-white" /> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Mateo García</h3> | |
| <p class="text-sm text-gray-500">SOC Manager</p> | |
| <div class="mt-3 flex justify-center gap-3"> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">LinkedIn</a> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">X</a> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-5 text-center hover:shadow-lg transition-shadow"> | |
| <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-brand-yellow to-brand-fuchsia p-[2px]"> | |
| <img src="https://i.pravatar.cc/200?img=20" alt="Avatar — Sara Chen" class="h-full w-full rounded-full object-cover ring-2 ring-white" /> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Sara Chen</h3> | |
| <p class="text-sm text-gray-500">Compliance Director</p> | |
| <div class="mt-3 flex justify-center gap-3"> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">LinkedIn</a> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">X</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Slider --> | |
| <section id="testimonials" class="py-16 md:py-24 bg-white"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-2xl"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight">What clients say</h2> | |
| <p class="mt-3 text-gray-600">Testimonials from leaders who trust Coosec.</p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="relative overflow-hidden rounded-2xl border border-gray-200 bg-gray-50"> | |
| <div id="testimonialTrack" class="flex transition-transform duration-500 ease-out"> | |
| <!-- Slide 1 --> | |
| <div class="w-full shrink-0 p-8 md:p-12"> | |
| <div class="flex items-start gap-4"> | |
| <img class="h-12 w-12 rounded-full" src="https://i.pravatar.cc/100?img=14" alt="Client avatar" /> | |
| <div> | |
| <p class="text-lg text-gray-800">“CyberShield’s red team uncovered a critical path we missed. Their report was actionable and helped us ship a safer product.”</p> | |
| <p class="mt-3 text-sm text-gray-500">CTO, Series C Fintech</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 2 --> | |
| <div class="w-full shrink-0 p-8 md:p-12"> | |
| <div class="flex items-start gap-4"> | |
| <img class="h-12 w-12 rounded-full" src="https://i.pravatar.cc/100?img=36" alt="Client avatar" /> | |
| <div> | |
| <p class="text-lg text-gray-800">“They guided us to SOC 2 Type II with zero major findings. Clear roadmap, excellent communication.”</p> | |
| <p class="mt-3 text-sm text-gray-500">Head of Security, B2B SaaS</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 3 --> | |
| <div class="w-full shrink-0 p-8 md:p-12"> | |
| <div class="flex items-start gap-4"> | |
| <img class="h-12 w-12 rounded-full" src="https://i.pravatar.cc/100?img=50" alt="Client avatar" /> | |
| <div> | |
| <p class="text-lg text-gray-800">“When ransomware hit, CyberShield contained it in minutes. Our downtime? Zero.”</p> | |
| <p class="mt-3 text-sm text-gray-500">CIO, Healthcare Provider</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3"> | |
| <button id="prevTestimonial" class="rounded-full bg-white/90 p-2 shadow hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/50" aria-label="Previous"> | |
| <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg> | |
| </button> | |
| </div> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <button id="nextTestimonial" class="rounded-full bg-white/90 p-2 shadow hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/50" aria-label="Next"> | |
| <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Dots --> | |
| <div id="testimonialDots" class="mt-4 flex justify-center gap-2"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Awards --> | |
| <section id="awards" class="py-16 md:py-24"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-2xl"> | |
| <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight">Awards & Recognition</h2> | |
| <p class="mt-3 text-gray-600">We’re proud to be recognized by industry leaders.</p> | |
| </div> | |
| <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Award Item --> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-6 flex items-center gap-4"> | |
| <div class="h-12 w-12 rounded-lg bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/></svg> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Top Security Consultancy</div> | |
| <div class="text-sm text-gray-500">Cyber Awards 2025</div> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-6 flex items-center gap-4"> | |
| <div class="h-12 w-12 rounded-lg bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/></svg> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Best IR Team</div> | |
| <div class="text-sm text-gray-500">InfoSec Global 2024</div> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-6 flex items-center gap-4"> | |
| <div class="h-12 w-12 rounded-lg bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/></svg> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Innovation in SOC</div> | |
| <div class="text-sm text-gray-500">CloudSec 2025</div> | |
| </div> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-6 flex items-center gap-4"> | |
| <div class="h-12 w-12 rounded-lg bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-6 w-6 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/></svg> | |
| </div> | |
| <div> | |
| <div class="font-semibold">People’s Choice</div> | |
| <div class="text-sm text-gray-500">SecTech 2024</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact / Get a Quote --> | |
| <section id="contact" class="py-16 md:py-24 bg-white"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="grid gap-10 lg:grid-cols-2"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight">Get a quote</h2> | |
| <p class="mt-3 text-gray-600">Tell us about your environment and goals. We’ll respond within one business day.</p> | |
| <div class="mt-8 rounded-2xl border border-gray-200 bg-gray-50 p-6"> | |
| <div class="grid gap-6 sm:grid-cols-2"> | |
| <div class="flex items-start gap-3"> | |
| <div class="h-10 w-10 rounded-lg bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-5 w-5 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 5h18M3 12h18M3 19h18"/></svg> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Fast turnaround</div> | |
| <div class="text-sm text-gray-600">Most quotes within 24 hours</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <div class="h-10 w-10 rounded-lg bg-brand-yellow/10 flex items-center justify-center ring-1 ring-brand-yellow/20"> | |
| <svg class="h-5 w-5 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> | |
| </div> | |
| <div> | |
| <div class="font-semibold">No obligations</div> | |
| <div class="text-sm text-gray-600">Transparent scoping and pricing</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <form id="quoteForm" class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"> | |
| <div class="grid gap-4 sm:grid-cols-2"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700" for="name">Full name</label> | |
| <input id="name" name="name" required type="text" class="mt-1 block w-full rounded-md border-gray-300 focus:border-brand-fuchsia focus:ring-brand-fuchsia" placeholder="Jane Doe" /> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700" for="email">Work email</label> | |
| <input id="email" name="email" required type="email" class="mt-1 block w-full rounded-md border-gray-300 focus:border-brand-fuchsia focus:ring-brand-fuchsia" placeholder="jane@company.com" /> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700" for="company">Company</label> | |
| <input id="company" name="company" required type="text" class="mt-1 block w-full rounded-md border-gray-300 focus:border-brand-fuchsia focus:ring-brand-fuchsia" placeholder="Acme Corp" /> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700" for="phone">Phone</label> | |
| <input id="phone" name="phone" type="tel" class="mt-1 block w-full rounded-md border-gray-300 focus:border-brand-fuchsia focus:ring-brand-fuchsia" placeholder="+1 555 123 4567" /> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700" for="services">Services of interest</label> | |
| <select id="services" name="services" class="mt-1 block w-full rounded-md border-gray-300 focus:border-brand-fuchsia focus:ring-brand-fuchsia"> | |
| <option>Penetration Testing</option> | |
| <option>Compliance & Governance</option> | |
| <option>Security Operations (SOC)</option> | |
| <option>Cloud Security</option> | |
| <option>Incident Response</option> | |
| <option>Training & Awareness</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700" for="message">Project details</label> | |
| <textarea id="message" name="message" rows="4" class="mt-1 block w-full rounded-md border-gray-300 focus:border-brand-fuchsia focus:ring-brand-fuchsia" placeholder="Timeline, scope, compliance needs..."></textarea> | |
| </div> | |
| <div class="sm:col-span-2 flex items-start gap-2"> | |
| <input id="agree" name="agree" type="checkbox" required class="mt-1 h-4 w-4 rounded border-gray-300 text-brand-fuchsia focus:ring-brand-fuchsia" /> | |
| <label for="agree" class="text-sm text-gray-600">I agree to the processing of my data and the privacy policy.</label> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex items-center gap-3"> | |
| <button type="submit" class="inline-flex items-center justify-center rounded-md bg-brand-yellow px-6 py-3 font-semibold text-white shadow-sm hover:bg-yellow-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/50">Request quote</button> | |
| <div id="formStatus" role="status" class="text-sm text-gray-600"></div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-200 bg-white"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10"> | |
| <div class="grid gap-8 md:grid-cols-4"> | |
| <div> | |
| <div class="flex items-center gap-2"> | |
| <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-brand-yellow/10 ring-1 ring-brand-yellow/20"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-brand-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> | |
| </svg> | |
| </span> | |
| <span class="text-lg font-semibold">Coosec</span> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-600">Security, done right.</p> | |
| <div class="mt-4 flex gap-3"> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">LinkedIn</a> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">X</a> | |
| <a href="#" class="text-brand-fuchsia hover:underline text-sm">GitHub</a> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Company</div> | |
| <ul class="mt-3 space-y-2 text-sm"> | |
| <li><a href="#services" class="text-gray-600 hover:text-brand-fuchsia">Services</a></li> | |
| <li><a href="#projects" class="text-gray-600 hover:text-brand-fuchsia">Projects</a></li> | |
| <li><a href="#team" class="text-gray-600 hover:text-brand-fuchsia">Team</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Resources</div> | |
| <ul class="mt-3 space-y-2 text-sm"> | |
| <li><a href="#" class="text-gray-600 hover:text-brand-fuchsia">Whitepapers</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-brand-fuchsia">Blog</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-brand-fuchsia">Security Advisories</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Contact</div> | |
| <ul class="mt-3 space-y-2 text-sm text-gray-600"> | |
| <li>contact@cybershield.example</li> | |
| <li>+1 (555) 555‑0100</li> | |
| <li>100 Secure Ave, Suite 500, San Francisco, CA</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex items-center justify-between"> | |
| <div class="text-xs text-gray-500">© <span id="year"></span> Coosec Consulting. All rights reserved.</div> | |
| <div class="text-xs text-gray-500"> | |
| <a href="#" class="hover:text-brand-fuchsia">Privacy</a> • <a href="#" class="hover:text-brand-fuchsia">Terms</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Case Study Modal --> | |
| <div id="caseModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="absolute inset-0 bg-black/40"></div> | |
| <div class="relative mx-auto mt-20 w-[92%] max-w-3xl rounded-2xl bg-white shadow-xl"> | |
| <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4"> | |
| <h3 id="caseTitle" class="text-xl font-semibold"></h3> | |
| <button id="closeCase" class="rounded-md p-2 hover:bg-gray-100" aria-label="Close"> | |
| <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div id="caseBody" class="prose prose-sm max-w-none"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Back to top --> | |
| <button id="backToTop" class="fixed bottom-6 right-6 hidden rounded-full bg-brand-fuchsia p-3 text-white shadow-lg hover:bg-fuchsia-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-fuchsia/50" aria-label="Back to top"> | |
| <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7 7 7M5 14l7 7 7-7"/></svg> | |
| </button> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |