@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')

 
<!--==================================================
AI Ecosystem Hero
===================================================-->

<section class="ai-ecosystem-hero">

    <div class="ai-ecosystem-banner">

        <img
            src="{{ asset('images/pages/ai-ecosystem-header.jpg') }}"
            class="ai-ecosystem-bg"
            alt="AI Ecosystem">

        <div class="ai-ecosystem-overlay">

            <div class="container">

                <div class="ai-ecosystem-content">

                    <h1>

                        <span>AI EcoSystem</span>

                        <strong>
                            An Intuitive<br>
                            AI - Powered Platform
                        </strong>

                    </h1>

                </div>

            </div>

        </div>

    </div>

</section>


<!--==================================================
AI Ecosystem Intro
===================================================-->

<section class="ai-ecosystem-intro">

    <!-- Left Mesh -->
    <img
        src="{{ asset('images/mesh/mesh-left-green.png') }}"
        class="ai-ecosystem-mesh-left"
        alt="">

    <div class="container">

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

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

                <div class="ai-ecosystem-intro-content">

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Aliquam maximus varius lorem a vestibulum. Quisque varius
                        erat risus, vitae aliquet arcu dictum vitae.

                        Duis porttitor, nisi quis posuere ultricies, erat nisl
                        imperdiet magna, vitae vehicula leo mi vitae velit.
                        Suspendisse potenti.

                    </p>

                    <p>

                        Aliquam maximus varius lorem a vestibulum.
                        Quisque varius erat risus, vitae aliquet arcu dictum vitae.

                        Duis porttitor, nisi quis posuere ultricies,
                        erat nisl imperdiet magna, vitae vehicula leo mi vitae velit.

                        Suspendisse potenti.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>

<!--==================================================
AI Assistant Section
===================================================-->

<section class="ai-ecosystem-assistant">

    <img
        src="{{ asset('images/mesh/mesh-left-green.png') }}"
        class="ai-ecosystem-assistant-mesh-left"
        alt="">

    <img
        src="{{ asset('images/mesh/mesh-right-green.png') }}"
        class="ai-ecosystem-assistant-mesh-right"
        alt="">


    <div class="container">

        <div class="ai-ecosystem-assistant-box">

            <!-- LEFT -->
            <div class="ai-ecosystem-assistant-video">

                <iframe
                    src="{{ asset('html-video/AI-Assistant.html') }}"
                    class="ai-ecosystem-assistant-iframe"
                    loading="lazy"
                    allowfullscreen>
                </iframe>

            </div>


            <!-- RIGHT -->
            <div class="ai-ecosystem-assistant-content">

                <div class="ai-ecosystem-assistant-icon">

                    <img
                        src="{{ asset('images/icons/ai-assistant-icon.svg') }}"
                        alt="AI Assistant">

                </div>

                <h2>

                    AI

                    <span>Assistant</span>

                </h2>

                <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>

    </div>

</section>



<!--==================================================
AI Ecosystem - PenX360
===================================================-->

<section class="ai-ecosystem-penx">

    <img
        src="{{ asset('images/mesh/mesh-left-red.png') }}"
        class="ai-ecosystem-penx-mesh-left"
        alt="">

    <img
        src="{{ asset('images/mesh/mesh-right-red.png') }}"
        class="ai-ecosystem-penx-mesh-right"
        alt="">


    <div class="container">

        <div class="ai-ecosystem-penx-box">

            <!-- LEFT -->

            <div class="ai-ecosystem-penx-content">

                <div class="ai-ecosystem-penx-heading">

                    <img
                        src="{{ asset('images/icons/penx-360-icon.svg') }}"
                        alt="PenX360">

                    <h2>

                        PenX<span>360</span>

                    </h2>

                </div>

                <div class="ai-ecosystem-penx-text">

                    <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 & Exploitation:
                        </strong>

                        Automates vulnerability scanning and
                        penetration testing across assets,
                        Web Applications and Large Language Models.

                    </p>

                </div>

            </div>


            <!-- RIGHT -->

            <div class="ai-ecosystem-penx-video">

                <iframe
                    src="{{ asset('html-video/PenX-Pentest-Simulation-Video.html') }}"
                    class="ai-ecosystem-penx-iframe"
                    loading="lazy"
                    allowfullscreen>
                </iframe>

            </div>

        </div>

    </div>

</section>





<section class="ai-ecosystem-cards">

    <img
        src="{{ asset('images/mesh/mesh-left-green.png') }}"
        class="ai-card-mesh-left"
        alt="">

    <img
        src="{{ asset('images/mesh/mesh-right-purple.png') }}"
        class="ai-card-mesh-right"
        alt="">

    <div class="container">

        <div class="row g-5">

             <div class="page">
                 

                <nav class="tabs" role="tablist">
                    <button class="tab active" data-tab="engine" role="tab" aria-selected="true"><span class="dot"></span>AI Engine</button>
                    <button class="tab" data-tab="scanner" role="tab" aria-selected="false"><span class="dot"></span>AI Scanner</button>
                    <button class="tab" data-tab="rules" role="tab" aria-selected="false"><span class="dot"></span>AI Rule Builder</button>
                </nav>

                <main class="panels">
                    <section class="panel panel-engine active ai-engine-card" data-panel="engine" role="tabpanel">
                     <div class="ai-card-heading">

                        <img
                            src="{{ asset('images/icons/ai-engine-icon.svg') }}"
                            alt="">

                        <div>

                            <h2>

                                AI

                                <span>Engine</span>

                            </h2>

                        </div>

                    </div>
                     <div class="copy">
                        <p>Create a Use Case and continuously evaluate the environment, notifying the stakeholders immediately via notifications and email when a matching use case is detected.</p>
                    </div>
                    </section>

                    <section class="panel panel-scanner ai-scanner-card" data-panel="scanner" role="tabpanel">
                    <div class="ai-card-heading">

                        <img
                            src="{{ asset('images/icons/ai-scanner-icon.svg') }}"
                            alt="">

                        <div>

                            <h2>

                                AI

                                <span>Scanner</span>

                            </h2>

                        </div>

                    </div>
                    <div class="copy">
                        <p>AI Scanner is an integrated SecurX 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>
                    </section>

                    <section class="panel panel-rules" data-panel="rules" role="tabpanel">
                     
                    <div class="ai-card-heading">

                        <img
                            src="{{ asset('images/icons/ai-rule-builder-icon.svg') }}"
                            alt="">

                        <div>

                            <h2>

                                AI Rule Builder

                                <span>Scanner</span>

                            </h2>

                        </div>

                    </div>

                    <div class="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 six 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>
                    </section>
                </main>
                </div>

        </div>

    </div>

</section>
@endsection