stajling home-page

This commit is contained in:
2025-05-19 05:33:04 +02:00
parent bcb89e16c7
commit 6127bd01b0
2 changed files with 473 additions and 233 deletions

View File

@@ -2,44 +2,169 @@
{% load static %}
{% block content %}
<div class="inner-container">
<h1> Gen-AI Powered Business Risk Analysis </h1>
<div class="gif-container">
<img src="{% static 'img/risklet-poll.png' %}" alt="Risklet Poll" />
</div>
<h3>Actionable | Intelligent | Simple</h3>
<div class="buttons">
<a class="btn-bl" href="#"> Learn More </a>
<a class="btn-bl" href="#"> Watch Keynote </a>
</div>
</div>
<div class="insight-main">
<div class="insight-content">
<div class="left-side">
<h3> What are your top cybersecurity risks? </h3>
</div>
<div class="right-side">
<div class="insight-grid">
<h3>Your Top Cyber Risks Quantified in Loss Magnitude ($) and Likelihood (Probability) </h3>
<img src="{% static 'img/risklet-scatter-plot.png' %}" alt="Risklet Plot" />
<!-- 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="#" class="btn-primary-orn">Download FREE Report Sample</a>
<a href="#" class="btn-secondary-grn">Learn More</a>
</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>
</div>
</div>
</div>
<div class="out-risk-management">
<div class="risk-management">
<h2>The Only Unified Platform to Manage your Third-Party & First-Party Cyber Risk </h2>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
<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>
</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>
</div>
<div class="demo-buttons">
<a class="btn-bl-small" href="#">First-party Business risks </a>
<a class="btn-bl-small" href="#">Third-party Business risks </a>
</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>
</div>
<div class="risklet-action">
<h2>See Risklet in Action </h2>
<a class="btn-bl" href="#"> Demo </a>
</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>
</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>
</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>
{% endblock %}