@extends('/layouts/application')

@section('title', 'Products')

@section('main')
<div class="md:px-[60px] 2xl:px-[150px] xl:px-[100px] px-[25px] max-w-screen-2xl mx-auto">
    <!--Cosmetology-->
    <div>
        <div class="my-8 mx-8 flex flex-col item-center">
            <p class="text-[36px] font-semibold text-green-900">
                Cosmetology
            </p>
            <p class="text-[18px] leading-[2.5] my-8">
                From A to Z 
            </p>
        </div>
        <div class="flex flex-col md:flex-row mt-2 md:pt-8 md:space-x-8 px-2 ">
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/HairTransplantMachine.png') }}" class="w-80" alt="HairTransplantMachine">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Hair Transplant Machine
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/Viewer.png') }}" class="w-80" alt="Viewer">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Viewer
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px] md:opacity-0 md:block hidden ">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/product.png') }}" class="w-80" alt="product">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Universal Piezo Driver Module
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--Dentistry-->
    <div class="mt-[100px]">
        <div class="my-8 mx-8 flex flex-col item-center">
            <p class="text-[36px] font-semibold text-green-900">
                Dentistry
            </p>
            <p class="text-[18px] leading-[2.5] my-8">
                From A to Z 
            </p>
        </div>
        <div class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-8 px-2">
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/IntraoralCamera.png') }}" class="w-80" alt="IntraoralCamera">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Intraoral Camera
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/DentalUnitControlSystem.png') }}" class="w-80" alt="DentalPowerModule">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Dental Power Module
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/DentalPowerModule.png') }}" class="w-80" alt="DentalUnitControlSystem">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Dental Unit Control System
                    </p>
                </div>
            </div>
        </div>
         <div class="flex flex-col md:flex-row mt-2 md:space-x-8 md:mt-8 px-2">
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/LEDDentalCuringLight.png') }}" class="w-80" alt="LEDDentalCuringLight">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        LED Dental Curing Light
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/UniversalPiezoDriverModule.png') }}" class="w-80" alt="UniversalPiezoDriverModule">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Universal Piezo Driver Module
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px] md:opacity-0 md:block hidden ">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/product.png') }}" class="w-80" alt="product">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Universal Piezo Driver Module
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--Industry-->
    <div class="mt-[100px]">
        <div class="my-8 mx-8 flex flex-col item-center">
            <p class="text-[36px] font-semibold text-green-900">
                Industry
            </p>
            <p class="text-[18px] leading-[2.5] my-8">
                From A to Z 
            </p>
        </div>
        <div class="flex flex-col md:flex-row mt-2 md:mt-8 md:space-x-8 px-2">
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/Bioscope.png') }}" class="w-80" alt="Bioscope">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Bioscope
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/MicroViewer.png') }}" class="w-80" alt="MicroViewer">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Micro Viewer
                    </p>
                </div>
            </div>
            <div class="flex item-start px-4 md:h-auto h-[600px]">
                <div class="flex flex-col items-center md:mb-2 mb-[150px]">
                    <img src="{{ asset('fve-web/public/images/products/Stand.png') }}" class="w-80" alt="Stand">
                    <p class="text-center text-[18px] leading-[2.5] mt-4">
                        Stand
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection