@extends('frontEnd.masterNew')

@section('title', 'Home Page')

@section('body')

    <section class="top-space-margin p-0 full-screen md-h-600px sm-h-500px section-dark" data-parallax-background-ratio="0.8" style="background-image: url('{{asset('/')}}fontEndNew/assets/images/demo-accounting-bg.jpg')">
        <div class="container h-100">
            <div class="row align-items-center h-100">
                <div class="col-xl-7 col-md-9 col-sm-9 position-relative text-white" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [30, 0], &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeInOutSine&quot; }">
                    <div class="fs-80 lh-75 sm-fs-65 fw-600 mb-20px text-shadow-large ls-minus-2px">High Motivation & Deep Commitment</div>
                    <div>
                        <span class="opacity-5 fs-20 w-70 md-w-85 mb-25px fw-300 d-inline-block">Discover premium garments accessories for all your fashion needs, enhancing style and comfort effortlessly.</span>
                    </div>
                </div>
            </div>
        </div>
    </section>




    <section class="bg-very-light-gray pb-0" id="services">
        <div class="container">
            <div class="row mb-8 sm-mb-10">
                <div class="col-12 tab-style-08">
                    <div class="tab-content">

                        <div class="tab-pane fade in active show" id="tab_eight1">
                            <div class="row align-items-center justify-content-center g-lg-0">

                                <div class="col-xl-4 col-lg-5 offset-lg-1 col-md-6 text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                    <div class="mb-20px">
                                        <div class="separator-line-1px w-50px bg-base-color d-inline-block align-middle me-10px opacity-2"></div>
                                        <span class="d-inline-block text-dark-gray align-middle fw-500 fs-20 ls-minus-05px">Our Business Platform</span>
                                    </div>
                                    <h4 class="fw-700 text-dark-gray ls-minus-1px md-mb-20px">Primary Trims & Accessories.</h4>
                                    <p class="mb-35px md-mb-25px">Explore our top-quality garments accessories as a leading manufacturer and supplier, offering durable leather patches and elegant narrow fabrics. Our products are designed to enhance the style and longevity of your fashion creations.</p>
                                    <a href="{{route('product.category', ['id' => 1])}}" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600">Learn more<span class="bg-base-color text-white"><i class="bi bi-arrow-right-short icon-extra-medium"></i></span></a>
                                </div>
                                <div class="col-md-6 sm-mb-30px position-relative overflow-hidden" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#005153&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:50}">
                                    <img src="{{asset('/')}}fontEndNew/assets/images/new/pta.jpg" alt class="w-100 border-radius-6px">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="bg-very-light-gray pb-0" id="services">
        <div class="container">
            <div class="row mb-8 sm-mb-10">
                <div class="col-12 tab-style-08">
                    <div class="tab-content">

                        <div class="tab-pane fade in active show" id="tab_eight1">
                            <div class="row align-items-center justify-content-center g-lg-0">

                                <div class="col-xl-4 col-lg-5 offset-lg-1 col-md-6 text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                    <div class="mb-20px">
                                        <div class="separator-line-1px w-50px bg-base-color d-inline-block align-middle me-10px opacity-2"></div>
                                        <span class="d-inline-block text-dark-gray align-middle fw-500 fs-20 ls-minus-05px">Our Business Platform</span>
                                    </div>
                                    <h4 class="fw-700 text-dark-gray ls-minus-1px md-mb-20px">Primary Leather Goods & Accessories.</h4>
                                    <p class="mb-35px md-mb-25px">Discover our premium leather goods accessories, including stylish wallets, durable belts, elegant key rings, sleek cardholders, and versatile bags, crafted for quality and sophistication. </p>
                                    <a href="" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600">Learn more<span class="bg-base-color text-white"><i class="bi bi-arrow-right-short icon-extra-medium"></i></span></a>
                                </div>
                                <div class="col-md-6 sm-mb-30px position-relative overflow-hidden" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#005153&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:50}">
                                    <img src="{{asset('/')}}fontEndNew/assets/images/new/lether.jpg" alt class="w-100 border-radius-6px">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="bg-very-light-gray pb-0" id="services">
        <div class="container">
            <div class="row mb-8 sm-mb-10">
                <div class="col-12 tab-style-08">
                    <div class="tab-content">

                        <div class="tab-pane fade in active show" id="tab_eight1">
                            <div class="row align-items-center justify-content-center g-lg-0">

                                <div class="col-xl-4 col-lg-5 offset-lg-1 col-md-6 text-center text-md-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                    <div class="mb-20px">
                                        <div class="separator-line-1px w-50px bg-base-color d-inline-block align-middle me-10px opacity-2"></div>
                                        <span class="d-inline-block text-dark-gray align-middle fw-500 fs-20 ls-minus-05px">Our Business Platform</span>
                                    </div>
                                    <h4 class="fw-700 text-dark-gray ls-minus-1px md-mb-20px">Bondhon Diagnostic Center</h4>
                                    <p class="mb-35px md-mb-25px">Welcome to our state-of-the-art medical diagnostic center, providing accurate diagnoses with advanced technology and personalized care for your health and well-being. Your health, our priority.</p>
                                    <a href="" class="btn btn-large btn-rounded with-rounded btn-white btn-box-shadow fw-600">Learn more<span class="bg-base-color text-white"><i class="bi bi-arrow-right-short icon-extra-medium"></i></span></a>
                                </div>
                                <div class="col-md-6 sm-mb-30px position-relative overflow-hidden" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#005153&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:50}">
                                    <img src="{{asset('/')}}fontEndNew/assets/images/new/clinic.jpg" alt class="w-100 h-100 border-radius-6px">
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection