375 lines
19 KiB
PHP
375 lines
19 KiB
PHP
@extends('theme.spade.layouts.main')
|
||
|
||
@section('title')
|
||
The Best Hair Transplant In Nepal
|
||
@endsection
|
||
|
||
@section('meta')
|
||
<meta name="title" content="{{ $seoSetting['meta_title'] }}" />
|
||
<meta name="description" content="{{ $seoSetting['meta_detail'] }}">
|
||
<meta name="keywords" content="{{ $seoSetting['meta_keywords'] }}" />
|
||
@endsection
|
||
|
||
@section('content')
|
||
|
||
{{-- /* ------------------------------ Video Section ----------------------------- */ --}}
|
||
<div class="video-container">
|
||
<!-- Video -->
|
||
<video autoplay muted loop>
|
||
<source src="{{ asset('source/videos/manoj_gajurel.mp4') }}" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
<!-- Overlay -->
|
||
<div class="overlay"></div>
|
||
<!-- Caption -->
|
||
<div class="caption">
|
||
<h1>
|
||
{{ $homePage->title ?? 'Leading Hair Transplant in Nepal' }}
|
||
</h1>
|
||
<div class="link-btn">
|
||
<a href="{{ route('doctor_provider') }}" class="primary-btn light hvr-bounce-to-left">
|
||
<span class="btn-text appointment">Book Your Appointment</span>
|
||
<strong class="icon"><span class="f-icon flaticon-right11"></span></strong>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- /* ------------------------ Transformation Section ----------------------- */ --}}
|
||
<section class="transformation-area">
|
||
<div class="auto-container">
|
||
<div class="sec-title wow fadeInLeft animated animated" data-wow-delay="300ms" data-wow-duration="1000ms"
|
||
style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
|
||
<h2>Transformations</h2>
|
||
</div>
|
||
<div class="transformation-slider">
|
||
@empty(!$transformations)
|
||
@foreach ($transformations ?? [] as $transformation)
|
||
<article class="post-container wow fadeInUp slide-item" data-wow-delay="0ms" data-wow-duration="1000ms">
|
||
<div class="post-inner-content">
|
||
<figure class="image">
|
||
<div class="flex flex-row gap-[10px]">
|
||
<div data-aos="fade-up" data-aos-duration="1500" data-aos-offset="100">
|
||
<div class="relative">
|
||
<img src="{{ $transformation->beforeImage }}" alt="" class="">
|
||
</div>
|
||
</div>
|
||
<div data-aos="fade-down" data-aos-duration="1500" data-aos-offset="100">
|
||
<div class="relative">
|
||
<img src="{{ $transformation->afterImage }}" alt="" class="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="curve"></span>
|
||
</figure>
|
||
<div class="content">
|
||
<div class="text-center">
|
||
<span>
|
||
{{ $transformation->graft . ' Grafts' }}
|
||
@if($transformation->grade)
|
||
{{ ' for ' . $transformation->grade . ' Grade' }}
|
||
@endif
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
@else
|
||
Transformation not found !
|
||
@endempty
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- /* ------------------------ Video Testimonial Section ----------------------- */ --}}
|
||
<section class="videos-area">
|
||
<div class="auto-container">
|
||
<div class="videos-slider">
|
||
@empty(!$videoTestimonials)
|
||
@foreach ($videoTestimonials ?? [] as $videoTestimonial)
|
||
<!--Post-->
|
||
<article class="post-container wow fadeInUp slide-item" data-wow-delay="0ms" data-wow-duration="1000ms">
|
||
<div class="post-inner-content">
|
||
<figure class="image">
|
||
{!! $videoTestimonial->link !!}
|
||
<span class="curve"></span>
|
||
</figure>
|
||
<div class="content text-white">
|
||
<div class="inner-content-box">
|
||
<h4 class="sub-title">{{ $videoTestimonial->name }}</h4>
|
||
<div class="text">
|
||
<p>
|
||
{{ $videoTestimonial->designation }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
@else
|
||
Video Testimonial not found !
|
||
@endempty
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- /* ----------------------- Normal Testimonial Section ----------------------- */ --}}
|
||
<section class="testimonial-area top-services" id="patients-and-visitors">
|
||
<div class="auto-container">
|
||
<div class="sec-title wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1000ms"
|
||
style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
|
||
<h2>Testimonials</h2>
|
||
</div>
|
||
<div class="testimonial-slider">
|
||
@empty(!$normalTestimonials)
|
||
@foreach ($normalTestimonials as $normalTestimonial)
|
||
<article class="post wow fadeInUp slide-item" data-wow-delay="0ms" data-wow-duration="1000ms">
|
||
<div class="post-inner">
|
||
<figure class="image">
|
||
<img class="img-responsive" src="{{ $normalTestimonial->full_image }}" alt="Image" />
|
||
<span class="curve"></span>
|
||
</figure>
|
||
<div class="content">
|
||
<div class="inner-box">
|
||
<h3>{{ $normalTestimonial->name }}</h3>
|
||
<div class="text" style="height:265px; overflow:hidden">
|
||
<p>{{ $normalTestimonial->statement }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
@endempty
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- /* --------------------------- Team Member Section -------------------------- */ --}}
|
||
<section class="team-of-proessionals">
|
||
<div class="auto-container">
|
||
<div class="clearfix">
|
||
<div class="col-md-12">
|
||
<div class="sec-title wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1000ms"
|
||
style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
|
||
<h2>Doctors</h2>
|
||
</div>
|
||
<div class="row" data-wow-delay="300ms" data-wow-duration="1000ms">
|
||
<div class="clearfix">
|
||
@empty(!$teamMembers)
|
||
@foreach ($teamMembers as $teamMember)
|
||
<article class="col-md-3 col-sm-6 col-xs-12">
|
||
<div class="candidate radius">
|
||
<div class="candidate-margins format-link">
|
||
<a href="javascript:;" class="media-box">
|
||
<img src="{{ $teamMember->full_image }}" alt="{{ $teamMember->name }}"
|
||
class="img-responsive">
|
||
</a>
|
||
<div class="inner-box">
|
||
<h3>
|
||
<a href="javascript:;">{{ $teamMember->name }}</a>
|
||
<span>{{ $teamMember->designation }}</span>
|
||
<span>{!! $teamMember->detail !!}</span>
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
@endempty
|
||
<div style="clear:both"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="link-btn wow fadeInUp animated flex justify-content-center mt-10" data-wow-delay="600ms"
|
||
data-wow-duration="1000ms"
|
||
style="visibility: visible; animation-duration: 1000ms; animation-delay: 600ms;">
|
||
<a href="{{ route('doctor_provider') }}" class="primary-btn light hvr-bounce-to-left">
|
||
<span class="btn-text">View All</span> <strong class="icon"><span
|
||
class="f-icon flaticon-right11"></span></strong>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- /* ---------------------------- About Us Section ---------------------------- */ --}}
|
||
<section class="we-are-best mt-80">
|
||
<div class="auto-container">
|
||
<div class="row clearfix">
|
||
<div class="col-md-6 col-sm-6 col-xs-12 image-side">
|
||
<figure class="image">
|
||
<img class="img-responsive" src="{{ $aboutPage->full_image }}" alt="Arogin Image">
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 col-xs-12 text-side">
|
||
<h2 class="wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
|
||
<span style="color:white;">{{ $aboutPage->title }}</span>
|
||
</h2>
|
||
<div class="text wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1000ms">
|
||
<p>{{ $aboutPage->summary }}</p>
|
||
</div>
|
||
<div class="link-btn wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1000ms">
|
||
<a href="{{ route('about_us') }}" class="primary-btn light hvr-bounce-to-left">
|
||
<span class="btn-text">Read More</span> <strong class="icon"><span
|
||
class="f-icon flaticon-right11"></span></strong>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- /* -------------------------- Feature News Section -------------------------- */ --}}
|
||
<section class="news-area">
|
||
<div class="auto-container">
|
||
<div class="sec-title wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1000ms">
|
||
<h2>Blogs</h2>
|
||
</div>
|
||
<div class="news-slider">
|
||
@empty(!$blogs)
|
||
@foreach ($blogs as $blog)
|
||
<article class="slide-item">
|
||
<figure class="image">
|
||
<img src="{{ $blog->full_image }}" alt="{{ $blog->title }}" height="280">
|
||
</figure>
|
||
<div class="content-box">
|
||
<div class="text-content">
|
||
<h3><a href="{{ route('single_blog', $blog->slug) }}">{{ $blog->title }}</a></h3>
|
||
<div class="info">{{ date('M d, Y', strtotime($blog->published_date)) }}</div>
|
||
<div class="text" style="height:55px; overflow:hidden">{{ $blog->summary }}</div>
|
||
<div class="link-btn">
|
||
<a href="{{ route('single_blog', $blog->slug) }}"
|
||
class="primary-btn hvr-bounce-to-left">
|
||
<span class="btn-text">LEARN MORE</span> <strong class="icon"><span
|
||
class="f-icon flaticon-right11"></span></strong>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
@endempty
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- /* -------------------------- Get In Touch Section -------------------------- */ --}}
|
||
<section class="contact-us py-90" style="background-color:#edf9f4">
|
||
<div class="auto-container clearfix">
|
||
<div class="sec-title wow fadeInLeft animated overflow-hidden" data-wow-delay="300ms"
|
||
data-wow-duration="1000ms"
|
||
style="visibility: visible; animation-duration: 1000ms; animation-delay: 300ms;">
|
||
<h2>Contact Us</h2>
|
||
</div>
|
||
<div class="flex justify-content-center">
|
||
<div class="w-70; mx-auto">
|
||
<p>Have any questions? Leave us your contact information, and we’ll reach out to you.</p>
|
||
<form id="contactForm" action="{{ route('contactUsMessage') }}" method="post">
|
||
@csrf
|
||
<div class="row g-3">
|
||
<div class="col-md-6 mb-10">
|
||
<label for="full-name" class="form-label">Full Name</label>
|
||
<input type="text" class="form-control" id="full-name" name="full_name"
|
||
placeholder="Full Name" required>
|
||
@error('full_name')
|
||
<div class="text-danger">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
<div class="col-md-6 mb-10">
|
||
<label for="address" class="form-label">Address</label>
|
||
<input type="text" class="form-control" id="address" name="address"
|
||
placeholder="Address" required>
|
||
@error('address')
|
||
<div class="text-danger">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
<div class="col-md-6 mb-10">
|
||
<label for="email-id" class="form-label">Email ID</label>
|
||
<input type="email" class="form-control" id="email-id" name="email"
|
||
placeholder="yourname@gmail.com" required>
|
||
@error('email')
|
||
<div class="text-danger">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
<div class="col-md-6 mb-10">
|
||
<label for="phone-number" class="form-label">Contact Number</label>
|
||
<input type="tel" class="form-control phone-number" id="phone-number" name="phone" placeholder="98XXXXXXXX">
|
||
@error('phone')
|
||
<div class="text-danger">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
<div class="col-md-12 mb-10">
|
||
<label for="message" class="form-label">Message</label>
|
||
<textarea class="form-control" id="message" name="message" placeholder="Write message here.." rows="5"
|
||
required></textarea>
|
||
@error('message')
|
||
<div class="text-danger">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
<div class="col-12 flex justify-content-center pt-30">
|
||
<button type="submit" class="primary-btn light hvr-bounce-to-left">
|
||
<span class="btn-text">Submit</span>
|
||
<strong class="icon">
|
||
<span class="f-icon flaticon-right11"></span>
|
||
</strong>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
@endsection
|
||
|
||
@push('js')
|
||
<script>
|
||
$(document).ready(function () {
|
||
$("#contactForm").on("submit", function (e) {
|
||
e.preventDefault();
|
||
|
||
var form = $(this);
|
||
var url = form.attr("action");
|
||
|
||
// Remove any existing errors
|
||
form.find(".text-danger").remove();
|
||
|
||
$.ajax({
|
||
url: url,
|
||
type: "POST",
|
||
data: form.serialize(),
|
||
success: function (response) {
|
||
// Clear the form
|
||
form[0].reset();
|
||
|
||
// Redirect to thank you page
|
||
window.location.href = "/thankyou";
|
||
},
|
||
error: function (xhr) {
|
||
if (xhr.status === 422) {
|
||
var errors = xhr.responseJSON.errors;
|
||
|
||
$.each(errors, function (key, value) {
|
||
var field = $("[name='" + key + "']");
|
||
var wrapper = field.closest(".mb-10"); // Bootstrap column wrapper
|
||
|
||
// Remove old errors
|
||
wrapper.find(".text-danger").remove();
|
||
|
||
// Append new error under the field
|
||
wrapper.append('<div class="text-danger mt-1">' + value[0] + '</div>');
|
||
});
|
||
} else {
|
||
alert("Something went wrong, please try again later.");
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|