304 lines
18 KiB
PHP
304 lines
18 KiB
PHP
@extends('frontend.layouts.master')
|
|
|
|
@section('title') {{ $generalSetting['company_name'] }} @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 ----------------------------- */ --}}
|
|
<section class="relative w-full h-screen">
|
|
<video autoplay loop muted class="absolute inset-0 w-full h-full object-cover">
|
|
<source src="{{ asset('frontend/videos/main.mp4') }}" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<div class="absolute inset-0 bg-black opacity-50"></div>
|
|
<div class="absolute inset-0 flex justify-center items-center text-white">
|
|
<div class="text-center max-w-[650px]">
|
|
<h1 class="font-raleway uppercase tracking-wider font-bold text-5xl text-white mb-[40px]">
|
|
{{ $homePage->title ?? 'BEST TECHNOLOGY FOR HAIR TRANSPLANT' }}
|
|
</h1>
|
|
<a href="{{ route('about_us') }}"
|
|
class="read-more inline-block uppercase bg-secondary text-white text-sm font-bold pe-[60px] relative overflow-hidden">
|
|
<span class="btn-text inline-block text-sm font-bold">Book your Appointment</span>
|
|
<strong class="icon flex items-center">
|
|
<span class="read-more-icon">
|
|
<img src="{{ asset('frontend/images/icons/arrow-right-line.svg') }}" alt="image" srcset="">
|
|
</span>
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- /* ------------------ Transformation / Before After Section ----------------- */ --}}
|
|
<section class="mx-auto max-w-7xl dark:bg-gray-900 relative mt-[80px] px-6 lg:px-8">
|
|
<div class="mx-auto max-w-7xl lg:text-center">
|
|
<h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
|
|
Have a look at our
|
|
</h2>
|
|
<p class="font-raleway text-[36px] leading-59 tracking-normal text-center text-[#088EE4] font-bold uppercase">
|
|
Amazing Transformations
|
|
</p>
|
|
</div>
|
|
<div class="my-[60px]">
|
|
<div class="relative transformation-slider">
|
|
@if(count($transformations) > 0)
|
|
@foreach ($transformations ?? [] as $transformation)
|
|
<div class="px-[10px]">
|
|
<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>
|
|
<div class="box">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div class="flex flex-col-reverse">
|
|
<dt class="text-[#666666] font-normal">Patient Name</dt>
|
|
<dd class="font-bold text-[20px] text-secondary tracking-widest">
|
|
{{ $transformation->name }}</dd>
|
|
</div>
|
|
<div class="flex flex-col-reverse">
|
|
<dt class="text-[#666666] font-normal">Hair Loss Grade</dt>
|
|
<dd class="font-bold text-[20px] text-secondary tracking-widest ">
|
|
{{ $transformation->grade }}</dd>
|
|
</div>
|
|
<div class="flex flex-col-reverse">
|
|
<dt class="text-[#666666] font-normal">No. of Drafts</dt>
|
|
<dd class="font-bold text-[20px] text-secondary tracking-widest">
|
|
{{ $transformation->graft }}</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- /* ------------------------ Video Testimonial Section ----------------------- */ --}}
|
|
<section class="bg-[#051B42] py-[60px]">
|
|
<div class="wrapper">
|
|
<section class="mx-auto max-w-7xl dark:bg-gray-900 relative mb-[40px]-4 mt-[40px] px-6 lg:px-8">
|
|
<div class="relative w-full">
|
|
<div class="overflow-hidden">
|
|
<div id="logoCarousel" class="flex justify-evenly items-center gap-[60px] transition-transform duration-500 ease-in-out transform">
|
|
@if(count($videoTestimonials) > 0)
|
|
@foreach ($videoTestimonials ?? [] as $videoTestimonial)
|
|
<div class="w-1/2">
|
|
<div class="w-full pb-6">
|
|
<div class="relative">
|
|
{!! $videoTestimonial->link !!}
|
|
</div>
|
|
</div>
|
|
<div class="mr-auto place-self-center lg:col-span-7 w-full">
|
|
<div class="lg:mt-0">
|
|
{{-- <img src="{{ asset('frontend/images/video-testimonials/tag.png') }}" alt="" srcset=""> --}}
|
|
<h4 class="text-white text-4xl font-semibold mt-[11px]">{{ $videoTestimonial->name }}</h4>
|
|
<p class="text-white font-semibold text-lg mt-[5px] italic">
|
|
{{ $videoTestimonial->designation }}
|
|
</p>
|
|
{{-- <p class="text-white md:text-lg lg:text-xl dark:text-gray-400 font-normal text-lg text-lightGray mb-[30px] pt-[10px]">
|
|
{{ $videoTestimonial->statement }}
|
|
</p> --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div id="patients-visitors"></div>
|
|
</section>
|
|
|
|
{{-- /* ----------------------- Normal Testimonial Section ----------------------- */ --}}
|
|
<section id="happy-client" class="relative w-full mt-[60px] mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="relative w-full">
|
|
<div class="mx-auto max-w-7xl lg:text-center mb-[60px]">
|
|
<h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
|
|
Featured Reviews
|
|
</h2>
|
|
<p class="font-raleway text-[36px] leading-59 tracking-normal text-center text-[#0097F6] font-bold uppercase">
|
|
What Our Happy Patients Says
|
|
</p>
|
|
</div>
|
|
<div class="happyCustomer-slider mx-auto max-w-7xl -mx-4">
|
|
@if(count($testimonials) > 0)
|
|
@foreach ($testimonials ?? [] as $testimonial)
|
|
@if (empty($testimonial['link']) && isset($testimonial['image']))
|
|
<div class="mx-auto max-w-7xl lg:max-w-none px-4">
|
|
<div class="patient-item">
|
|
<div class="overflow-hidden">
|
|
<div class="max-w-sm realtive">
|
|
<a class="relative image">
|
|
<img class="w-full" src="{{ $testimonial->fullImage }}" alt="Image" />
|
|
<span class="curve"></span>
|
|
</a>
|
|
<div class="patient-content bg-white relative -mt-[44px] mx-[30px]">
|
|
<div class="patient-info relative z-1 z-[1] mb-[50px]">
|
|
<h3>
|
|
<div class="text-[22px] text-secondary font-bold tracking-tight dark:text-white">
|
|
<h4>{{ $testimonial->name }}</h4>
|
|
</div>
|
|
</h3>
|
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
|
|
{{ $testimonial->statement }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
<div class="flex items-center justify-center pb-[20px]">
|
|
<button
|
|
class="happyCustomer-prev inline-flex items-center justify-center h-[30px] w-[30px] text-base font-medium text-center rounded-lg hover:bg-blue-600 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800 bg-[#CDE9FB] text-white">
|
|
<img src="{{ asset('frontend/images/video-testimonials/left-arrow.svg') }}" alt=""
|
|
srcset="" width="16">
|
|
</button>
|
|
<div class="px-[16px] py-[10px] text-lightGray font-medium">
|
|
01/02
|
|
</div>
|
|
<button
|
|
class="happyCustomer-next inline-flex items-center justify-center h-[30px] w-[30px] text-base font-medium text-center rounded-lg hover:bg-blue-600 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800 bg-[#CDE9FB] text-white">
|
|
<img src="{{ asset('frontend/images/video-testimonials/right.svg') }}" alt="" srcset=""
|
|
width="16">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- /* ---------------------------- About Us Section ---------------------------- */ --}}
|
|
<section class="we-are-best">
|
|
<div class="wrapper">
|
|
<div class="flex">
|
|
<div class="w-full lg:w-1/2" style="display: flex; align-items: center; justify-content: center;">
|
|
<img src="{{ $aboutPage->fullImage ?? '' }}" alt="" title="" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="w-full lg:w-1/2 z-[1] text-right py-[40px] mr-[35px] ps-[45px] relative z-[4]">
|
|
<div class="">
|
|
<h4 class="text-[18px] italic font-bold leading-26 tracking-wider text-white uppercase">
|
|
Let's Know About</h4>
|
|
<h2 class="mb-[18px] font-bold text-800 text-[36px] text-secondary uppercase">
|
|
{{ $aboutPage->title ?? 'About Us' }}
|
|
</h2>
|
|
<p
|
|
class="text-white dark:text-gray-400 font-normal text-[16px] mb-[54px]">
|
|
{{ $aboutPage->summary ?? 'We are Arogin Health Care' }}
|
|
</p>
|
|
<a href="{{ route('about_us') }}"
|
|
class="read-more inline-block uppercase bg-secondary text-white text-sm font-bold pe-[60px] relative overflow-hidden">
|
|
<span class="btn-text inline-block">Read More</span>
|
|
<strong class="icon flex items-center">
|
|
<span class="read-more-icon">
|
|
<img src="{{ asset('frontend/images/icons/arrow-right-line.svg') }}" alt="Image" srcset="">
|
|
</span>
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- /* ------------------------------ Team Section ------------------------------ */ --}}
|
|
<section class="mx-auto max-w-7xl mt-[60px] mb-[20px]">
|
|
<div class="text-center pb-[60px]">
|
|
<h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
|
|
WE ARE A
|
|
</h2>
|
|
<p class="font-raleway text-[36px] leading-59 tracking-normal text-center text-[#088EE4] font-bold uppercase">
|
|
Team of Professionals
|
|
</p>
|
|
</div>
|
|
<div class="mx-auto">
|
|
<ul class="grid gap-8 md:grid-cols-2 lg:grid-cols-4 p-2 xl:p-5">
|
|
@if(count($teamMembers) > 0)
|
|
@foreach ($teamMembers ?? [] as $teamMember)
|
|
<li>
|
|
<div class="border-solid team-card px-4">
|
|
<div class="max-w-sm bg-white border border-gray-200 shadow dark:bg-gray-800 dark:border-gray-700">
|
|
<img class="w-full" src="{{ $teamMember->fullImage }}" alt="Image" />
|
|
<div class="p-[15px]">
|
|
<div class="team-info">
|
|
<a href="#">
|
|
<div class="text-[20px] text-primary font-bold uppercase tracking-tight dark:text-white">
|
|
<h4> {{ $teamMember->name }}</h4>
|
|
</div>
|
|
</a>
|
|
<p class="mb-3 mt-[8px] dark:text-gray-400 text-secondaryColor">
|
|
{{ $teamMember->detail }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
@endif
|
|
</ul>
|
|
<div class="text-center pt-[30px]">
|
|
<a href="{{ route('doctor_provider') }}" class="read-more inline-block uppercase bg-secondary text-white text-sm font-bold pe-[60px] relative overflow-hidden">
|
|
<span class="btn-text inline-block">View All</span>
|
|
<strong class="icon flex items-center">
|
|
<span class="read-more-icon">
|
|
<img src="{{ asset('frontend/images/icons/arrow-right-line.svg') }}" alt="Image" srcset="">
|
|
</span>
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- /* ----------------------------- Client Section ----------------------------- */ --}}
|
|
<section class="py-[60px] bg-[#F6FEF8]">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-7xl lg:text-center mb-[60px]">
|
|
<h2 class="font-raleway text-[18px] italic font-bold leading-26 tracking-wider text-center text-center text-lightGray uppercase">
|
|
We believe in trust
|
|
</h2>
|
|
<p class="font-raleway text-[36px] leading-59 tracking-normal text-center text-secondary font-bold uppercase">
|
|
Arogin Associations
|
|
</p>
|
|
</div>
|
|
<div class="">
|
|
<div class="grid grid-cols-1 gap-y-16 text-center lg:grid-cols-4 py-4">
|
|
@if(count($clients))
|
|
@foreach ($clients->chunk(2) ?? [] as $clientItems)
|
|
<div class="border-content">
|
|
@foreach ($clientItems ?? [] as $client)
|
|
<div class="py-[40px]">
|
|
<a href="{{ $client->link }}" target="_blank">
|
|
<img class="mx-auto h-[150px]" src="{{ $client->fullImage }}" alt="" srcset="" width="150" height="150">
|
|
</a>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@endsection
|