294 lines
14 KiB
PHP
Executable File
294 lines
14 KiB
PHP
Executable File
@extends('layouts.client')
|
|
@section('styles')
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table td {
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
table td:nth-child(2) {
|
|
text-align: right;
|
|
}
|
|
|
|
table td span {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
@endsection
|
|
@section('app')
|
|
<main>
|
|
<!--? slider Area Start-->
|
|
<div class="slider-area position-relative fix" id="home">
|
|
<div class="slider-active">
|
|
<!-- Single Slider -->
|
|
<div class="single-slider slider-height d-flex align-items-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-8 col-lg-9 col-md-11 col-sm-10">
|
|
<div class="hero__caption">
|
|
<span data-animation="fadeInUp" data-delay="0.2s">{{ setting()->name }}</span>
|
|
<h1 data-animation="fadeInUp" data-delay="0.5s">Gaya Terbaik untuk Tampil Rapi dan
|
|
Percaya Diri</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Single Slider -->
|
|
<div class="single-slider slider-height d-flex align-items-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-8 col-lg-9 col-md-11 col-sm-10">
|
|
<div class="hero__caption">
|
|
<span data-animation="fadeInUp" data-delay="0.2s">{{ setting()->name }}</span>
|
|
<h1 data-animation="fadeInUp" data-delay="0.5s">Gaya Terbaik untuk Tampil Rapi dan
|
|
Percaya Diri</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="thumb-content-box">
|
|
<div class="thumb-content">
|
|
<h3>buat janji sekarang</h3>
|
|
<a href="https://wa.me/{{ setting()->contact_number }}?text={{ urlencode('Halo, saya ingin booking cukur. Apakah ada jadwal tersedia?') }}"
|
|
target="_blank">
|
|
<i class="fas fa-long-arrow-alt-right"></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="about-area section-padding30 position-relative" id="about">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 col-md-11">
|
|
<!-- about-img -->
|
|
<div class="about-img ">
|
|
<img src="{{ asset('assets/client/img/gallery/about.png') }}" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="about-caption">
|
|
<!-- Section Tittle -->
|
|
<div class="section-tittle section-tittle3 mb-35">
|
|
<span>Tentang Kami</span>
|
|
<h2>Pengalaman Baru dalam Seni Gaya Rambut</h2>
|
|
</div>
|
|
<p class="mb-30 pera-bottom">Kami hadir untuk memberikan layanan potong rambut terbaik dengan
|
|
pendekatan modern dan nyaman. Anda dapat memilih gaya yang sesuai dengan kepribadian Anda
|
|
dengan fleksibilitas yang kami tawarkan.</p>
|
|
<p class="pera-top mb-50">Kami berkomitmen untuk menghadirkan pengalaman potong rambut yang
|
|
memuaskan, mulai dari layanan profesional hingga hasil yang memukau.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- About Shape -->
|
|
<div class="about-shape">
|
|
<img src="{{ asset('assets/client/img/gallery/about-shape.png') }}" alt="">
|
|
</div>
|
|
</section>
|
|
<section class="service-area pb-170" id="service">
|
|
<div class="container">
|
|
<!-- Section Tittle -->
|
|
<div class="row d-flex justify-content-center">
|
|
<div class="col-xl-7 col-lg-8 col-md-11 col-sm-11">
|
|
<div class="section-tittle text-center mb-90">
|
|
<span>Layanan Profesional</span>
|
|
<h2>Layanan Terbaik yang Kami Tawarkan untuk Anda</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Section caption -->
|
|
<div class="row">
|
|
@foreach ($services as $service)
|
|
<div class="col-xl-4 col-lg-4 col-md-6">
|
|
<div class="services-caption mb-30">
|
|
<div class="service-cap text-center">
|
|
<h1>{{ $service->name }}</h1>
|
|
<p class="text-justify">{{ $service->description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="team-area pb-180" id="barber">
|
|
<div class="container">
|
|
<!-- Section Tittle -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-8 col-lg-8 col-md-11 col-sm-11">
|
|
<div class="section-tittle text-center mb-100">
|
|
<span>Tim Profesional</span>
|
|
<h2>Ahli Potong Rambut Terbaik untuk Anda</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row team-active dot-style">
|
|
@foreach ($barber as $item)
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-">
|
|
<div class="single-team mb-80 text-center">
|
|
<div class="team-img">
|
|
<img src="{{ optional($item->attachments()->where('type', 'avatar')->first())->formatted_attachment ? Storage::url('users/' . optional($item->attachments()->where('type', 'avatar')->first())->formatted_attachment) : '' }}"
|
|
alt="image">
|
|
</div>
|
|
<div class="team-caption">
|
|
<h3><a href="#">{{ $item->biography->full_name ?? '-deleted-' }}</a></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="best-pricing section-padding2 position-relative" id="price">
|
|
<div class="container">
|
|
<div class="row justify-content-end">
|
|
<div class="col-xl-7 col-lg-7">
|
|
<div class="section-tittle mb-50">
|
|
<span>Harga Terbaik Kami</span>
|
|
<h2>Kami Menawarkan Harga Terbaik</h2>
|
|
</div>
|
|
<!-- Pricing -->
|
|
<div class="row">
|
|
@if (count($prices) > 7)
|
|
<!-- Kolom pertama untuk 1-7 data pertama -->
|
|
<div class="col-lg-6 col-md-6 col-sm-6">
|
|
<div class="pricing-list">
|
|
<table>
|
|
@foreach ($prices->take(7) as $price)
|
|
<tr>
|
|
<td>{{ $price->name }}</td>
|
|
<td><span>{{ formatToRupiah($price->price) }}</span></td>
|
|
</tr>
|
|
@endforeach
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kolom kedua untuk data sisanya -->
|
|
<div class="col-lg-6 col-md-6 col-sm-6">
|
|
<div class="pricing-list">
|
|
<table>
|
|
@foreach ($prices->slice(7) as $price)
|
|
<tr>
|
|
<td>{{ $price->name }}</td>
|
|
<td><span>{{ formatToRupiah($price->price) }}</span></td>
|
|
</tr>
|
|
@endforeach
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<!-- Tampilkan dalam satu kolom jika data kurang dari atau sama dengan 7 -->
|
|
<div class="col-lg-6 col-md-6 col-sm-6">
|
|
<div class="pricing-list">
|
|
<table>
|
|
@foreach ($prices as $price)
|
|
<tr>
|
|
<td>{{ $price->name }}</td>
|
|
<td><span>{{ formatToRupiah($price->price) }}</span></td>
|
|
</tr>
|
|
@endforeach
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pricing-img">
|
|
<img class="pricing-img1" src="{{ asset('assets/client/img/gallery/pricing1.png') }}" alt="">
|
|
<img class="pricing-img2" src="{{ asset('assets/client/img/gallery/pricing2.png') }}" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="gallery-area section-padding30" id="gallery">
|
|
<div class="container">
|
|
<!-- Section Tittle -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-6 col-lg-7 col-md-9 col-sm-10">
|
|
<div class="section-tittle text-center mb-100">
|
|
<span>Galeri</span>
|
|
<h2>Beberapa Gambar Mengenai Kami</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="box snake mb-30">
|
|
<div class="gallery-img "
|
|
style="background-image: url(assets/client/img/gallery/gallery1.png);">
|
|
</div>
|
|
<div class="overlay"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-6 col-sm-6">
|
|
<div class="box snake mb-30">
|
|
<div class="gallery-img "
|
|
style="background-image: url(assets/client/img/gallery/gallery2.png);">
|
|
</div>
|
|
<div class="overlay"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-6 col-sm-6">
|
|
<div class="box snake mb-30">
|
|
<div class="gallery-img "
|
|
style="background-image: url(assets/client/img/gallery/gallery3.png);">
|
|
</div>
|
|
<div class="overlay"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="box snake mb-30">
|
|
<div class="gallery-img "
|
|
style="background-image: url(assets/client/img/gallery/gallery4.png);">
|
|
</div>
|
|
<div class="overlay"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
@endsection
|
|
@section('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
function updateNavigation() {
|
|
var scrollPosition = $(window).scrollTop();
|
|
|
|
$('section, .slider-area, .team-area, .best-pricing, .gallery-area').each(function() {
|
|
var top = $(this).offset().top - 100;
|
|
var bottom = top + $(this).outerHeight();
|
|
var id = $(this).attr('id');
|
|
|
|
if (scrollPosition >= top && scrollPosition < bottom) {
|
|
$('.navigation li').removeClass('active');
|
|
|
|
$('.navigation a[href="#' + id + '"]').parent('li').addClass('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
$(window).on('scroll', updateNavigation);
|
|
|
|
updateNavigation();
|
|
});
|
|
</script>
|
|
@endsection
|