@extends('layouts.app')

@section('title', 'About Us | ' . config('app.name'))

@push('styles')
    @vite('resources/css/pages/about.css')
@endpush

@section('content')


<!--==================================================
HERO
===================================================-->

<x-page-video-header
    page="aboutus"
    title="AI is Transforming"
    subtitle="Cybersecurity on <br>Both Sides"
/>


<div class="about-page">


    <!--==================================================
    LEAD
    ===================================================-->

    <section class="about-lead">

        <img
            src="{{ asset('images/mesh/left-bottom-common-mesh.png') }}"
            class="about-lead-mesh"
            alt=""
            aria-hidden="true">

        <div class="container">

            <div class="about-lead-inner">

                <p class="about-lead-text">
                    While organizations use AI to strengthen defenses, cybercriminals use it to automate attacks, exploit vulnerabilities, evade detection, and accelerate threats.  Traditional security tools were built for a human-speed threat landscape - not the machine-speed attacks of today.

                </p>

                <p class="about-lead-highlight">
                    <span class="about-lead-accent">Today’s AI-powered attacks require an AI-powered defense</span>
                    that can continuously monitor, analyze, validate, predict, and respond at machine speed.
                </p>

            </div>

        </div>

    </section>


    <!--==================================================
    PLATFORM CARD
    ===================================================-->

    <section class="about-platform">

        <div class="container">

            <div class="about-platform-card">

                <p>
                    SecureX360 is an AI-powered Cybersecurity Platform that brings together artificial intelligence, automation, threat intelligence, and continuous validation into a single intelligent security ecosystem. It transforms cybersecurity from a reactive process into a proactive and predictive defense strategy capable of defending against AI-powered adversaries.
                </p>

            </div>

        </div>

    </section>


    <!--==================================================
    MISSION
    ===================================================-->

    <section class="about-statement about-statement--mission" data-about-statement>

        <div class="about-statement-media">

            {{--
                autoplay + muted + playsinline are all required for the video
                to start on its own. muted is what makes autoplay permitted;
                playsinline stops iOS opening it fullscreen. about.js only
                pauses these when off screen — playback does not depend on it.
            --}}
            <video
                data-about-video
                autoplay
                muted
                loop
                playsinline
                preload="metadata"
                poster="{{ asset('images/about/mission-poster.jpg') }}">
                <source src="https://campaign.securelinkme.net/securex360/About-Us-Our-Mission.mp4?1" type="video/mp4">
            </video>

        </div>

        <div class="container">

            <div class="about-statement-content">

                <h2>Our Mission</h2>

                <p>
                    To continuously reduce customers' attack surface,
validate the effectiveness of their security posture, and
strengthen cyber resilience in an ever-evolving threat landscape.
                </p>

            </div>

        </div>

    </section>


    <!--==================================================
    VISION
    ===================================================-->

    <section class="about-statement about-statement--vision" data-about-statement>

        <div class="about-statement-media">

            <video
                data-about-video
                autoplay
                muted
                loop
                playsinline
                preload="metadata"
                poster="{{ asset('images/about/vision-poster.jpg') }}">
                <source src="https://campaign.securelinkme.net/securex360/About-Us-Our-Vision.mp4?1" type="video/mp4">
            </video>

        </div>

        <div class="container">

            <div class="about-statement-content">

                <h2>Our Vision</h2>

                <p>
                    To enable a new era of proactive cyber resilience,
empowering organizations to stay ahead of evolving threats,
reduce cyber exposure, and strengthen security confidence
through AI, automation, and intelligence.
                </p>

            </div>

        </div>

    </section>


</div>

@endsection


@push('scripts')
    @vite('resources/js/about.js')
@endpush