213 lines
2.9 KiB
PHP
213 lines
2.9 KiB
PHP
@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 |