Consolidate marketing site into docs at netchecks.io

README.md

@@ -18,7 +18,7 @@
 ![PyPI - Python Version](https://img.shields.io/pypi/pyversions/netcheck?style=flat-square&logo=python)
 [![Coverage Status](https://img.shields.io/coverallsCoverage/github/hardbyte/netchecks?branch=main&style=flat-square&logo=coveralls)](https://coveralls.io/github/hardbyte/netcheck?branch=main)
 [![CI status](https://img.shields.io/github/actions/workflow/status/hardbyte/netchecks/ci.yaml?branch=main&style=flat-square&logo=github)](https://github.com/hardbyte/netchecks/actions?query=branch%3Amain)
-[![Website](https://img.shields.io/website?url=https%3A%2F%2Fdocs.netchecks.io%2F&style=flat-square&label=docs.netchecks.io)](https://docs.netchecks.io/)
+[![Website](https://img.shields.io/website?url=https%3A%2F%2Fnetchecks.io%2F&style=flat-square&label=netchecks.io)](https://netchecks.io/)
 [![Linting: ruff](https://img.shields.io/badge/linting-ruff-261230.svg?style=flat-square)](https://github.com/astral-sh/ruff)
 [![PyPI Downloads](https://static.pepy.tech/badge/netcheck)](https://pypi.org/project/netcheck?style=flat-square)
 [![License](https://img.shields.io/github/license/hardbyte/netchecks?style=flat-square)](/LICENSE)
@@ -28,7 +28,7 @@
 **Netchecks** is a set of tools for testing network conditions and asserting that they are as expected.
 
 There are two main components:
-- **Netchecks Operator** - Kubernetes Operator (Rust/kube-rs) that runs network checks and reports results as `PolicyReport` resources. See the [operator README](https://github.com/hardbyte/netchecks/blob/main/operator/README.md) for more details and the full documentation can be found at [https://docs.netchecks.io](https://docs.netchecks.io)
+- **Netchecks Operator** - Kubernetes Operator (Rust/kube-rs) that runs network checks and reports results as `PolicyReport` resources. See the [operator README](https://github.com/hardbyte/netchecks/blob/main/operator/README.md) for more details and the full documentation can be found at [https://netchecks.io](https://netchecks.io)
 - **Netcheck CLI and Python Library** - Command line tool for running network checks and asserting that they are as expected. Keep reading for the quickstart guide.
 
 

docs/src/components/Container.jsx

@@ -0,0 +1,10 @@
+import clsx from 'clsx'
+
+export function Container({ className, ...props }) {
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      {...props}
+    />
+  )
+}

docs/src/components/Features.jsx

@@ -0,0 +1,94 @@
+import { Container } from '@/components/Container'
+
+const features = [
+  {
+    title: 'Proactive Monitoring',
+    description:
+      'Periodically probe the network to detect when security assumptions are violated. Continuous validation of live workload environments increases confidence in security controls.',
+    icon: ShieldIcon,
+  },
+  {
+    title: 'Cloud Native',
+    description:
+      'A Kubernetes operator configured by custom resources. Outputs use PolicyReports — an emerging standard used by Kyverno and other security tools.',
+    icon: CloudIcon,
+  },
+  {
+    title: 'Alerting and Reporting',
+    description:
+      'Outputs PolicyReports with Prometheus metrics. Integrate with Grafana, Slack, Discord, email, or MS Teams using Policy Reporter.',
+    icon: BellIcon,
+  },
+  {
+    title: 'Independent from Controls',
+    description:
+      'Verifies whether your cluster can carry out network activity, independent of how controls are implemented — NetworkPolicies, Cilium, or external firewalls.',
+    icon: LockIcon,
+  },
+]
+
+function ShieldIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} stroke="currentColor" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+    </svg>
+  )
+}
+
+function CloudIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} stroke="currentColor" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
+    </svg>
+  )
+}
+
+function BellIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} stroke="currentColor" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
+    </svg>
+  )
+}
+
+function LockIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" strokeWidth={1.5} stroke="currentColor" {...props}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+    </svg>
+  )
+}
+
+export function Features() {
+  return (
+    <section id="features" className="bg-slate-50 py-20 dark:bg-slate-800/50 sm:py-28">
+      <Container>
+        <div className="text-center">
+          <h2 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white sm:text-4xl">
+            Concerned your security controls could be weakened?
+          </h2>
+          <p className="mt-4 text-lg text-slate-600 dark:text-slate-400">
+            Actively test your cloud infrastructure with automated, declarative
+            network assertions.
+          </p>
+        </div>
+        <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className="rounded-2xl border border-slate-200 bg-white p-8 dark:border-slate-700 dark:bg-slate-800"
+            >
+              <feature.icon className="h-8 w-8 text-sky-500" />
+              <h3 className="mt-4 font-display text-lg font-medium text-slate-900 dark:text-white">
+                {feature.title}
+              </h3>
+              <p className="mt-2 text-sm text-slate-600 dark:text-slate-400">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

docs/src/components/Footer.jsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import { Container } from '@/components/Container'
+import { Logomark } from '@/components/Logo'
+
+export function Footer() {
+  return (
+    <footer className="border-t border-slate-200 bg-white py-12 dark:border-slate-800 dark:bg-slate-900">
+      <Container>
+        <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
+          <div className="flex items-center gap-3">
+            <Logomark className="h-7 w-7" />
+            <span className="text-sm text-slate-600 dark:text-slate-400">
+              Netchecks
+            </span>
+          </div>
+          <nav className="flex gap-6 text-sm text-slate-600 dark:text-slate-400">
+            <Link href="/docs/getting-started" className="hover:text-slate-900 dark:hover:text-white">
+              Docs
+            </Link>
+            <Link href="/docs/compliance" className="hover:text-slate-900 dark:hover:text-white">
+              Compliance
+            </Link>
+            <Link href="https://github.com/hardbyte/netchecks" className="hover:text-slate-900 dark:hover:text-white">
+              GitHub
+            </Link>
+          </nav>
+          <p className="text-sm text-slate-500 dark:text-slate-500">
+            &copy; {new Date().getFullYear()} Netchecks
+          </p>
+        </div>
+      </Container>
+    </footer>
+  )
+}

docs/src/components/Layout.jsx

@@ -3,7 +3,6 @@ import Link from 'next/link'
 import {useRouter} from 'next/router'
 import clsx from 'clsx'
 
-import {Hero} from '@/components/Hero'
 import {Logo, Logomark} from '@/components/Logo'
 import {MobileNavigation} from '@/components/MobileNavigation'
 import {Navigation} from '@/components/Navigation'
@@ -15,7 +14,7 @@ const navigation = [
     {
         title: 'Introduction',
         links: [
-            {title: 'Getting started', href: '/'},
+            {title: 'Getting started', href: '/docs/getting-started'},
             {title: 'Validating HTTP Controls', href: '/docs/http'},
             {title: 'Validating DNS Controls', href: '/docs/dns'},
             {title: 'Validating TCP Connectivity', href: '/docs/tcp'},
@@ -26,24 +25,17 @@ const navigation = [
         title: 'User Guide',
         links: [
             {title: 'Installation', href: '/docs/installation'},
-
             {title: 'Custom Validation Rules', href: '/docs/custom-validation-rules'},
             {title: 'External Data', href: '/docs/external-data'},
             {title: 'Alerting', href: '/docs/alerting'},
+            {title: 'Compliance', href: '/docs/compliance'},
         ],
     },
-    // {
-    //     title: 'Examples',
-    //     links: [
-    //
-    //     ],
-    // },
-
     {
         title: 'Contributor Guide',
         links: [
             {title: 'How to contribute', href: '/docs/how-to-contribute'},
-            {title: 'Development', href: '/docs/development',},
+            {title: 'Development', href: '/docs/development'},
             {title: 'Architecture guide', href: '/docs/architecture-guide'},
             {title: 'Testing', href: '/docs/testing'},
             {title: 'Design principles', href: '/docs/design-principles'},
@@ -55,13 +47,9 @@ const navigation = [
     {
       title: 'Reference',
       links: [
-        {title: 'Core concepts', href: '/docs/core-concepts'}
-        // { title: 'http', href: '/docs/http' },
-        // { title: 'dns', href: '/docs/dns' },
-        // { title: 'ping', href: '/docs/ping' },
+        {title: 'Core concepts', href: '/docs/core-concepts'},
       ],
     },
-
 ]
 
 function GitHubIcon(props) {
@@ -167,7 +155,6 @@ function useTableOfContents(tableOfContents) {
 
 export function Layout({children, title, tableOfContents}) {
     let router = useRouter()
-    let isHomePage = router.pathname === '/'
     let allLinks = navigation.flatMap((section) => section.links)
     let linkIndex = allLinks.findIndex((link) => link.href === router.pathname)
     let previousPage = allLinks[linkIndex - 1]
@@ -191,8 +178,6 @@ export function Layout({children, title, tableOfContents}) {
         <>
             <Header navigation={navigation}/>
 
-            {isHomePage && <Hero/>}
-
             <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
                 <div className="hidden lg:relative lg:block lg:flex-none">
                     <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden"/>

docs/src/components/MarketingHero.jsx

@@ -0,0 +1,38 @@
+import { Button } from '@/components/Button'
+import { HeroBackground } from '@/components/HeroBackground'
+import { Container } from '@/components/Container'
+
+export function MarketingHero() {
+  return (
+    <div className="overflow-hidden bg-slate-900">
+      <div className="py-20 sm:px-2 lg:relative lg:py-28 lg:px-0">
+        <div className="mx-auto max-w-2xl items-center px-4 lg:max-w-8xl lg:px-8 xl:px-12">
+          <div className="relative z-10 text-center">
+            <div className="absolute inset-0 -z-10 flex justify-center">
+              <HeroBackground className="opacity-30 w-full max-w-3xl" />
+            </div>
+            <div className="relative">
+              <h1 className="inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent sm:text-7xl">
+                Verify your security controls are working
+              </h1>
+              <p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-400">
+                Netchecks proactively tests your Kubernetes network policies and
+                security controls. Cloud native, policy as code, no assumptions
+                about your implementation.
+              </p>
+              <div className="mt-10 flex justify-center gap-4">
+                <Button href="/docs/getting-started">Get started</Button>
+                <Button
+                  href="https://github.com/hardbyte/netchecks"
+                  variant="secondary"
+                >
+                  View on GitHub
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

docs/src/components/Pricing.jsx

@@ -0,0 +1,120 @@
+import { Container } from '@/components/Container'
+import { Button } from '@/components/Button'
+
+function CheckIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
+        fill="currentColor"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="8.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+const plans = [
+  {
+    name: 'Open Source',
+    price: 'Free',
+    description:
+      'For security professionals, small businesses, students, hobbyists, and open source projects.',
+    href: '/docs/getting-started',
+    cta: 'Get started',
+    featured: true,
+    features: [
+      'Unlimited operator installs',
+      'Unlimited NetworkAssertions',
+      'HTTP, DNS, and TCP probes',
+      'PolicyReports & Prometheus metrics',
+      'Community support via GitHub',
+    ],
+  },
+  {
+    name: 'Compliance Pro',
+    price: 'Contact us',
+    description:
+      'Automated compliance reporting for regulated environments.',
+    href: 'https://buy.stripe.com/cN25or9rA8Ur6xa4gi',
+    cta: 'Get Compliance Pro',
+    featured: false,
+    features: [
+      'Everything in Open Source',
+      'CIS Kubernetes Benchmark checks',
+      'PCI-DSS v4 network controls',
+      'SOC 2 network monitoring evidence',
+      'Exportable compliance reports',
+      'Priority support',
+    ],
+  },
+]
+
+export function Pricing() {
+  return (
+    <section id="pricing" className="bg-slate-900 py-20 sm:py-28">
+      <Container>
+        <div className="text-center">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+            Simple pricing, for everyone
+          </h2>
+          <p className="mt-4 text-lg text-slate-400">
+            Open source at its core. Compliance features when you need them.
+          </p>
+        </div>
+        <div className="mx-auto mt-16 grid max-w-4xl grid-cols-1 gap-8 lg:grid-cols-2">
+          {plans.map((plan) => (
+            <div
+              key={plan.name}
+              className={`rounded-3xl px-6 py-8 sm:px-8 ${
+                plan.featured
+                  ? 'bg-sky-500 ring-1 ring-sky-500'
+                  : 'ring-1 ring-slate-700'
+              }`}
+            >
+              <h3 className="font-display text-2xl text-white">
+                {plan.name}
+              </h3>
+              <p
+                className={`mt-2 text-sm ${
+                  plan.featured ? 'text-sky-100' : 'text-slate-400'
+                }`}
+              >
+                {plan.description}
+              </p>
+              <p className="mt-6 font-display text-4xl font-light tracking-tight text-white">
+                {plan.price}
+              </p>
+              <ul className="mt-8 space-y-3 text-sm text-white">
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex">
+                    <CheckIcon
+                      className={`h-6 w-6 flex-none ${
+                        plan.featured ? 'text-white' : 'text-slate-400'
+                      }`}
+                    />
+                    <span className="ml-3">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <Button
+                href={plan.href}
+                variant={plan.featured ? 'primary' : 'secondary'}
+                className="mt-8 w-full justify-center"
+              >
+                {plan.cta}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}