155 lines
11 KiB
PHP
155 lines
11 KiB
PHP
@include('partials.homepage.head')
|
|
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="">
|
|
@include('partials.homepage.header')
|
|
<!-- start page title -->
|
|
<section class="half-section page-title-center-alignment cover-background top-space-margin">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 text-center position-relative page-title-large">
|
|
<h1 class="d-inline-block fw-600 ls-minus-1px text-dark-gray mb-15px">Kontak</h1>
|
|
</div>
|
|
<div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
|
|
<ul>
|
|
<li><a href="{{route('homepage.landing')}}">Beranda</a></li>
|
|
<li><a href="{{route('homepage.contacts.index')}}">Kontak</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end page title -->
|
|
<!-- start section -->
|
|
<section class="bg-gradient-very-light-gray">
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center" data-anime='{ "el": "childs", "translateY": [0, 0], "perspective": [1200, 1200], "scale": [1.05, 1], "rotateX": [50, 0], "opacity": [0,1], "duration":600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<!-- start features box item -->
|
|
<div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
|
|
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
|
|
<div class="feature-box-icon mb-30px">
|
|
<img src="{{asset('assets/defaults/maps-icon-2.svg')}}" class="h-70px" alt="">
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-600 text-dark-gray mb-5px fs-18 ls-minus-05px">Alamat</span>
|
|
<p>{{$app->contact_address}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end features box item -->
|
|
<!-- start features box item -->
|
|
<div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
|
|
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
|
|
<div class="feature-box-icon mb-30px">
|
|
<img src="{{asset('assets/defaults/email-icon-2.svg')}}" class="h-70px" alt="">
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-600 text-dark-gray mb-5px fs-18 ls-minus-05px">Email</span>
|
|
<p>{{$app->contact_email}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end features box item -->
|
|
<!-- start features box item -->
|
|
<div class="col icon-with-text-style-07 transition-inner-all xs-mb-30px">
|
|
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
|
|
<div class="feature-box-icon mb-30px">
|
|
<img src="{{asset('assets/defaults/phone-icon-2.svg')}}" class="h-70px" alt="">
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="d-inline-block fw-600 text-dark-gray mb-5px fs-18 ls-minus-05px">Nomor Telepon</span>
|
|
<p>{{$app->contact_phone}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end features box item -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start section -->
|
|
<section class="half-section pt-0">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 text-center elements-social social-icon-style-04">
|
|
<ul class="large-icon dark">
|
|
<li><a class="facebook" href="{{filled($app->contact_facebook) ? $app->contact_facebook : 'javascript:void(0);'}}" {{filled($app->contact_facebook) ? 'target="_blank"' : ''}}><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
|
|
<li><a class="twitter" href="{{filled($app->contact_twitter) ? $app->contact_twitter : 'javascript:void(0);'}}" {{filled($app->contact_twitter) ? 'target="_blank"' : ''}}><i class="fa-brands fa-twitter"></i><span></span></a></li>
|
|
<li><a class="instagram" href="{{filled($app->contact_instagram) ? $app->contact_instagram : 'javascript:void(0);'}}" {{filled($app->contact_instagram) ? 'target="_blank"' : ''}}><i class="fa-brands fa-instagram"></i><span></span></a></li>
|
|
<li><a class="youtube" href="{{filled($app->contact_youtube) ? $app->contact_youtube : 'javascript:void(0);'}}" {{filled($app->contact_youtube) ? 'target="_blank"' : ''}}><i class="fa-brands fa-youtube"></i><span></span></a></li>
|
|
<li><a class="whatsapp" href="{{filled($app->contact_whatsapp) ? $app->contact_whatsapp : 'javascript:void(0);'}}" {{filled($app->contact_whatsapp) ? 'target="_blank"' : ''}}><i class="fa-brands fa-whatsapp"></i><span></span></a></li>
|
|
<li><a class="telegram" href="{{filled($app->contact_telegram) ? $app->contact_telegram : 'javascript:void(0);'}}" {{filled($app->contact_telegram) ? 'target="_blank"' : ''}}><i class="fa-brands fa-telegram"></i><span></span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start section -->
|
|
<section class="p-0 mb-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-4">
|
|
<img src="{{asset('assets/defaults/diskominfo-building.jpg')}}"
|
|
alt="Building"
|
|
style="width: 100%; height: 500px; object-fit: cover; border-radius: 8px;">
|
|
</div>
|
|
<div class="col-8">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3432.141752620895!2d107.44145707430351!3d-6.554894664077222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e690e51c899aa9f%3A0x6005e63423ceedc8!2sDiskominfo%20Kab.%20Purwakarta!5e1!3m2!1sen!2sid!4v1743259282707!5m2!1sen!2sid"
|
|
width="100%"
|
|
height="500"
|
|
style="border:0;"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start section -->
|
|
<section class="p-0 mb-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12">
|
|
<div class="bg-very-light-gray p-7 border-radius-8px">
|
|
<form action="{{route('homepage.contacts.receive.message')}}" method="post" class="contact-form-style-05">
|
|
@csrf
|
|
<div class="col-12 text-center mb-5" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<span class="text-base-color fw-600 mb-5px text-uppercase d-block">Lebih mudah</span>
|
|
<h2 class="text-dark-gray fw-700 ls-minus-1px">Hubungi kami</h2>
|
|
</div>
|
|
<div class="row justify-content-center" data-anime='{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 500, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<div class="col-md-6 sm-mb-30px">
|
|
<input class="mb-30px form-control bg-white required" type="text" name="name" placeholder="Nama Anda*" />
|
|
<input class="mb-30px form-control bg-white required" type="email" name="email" placeholder="Alamat email Anda*" />
|
|
<input class="form-control bg-white" type="tel" name="phone_number" placeholder="Nomor telepon Anda*" />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<textarea class="h-100 form-control bg-white" name="message" cols="40" rows="6" placeholder="Pesan Anda"></textarea>
|
|
</div>
|
|
<div class="col-md-6 mt-30px sm-mt-20px">
|
|
<p class="mb-0 fs-13 lh-24 text-center text-md-start">Kami berkomitmen untuk melindungi privasi Anda. Kami tidak akan pernah mengumpulkan informasi tentang Anda..</p>
|
|
</div>
|
|
<div class="col-md-6 text-center text-md-end mt-30px sm-mt-20px">
|
|
<input type="hidden" name="redirect" value="">
|
|
<button class="btn btn-medium btn-dark-gray btn-box-shadow btn-rounded" type="submit">Kirim pesan</button>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-results mt-20px d-none"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
<!-- start footer -->
|
|
@include('partials.homepage.footer')
|