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

            <!-- AI Engine -->

            <div class="col-lg-6">

                <div class="ai-ecosystem-card ai-engine-card">

                    <div class="ai-card-heading">

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

                        <div>

                            <h2>

                                AI

                                <span>Engine</span>

                            </h2>

                        </div>

                    </div>

                    <p>

                        Create a Use Case and continuously evaluate the
                        environment, notifying stakeholders immediately
                        through notifications and email whenever a matching
                        use case is detected.

                    </p>

                </div>

            </div>


            <!-- AI Scanner -->

            <div class="col-lg-6">

                <div class="ai-ecosystem-card ai-scanner-card">

                    <div class="ai-card-heading">

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

                        <div>

                            <h2>

                                AI

                                <span>Scanner</span>

                            </h2>

                        </div>

                    </div>

                    <p>

                        AI Scanner automatically scans assets to detect
                        deployed LLM models and assess their security
                        posture. It identifies configuration and
                        implementation vulnerabilities.

                    </p>

                    <p>

                        Performs controlled prompt injection attempts
                        against both endpoint-hosted and internet-facing
                        models to validate resilience.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>
@endsection