49 lines
1.9 KiB
PHP
49 lines
1.9 KiB
PHP
<section class="hero py-30 bg-[#f5f5ff] wrapper">
|
|
<div class="grid xl:grid-cols-2 gap-y-10">
|
|
|
|
<!-- Left section -->
|
|
<div class="md:pr-23 flex flex-col justify-center space-y-4">
|
|
<h1 class="text-4xl sm:text-[4rem] font-black">
|
|
<p class="">
|
|
Discover Trusted
|
|
<br/>
|
|
Deals &
|
|
<br/>
|
|
Recommendation
|
|
</p>
|
|
</h1>
|
|
<p class=" text-accent-600">
|
|
Find the best deals, services and places recommended by verified experts.
|
|
Connect with trusted brokers and discover opportunities you can count on.
|
|
</p>
|
|
<div class="mt-6 flex flex-col gap-4 md:flex-row">
|
|
<a href="" class="ui-btn ui-btn-neutral">Explore Deals <x-heroicon-o-arrow-right class="w-4 inline ml-4"/> </a>
|
|
<a href="" class="ui-btn ui-btn bg-white/80 border border-gray-300">Become a Broker</a>
|
|
</div>
|
|
</div>
|
|
<!-- Left section end -->
|
|
|
|
<!-- Right section -->
|
|
<div class="relative">
|
|
<div class="hero-image">
|
|
<img class="rounded-2xl shadow-lg " src="{{asset('storage/images/hero-image.webp')}}" alt="" />
|
|
</div>
|
|
|
|
<!-- Stats card, top right of the image -->
|
|
<div class="card shadow-xl absolute -top-5 -right-5">
|
|
<p class="text-3xl font-black text-[#8669ED]">10K+</p>
|
|
<p class="text-accent-600 text-xs">Active Deals</p>
|
|
</div>
|
|
|
|
<!-- Stats card, bottom left of the image -->
|
|
<div class="card shadow-xl absolute -bottom-5 -left-5">
|
|
<p class="text-3xl font-black text-[#0070EB]">500+</p>
|
|
<p class="text-accent-600 text-xs">Verified Brokers</p>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Right section end -->
|
|
|
|
</div>
|
|
</section>
|