
<!--<div class="page-breadcrumb">
    <div class="row align-items-center">
        <div class="col-md-6 col-8 align-self-center">
            <h3 class="page-title mb-0 p-0">The Cyber Boardroom</h3>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                    </ol>
                </nav>
            </div>
        </div>


        {%  include 'includes/component/button__support.html' %}
    </div>
</div>-->
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="hero">

                        <div class="d-flex justify-content-center align-items-center">
                            <p>
                                <img alt="CBR Logo" src="{{ config.ASSETS_ROOT }}/cbr/cbr-logo.jpg" style="max-width: 300px;">
                            </p>
                        </div>
                        <p>
                            <b id="welcome-to-the-cyber-boardroom">Welcome {{ first_name }} to The Cyber Boardroom</b>, the one-stop shop boards of directors rely on for their cyber readiness.
                        </p>


                        <p>The Cyber Boardroom’s mission is to help you understand your organisation’s cyber security agenda, as well as fulfil your duties as a board member.
                        </p>
                        <p>To help you with any questions you might have on cyber security and the risks your organisation faces, we have created an engaging AI advisor
                            named <a href="/athena">Athena</a>.
                        </p>
                        <p>To ensure <a href="/athena">Athena</a> delivers a personalised experience, go to your profile section, scroll down, and add as many
                            prompts as you want.
                        </p>
                        <p>In addition, we are building a customised library of short videos and valuable content aimed at enhancing your knowledge of cyber security,
                            which will help you optimise your engagement with <a href="/athena">Athena</a>.
                        </p>
                        <table width="100%" >
                            <tr>
                                <td style="padding: 10px">
                                    <iframe width="100%"
                                            height="275"
                                            src="https://www.youtube.com/embed/YMVeEArHyUU?si=sRaMK77Mv_cFSekg"
                                            title="YouTube video player"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            allowfullscreen>
                                    </iframe>
                                </td>
                                <td  style="padding: 10px">
                                    <iframe width="100%"
                                            height="275"
                                            src="https://www.youtube.com/embed/HsIGgO3h15Q?si=E8-yYTrXanOPS6JH"
                                            title="YouTube video player"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            allowfullscreen>
                                    </iframe>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6">
            <div class="_card">
                <div class="_card-body">
                    <div class="responsive-iframe">


                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">

        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Athena </h3>
                    <h6 class="card-subtitle">Your AI cyber security advisor</h6>
                    <div id="visitor"  style="height: 180px; width: 100%; max-height: 290px; position: relative;" class="c3">
                        <p><a href="/athena">Athena</a> takes her name from the Greek goddess of wisdom, courage and strategic warfare. Her mission is
to help you with any questions you might have on cyber security.
                        </p>
                        <p>
Athena’s extensive training will provide you with information, strategic guidance and advice on the
cyber security risks your organisation faces.
</p>
                        <div class="col text-center">
                            <a href="/athena">
                                <button class="btn btn-success mx-auto">Go</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Cyber security content </h3>
                    <h6 class="card-subtitle">The Cyber Boardroom’s curated content</h6>
                    <div id="visitor"  style="height: 180px; width: 100%; max-height: 290px; position: relative;" class="c3">

                        <p style="height: 140px">
                            We have developed short modules that will increase your knowledge and understanding of key cyber security topics.
                        </p>


                        <div class="col text-center">
                            <a href="/content">
                                <button class="btn btn-success mx-auto">Go</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <div>
</div>

