@extends('layouts.main-app')

@section('title', 'About Us')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

    <style>
        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }

        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        .hidden {
            display: block;
            opacity: 0;
            transform: translateY(20px); /* Optional: adds a slide effect */
            transition: opacity 0.3s ease, transform 0.3s ease; /* Transition effect */ 
            }   
                    
        .ubuntu-font {
            font-family: 'Ubuntu', sans-serif;
        }

        .swiper {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
            height: 300px;
        }

        .swiper-slide img {
            width: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .swiper-button-next {
            color:white;
        }

        .swiper-button-prev {
            color:white;
            
        }


       
  </style>
      



    <div class="">

        <!-- About header Section -->
        <section class="bg-cover bg-center h-64" style="background-image: url('https://via.placeholder.com/1200x400');">
            <div class="h-full w-full flex items-center justify-center bg-gray-900 bg-opacity-50">
                <h1 class="text-4xl text-white font-bold">About Us Mission and Vision</h1>
            </div>
        </section>






        {{-- section brand --}}
        <div class="container mx-auto p-6 max-w-screen-lg mb-20">
            <div class="  p-10">
                    <!-- Image and Arrows -->
                <div class="swiper mySwiper scale-125">
                    <div class="swiper-wrapper  ">
                        <div class="swiper-slide px-20">
                            <img src="{{ asset('assets/about/screenshot_2.webp') }}" alt="Safety Helmet" class="bg-gray-200">
                        </div>
                        <div class="swiper-slide">
                            <img src="{{ asset('assets/footerlogo.webp') }}" alt="Safety Helmet">
                        </div>
                    </div>  
                    <div class="swiper-button-next scale-50 bg-black text rounded-full p-8  "></div>
                    <div class="swiper-button-prev scale-50 bg-black text rounded-full p-8  "></div>
                </div>
                    <!-- Product Information -->
                <div class="mt-10 container max-w-screen-sm mx-auto" >
                        <h1 class="text-3xl font-bold ubuntu-font mb-10">Safety Helmet</h1>
                    <div class="space-y-8">
                            <div class=" flex justify-around items-start ">
                                <h2 class="flex-1 font-semibold">Model</h2>
                                <p class="flex-1">SMN Titan</p>
                            </div>
                        <hr class="border-gray-500 my-4" />
                            <div class=" flex justify-around items-start ">
                                <h2 class="flex-1 font-semibold mt-4">Specifications/Features</h2>
                                <ul class="flex-1 list-disc list-inside text-gray-700">
                                    <li>Electrically insulating helmet for use on low voltage installations</li>
                                    <li>5 cooling vents for maximum air circulation</li>
                                    <li>6-point ratchet suspension with sweat band</li>
                                    <li>4-point chin straps</li>
                                    <li>Fit size: 52-63cm</li>
                                    <li>Weight: 425 g</li>
                                </ul>  
                            </div>
                        <hr class="border-gray-500 my-4" />
                            <div class="flex justify-around items-start">
                                <h2 class="flex-1 font-semibold">Approved/Standard</h2>
                                <div class="flex-1">
                                    <p>CE</p>
                                    <p>EN 397:2012 + A1:2012</p>
                                    <p>EN 50365:2022</p>
                                    <p>ANSI Z89.1 Type 1 Class C</p>
                                    <p>AS/NZS 1801:1997</p>
                                </div>
                            </div>
                        <hr class="border-gray-500 my-4" />
                            <div class="flex justify-around items-start">
                                <h2 class="flex-1 font-semibold">Size</h2>
                                <div class="flex-1">
                                    <p>Adjustable</p>
                                </div>
                            </div>
                        <hr class="border-gray-500 my-4" />
                            <div class="flex justify-around items-start">
                                <h2 class="flex-1 font-semibold">Colour</h2>
                                <div class="flex-1">
                                    <p>White,Custom colours available on request</p>
                                </div>
                            </div>
                        <hr class="border-gray-500 my-4" />
                    </div>
                </div>
            </div>
        </div>
</div>



        @include('layouts.footer')


    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            loop: true,
        });
    </script>
@endsection