@extends('Frontend.layout.main')
@section('title', 'COMPANY')

@section('content')

<style>
    .company-page {
        padding: 80px 0;
    }

    .container {
        width: 85%;
        margin: 0 auto;
    }

    .text-center {
        text-align: center;
    }

    .mb-5 {
        margin-bottom: 3rem;
    }

    .company-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        margin-bottom: 100px;
    }

    .company-image img {
        width: 100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }


    @media (max-width: 992px) {
        .company-grid {
            grid-template-columns: 1fr;
        }

    }
</style>

<section class="page-banner">
    <div class="banner-wave wave-top">
        <svg viewBox="0 0 1440 110" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M0,28 C80,8 190,63 330,38 C640,50 565,60 710,30 C855,10 965,65 1230,58 L1740,0 L0,0 Z"
                fill="#f5fff6" />
            <path
                d="M0,28 C80,8 190,63 330,28 C470,-7 565,58 710,28 C855,8 965,63 1130,28 C1270,-7 1370,58 1440,28 L1440,64 C1370,94 1270,44 1130,64 C965,94 855,44 710,64 C565,94 470,44 330,64 C190,94 80,44 0,64 Z"
                fill="#39B54A" />
        </svg>
    </div>

    <div class="banner-content">
        <h1>COMPANY</h1>
    </div>

    <div class="banner-wave wave-bottom">
        <svg viewBox="0 0 1440 110" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M0,62 C160,25 320,95 480,65 C640,38 800,92 960,62 C1120,32 1280,88 1440,58 L1440,110 L0,110 Z"
                fill="#39B54A" />
            <path
                d="M0,80 C160,43 320,110 480,82 C640,55 800,110 960,80 C1120,50 1280,106 1440,76 L1440,110 L0,110 Z"
                fill="#f5fff6" />
        </svg>
    </div>
</section>



<section class="company-page" style="padding: 80px 0;">
    <div class="company-container container">
        <div class="company-grid">
            <div class="company-image">
                <img src="{{ asset('Frontend/assets/images/factory_view.png') }}" alt="Aashirbad Factory">
            </div>
            <div class="company-content">
                <h2 class="heading-3">Excellence in Animal Nutrition</h2>
                <p class="text-base text-grey">
                    Lorem ipsum dolor sit amet consectetur. Blandit dolor et enim senectus. Eu in morbi sem ut. Bibendum tristique vitae facilisi tortor aliquam dolor sed risus. Tempus arcu leo nulla nisi sed erat aliquam nunc in. Lectus nunc praesent lacus sed in tristique interdum. Eleifend nulla erat ornare viverra amet eget. Sed eu sed et bibendum sed ridiculus potenti.
                    Enim sed rhoncus id habitasse arcu morbi fringilla. Viverra at varius adipiscing mi risus dui. Urna netus lacus lobortis nulla. Orci mauris nunc proin tempus auctor tellus. Ac volutpat vel vulputate. lobortis nulla. Orci mauris nunc proin tempus auctor tellus. </p>
            </div>
        </div>
    </div>

    <div class="products-showcase container">
        <div class="text-center mb-5">
            <h2 class="heading-3">Our Products</h2>
            <p class="text-base text-grey">Lorem ipsum dolor sit amet consectetur. Blandit dolor et enim senectus.</p>
        </div>

        <div class="card-container layout-4">
            <div class="card">
                <img class="card-p-img" src="{{ asset('Frontend/assets/images/product-c.jpg') }}" alt="Poshilo BO">
                <div style="text-align: center;">
                    <h3 class="sub-title text-primary">Poshilo BO</h3>
                    <p class="text-sm-body text-grey">Lorem ipsum dolor sit amet consectetur. Sed hac lectus feugiat mus pulvinar. Hendrerit id porttitor purus eget neque quis gravida mi libero.</p>
                </div>
            </div>


            <div class="card">
                <img class="card-p-img" src="{{ asset('Frontend/assets/images/product-c.jpg') }}" alt="Poshilo BO">
                <div style="text-align: center;">
                    <h3 class="sub-title text-primary">Poshilo BO</h3>
                    <p class="text-sm-body text-grey">Lorem ipsum dolor sit amet consectetur. Sed hac lectus feugiat mus pulvinar. Hendrerit id porttitor purus eget neque quis gravida mi libero.</p>
                </div>
            </div>

            <div class="card">
                <img class="card-p-img" src="{{ asset('Frontend/assets/images/product-c.jpg') }}" alt="Poshilo BO">
                <div style="text-align: center;">
                    <h3 class="sub-title text-primary">Poshilo BO</h3>
                    <p class="text-sm-body text-grey">Lorem ipsum dolor sit amet consectetur. Sed hac lectus feugiat mus pulvinar. Hendrerit id porttitor purus eget neque quis gravida mi libero.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-p-img" src="{{ asset('Frontend/assets/images/product-c.jpg') }}" alt="Poshilo BO">
                <div style="text-align: center;">
                    <h3 class="sub-title text-primary">Poshilo BO</h3>
                    <p class="text-sm-body text-grey">Lorem ipsum dolor sit amet consectetur. Sed hac lectus feugiat mus pulvinar. Hendrerit id porttitor purus eget neque quis gravida mi libero.</p>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection