@extends('welcome.welcome-layout')
@section('style')
	<style>
		.banner-sec-hero {
			background: url('{{ asset("images/welcome-images/bg-image-wel.jpg") }}') center center / cover no-repeat;
			width: 100%;
			height: 85vh;
			display: flex;
			justify-content: left;
			align-items: end;
			padding-bottom: 6rem;
		}
	</style>
@endsection('style')

@section('content')
	<section class="banner-sec-hero">
		<div class="container">
			<div class="row banner-content">
				<div class="col-md-8">
					<h1 class="text-white text-uppercase fw-bold mb-md-4 mb-4">Welcome to</h1>
					<h3 class="text-white text-uppercase fw-bold mb-4">Choices Home for Children</h3>
					<h6 class="text-white fw-bold">We are delighted to have you with us.</h6>
				</div>
			</div>
		</div>
	</section>
	<section class="welcome_main py-5">
		<div class="container py-4">
			<div class="row">
				<!-- <a href="{{url('welcome/logout')}}" class="">Logout</a> -->
			</div>
			<div class="col-md-12 text-center">
				<p class="h5 text-dark mb-4">Congratulations <b>{{ucwords($name)}}</b> and once again welcome to <b>{{ucwords($companyName)}}</b>. We're confident that we'll all work well together in the weeks and months to come, and we hope you'll always feel comfortable asking us for any help you may need. By building a strong working relationship, we will be able to achieve better outcomes for the children in our care.</p>
				<p class="h5 pt-4 mb-4 text-dark">The links below will help you get to know a little more about who we are and how we operate as a company. However, before you get started getting to know more about us, we would like you to start by viewing the company agreements that we require you to complete!</p>
				<div class="row pt-3 justify-content-center">
					<div class="col-xl-3 col-md-4">
						<a class="btn btn-block dark_btn text-white border-0 mt-3" href="{{ url('welcome/agreements/list')}}">Company Agreements </a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="about_us py-5 my-5" id="about_us">
		<div class="container-fluid">
			<div class="row px-3">
				<div class="col-lg-6 pr-md-5">
					<img class="about_us_img" src="{{ asset('images/welcome-images/about_us.png') }}" alt="About Us" width="100%">
				</div>
				<div class="col-lg-6 px-lg-5">
					<div class="about_us_content">
						<h2 class="mb-sm-5 mb-3">ABOUT <span class="us-outlined">US</span></h2>
						<p class="mb-4">At Choices, we provide safe, stable and nurturing homes for children who need care, understanding and support. Our mission is simple but powerful: to create a positive and lasting impact in the lives of the young people we look after.</p>
						<p class="mb-4 pb-3">We believe that every child deserves the chance to thrive, regardless of their background or past experiences. That is why our homes are built around compassion, consistency and high standards of care. We do not just offer a place to stay, we offer a place to grow, heal and be heard.</p>
						<a href="{{ url('welcome/about-us')}}" class="dark_btn text-white px-5">View More <img class="arrow" src="{{ asset('images/welcome-images/arrow-ryt.svg') }}" alt="about team"> </a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- <section class="about_team py-5 my-5" id="about_team">
    <div class="container about_us_inner px-0">
      <div class="row px-3 py-4 align-items-center">
        <div class="col-lg-6 px-md-5">
          <div class="about_us_content ">
            <h2 class="mb-4">MEET TEAM</h2>
            <p class="mb-4">Venenatis neque amet cras fringilla eu sit sit. Aliquam libero egestas mi nulla tincidunt libero nunc congue. Commodo lectus eget maecenas urna a cursus sit egestas iaculis.</p>
            <button href="#" class="dark_btn text-white">See Team Memeber </button>
          </div>
        </div>
        <div class="col-lg-6 pl-lg-5 pr-lg-3">
          <img class="about_us_img_team" src="{{ asset('images/welcome-images/about_team.jpg') }}" alt="about team" width="100%">
        </div>
      </div>
    </div>
  </section>
  <section class="gallery-main mb-5" id="gallery">
    <div class="container">
      <div class="row mb-4 align-items-center">
        <div class="col-sm-6 mb-4">
          <h2 class="">Gallery</h2>
        </div>
        <div class="col-sm-6 text-end d-flex justify-content-sm-end mb-4">
          <button href="#" class="dark_btn text-white px-5">See All <img class="arrow" src="{{ asset('images/welcome-images/arrow-ryt.svg') }}" alt="about team"> </button>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="gallery-imgs">
        <div class="row">
          <div class="col-md-4 mb-4">
            <div class="image-container-new">
              <img src="{{ asset('images/welcome-images/g-imgs.jpg') }}" alt="Group Tour" class="gallery-img" width="100%" height="100%">
              <div class="gradient-overlay">
                <p class="overlay-text">Group tour of Hill Garden</p>
              </div>
            </div>
          </div>
          <div class="col-md-8 pl-md-1">
            <div class="row mb-md-3">
              <div class="col-md-12 mb-4">
                <div class="image-container-new">
                  <img src="{{ asset('images/welcome-images/g-imgs2.jpg') }}" alt="Group Tour" class="gallery-img" width="100%" height="100%">
                  <div class="gradient-overlay">
                    <p class="overlay-text">Group tour of Hill Garden</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 pr-md-2 mb-4">
                <div class="image-container-new">
                  <img src="{{ asset('images/welcome-images/g-imgs3.jpg') }}" alt="Group Tour" class="gallery-img" width="100%" height="100%">
                  <div class="gradient-overlay">
                    <p class="overlay-text">Group tour of Hill Garden</p>
                  </div>
                </div>
              </div>
              <div class="col-md-6 pl-md-2 mb-4">
                <div class="image-container-new">
                  <img src="{{ asset('images/welcome-images/g-imgs4.jpg') }}" alt="Group Tour" class="gallery-img" width="100%" height="100%">
                  <div class="gradient-overlay">
                    <p class="overlay-text">Play with Clay</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section> -->
@endsection('content')