{% extends "base.html" %}
{% 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" />
            </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>
        </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>
        </div>
    </div>
</div>
<div class="risklet-action">
    <h2>See Risklet in Action </h2>
    <a class="btn-bl" href="#"> Demo </a>
</div>
{% endblock %}