stajling home-page
This commit is contained in:
@@ -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;">RiskLM’s 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">✓</span> Monthly Billing (€49/month) or Annual Billing (€469/year)</li>
|
||||
<li><span class="marked-org">✓</span> 4 report generations per year</li>
|
||||
<li><span class="marked-org">✓</span> Optional control maturity recording</li>
|
||||
<li><span class="marked-org">✓</span> Role Based Permissions</li>
|
||||
<li><span class="marked-org">✓</span> Risk policy generation</li>
|
||||
<li><span class="marked-org">✓</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">✓</span> Top 10 Cybersecurity Risk Report</li>
|
||||
<li><span class="marked-org">✓</span> Control recommendation</li>
|
||||
<li><span class="marked-org">✓</span> Downloadable PDF</li>
|
||||
<li><span class="marked-org">✓</span> Renew your assessment for €189</li>
|
||||
<li><span class="marked-org">✓</span> Risk policy generation</li>
|
||||
<li><span class="marked-org">✓</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">✓</span> Unlimited report generations</li>
|
||||
<li><span class="marked-org">✓</span> Real-time visibility of risk posture</li>
|
||||
<li><span class="marked-org">✓</span> Control maturity assessment questionnaire</li>
|
||||
<li><span class="marked-org">✓</span> Role Based Permissions</li>
|
||||
<li><span class="marked-org">✓</span> Risk policy generation</li>
|
||||
<li><span class="marked-org">✓</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">▶</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">▶</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">▶</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 %}
|
||||
Reference in New Issue
Block a user