@extends('layouts.web.master')

@section('title')
{{ __('About Us') }}
@endsection

@section('main_content')

<section class="banner-bg p-4">
<div class="container">
<p class="mb-0 fw-bolder custom-clr-dark">
{{ __('Home') }} <span class="font-monospace">></span> {{ __('About Us') }}
</p>
</div>
</section>

{{-- ================= ABOUT SECTION ================= --}}

<section class="about-section">
<div class="container">

<div class="row align-items-center g-5">

<div class="col-lg-6">

<div class="about-content">

<h6 class="about-subtitle">
{{ $page_data['headings']['about_short_title'] ?? '' }}
</h6>

<h2 class="about-title">
{{ $page_data['headings']['about_title'] ?? '' }}
</h2>

<p>
{{ $page_data['headings']['about_desc_one'] ?? '' }}
</p>

</div>

</div>

<div class="col-lg-6">

<div class="about-image-wrapper">

<img
src="{{ asset($page_data['about_image'] ?? 'assets/images/icons/img-upload.png') }}"
alt="About Image"
class="about-img"
/>

</div>

</div>

</div>

<div class="about-content mt-4">

<p>
{{ $page_data['headings']['about_desc_two'] ?? '' }}
</p>

<ul class="about-list">

@foreach ($page_data['headings']['about_us_options_text'] ?? [] as $about_us_options_text)

<li>
{{ $about_us_options_text ?? '' }}
</li>

@endforeach

</ul>

</div>

</div>
</section>

{{-- ================= FEATURE ================= --}}
@include('web.components.feature')

{{-- ================= PRICING ================= --}}
@include('web.components.plan')

{{-- ================= SIGNUP ================= --}}
@include('web.components.signup')

<style>

/* ================= SECTION ================= */

.about-section{
padding:80px 0;
background:#fafbff;
}


/* subtitle */

.about-subtitle{
color:#4f46e5;
font-weight:600;
font-size:15px;
margin-bottom:10px;
}


/* title */

.about-title{
font-size:36px;
font-weight:700;
margin-bottom:18px;
line-height:1.3;
}


/* content */

.about-content{
font-size:16px;
line-height:1.9;
color:#444;
}


/* paragraph */

.about-content p{
text-align:justify;
margin-bottom:18px;
}


/* ================= IMAGE ================= */

.about-image-wrapper{
width:90%;
margin-left:auto;
}

.about-img{
width:100%;
border-radius:16px;
box-shadow:0 20px 40px rgba(0,0,0,0.08);
transition:0.3s;
}

.about-img:hover{
transform:scale(1.02);
}


/* ================= LIST ================= */

.about-list{
margin-top:15px;
padding-left:0;
list-style:none;
}

/* hilangkan bullet bawaan browser */

.about-list li{
list-style:none;
position:relative;
padding-left:32px;
margin-bottom:12px;
line-height:1.8;
text-align:justify;
}

/* cegah marker bawaan */

.about-list li::marker{
content:"";
}

/* custom bullet */

.about-list li::before{
content:"✓";
position:absolute;
left:0;
top:2px;
font-size:18px;
font-weight:bold;
color:#10b981;
}


/* ================= RESPONSIVE ================= */

@media (max-width:991px){

.about-image-wrapper{
width:100%;
margin-top:20px;
}

.about-title{
font-size:28px;
}

}

</style>

@endsection