@extends('layouts.app')

@section('title', 'AI Ecosystem | ' . config('app.name'))

@push('styles')

    @vite('resources/css/pages/ai-ecosystem.css')

@endpush

@push('scripts')

    @vite('resources/js/ai-ecosystem.js')

@endpush

@section('content')

 

<x-page-video-header
    page="ai_ecosystem"
    title="AI EcoSystem"
    subtitle="An Intuitive<br>AI-Powered Platform"
/>


<div class="ai-ecosystem" data-aie>


    <!--==================================================
    Intro
    ===================================================-->

    <section class="aie-intro">

 

        <div class="container">

            <div class="row justify-content-center">

                <div class="col-xl-12">

                    <div class="aie-intro-content">

                        <p class="aie-anim">
                            Our AI-powered CTEM ecosystem brings together intelligent capabilities to create a proactive,
                            automated, and continuously adaptive security framework. The AI components work together to
                            enhance visibility, accelerate risk analysis, automate decision-making, and strengthen cyber
                            resilience across the enterprise.
                        </p>

                        <p class="aie-anim">
                            In an era where cyber threats are becoming more sophisticated and AI-driven, an AI-powered CTEM
                            ecosystem enables organizations to move beyond reactive defense - continuously anticipating
                            threats, adapting to changing risks, and building a proactive security posture designed for the
                            digital future.
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!--==================================================
    1 | AI Assistant   (media left / panel right)
    ===================================================-->

    <section class="aie-block" id="ai-assistant">

        <div class="container">

            <article class="aie-card aie-card--assistant aie-card--media-left aie-anim" data-aie-card>

                <div class="aie-media" data-aie-media>

                    <iframe
                        src="{{ asset('html-video/AI-Assistant.html?') }}"
                        title="AI Assistant simulation"
                        loading="lazy"
                        allowfullscreen
                        data-aie-frame></iframe>

                </div>

                <div class="aie-body">

                    <div class="aie-head">

                        <h2 class="aie-title" data-aie-title>
                            <span>AI</span>
                            <span class="aie-title-accent">Assistant</span>
                        </h2>

                        <div class="aie-icon" data-aie-icon>
                            <img src="{{ asset('images/icons/ai-assistant-icon.svg') }}" alt="" aria-hidden="true">
                        </div>

                    </div>

                    <div class="aie-copy" data-aie-copy>

                        <p>
                            Users can converse naturally with the cybersecurity system, request data, and make informed
                            decisions faster through live interaction.
                        </p>

                        <p>
                            Automates case creation by allowing users to assign incidents, set due times.
                        </p>

                    </div>

                </div>

            </article>

        </div>

    </section>


    <!--==================================================
    2 | PenX360   (panel left / media right)
    ===================================================-->

    <section class="aie-block" id="penx360">

        <!-- <img src="{{ asset('images/mesh/mesh-left-red.png') }}"  class="aie-mesh aie-mesh--left"  alt="" aria-hidden="true">
        <img src="{{ asset('images/mesh/mesh-right-red.png') }}" class="aie-mesh aie-mesh--right" alt="" aria-hidden="true"> -->

        <div class="container">

            <article class="aie-card aie-card--penx aie-card--media-right aie-anim" data-aie-card>

                <div class="aie-body">

                    <div class="aie-head aie-head--icon-left">

                        <h2 class="aie-title aie-title--logo" data-aie-title>
                            <span>
                                <img class="aie-logo" src="{{ asset('images/logos/penx-white-logo.svg') }}" alt="PenX360">
                            </span>
                        </h2>

                        <div class="aie-icon" data-aie-icon>
                            <img src="{{ asset('images/icons/penx-360-icon.svg') }}" alt="" aria-hidden="true">
                        </div>

                    </div>

                    <div class="aie-copy" data-aie-copy>

                        <p>
                            <strong>Vulnerability Remediation Guidance</strong>
                            Provides actionable recommendations for identified and unpatched vulnerabilities, including
                            vendor-specific mitigation and remediation steps.
                        </p>

                        <p>
                            <strong>Guided Penetration Testing</strong>
                            Delivers step-by-step instructions to perform penetration testing on identified
                            vulnerabilities, aligned with industry best practices.
                        </p>

                        <p>
                            <strong>Automated Scanning &amp; Exploitation</strong>
                            Automates vulnerability scanning and penetration testing across assets, Web Applications and
                            Large Language Models to validate the exploitability of existing security weaknesses.
                        </p>

                    </div>

                </div>

                <div class="aie-media aie-media--tall" data-aie-media>

                    <iframe
                        src="{{ asset('html-video/PenX-Pentest-Simulation-Video.html') }}"
                        title="PenX360 pentest simulation"
                        loading="lazy"
                        allowfullscreen
                        data-aie-frame></iframe>

                </div>

            </article>

        </div>

    </section>


    <!--==================================================
    3 | AI Rule Builder   (media left / panel right)
    ===================================================-->

    <section class="aie-block" id="ai-rule-builder">

        <div class="container">

            <article class="aie-card aie-card--builder aie-card--media-left aie-anim" data-aie-card>

                <div class="aie-media" data-aie-media>

                    {{-- swap for an <iframe> if you build an html-video for this one --}}
                     <video src="https://campaign.securelinkme.net/securex360/AI-Rule-Builder-Video.mp4" autoplay muted loop playsinline preload="auto" loading="lazy"aria-hidden="true" data-aie-parallax style="width: 100%; height: 100%;"></video>

                </div>

                <div class="aie-body">

                    <div class="aie-head">

                        <h2 class="aie-title" data-aie-title>
                            <span>AI Rule</span>
                            <span class="aie-title-accent">Builder</span>
                        </h2>

                        <div class="aie-icon" data-aie-icon>
                            <img src="{{ asset('images/icons/ai-rule-builder-icon.svg') }}" alt="" aria-hidden="true">
                        </div>

                    </div>

                    <div class="aie-copy" data-aie-copy>

                        <p>
                            Create an AI-powered intelligent security use case and continuously evaluate the environment,
                            notifying the stakeholders immediately via notifications and email when a matching use case is
                            detected.
                        </p>

                    </div>

                </div>

            </article>

        </div>

    </section>


    <!--==================================================
    4 | AI Engine   (panel left / media right)
    ===================================================-->

    <section class="aie-block" id="ai-engine">

        <div class="container">

            <article class="aie-card aie-card--engine aie-card--media-right aie-anim" data-aie-card>

                <div class="aie-body">

                    <div class="aie-head aie-head--icon-left">

                        <h2 class="aie-title" data-aie-title>
                            <span>AI</span>
                            <span class="aie-title-accent">Engine</span>
                        </h2>

                        <div class="aie-icon" data-aie-icon>
                            <img src="{{ asset('images/icons/ai-engine-icon.svg') }}" alt="" aria-hidden="true">
                        </div>

                    </div>

                    <div class="aie-copy" data-aie-copy>

                        <p>
                            AI-powered intelligence engine that transforms billions of security signals into predictive
                            detection rules automatically.
                        </p>

                        <p>
                            Learning continuously from every scan across all scanners, it builds and refines detection logic
                            in real time, delivers predictive risk analytics, and provides a unified intelligence layer that
                            enables faster, smarter, and more proactive threat detection.
                        </p>

                    </div>

                </div>

                <div class="aie-media" data-aie-media>

                <video src="https://campaign.securelinkme.net/securex360/AI-Engine-Video.mp4" autoplay muted loop playsinline preload="auto" loading="lazy"aria-hidden="true" data-aie-parallax style="width: 100%; height: 100%;"></video>
                   

                </div>

            </article>

        </div>

    </section>


    <!--==================================================
    5 | AI Scanner   (media left / panel right)
    ===================================================-->

    <section class="aie-block aie-block--last" id="ai-scanner">

        <div class="container">

            <article class="aie-card aie-card--scanner aie-card--media-left aie-anim" data-aie-card>

                <div class="aie-media" data-aie-media>

                    <iframe
                        src="{{ asset('html-video/SecureX360-AI-Scanner.html') }}"
                        title="AI Scanner simulation"
                        loading="lazy"
                        allowfullscreen
                        data-aie-frame></iframe>

                </div>

                <div class="aie-body">

                    <div class="aie-head">

                        <h2 class="aie-title" data-aie-title>
                            <span>AI</span>
                            <span class="aie-title-accent">Scanner</span>
                        </h2>

                        <div class="aie-icon" data-aie-icon>
                            <img src="{{ asset('images/icons/ai-scanner-icon.svg') }}" alt="" aria-hidden="true">
                        </div>

                    </div>

                    <div class="aie-copy" data-aie-copy>

                        <p>
                            AI Scanner is an integrated SecureX360 capability that automatically scans assets to detect
                            deployed LLM models and assess their security posture. It identifies configuration and
                            implementation vulnerabilities, including unsafe integrations and exposed endpoints.
                        </p>

                        <p>
                            Performs controlled prompt injection attempts against both endpoint-hosted and internet-facing
                            LLM models to validate their resilience against real-world attacks.
                        </p>

                    </div>

                </div>

            </article>

        </div>

    </section>


</div>

@endsection