@extends('frontend.layouts.app')

@section('title')
    About
@endsection

@section('seo')
@endsection

@section('content')
    <style>
        .shadow-white::after {
            content: "";
            position: absolute;
            height: 50px;
            width: 100%;
            background: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
            bottom: 0;
            left: 0;
            z-index: 1;
        }
    </style>

    <link rel="stylesheet" href="{{ asset('css/about.css') }}">
    <style>
        .about-banner {
            background: linear-gradient(rgba(253, 253, 253, 0.5), rgba(212, 212, 212, 0.5)), url('{{ asset('img/about.png') }}') no-repeat center / cover;
            height: 100vh;
            width: 100% !important;
            /* background-size:cover; */
        }

        @media screen and (max-width: 768px) {
            .about-banner {
                height: 400px;
                background-size: cover;
            }

            .about-content .col-md-1 {
                text-align: center;
                /* Center align the logo column on smaller screens */
            }

            .about-content .col-1 {
                display: block !important;
                /* Ensure the logo column is visible on all screen sizes */
                margin-bottom: 10px;
                /* Add margin between the logo and text content */
            }

            .about-content .col-8 {
                width: 100%;
                /* Full width for text content on smaller screens */
                padding-left: 15px;
                /* Add padding to the left for spacing */
                padding-right: 15px;
                /* Add padding to the right for spacing */
            }

            .about-content .fs-2 {
                text-align: center;
                /* Center align the heading on smaller screens */
            }
        }
    </style>


    <div class="d-none d-sm-none d-md-block d-lg-block position-relative">
        <div class="position-relative overflow-hidden shadow-white about-banner d-flex align-items-center">
            <div class="">
                <div class="container">
                    <div class="row">
                        <div class="col-1"></div>
                        <div class="col-1 col-md-1 justify-content-center d-flex align-items-center">
                            <img src="img/hi-reslogo.png" class="img-fluid" alt="">
                        </div>
                        <div class="col-8 col-md-8 d-flex flex-wrap">
                            <h1 class="fw-bold text-uppercase text-black my-3 fs-2">
                                ABOUT THE COMPANY
                            </h1>
                            <p
                                style="font-family: var(--bs-font-sans-serif); color: black !important; font-size: 1.3em !important;">
                                Zenorex Marketing Corporation distributes high-quality<br> durable consumer products in the
                                Philippines.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="d-sm-block d-lg-none d-md-none">
        <div class="position-relative overflow-hidden about-banner">
            {{-- Uncomment the image tag below if you want to display an image --}}
            {{-- <img src="{{ asset('img/about.png') }}" class="img-fluid" alt=""> --}}
            <div class="w-100 d-flex flex-column align-items-center justify-content-end" style="height: 100%;">
                <div class="container mb-5 about-content">
                    <div class="row">
                        <div class="col-3 col-md-2 d-flex align-items-center">
                            <img src="img/hi-reslogo.png" class="img-fluid" alt="">
                        </div>
                        <div class="col-9 col-md-10 ps-md-4">
                            <h2 class="fw-bold text-uppercase text-black my-3">
                                ABOUT THE COMPANY
                            </h2>
                            <p class="mb-0">
                                Zenorex Marketing Corporation distributes high-quality durable consumer products in the
                                Philippines.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="container pt-lg-5">

        <div>
            {{-- <span class="about-zenorex text-red">ABOUT US</span><br> --}}
            <span class="our-company fw-bold" style="font-size: 35px !important">Our Company</span>
            <p class="about-text mt-3 lh-lg mb-3">Zenorex Marketing Corporation has been the exclusive Philippine
                distributor of all Sentry<span style="position: relative; top:  .3em;"><sub
                        style="font-size: 1.5em;">®</sub></span>Safe products since 1995. Sentry<span
                    style="position: relative; top:  .3em;"><sub style="font-size: 1.5em;">®</sub></span>Safe, the pioneer
                and world leading
                manufacturer of fire-resistant and security storage for home and office use, is an affiliate of the Master
                Lock Company LLC.
            </p>
            <p class="about-text lh-lg mb-3">Zenorex Marketing Corporation distributes Sentry<span
                    style="position: relative; top:  .3em;"><sub style="font-size: 1.5em;">®</sub></span>Safe products
                nationwide through leading retail organizations such as Ace Hardware, True Value, Handyman,
                National Book Store, Rustan's, Landmark, Metro Gaisano, All Home and S&R Membership Shopping. For at-home
                shopping convenience, Sentry<span style="position: relative; top:  .3em;"><sub
                        style="font-size: 1.5em;">®</sub></span>Safe products
                may be purchased online through <span><a
                        href="https://www.lazada.com.ph/shop/sentrysafe?path=index.htm&lang=en&pageTypeId=1"
                        class="text-decoration-none" target="_blank" style="font-size:15px !important; color: #c61b1f;">
                        Lazada </a></span> (LazMall Flagship Store) and <span><a href="https://shopee.ph/sentrysafeph"
                        target="_blank" class="text-decoration-none" style="font-size:15px !important; color: #c61b1f;">
                        Shopee </a></span> (Shopee Mall). In addition, our products are also sold by account executives
                directly to
                corporate clients and selected end-users.
            </p>
            <p class="about-text lh-lg mb-3">Zenorex Marketing Corporation also carries TITAN<span
                    style="position: relative; top:  .1em;"><sub style="font-size: 1.5em;">®</sub></span> and TITAN<span
                    style="position: relative; top:  .1em;"><sub style="font-size: 1.5em;">®</sub></span>ELITE safes, a line
                of high quality safes that complement the safe range of Sentry<span
                    style="position: relative; top:  .3em;"><sub style="font-size: 1.5em;">®</sub></span>Safe products.
                TITAN<span style="position: relative; top:  .1em;"><sub style="font-size: 1.5em;">®</sub></span> and
                TITAN<span style="position: relative; top:  .1em;"><sub style="font-size: 1.5em;">®</sub></span>ELITE safes
                are
                available in most of the Sentry<span style="position: relative; top:  .3em;"><sub
                        style="font-size: 1.5em;">®</sub></span>Safe channels.
            </p>
            <p class="about-text lh-lg mb-3">In 2020, Zenorex Marketing Corporation introduced X-SENSE<span
                    style="position: relative; top:  -0.2em;"><sub style="font-size: 1.5em;">®</sub></span> smoke alarms,
                a
                premium line of photoelectric smoke alarms, broadening our range of home and office protection products.
                These
                internationally-certified products include long-term batteries and connected options for better protection
                of customers and their assets.
            </p>
        </div>
    </div>


    <br><br><br><br><br>
    <div class="container">
        {{-- <span class="about-zenorex fw-bold">About Us</span><br> --}}
        <span class="vision-mission fw-bold" style="font-size: 35px !important">Vision</span>
    </div>

    {{-- <div class="container p-4 aboutbox">
        <div class="container">
            <div class="row">
              <div class="col-md-3">
               <div class="p-3  text-center">
                    <img src="img/icon-2.png" alt="">
                    <p class="our-mission">Our Mission</p>
               </div>
              </div>
              <div class="col-md-9">
                <p class="p-3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo qui eos exercitationem, nulla eum possimus accusamus doloribus totam consequatur, voluptatem porro hic alias earum quaerat quas quibusdam consectetur recusandae deleniti.</p>
              </div>
            </div>
          </div>
    </div> --}}
    <div class="container position-relative mt-3">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
            <div class="carousel-indicators position-absolute">
                {{-- <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active rounded-circle border" aria-current="true" aria-label="Slide 1"></button> --}}
                {{-- <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="rounded-circle border" aria-label="Slide 2"></button> --}}
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="container py-4 aboutbox">
                        <div class="container">
                            <div class="row gx-0 shadow py-4 d-flex justify-content-center w-100 px-5">
                                <div class="col-md-2">
                                    <div class="py-3 d-md-block d-none">

                                        <img src="img/icon-2.png" alt="" class="mb-2"><br>
                                        {{-- <span class="our-mission fw-bold">Our</span><br> --}}
                                        <span class="our-mission fw-bold ps-3">Vision </span>

                                    </div>

                                    <div class="py-3 text-center d-md-none">

                                        <img src="img/icon-2.png" alt="" class="mb-2"><br>
                                        {{-- <span class="our-mission fw-bold">Our</span><br> --}}
                                        <span class="our-mission fw-bold">Vision </span>

                                    </div>
                                </div>
                                <div class="col-md-10 pt-5 col-p">
                                    <div class="justify">
                                        <p class="py-3 px-3 text-black">
                                            To be the leading and most reliable source of high-quality durable consumer
                                            products in the Philippines.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <!-- <span class="carousel-control-prev-icon d-md-block d-none" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span> -->
      <div class="icon-box" style="margin-right: 30px; padding: 20px; background-color: lightgray; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
        <i class="fa-solid fa-angle-left color-red"></i>
      </div>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <!-- <span class="carousel-control-next-icon d-md-block d-none" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span> -->
      <div class="icon-box" style="margin-left: 30px; padding: 20px; background-color: lightgray; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
        <i class="fa-solid fa-angle-right color-red"></i>
      </div>
    </button> --}}
        </div>
    </div>

    <div class="d-lg-none d-block d-sm-block">
        <br><br><br>
    </div>

    <div class="container box d-lg-none d-block d-sm-block">
        <div class="container contact-mob p-5">
            <div class="bg-light">
                <div class="container p-5">
                    <p class="footer-contact">CONTACT US</p>
                    <p class="footer-context">We'd love to hear from you</p>
                    <div class="containers">
                        <div class="row gy-4 align-items-start">
                            <div class="col-md-4">
                                <input class="form-control" placeholder="Name *" type="text" required="">
                            </div>
                            <div class="col-md-4">
                                <input class="form-control" placeholder="Phone No. *" type="text" required="">
                            </div>
                            <div class="col-md-4">
                                <input class="form-control" placeholder="Email Address *" type="text"
                                    required="">
                            </div>
                        </div>
                        <br>
                        <textarea class="form-control textarea" placeholder="Write a Message"></textarea>
                        <br>
                        <button class="findAbout btns" style="width: 90%;">
    SEND MESSAGE
</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-lg-block d-none d-sm-none">
        <br><br><br><br><br><br><br><br><br><br>
    </div>


    <style>
        .footer-mt {
            margin-top: 20rem;
        }
    </style>
@endsection