@extends('layouts.master')

@section('content')
<!--begin::Content-->
<div class="main-container">
    <section class="banner-container">
        <div style="height: 400px;" class="banner-image">
            <iframe width="100%" height="100%"
                src="https://www.youtube.com/embed/tylnVcOa4wg?modestbranding=1&showinfo=0&rel=0&controls=0"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen>
            </iframe>
        </div>
    </section>

    {!! $page->body !!}

    @php
        $journeyImg1 = asset('storage/pages/journey-1.jpg');
        $journeyImg3 = asset('storage/pages/journey-3.jpg');
        $journeyImg4 = asset('storage/pages/journey-4.jpg');
        $journeyImg5 = asset('storage/pages/journey-5.jpg');
    @endphp

    <section id="awards " class="tw-py-20 container-fluid">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="row">
                <div class="col-md-11 col-lg-10 col-xl-10 m-auto">
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="d-flex justify-content-between" style="border-bottom: 2px solid #F4910F;padding-bottom: 10px;">
                                <div style="color: #F4910F;font-size: 20px;font-weight: bolder;text-transform: uppercase;">Milestones on Our Journey</div>
                                <div class="d-flex flex-row align-items-end">
                                    <div class="mx-2 tw-text-d-orange tw-fw-600" style="">2019</div>
                                    <div class="mx-2 tw-text-d-green tw-fw-600" style="">2020</div>
                                    <div class="mx-2 tw-text-d-green tw-fw-600" style="">2021</div>
                                    <div class="mx-2 tw-text-d-green tw-fw-600" style="">2022</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-inner tw-mt-30 tw-px-40">
                        <div class="carousel-item active">
                            <div class="timeline-grid">
                                <div class="timeline-card">
                                    <div class="image w-25">
                                        <img src="{{ $journeyImg1 }}" alt="" height="100%" style="border-radius: 6px;object-fit: inherit;">
                                    </div>
                                    <div class="content">
                                        <span class="tw-fs-14 tw-fw-600 tw-text-d-orange">EARLY 2019</span>
                                        <div class="tw-fs-16 tw-fw-600">The IDEA</div>
                                        <p>Idea for F4F emerged in early 2019 and by Dec, 2019, F4F was legally incorporated </p>
                                    </div>
                                </div>
                                <div class="timeline-card">
                                    <div class="image"> <img src="{{ $journeyImg3 }}" alt="" height="100%" width="100%" style="border-radius: 6px;object-fit: inherit;"></div>
                                    <div class="content">
                                        <span class="tw-fs-14 tw-fw-600 tw-text-d-orange">JAN 2020</span>
                                        <div class="tw-fs-16 tw-fw-600">FULL STEAM AHEAD</div>
                                        <p>We transitioned our first parcel of barren land into biodiverse green cover, </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="timeline-grid" style="padding: 0px 50px;">

                                <div class="timeline-card">
                                    <div class="image"> <img src="{{ $journeyImg4 }}" alt="" height="100%" width="100%" style="border-radius: 6px;object-fit: inherit;"></div>
                                    <div class="content">
                                        <span class="tw-fs-14 tw-fw-600 tw-text-d-orange">July 2020</span>
                                        <div class="tw-fs-16 tw-fw-600">PROTECTING FORESTS</div>
                                        <p>F4F in collaboration with researchers at the University of California Berkeley and J-PAL began work on a pilot program to assess the PES model for forest protection and reforestation in Raigad, Maharashtra with a 120 farmers across 24 villages. The pilot is funded by the King Climate Action Initiative at J-PAL</p>
                                    </div>
                                </div>
                                <div class="timeline-card">
                                    <div class="image"> <img src="{{ $journeyImg5 }}" alt="" height="100%" width="100%" style="border-radius: 6px;object-fit: inherit;"></div>
                                    <div class="content">
                                        <span class="tw-fs-14 tw-fw-600 tw-text-d-orange">JAN 2021</span>
                                        <div class="tw-fs-16 tw-fw-600">SCALING UP</div>
                                        <p>F4F began working with Gram Sabhas in Gadchiroli District Maharashtra to implement a large-scale reforestation and forest protection program across 30,000 acres that will help 8000 tribal households</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="timeline-grid" style="padding: 0px 50px;">

                                <div class="timeline-card">
                                    <div class="image"> <img src="{{ $journeyImg5 }}" alt="" height="100%" width="100%" style="border-radius: 6px;object-fit: inherit;"></div>
                                    <div class="content">
                                        <span class="tw-fs-14 tw-fw-600 tw-text-d-orange">JAN 2021</span>
                                        <div class="tw-fs-16 tw-fw-600">SCALING UP</div>
                                        <p>F4F began working with Gram Sabhas in Gadchiroli District Maharashtra to implement a large-scale reforestation and forest protection program across 30,000 acres that will help 8000 tribal households</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev tw-text-black tw-w-1p" href="#carouselExampleControls" role="button" data-slide="prev">
                            &#10094;
                        </a>
                        <a class="carousel-control-next tw-text-black tw-w-1p" href="#carouselExampleControls" role="button" data-slide="next">
                            &#10095;
                        </a>
                    </div>
                </div>

            </div>

        </div>
    </section>
    <!-- container-fluid Close -->
</div>
<!--end::Content-->
@endsection