saving works

This commit is contained in:
2025-06-17 10:37:46 +02:00
parent 811abbf1e0
commit 82efbd491a
10 changed files with 935 additions and 244 deletions

View File

@@ -1,24 +1,19 @@
{% extends "base.html" %}
{% block content %}
<div class="confirmed">
<div class="confirmation-card">
<h2 class="title-org">Link has expired!</h2>
<p class="info-p">
The confirmation link you used has expired or is no longer valid.<br>
Please click the button below to receive a new confirmation link.
</p>
<form method="POST">
{% csrf_token %}
<button type="submit" class="btn-primary-orn">Resend link</button>
</form>
</div>
</div>
<script>
nav = document.querySelector('nav');
confirmed = document.querySelector('.confirmed');
confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
</script>
<section class="py-16 bg-white min-h-[60vh] flex items-center justify-center">
<div class="max-w-lg w-full mx-auto text-center shadow-lg border border-accent rounded-xl p-8">
<h2 class="text-3xl font-extrabold mb-4 text-accent">Link has expired!</h2>
<p class="mb-8 text-gray-700 text-lg">
The confirmation link you used has expired or is no longer valid.<br>
Please click the button below to receive a new confirmation link.
</p>
<form method="POST">
{% csrf_token %}
<button type="submit" class="nav-link-desktop bg-transparent border-2 border-accent text-accent hover:bg-accent hover:text-primary font-semibold py-3 px-8 rounded-lg text-lg transition-all duration-300 ease-in-out">
Resend link
</button>
</form>
</div>
</section>
{% endblock %}

View File

@@ -1,22 +1,16 @@
{% extends "base.html" %}
{% block content %}
<div class="confirmed">
<div class="confirmation-card">
<h1 class="title-org">Email Confirmed!</h1>
<p class="info-p">
Your email <strong style="color: #FAA95E;">{{ email }}</strong> has been successfully verified.<br>
Thank you for confirming your email. We are currently generating your document. A link to access your document will be sent to you shortly.
</p>
<a href="{% url 'core:index' %}" class="btn-primary-orn" style="margin-top: 1rem;">
Go back to Homepage
</a>
</div>
</div>
<script>
nav = document.querySelector('nav');
confirmed = document.querySelector('.confirmed');
confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
</script>
<section class="py-16 bg-white min-h-[60vh] flex items-center justify-center">
<div class="max-w-lg w-full mx-auto text-center shadow-lg border border-success rounded-xl p-8">
<h1 class="text-3xl font-extrabold mb-4 text-success">Email Confirmed!</h1>
<p class="mb-8 text-gray-700 text-lg">
Your email <strong class="text-accent">{{ email }}</strong> has been successfully verified.<br>
Thank you for confirming your email. We are currently generating your document. A link to access your document will be sent to you shortly.
</p>
<a href="{% url 'core:index' %}" class="bg-transparent border-2 border-accent text-accent hover:bg-accent hover:text-primary font-semibold py-3 px-8 rounded-lg text-lg transition-all duration-300 ease-in-out">
Go back to Homepage
</a>
</div>
</section>
{% endblock %}

View File

@@ -0,0 +1,21 @@
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding-top: 0; /* Ensures this is the initial state for vertical padding */
padding-bottom: 0; /* Ensures this is the initial state for vertical padding */
}
.accordion-item.active .accordion-content {
max-height: 3000px; /* Increased max-height for potentially long content */
padding-top: 1rem; /* Applied when active */
padding-bottom: 1.5rem; /* Applied when active */
}
.accordion-item.active .accordion-chevron {
transform: rotate(180deg);
}

View File

@@ -1,7 +1,26 @@
body {
font-family: "Darker Grotesque", sans-serif;
/* Custom styles */
html {
scroll-behavior: smooth;
}
:root {
--bs-body-font-size: 1.5rem;
a {
text-decoration: none;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding-top: 0;
padding-bottom: 0;
}
.accordion-item.active .accordion-content {
max-height: 3000px;
padding-top: 1rem;
padding-bottom: 1.5rem;
}
.accordion-item.active .accordion-chevron {
transform: rotate(180deg);
}

View File

@@ -0,0 +1,99 @@
document.addEventListener('DOMContentLoaded', function () {
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const hamburgerIcon = document.getElementById('hamburger-icon');
const xIcon = document.getElementById('x-icon');
if (mobileMenuButton && mobileMenu && hamburgerIcon && xIcon) {
mobileMenuButton.addEventListener('click', function () {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('hidden');
hamburgerIcon.classList.toggle('hidden');
xIcon.classList.toggle('hidden');
});
}
// Accordion toggle for multiple containers
const accordionContainers = document.querySelectorAll('.accordion-container');
accordionContainers.forEach(container => {
const accordionItems = container.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const trigger = item.querySelector('.accordion-trigger');
if (trigger) {
trigger.addEventListener('click', function () {
// Option 1: Close other open items in the same container
// accordionItems.forEach(otherItem => {
// if (otherItem !== item && otherItem.classList.contains('active')) {
// otherItem.classList.remove('active');
// otherItem.querySelector('.accordion-trigger').setAttribute('aria-expanded', 'false');
// }
// });
// Option 2: Allow multiple items to be open (current behavior based on CSS)
const isItemOpen = item.classList.toggle('active');
trigger.setAttribute('aria-expanded', isItemOpen);
});
}
});
});
// Smooth scroll for nav links (desktop, mobile, and footer)
document.querySelectorAll('.nav-link-desktop, .nav-link-mobile, .nav-link-footer').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href && href.startsWith('#')) {
e.preventDefault();
const targetId = href.substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
// Close mobile menu if a mobile link is clicked
if (this.classList.contains('nav-link-mobile') && mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenuButton.click();
}
}
} else if (href === '/') { // Handle clicks on the "Home" link which might just be "/"
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
if (this.classList.contains('nav-link-mobile') && mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenuButton.click(); // Close mobile menu
}
}
});
});
// Set current year in footer
const yearSpan = document.getElementById('currentYear');
if (yearSpan) {
yearSpan.textContent = new Date().getFullYear();
}
// Auto-update insight dates (simplified to current month/year for static demo)
const currentMonthYear = new Date().toLocaleString('default', { month: 'long', year: 'numeric' });
document.querySelectorAll('#insights .text-sm.text-gray-500.mb-3').forEach(el => {
if (el.textContent.includes('•')) {
const parts = el.textContent.split('•');
if (parts.length > 1) {
el.textContent = parts[0].trim() + ' • ' + currentMonthYear;
}
}
});
});
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0E3B43',
secondary: '#F0F9FF',
accent: '#FBBF24',
'light-accent': '#FEF3C7',
'dark-text': '#1F2937',
'light-text': '#F9FAFB',
},
}
}
}

View File

@@ -6,45 +6,20 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Risklet</title>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/Jost.css' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<link href="{% static 'css/index.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
{% block css %}{% endblock css %}
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg text-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><h1>Risklet</h1></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="navbar-nav ms-auto ms-lg-auto me-0 me-lg-4">
<li class="nav-item">
<a class="nav-link btn btn-success text-white" href="/signup/">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
{% include "components/navigation.html" %}
<article>
{% block content %}{% endblock content %}
<!-- Bootstrap JS and dependencies -->
</article>
<script src={% static 'js/bootstrap.js' %}></script>
{% block bottom %}{% endblock bottom %}
{% include "components/footer.html" %}
<script src={% static 'js/bootstrap.js' %}></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src={% static 'js/app.js' %}></script>
{% block bottom %}{% endblock bottom %}
</body>
</html>

View File

@@ -0,0 +1,54 @@
<footer class="bg-primary text-light-text">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8">
<div class="sm:col-span-1">
<h3 class="text-lg font-semibold text-accent mb-4">Risklet</h3>
<p class="text-sm text-blue-200">
Smart cybersecurity risk assessment.
</p>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Company</h3>
<ul class="space-y-3">
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">About Us</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Careers</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Resources</h3>
<ul class="space-y-3">
<li><a href="#insights" class="nav-link-footer text-sm text-blue-200 hover:text-accent transition-colors no-underline">Blog</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Documentation</a></li>
<li><a href="#faq" class="nav-link-footer text-sm text-blue-200 hover:text-accent transition-colors no-underline">Support</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Alternatives</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Integrations</h3>
<ul class="space-y-3">
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Jira</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Confluence</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Slack</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Sharepoint</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Legal</h3>
<ul class="space-y-3">
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Privacy Policy</a></li>
<li><a href="#" class="text-sm text-blue-200 hover:text-accent transition-colors no-underline">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="mt-10 pt-8 border-t border-gray-700 text-center">
<div class="space-y-2 mb-4">
<p class="text-xs text-blue-200">GDPR Compliant</p>
<p class="text-xs text-blue-200">Supports ISO 27001 Compliance</p>
</div>
<p class="text-sm text-blue-200">
&copy; <span id="currentYear"></span> Risklet. All rights reserved.
</p>
</div>
</div>
</footer>

View File

@@ -0,0 +1,45 @@
<nav class="bg-primary shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center">
<a href="/" class="flex-shrink-0 flex items-center no-underline" aria-label="Risklet Home">
<span class="text-3xl font-bold text-accent">Risklet</span>
</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="/" class="nav-link-desktop text-light-text hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a>
<a href="#cyber-measures" class="nav-link-desktop text-light-text hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Features</a>
<a href="#pricing" class="nav-link-desktop text-light-text hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Pricing</a>
</div>
</div>
<div class="hidden md:block">
<a href="/signup/" class="bg-accent text-primary hover:bg-yellow-500 font-semibold py-2 px-4 rounded-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 text-sm">
Sign Up
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button id="mobile-menu-button" type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg id="hamburger-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
<svg id="x-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
</div>
<div class="hidden md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="/" class="nav-link-mobile text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors">Home</a>
<a href="#cyber-measures" class="nav-link-mobile text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors">Features</a>
<a href="#pricing" class="nav-link-mobile text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors">Pricing</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<a href="/signup/" class="w-full text-center bg-accent text-primary hover:bg-yellow-500 font-semibold py-2 px-4 rounded-lg shadow-md transition-all duration-300 ease-in-out text-base">
Sign Up
</a>
</div>
</div>
</div>
</nav>

View File

@@ -4,170 +4,663 @@
{% block content %}
<a href="{% url 'core:no_confidential_data' %}" class="no-conf-data">No confidential data!</a>
<!-- Whitepaper Section -->
<section class="whitepaper">
<h1><b>Meet NIS2 Requirements:
</b></h1>
<h1><span class="title-org">Instantly See Your Top 10 Cybersecurity Risks</h1>
<p style="max-width: 800px; margin: 0 auto 2rem;">RiskLMs intuitive AI platform makes complex cyber risk assessments accessible to everyone, not just experts. Automatic analysis, generate compliant reports (NIS2, ISO, NIST, GDPR+), save time, reduce consultant costs, and ensure continuous security effortlessly.</p>
<p><b>Download our free white paper showing exactly how Risklet pinpoints critical vulnerabilities for NIS2 compliance and recommends cost-effective controls.</b></p>
<div class="hero-buttons" style="margin-top: 2rem;">
<a href="{% url 'core:download_example_pdf' %}" class="btn-primary-orn">Download FREE Report Sample</a>
<a href="#" class="btn-secondary-grn">Learn More</a>
</div>
<main class="flex-grow">
<!-- WhitepaperSection -->
<section class="bg-gradient-to-br from-primary to-teal-700 text-light-text py-20 md:py-32 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight">Meet NIS2 Requirements:</h1>
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight mt-2">
<span class="text-accent">Instantly See Your Top 10 Cybersecurity Risks</span>
</h1>
<p class="mt-8 text-lg sm:text-xl text-blue-100 max-w-3xl mx-auto">
RiskLMs intuitive AI platform makes complex cyber risk assessments accessible to everyone, not just experts. Automatic analysis, generate compliant reports (NIS2, ISO, NIST, GDPR+), save time, reduce consultant costs, and ensure continuous security effortlessly.
</p>
<p class="mt-6 text-lg sm:text-xl text-blue-100 max-w-3xl mx-auto font-semibold">
Download our free white paper showing exactly how Risklet pinpoints critical vulnerabilities for NIS2 compliance and recommends cost-effective controls.
</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
<a href="/downloads/risklet_example_document.pdf" download class="bg-accent text-primary hover:bg-yellow-500 font-semibold py-3 px-8 rounded-lg shadow-lg text-lg transition-all duration-300 ease-in-out transform hover:scale-105">
Download FREE Report Sample
</a>
<a href="#cyber-measures" class="nav-link-desktop bg-transparent border-2 border-accent text-accent hover:bg-accent hover:text-primary font-semibold py-3 px-8 rounded-lg text-lg transition-all duration-300 ease-in-out">
Learn More
</a>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="pricing">
<div class="component-title">PRICING & PLANS </div>
<br>
<h1>Simple Plans, Powerful Value</h1>
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<div class="pricing-grid">
<!-- Basic Plan -->
<div class="pricing-card">
<h2><b>$49</b><span>/month</span></h2>
<h3>Basic</h3>
<a href="#" class="btn-pricing-blc">Get Started</a>
<ul>
<li><span class="marked-org">&#10003</span> Monthly Billing (€49/month) or Annual Billing (€469/year)</li>
<li><span class="marked-org">&#10003</span> 4 report generations per year</li>
<li><span class="marked-org">&#10003</span> Optional control maturity recording</li>
<li><span class="marked-org">&#10003</span> Role Based Permissions</li>
<li><span class="marked-org">&#10003</span> Risk policy generation</li>
<li><span class="marked-org">&#10003</span> Email Support</li>
</ul>
</div>
<!-- Standard Plan -->
<div class="pricing-card org-b">
<h2><b>$249</b><span>/One-time</span></h2>
<h3>Standard</h3>
<a href="#" class="btn-pricing-org">Get Started</a>
<ul>
<li><span class="marked-org">&#10003</span> Top 10 Cybersecurity Risk Report</li>
<li><span class="marked-org">&#10003</span> Control recommendation</li>
<li><span class="marked-org">&#10003</span> Downloadable PDF</li>
<li><span class="marked-org">&#10003</span> Renew your assessment for €189</li>
<li><span class="marked-org">&#10003</span> Risk policy generation</li>
<li><span class="marked-org">&#10003</span> Email Support + 10 hours of phone support</li>
</ul>
</div>
<!-- Pro Plan -->
<div class="pricing-card">
<h2><b>$2449</b><span>/year</span></h2>
<h3>Risklet Pro</h3>
<a href="#" class="btn-pricing-blc">Get Started</a>
<ul>
<li><span class="marked-org">&#10003</span> Unlimited report generations</li>
<li><span class="marked-org">&#10003</span> Real-time visibility of risk posture</li>
<li><span class="marked-org">&#10003</span> Control maturity assessment questionnaire</li>
<li><span class="marked-org">&#10003</span> Role Based Permissions</li>
<li><span class="marked-org">&#10003</span> Risk policy generation</li>
<li><span class="marked-org">&#10003</span> Priority Support</li>
</ul>
</div>
<!-- CyberMeasuresSection -->
<section id="cyber-measures" class="py-16 bg-secondary sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-4">
<span class="text-accent font-semibold tracking-wider uppercase text-sm">Compliance Guidance</span>
</div>
<p style="text-align: center; margin-top: 2rem; color: #666;">All subscription models must be cancelled at least 30 days before the license is</p>
<h2 class="text-3xl font-extrabold text-dark-text sm:text-4xl text-center">
10 Duty of Care Measures for Compliance
</h2>
<p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto text-center mb-12">
Cybersecurity regulations often prescribe key duty of care measures that organizations must implement. Below are ten fundamental areas to address for robust cyber resilience.
</p>
<div class="max-w-4xl mx-auto space-y-4 accordion-container">
<!-- Measure 1 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 1. Make a risk analysis</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub a: policy on risk analysis and security of information systems</p>
<p class="mb-3 text-gray-700 leading-relaxed">Performing a risk analysis is the first step in improving the cyber resilience of your company or organization. It is an essential first step in gaining the necessary insights. A risk analysis reveals which risks are the most serious and where security measures are most needed.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-primary">Risk Analysis Policy</h3>
<p class="mb-3 text-gray-700 leading-relaxed">A risk analysis policy plan describes how your organization performs risk analyses. This plan helps you systematically and purposefully improve your digital security. Every organization is unique, with different processes and risks. However, there are some elements that often recur in a risk analysis policy. Use these as a guideline when drafting your policy document:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Purpose and scope: Define the purpose and scope of your risk analysis. The scope determines which internal stakeholders are involved.</li>
<li>Frequency: Determine how often you will perform risk assessments. This may be a requirement for certification or contractual obligations. If not, perform a risk assessment annually.</li>
<li>Roles and responsibilities: Define who is responsible for conducting the risk analysis.</li>
<li>Decision outcomes: Identify and analyze risks. There are four options for analyzed risks: accept, resolve, transfer, and stop. Set risk acceptance criteria in advance to avoid discussions during the analysis.</li>
<li>Effectiveness and revision: Test and revise the policy plan periodically. Take into account changes such as new systems, processes, threat assessments and current threats.</li>
</ul>
<h3 class="text-lg font-semibold mt-4 mb-2 text-primary">Making a risk analysis</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Digital threats can pose major risks to your organization's services. It is therefore important to be well prepared. Further information on creating a risk analysis can be found in general risk management guidance.</p>
</div>
</div>
<!-- Measure 2 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 2. Strengthen security in personnel, access and asset management</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub i: security aspects regarding personnel, access policy and asset management</p>
<p class="mb-3 text-gray-700 leading-relaxed">Organizations that take their cybersecurity seriously pay attention to security aspects of personnel, access policies and asset management (hardware and software). Who has access to which information and with which rights? By taking these security aspects seriously and implementing appropriate measures, you improve cybersecurity and increase the resilience of your network and information systems.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Staff</h3>
<p class="mb-3 text-gray-700 leading-relaxed">An organizations workforce is the first line of defense against cyberattacks. Employees play a critical role in maintaining the security of systems and data. It is essential that an organization ensures that employees understand and can apply their cybersecurity responsibilities in their work through appropriate education or training. These responsibilities can vary by role.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Procedures for new employees, job or role changes and termination of employment</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Access to systems and networks often depends on the role or function within the organization. NIS2-relevant organizations must have procedures for initiating, terminating, or changing access to business units. These procedures must be documented and maintained.</p>
<p class="mb-1 text-gray-700 leading-relaxed">Important Procedures:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Assigning Roles and Rights: Provide insight and management of employees who are assigned new roles and rights.</li>
<li>Revoking Roles and Rights: Make it clear and manageable which employees lose their roles and rights.</li>
<li>Change Roles and Rights: Keep track of which employees have changes to their roles and rights.</li>
</ul>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Consider key principles such as managing access to data and services for more information.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Screening</h4>
<p class="mb-3 text-gray-700 leading-relaxed">An effective way to limit risks is to screen the reliability of employees before they are hired. Screening involves an employer requesting information about an applicant or employee to assess their reliability. A well-known example of this is requesting a Certificate of Good Conduct (or equivalent background check). For certain positions of trust, screening might be mandatory. Data protection authorities provide more information about the procedures and regulations surrounding screening.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Access Policy</h3>
<p class="mb-3 text-gray-700 leading-relaxed">A good access policy is essential to ensure the availability, integrity and confidentiality of your network and information systems. This policy determines who has access to which systems and with which roles and rights. Due to the dynamics of new employees, departing employees and job changes, careful administration of access rights is necessary.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Authorized access</h4>
<p class="mb-1 text-gray-700 leading-relaxed">In an access policy you ensure that:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Only authorized employees can grant access.</li>
<li>Access is only granted to users for whom it is relevant.</li>
<li>Access is granted for the required period.</li>
<li>Specific rights are issued according to the principle of least privilege and a rights matrix.</li>
<li>When access is granted to external parties (such as suppliers or IT service providers), clear agreements are made about access and security requirements.</li>
<li>There is a procedure for adjusting access rights in the event of job changes or departures.</li>
<li>Granted access rights are kept in a register.</li>
<li>Logging is applied to access rights management to know who granted and received which rights and when.</li>
</ul>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Guidance on organizing identity and access management is crucial. This includes physical access security as well as digital identity.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Continuous attention to cyber awareness</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Most cyber incidents are caused by human error. Cybercriminals cleverly exploit common human vulnerabilities. Awareness of cyber risks is therefore very important for preventing incidents. Ensure continuous attention to cyber awareness.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Privileged Accounts</h4>
<p class="mb-1 text-gray-700 leading-relaxed">User accounts with elevated privileges, such as admin accounts and system accounts, have access to sensitive information and can change system settings. Restrict access to these accounts to those who really need it. Make sure that:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Specific accounts are used only for system administration tasks.</li>
<li>User accounts with elevated privileges are individualized and limited.</li>
<li>Logging is applied to the management of elevated rights.</li>
<li>Access rights are periodically reviewed and adjusted.</li>
<li>Administrative actions by users with elevated rights are logged.</li>
<li>Security measures such as multi-factor authentication (MFA) are required.</li>
</ul>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Authentication</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Use strong authentication methods to verify the identity of individuals requesting access. Multi-factor authentication contributes to the cybersecurity of your systems and data. For access to higher classified systems, you can impose additional requirements, such as longer passwords or logging in via a specific network.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Asset Management</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Before you can manage assets, you first need to gain insight into them. By identifying which matters are crucial to your organization and service provision, you can take the right measures to protect these interests. Examples of important assets are customer data, production methods, employee data, financial data and the reputation of your organization.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Practical tools and guidance can help organizations map their critical assets at a tactical level. This mapping can then be used for risk analysis and to identify technical assets needing protection at the network and information systems level.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Asset management consists of a number of steps</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Inventory of Assets: Asset management begins with inventory. This involves keeping a record of all the material, such as hardware, software, and the data that these assets contain. This inventory helps identify and manage potential vulnerabilities. NIS2-relevant organizations must also have procedures in place for the secure disposal of assets at the end of their life to prevent data from falling into the wrong hands.</p>
<p class="mb-3 text-gray-700 leading-relaxed">Classification of Sensitive Information: Define and document a classification for sensitive information. This allows you to link the right authorization and have better visibility on who has access to this information. For the degree of confidentiality (e.g. public, for internal distribution only or confidential), use classifications derived from relevant legislation, international agreements or internationally accepted strategies for information exchange, such as the Traffic Light Protocol (TLP).</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Asset management and network and information security</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Ensure proper management of assets throughout their lifecycle: from acquisition, use, storage, transport to disposal. Provide all assets with a classification level to determine the required availability, integrity and confidentiality. This is also called the 'BIV classification' (or CIA in English - Confidentiality, Integrity, Availability). Based on this classification, you determine the appropriate measures for digital resilience.</p>
<p class="mb-3 text-gray-700 leading-relaxed">The policy should also address the safe use, storage, transportation, and disposal of assets. Equipment, hardware, software, and data should only be transferred to off-site locations after approval by authorized personnel. Determine in advance who within the organization is responsible for which steps.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Effectiveness and revision</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Personnel and access policies and asset management should be tested, reviewed and revised periodically. Take into account changes within the organization and current risks. Include the test results in the revised policy documents.</p>
</div>
</div>
<!-- Measure 3 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 3. Create a Business Continuity Plan (BCP)</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub c: business continuity, such as backup management and contingency plans, and crisis management</p>
<p class="mb-3 text-gray-700 leading-relaxed">Long-term outages of primary business processes are unacceptable for most companies. A business continuity plan (BCP) helps you be resilient to unexpected events such as power outages, cyber incidents and attacks. With a BCP, you can minimize the impact of disruptions on business operations.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Create a BCP in 4 steps</h3>
<p class="mb-3 text-gray-700 leading-relaxed">A BCP is a document that describes how a company deals with serious disruptions or calamities. The goal is to protect personnel, vital processes and primary business processes and to ensure that they continue to function during and after an incident. It contains procedures and instructions to remain operational during a serious disruption. The content of a BCP can differ per organization, but here we focus on digital business processes. Without IT and OT systems, many business processes come to a standstill, so cybersecurity plays an important role in a BCP.</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Step 1 - Risk analysis as a starting point: The basis of a BCP is a risk analysis. This helps to identify vital and primary processes and to estimate the impact of long-term failure. Refer to risk analysis guidance for a concrete step-by-step plan.</li>
<li>Step 2 - BCP Framework: With the risk analysis, you have laid the foundation for your business continuity plan. You now know which disruptions you want to focus on and which business areas require attention. A BCP usually contains the following components: Purpose and Scope (Consider outage scenarios such as power outages, extreme weather, location access, and cyber crises), Activation and Deactivation (Describe when the BCP comes into effect and when it can be deactivated again), Incident Response Plan (Describe the roles, tasks and responsibilities of involved employees and service providers. An incident response plan is a key component), Internal and External Communication (Map the main contacts and communication channels and describe the mandatory communication with competent authorities), Effectiveness and Review (Periodically test and review the BCP for effectiveness and adapt it in the event of changes in the organization or threat assessment).</li>
<li>Step 3 - Backup or Redundancy Plan: A backup plan describes how often you make backups, where you store them, and when you test them. A redundancy plan describes which additional components or systems you use to replace failed systems.</li>
<li>Step 4 - Contingency and Recovery Plan: A disaster recovery plan, also known as a Disaster Recovery Plan (DRP), describes procedures for using fallback and disaster recovery facilities and returning to normal. It focuses on restoring IT processes and describes the procedure for dealing with disruptions to networks, servers, and devices.</li>
</ul>
</div>
</div>
<!-- Measure 4 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 4. Set up Incident Response</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub b: incident handling</p>
<p class="mb-3 text-gray-700 leading-relaxed">The consequences of disruptions, failures, data leaks or cyber attacks can be serious. That is why it is crucial to respond adequately to an incident to limit negative consequences. An Incident Response Plan (IRP) helps your organization with this.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Create an Incident Response Plan</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Incident response is the process of management and mitigation that you go through when an incident occurs. It is better to plan your actions in advance, without time pressure. An Incident Response Plan (IRP) ensures that coordinated action can be taken during an incident.</p>
<p class="mb-3 text-gray-700 leading-relaxed">The plan contains instructions to help employees detect security incidents, respond to them and recover from potential damage. This is essential in the event of disruptions, data leaks or digital attacks. The goal is to respond quickly, calmly and adequately to limit damage and minimize recovery efforts.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">For more guidance on where to start with incident response, consult cybersecurity best practices and frameworks.</p>
</div>
</div>
<!-- Measure 5 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 5. Ensure cyber hygiene is in order</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub g: basic cyber hygiene practices and cyber security training</p>
<p class="mb-3 text-gray-700 leading-relaxed">To increase your organizations cyber resilience, you start with a risk assessment. An important next step is to implement basic cyber hygiene practices. Training employees to adhere to these basic practices is essential to your organizations resilience.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Cyber Hygiene Policy</h3>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>According to cybersecurity guidelines (like NIS2), employees must be trained in cybersecurity. They must recognize cyberthreats and know how to respond. Encourage safe behavior to prevent damage from infected USB sticks, weak passwords or phishing emails.</li>
<li>Before you can create a cyber hygiene policy, it is important to define the basic principles. Cyber hygiene means that an organization adheres to the basic principles of cyber security. By incorporating these practices into the cyber security policy, you ensure that all employees adhere to the same agreements.</li>
</ul>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Training for employees</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Cyber-aware employees are essential for your organization. Many cyber incidents are caused by human error. There are several ways to make employees aware of cybersecurity, such as awareness programs, onboarding courses and e-learning. Offer cybersecurity training, organize awareness campaigns and hold cyber crisis exercises. This helps employees act safely and prevent threats. Well-trained employees are the key to a safe working environment.</p>
<p class="mb-3 text-gray-700 leading-relaxed">Develop a program that makes every employee aware of cyber risks and promotes safe behavior. Consider training that covers practical and effective topics, such as:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Clear desk and screen policy</li>
<li>Use of strong passwords and multi-factor authentication (MFA)</li>
<li>Secure email usage</li>
<li>Anti-phishing</li>
<li>Backup practices</li>
<li>Performing updates</li>
</ul>
<p class="mb-3 text-gray-700 leading-relaxed">These themes can be tailored to your organization's specific risks and policies.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Awareness</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Employees must be aware of basic cyber hygiene agreements. Continuous attention to awareness programs and training is essential. Ensure that all employees know where and how to report potential incidents, which contacts to approach and where to find additional information.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Further reading on promoting safe digital behavior of employees can be found in resources discussing cybersecurity awareness beyond standard e-learning.</p>
</div>
</div>
<!-- Measure 6 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 6. Write a policy on the security of network and information systems</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub e: security in the acquisition, development and maintenance of network and information systems, including the response to and disclosure of vulnerabilities</p>
<p class="mb-3 text-gray-700 leading-relaxed">Many companies and organizations depend on network and information systems for their primary business processes. If you do not have access to these systems or if information becomes public, this can have major consequences for the organization.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Policies and Procedures</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Policy and procedures for network and information systems ensure that appropriate measures are taken. The basis for this policy is risk analyses that are translated into risk management decisions.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Consult guidance on how to manage effective information security.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Network and Information Systems Policy</h3>
<p class="mb-3 text-gray-700 leading-relaxed">According to cybersecurity guidelines, an organization must have a policy for the security of acquiring, developing and maintaining the network, as well as for dealing with vulnerabilities. Here are some important topics:</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Network security</h4>
<p class="mb-3 text-gray-700 leading-relaxed">An organization must have a policy for the design of the corporate network and the security measures applied. Monitoring is crucial to detect and address unwanted activities. Document and keep the network architecture up to date. In addition, measures must be taken to protect the corporate network from unwanted external traffic, such as firewalls or data diodes. Make policy choices about allowing managed devices or 'Bring Your Own Device' (BYOD).</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Network segmentation</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Apply network segmentation to prevent viruses or attackers from spreading within the corporate network. Separate important information and systems and protect the network from unauthorized software and use of corporate devices. General guidance on protecting systems, applications, and devices is relevant here.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Configuration management</h4>
<p class="mb-3 text-gray-700 leading-relaxed">A good configuration management policy is essential for the correct configuration of corporate networks, systems, hardware and software. Make sure that default passwords of new routers are always changed and unnecessary options are disabled. This process, known as 'hardening', helps to disable unnecessary functions. Technical security guides often offer resources on hardening and configuration management useful for various organizations.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Change management</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Change management describes how an organization deals with implementing and monitoring changes, repairs and maintenance. A consistent procedure is crucial. The change management process should include at least the following points:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700"><li>Request for the change</li><li>Potential risks and impact of the change</li><li>Criteria for Prioritizing Changes and Requirements for Testing</li><li>Requirements for rollbacks</li><li>Logging of the changes</li></ul>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Choose safe settings</h4>
<p class="mb-3 text-gray-700 leading-relaxed">A secure network provides protection against external attacks and leaks from within. Consider carefully when configuring your network, NAS devices, routers, and firewalls.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Patch management</h4>
<p class="mb-3 text-gray-700 leading-relaxed">To minimize vulnerabilities, it is important to install security updates (patches) as soon as possible. This is a basic principle of safe digital entrepreneurship. Security updates improve software and close security holes, which increases digital resilience. In the patch management policy, you describe under which conditions security updates are installed. Which systems do you update immediately and which can wait? Test patches before installation in a test environment and check them for integrity and reliability. Follow the change management process when implementing patches. Note: Hardware and software products in your network may be End-of-Life (EoL), meaning they are no longer patched. Have a policy in place for dealing with EoL products. A sample patch policy template can serve as a basis. Also, gain insight into risks of legacy systems.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Vulnerability management</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Every day new vulnerabilities are discovered in software. As an organization you want to be aware of security holes in the software you use. That is why it is important to monitor these vulnerabilities. You can keep track of this yourself for the products you have purchased from suppliers. Support for this can come from security advisories from relevant cybersecurity authorities and information sharing communities. There should be a procedure to assess the impact of a vulnerability on the organization and to take mitigating measures. As part of vulnerability management, you can create a policy for coordinated vulnerability disclosure (CVD) or responsible disclosure. Refer to guidance on improving vulnerability management.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Secure Development Life Cycle</h4>
<p class="mb-3 text-gray-700 leading-relaxed">The Secure Development Life Cycle (SDLC) policy aims to ensure that software and systems are developed in a secure manner. Security must be an integral part of every development phase. This means that the development environment is secured and that software and systems are tested for vulnerabilities at an early stage, an approach known as security by design. It is also advisable to apply the principles of secure coding during the development phase.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Purchasing Policy</h4>
<p class="mb-3 text-gray-700 leading-relaxed">During the procurement process, new vulnerabilities or incorrectly configured systems can be introduced into the organization. Therefore, organizations should pay attention to cybersecurity in their tender or procurement process to reduce risks at an early stage. Consider: Including security requirements in the 'program of requirements', Security Update Guarantee, A manual or training on the correct configuration settings. Guidance on mapping direct suppliers can be helpful.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Operational Technology</h4>
<p class="mb-3 text-gray-700 leading-relaxed">Operational Technology (OT) encompasses a variety of systems used to manage operational processes in the physical world, such as controlling and monitoring industrial equipment. OT equipment, such as robots, security cameras and cash register systems, plays a crucial role in various industries, including manufacturing, chemicals, water boards, transportation and energy. Risks of Internet Connection: OT systems are increasingly connected to the internet, which facilitates remote management. However, this accessibility also brings risks. Insufficient security measures can give unauthorized persons the opportunity to abuse and gain access to your OT systems. If your business process relies heavily on OT, ICS or SCADA, run a security check for process automation to assess the status of your OT security. Get started improving your OT or ICS security right away. Relevant guidance on securing OT/IACS is available.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Map your network</h3>
<p class="mb-3 text-gray-700 leading-relaxed">After creating a policy for network and information system security, it is important to map your network. Only by knowing and understanding your network can you take the right measures to improve digital resilience. Follow these steps to map your network:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Create a view of your network with all IT assets, including IoT devices.</li>
<li>Map out the purpose of the different systems.</li>
<li>Determine which network and information systems depend on each other.</li>
<li>Zoom in on the systems in your network.</li>
<li>Process details of each system and device, such as the OS version.</li>
<li>Identify physical threats to your network.</li>
<li>Assess where important information resides within your network.</li>
<li>Map the information flows between network components.</li>
</ul>
<p class="mb-3 text-gray-700 leading-relaxed">By following these steps, you will gain a clear picture of your network and be able to assess whether it complies with your organization's network security policy.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Further information on maintaining security controls can be beneficial.</p>
</div>
</div>
<!-- Measure 7 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 7. Make your supply chain secure</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub d: the security of the supply chain, including security-related aspects relating to the relationships between each entity and its direct suppliers or service providers</p>
<p class="mb-3 text-gray-700 leading-relaxed">Companies often depend on the products or services of suppliers. Digital connections between companies increase this dependency; a security breach at one organisation can have major consequences for the connected organisations. That is why the NIS2 directive (and similar regulations) requires relevant companies to take measures to secure the supply chain.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Risks in the chain</h3>
<p class="mb-3 text-gray-700 leading-relaxed">There are significant differences in digital resilience between companies, sectors and chains. Even if your own digital resilience is in order, you run risks if your supplier or IT service provider is vulnerable to cyber risks. This can jeopardize the availability, confidentiality and integrity of your business processes and information. That is why supplier risks must be included in the risk analysis and risk management decision-making.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Examples of Digital Supply Chain Risks</h4>
<p class="mb-1 text-gray-700 leading-relaxed">Here are three scenarios that could impact your business:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>A supplier that is relevant to the proper functioning of your network and information systems no longer delivers due to a digital attack.</li>
<li>Your IT service provider has been hacked, which may give the attacker access to your systems.</li>
<li>A critical vulnerability has been discovered in a product or service you use.</li>
</ul>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Major cyber incidents, such as the one affecting the port of Rotterdam in 2017, highlight the severe impact of supply chain vulnerabilities.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Supply Chain Security</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Gaining visibility and control over cybersecurity risks in the supply chain is not easy. For a strong cybersecure chain, you need to establish a policy that maps dependencies with direct suppliers and service providers. Also focus on the IT supply chain to limit potential risks. As a NIS2-relevant organization, you are responsible for identifying and limiting risks, including those arising from the supply chain. Make good agreements to keep track of the risks and limit them to an acceptable level where necessary.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Guidance is available on how to map direct suppliers and how to strengthen supplier resilience.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Supply Chain Policy Plan</h3>
<p class="mb-1 text-gray-700 leading-relaxed">A supply chain management plan is a strategic document that describes:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>How to select and contract suppliers.</li>
<li>How to map dependencies.</li>
<li>How to classify risks and dependencies.</li>
<li>How you manage risks or dependencies.</li>
<li>How to evaluate and revise this periodically.</li>
</ul>
<p class="mb-1 text-gray-700 leading-relaxed">When purchasing services or products from suppliers, cybersecurity guidelines require insight into the following matters:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Can a supplier demonstrate compliance with the imposed cybersecurity specifications?</li>
<li>Risk classifications of the IT services or products provided.</li>
<li>A coordinated risk assessment of critical suppliers, as required in regulations like Article 22 paragraph 1 of the NIS2 Directive.</li>
</ul>
</div>
</div>
<!-- Measure 8 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 8. Create a policy on cryptography and encryption</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub h: policy and procedures regarding the use of cryptography and, where applicable, encryption</p>
<p class="mb-3 text-gray-700 leading-relaxed">Cryptography is the technique of encrypting or decrypting data so that only authorized persons can read the data. It forms the basis for protecting the confidentiality and integrity of your company data and assets. Encryption is a cryptographic method of scrambling data based on a cryptographic algorithm.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Cryptography Policy</h3>
<p class="mb-3 text-gray-700 leading-relaxed">The purpose of cryptography and encryption policies and procedures is to ensure the confidentiality, integrity, non-repudiation, authenticity, and authentication of data. In a policy document, you describe the techniques and measures you have implemented to protect the confidentiality and integrity of information.</p>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Parts of the policy document</h4>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Configuration Management: Use only approved encryption standards across the organization. Policy should specify a minimum key length per asset and standard.</li>
<li>Required Encryption Standard: Based on the risk analysis and asset classification, the requirements for the encryption standard per security level must be determined.</li>
<li>Required Key Length: The recommended key length depends on the encryption standard chosen. Consult the documentation of the encryption standard used for advice.</li>
<li>Key Management: Policies for the entire lifecycle of cryptographic keys are essential. These include procedures, roles and responsibilities for: Generating and distributing keys, Destroying or withdrawing keys, Archiving keys, Backuping keys, Logging key management activities, The issuance and acquisition of certificates, if applicable.</li>
</ul>
<h4 class="text-md font-semibold mt-3 mb-1 text-dark-text">Effectiveness and revision</h4>
<p class="mb-3 text-gray-700 leading-relaxed">The cryptography policy should be periodically tested and revised, taking into account changes in the organization and current risks. The test results should be included in the revised version of the policy document.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">General information about what encryption is can provide foundational knowledge.</p>
</div>
</div>
<!-- Measure 9 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 9. Use MFA or other secure authentication solutions</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub j: where appropriate, the use of multi-factor authentication or continuous authentication solutions, secure voice, video and text communications and secure emergency communications systems within the entity</p>
<p class="mb-3 text-gray-700 leading-relaxed">For secure business processes, it is essential that users, devices, and other assets are authenticated with multiple factors of authentication (MFA) or continuous authentication mechanisms to access the organization's networks and information systems.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Classification of assets</h3>
<p class="mb-3 text-gray-700 leading-relaxed">The level and strength of authentication must match the classification of the assets to which access is granted. You inventoried this classification in the risk analysis. Additional authentication prevents an attacker from gaining access to an account by guessing the password or finding it out via, for example, social engineering or phishing.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">What is MFA?</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Multi-factor authentication (MFA) requires the use of two or more different factors to verify your identity or authority. These factors may include:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Something you know: For example, a password or a personal identification number.</li>
<li>Something you have: For example, a cryptographic identification device or tokens.</li>
<li>Something you are: For example, biometric data such as an iris scan or handprint.</li>
</ul>
<p class="mb-3 text-gray-700 leading-relaxed">An example of MFA is a password combined with a token. Another example is using a fingerprint combined with a one-time code that you receive on another device.</p>
<p class="mb-3 text-sm text-gray-600 italic border-l-4 border-accent pl-3 py-1 bg-light-accent/30">Understand the benefits of using Two-Factor Authentication (2FA) or MFA.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Apply MFA</h3>
<p class="mb-1 text-gray-700 leading-relaxed">Use two-factor authentication (2FA) or multi-factor authentication (MFA) in any case when:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Accounts accessible from the internet</li>
<li>Accounts with administrative rights</li>
<li>Accounts on critical systems</li>
</ul>
<p class="mb-3 text-gray-700 leading-relaxed">Although 2FA, two-step verification, and MFA are technically different, they are all used to make access to accounts and digital systems more secure. If you are considering using an MFA method, tips for choosing and using an MFA application can be helpful.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">VPN</h3>
<p class="mb-3 text-gray-700 leading-relaxed">For secure communication, an organization can use a Virtual Private Network (VPN). A VPN makes it possible to set up a secure connection between two devices over an existing network, such as the internet. This connection, a VPN tunnel, encrypts the data traffic. You can purchase a VPN as a service or set up a VPN server yourself.</p>
</div>
</div>
<!-- Measure 10 -->
<div class="accordion-item bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-accent mr-3 flex-shrink-0"><path stroke-linecap="round" stroke-linejoin="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>
<span class="font-semibold text-lg group-hover:text-primary">Measure 10. Use processes to assess the effectiveness of measures</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-6 h-6 text-gray-500 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div class="accordion-content px-4 sm:px-6 border-t border-gray-200">
<p class="text-xs text-gray-500 mt-3 mb-3 italic">Article 21 paragraph 2 sub f: policies and procedures to assess the effectiveness of cybersecurity risk management measures</p>
<p class="mb-3 text-gray-700 leading-relaxed">Assessing the effectiveness of cybersecurity measures is essential. It helps manage risk, ensures compliance with legislation such as the NIS2 directive (and similar), and identifies areas for improvement. This process builds stakeholder confidence and enables adaptation to emerging threats.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Start with a risk analysis</h3>
<p class="mb-3 text-gray-700 leading-relaxed">Performing a risk analysis is the first step to increase the digital resilience of your organization. This analysis identifies the existing risks, after which you can determine and implement the necessary measures. As a second step, you implement these control measures where necessary. After implementation, it is crucial to know whether the measures are effective and cover the intended risks. This requires structured and systematic testing, which must be included in the organization's policy. One of the ways to test the effectiveness of measures is via a security test.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">Policy to assess effectiveness</h3>
<p class="mb-1 text-gray-700 leading-relaxed">The policy for assessing the effectiveness of measures varies from organization to organization, depending on the measures taken previously and specific processes. Here are some elements that are often included in this policy:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Purpose and Scope: Define the objectives of the testing and evaluation. The objective should include whether the appropriate measures have been taken to keep the risks within acceptance criteria and whether applicable regulations are met. Determine the scope of the test based on these objectives.</li>
<li>Frequency: Include the frequency of the assessment in the policy. Several security frameworks, such as ISO 27001, require annual audits. If there is no specific frequency requirement, determine the frequency based on a risk management assessment.</li>
<li>Methods of Testing: Testing can be done via audits, risk analyses, pentests, code reviews or security scans. Choose the most suitable form of testing based on the purpose and scope of the test.</li>
<li>Roles: Determine which function will be responsible for the assessment. This can be done by an internal or external party, but ensure that the party is independent for an impartial assessment.</li>
<li>Outcomes: Describe how the outcomes are reported and to whom. For independence, it is advisable to report to the board or management. Use the outcomes as input for updating the risk analysis.</li>
</ul>
<p class="mb-3 text-gray-700 leading-relaxed">The policy plan for testing the effectiveness of measures must be periodically tested and revised, taking into account changes in the organization and new risks. Include points for improvement in the revised version of the policy plan.</p>
<h3 class="text-lg font-semibold mt-4 mb-2 text-dark-text">How do you perform a security test?</h3>
<p class="mb-1 text-gray-700 leading-relaxed">General guidance on performing security tests usually involves the following steps:</p>
<ul class="list-disc pl-6 mb-3 space-y-1 text-gray-700">
<li>Determine the goal: Define what you want to achieve with the security test.</li>
<li>Determine the means: Determine the testing method and scope in an assignment description.</li>
<li>Take control of the implementation: Make clear agreements with the external party that carries out the test.</li>
<li>Secure the improvements: Evaluate the results, discuss and secure the points for improvement. Use the results as input for the next risk analysis.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Insights Section -->
<section class="insights">
<h2>Latest Insights & Updates</h2>
<div class="insights-grid">
<!-- Insight 1 -->
<div class="insight-card">
<h5>NEVER OTHERS POST WORDPRESS</h5>
<h3>Night Colors</h4>
<p style="color: #888; margin: 0.5rem 0;">A. Verdasse • January 29, 2018</p>
<p>Shaping bargain jeans ready made fashioning extraordinary apparel valuable looked pumps. Braiding shading sleeveless. Accessory halter sewing...</p>
</div>
<!-- Insight 2 -->
<div class="insight-card">
<h5>LIFESTYLE OTHERS PEOPLE WORDPRESS</h5>
<h3>North Pole</h3>
<p style="color: #888; margin: 0.5rem 0;">A. Verdasse • January 29, 2018</p>
<p>Allure availability skirt artificial extra ordinary jewelry. Modification petticoat jersey hanger buttons influence proportion. Imprint accessory imagination...</p>
</div>
<!-- Insight 3 -->
<div class="insight-card">
<h5>NEWS OTHERS POST</h5>
<h3>Lost Paradise</h3>
<p style="color: #888; margin: 0.5rem 0;">A. Verdasse • January 29, 2018</p>
<p>Leverage commercial frameworks to provide availability robust synopsis for trend watching level overviews. Iterative approaches to corporate...</p>
</div>
<!-- PricingSection -->
<section id="pricing" class="py-16 bg-gray-50 sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-4">
<span class="text-accent font-semibold tracking-wider uppercase text-sm">Pricing & Plans</span>
</div>
</section>
<!-- FAQ section -->
<section class="faq">
<br>
<div class="component-title">FAQ</div>
<br>
<div class="faq-intro">
<h1>Frequently Asked Questions</h1>
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
<div class="faq-grid">
<div class="faq-card">
<h3 class="faq-question">
<span class="faq-toggle">&#9654;</span>
How does Risklet work?
</h3>
<div class="faq-answer">
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</div>
<div class="faq-card">
<h3 class="faq-question">
<span class="faq-toggle">&#9654;</span>
What is the pricing model?</h3>
<div class="faq-answer">
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</div>
<div class="faq-card">
<h3 class="faq-question">
<span class="faq-toggle">&#9654;</span>
How do I get support?</h3>
<div class="faq-answer">
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</div>
<h2 class="text-3xl font-extrabold text-dark-text sm:text-4xl text-center">
Simple Plans, Powerful Value
</h2>
<p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto text-center mb-16">
Choose the perfect plan to elevate your cybersecurity posture and meet compliance requirements with ease.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
<!-- Basic Plan -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-shadow duration-300 flex flex-col p-6 sm:p-8 border border-gray-200">
<div class="mb-6 text-center">
<h3 class="text-2xl font-bold text-primary">Basic</h3>
<div class="mt-2">
<span class="text-4xl font-extrabold text-dark-text">€290</span>
<span class="text-lg font-medium text-gray-500">/month</span>
</div>
<p class="text-xs text-gray-500 mt-1">Billed monthly. Contact us for annual options.</p>
</div>
<ul class="space-y-3 mb-8 flex-grow">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Unlimited report generations</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Continuous Risk Management</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">AI supported control effectiveness measuring</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Role Based Permissions</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Risk policy generation</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Email Support</span>
</li>
</ul>
<a href="#" class="w-full text-center font-semibold py-3 px-6 rounded-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 text-md no-underline mt-auto bg-primary text-light-text hover:bg-teal-700">
Get Started
</a>
</div>
<!-- One-Time Assessment Plan (Featured) -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-shadow duration-300 flex flex-col p-6 sm:p-8 border-2 border-accent ring-2 ring-accent">
<div class="mb-6 text-center">
<h3 class="text-2xl font-bold text-primary">One-Time Assessment</h3>
<div class="mt-2">
<span class="text-4xl font-extrabold text-dark-text">€490</span>
</div>
<p class="text-xs text-gray-500 mt-1">
Special Offer! <span class="font-semibold text-accent">(Was <del class="text-red-500">€990</del>)</span>. Valid until Sept 30, 2025.
</p>
</div>
<ul class="space-y-3 mb-8 flex-grow">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Plain-English summary of top cybersecurity risks</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Prioritized, budget-ready action plan</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Foundational security policy document</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Meets core NIS2 compliance demands (Art. 21)</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Independent and Objective Reporting</span>
</li>
</ul>
<a href="#" class="w-full text-center font-semibold py-3 px-6 rounded-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 text-md no-underline mt-auto bg-accent text-primary hover:bg-yellow-500">
Get Report Offer
</a>
</div>
<!-- Pro Plan -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-shadow duration-300 flex flex-col p-6 sm:p-8 border border-gray-200">
<div class="mb-6 text-center">
<h3 class="text-2xl font-bold text-primary">Risklet Pro</h3>
<div class="mt-2">
<span class="text-4xl font-extrabold text-dark-text">$2449</span>
<span class="text-lg font-medium text-gray-500">/year</span>
</div>
<p class="text-xs text-gray-500 mt-1">Comprehensive annual access.</p>
</div>
<ul class="space-y-3 mb-8 flex-grow">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Unlimited report generations</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Real-time visibility of risk posture</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Control maturity assessment questionnaire</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Role Based Permissions</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Risk policy generation</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-accent flex-shrink-0 mr-2 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
<span class="text-gray-600 text-sm">Priority Support</span>
</li>
</ul>
<a href="#" class="w-full text-center font-semibold py-3 px-6 rounded-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 text-md no-underline mt-auto bg-primary text-light-text hover:bg-teal-700">
Get Started
</a>
</div>
</div>
<p class="text-center mt-12 text-gray-500 text-sm">
All subscription models must be cancelled at least 30 days before the license renewal. For one-time reports, this does not apply.
</p>
</div>
</section>
<!-- Hero Section -->
<section class="hero">
<div class="component-title">GET STARTED</div>
<br>
<h1>Elevate Your Business with Smart,<br>Scalable Solutions!</h1>
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<div class="hero-buttons" style="margin-top: 2rem;">
<a href="#" class="btn-primary-orn">Start Your Free Trial</a>
<a href="#" class="btn-secondary-grn org-t">Schedule Demo</a>
<!-- InsightsSection -->
<section id="insights" class="py-16 bg-secondary sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-dark-text sm:text-4xl text-center mb-16">
Latest Insights & Updates
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Insight 1 -->
<a href="#" class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300 flex flex-col p-6 group no-underline">
<div>
<span class="text-xs font-semibold text-accent uppercase tracking-wider mb-1 block">Strategic Cybersecurity</span>
<h3 class="text-xl font-semibold text-dark-text mb-2 group-hover:text-primary transition-colors">Unlock a Business-Focused View of Cyber Risk</h3>
<p class="text-sm text-gray-500 mb-3">Risklet Insights Team • October 2024</p>
<p class="text-gray-600 text-sm flex-grow">Move beyond disruptive IT audits. Our approach delivers a strategic overview, translating technical risks into clear business impacts, quickly and efficiently.</p>
</div>
</a>
<!-- Insight 2 -->
<a href="#" class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300 flex flex-col p-6 group no-underline">
<div>
<span class="text-xs font-semibold text-accent uppercase tracking-wider mb-1 block">Unbiased Reporting</span>
<h3 class="text-xl font-semibold text-dark-text mb-2 group-hover:text-primary transition-colors">Independent & Objective Risk Analysis</h3>
<p class="text-sm text-gray-500 mb-3">Risklet Insights Team • October 2024</p>
<p class="text-gray-600 text-sm flex-grow">Receive unbiased analysis focused solely on your benefit. We don't sell other products, ensuring our advice on mitigating key risks is purely for your business continuity.</p>
</div>
</a>
<!-- Insight 3 -->
<a href="#" class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300 flex flex-col p-6 group no-underline">
<div>
<span class="text-xs font-semibold text-accent uppercase tracking-wider mb-1 block">Compliance & Governance</span>
<h3 class="text-xl font-semibold text-dark-text mb-2 group-hover:text-primary transition-colors">Demonstrate NIS2 Due Diligence Effectively</h3>
<p class="text-sm text-gray-500 mb-3">Risklet Insights Team • October 2024</p>
<p class="text-gray-600 text-sm flex-grow">Fulfill NIS2 Article 21 obligations with core documentation. Our reports serve as crucial evidence for regulators, insurers, and clients, demonstrating serious commitment.</p>
</div>
</a>
</div>
</div>
</section>
<!-- FAQSection -->
<section id="faq" class="py-16 bg-gray-50 sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-4">
<span class="text-accent font-semibold tracking-wider uppercase text-sm">FAQ</span>
</div>
<h2 class="text-3xl font-extrabold text-dark-text sm:text-4xl text-center">
Frequently Asked Questions
</h2>
<p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto text-center mb-12">
Find answers to common questions about Risklet, its features, and how it can help your business.
</p>
<div class="max-w-3xl mx-auto space-y-4 accordion-container">
<!-- FAQ 1 -->
<div class="accordion-item bg-white rounded-lg shadow-md overflow-hidden">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-lg font-medium text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75" aria-expanded="false" aria-controls="faq-answer-1">
<span>How does Risklet work?</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-5 h-5 text-gray-400 transform transition-transform duration-200"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div id="faq-answer-1" class="accordion-content px-4 sm:px-6 border-t border-gray-200 text-gray-600 text-sm" role="region">
Risklet uses an advanced AI platform to analyze your cybersecurity posture, identify key risks, and generate compliant reports. It simplifies complex assessments, making them accessible and actionable.
</div>
</div>
<!-- FAQ 2 -->
<div class="accordion-item bg-white rounded-lg shadow-md overflow-hidden">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-lg font-medium text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75" aria-expanded="false" aria-controls="faq-answer-2">
<span>What is the pricing model?</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-5 h-5 text-gray-400 transform transition-transform duration-200"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div id="faq-answer-2" class="accordion-content px-4 sm:px-6 border-t border-gray-200 text-gray-600 text-sm" role="region">
We offer flexible pricing plans including monthly subscriptions, one-time reports, and comprehensive annual packages. Check our Pricing section for detailed information on each plan.
</div>
</div>
<!-- FAQ 3 -->
<div class="accordion-item bg-white rounded-lg shadow-md overflow-hidden">
<button type="button" class="accordion-trigger flex justify-between items-center w-full p-4 sm:p-6 text-left text-lg font-medium text-dark-text hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75" aria-expanded="false" aria-controls="faq-answer-3">
<span>How do I get support?</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="accordion-chevron w-5 h-5 text-gray-400 transform transition-transform duration-200"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
</button>
<div id="faq-answer-3" class="accordion-content px-4 sm:px-6 border-t border-gray-200 text-gray-600 text-sm" role="region">
Support options vary by plan, ranging from email support for basic plans to priority phone and email support for our Pro users. We are committed to helping you succeed.
</div>
</div>
</div>
</div>
</section>
<script>
document.querySelectorAll('.faq-question').forEach(function(q) {
q.addEventListener('click', function() {
document.querySelectorAll('.faq-card').forEach(function(card) {
if (card !== q.parentElement) card.classList.remove('active');
});
q.parentElement.classList.toggle('active');
});
});
</script>
<!-- NewCTASection -->
<section id="get-started" class="bg-primary text-light-text py-16 sm:py-24">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="mb-4">
<span class="text-accent font-semibold tracking-wider uppercase text-sm">Get Started</span>
</div>
<h2 class="text-3xl font-extrabold sm:text-4xl md:text-5xl">
Elevate Your Business with Smart,<br />Scalable Solutions!
</h2>
<p class="mt-6 text-lg sm:text-xl text-blue-100 max-w-2xl mx-auto">
Take control of your cybersecurity risk and compliance. Risklet provides the tools and insights you need to protect your assets and build a resilient organization.
</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-accent text-primary hover:bg-yellow-500 font-semibold py-3 px-8 rounded-lg shadow-lg text-lg transition-all duration-300 ease-in-out transform hover:scale-105 no-underline">
Start Your Free Trial
</a>
<a href="#" class="bg-transparent border-2 border-accent text-accent hover:bg-accent hover:text-primary font-semibold py-3 px-8 rounded-lg text-lg transition-all duration-300 ease-in-out no-underline">
Schedule Demo
</a>
</div>
</div>
</section>
</main>
{% endblock %}

View File

@@ -1,23 +1,19 @@
{% extends 'base.html' %}
{% block content %}
<div class="confirmed">
<div class="confirmation-card">
<h2 class="title-org">Payment</h2>
<p class="info-p">
Click the button below to pay and access your document.
</p>
<form method="post">
{% csrf_token %}
<button class="btn-primary-orn" type="submit">Pay</button>
</form>
</div>
</div>
<script>
nav = document.querySelector('nav');
confirmed = document.querySelector('.confirmed');
confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
</script>
<section class="py-16 bg-secondary sm:py-24 p-body-full">
<div class="max-w-lg w-full mx-auto text-center shadow-lg border border-success rounded-xl p-8 bg-white">
<h2 class="text-3xl font-extrabold mb-4 text-success">Payment</h2>
<p class="mb-8 text-gray-700 text-lg">
Click the button below to securely pay and access your document.
</p>
<form method="post">
{% csrf_token %}
<button type="submit" class="nav-link-desktop bg-transparent border-2 border-accent text-accent hover:bg-accent hover:text-primary font-semibold py-3 px-8 rounded-lg text-lg transition-all duration-300 ease-in-out">
Pay & Check Your document
</button>
</form>
</div>
</section>
{% endblock %}