joydip.manna/dealhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: card component and heading

Browse Source 
- add default style of h2 heading
- make card component for consistent style
This commit is contained in:
kusowl 2026-01-08 11:30:23 +05:30
parent d481fe776a
commit d42a12e554
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/css/app.css
View File

@ -21,7 +21,11 @@ @layer components{
@apply px-4 md:px-12 @apply px-4 md:px-12
} }
.card {
@apply bg-white rounded-lg p-4 }
@layer base{
h2 {
@apply text-5xl font-black text-center
} }
} }

3
resources/views/components/card.blade.php Normal file
View File

@ -0,0 +1,3 @@
<div class="card flex flex-col space-y-4 shadow-xl p-8 bg-white rounded-xl">
{{$slot}}
</div>

15
resources/views/components/why-dealhub.blade.php
View File

@ -1,33 +1,34 @@
<section class="wrapper mb-15"> <section class="wrapper mb-15">
<h2 class="text-5xl font-black text-center mt-15">Why Choose {{config('app.name')}}?</h2> <h2 class="mt-15">Why Choose {{config('app.name')}}?</h2>
<p class="text-accent-600 text-center mt-3 mb-10"> <p class="text-accent-600 text-center mt-3 mb-10">
A trusted platform connecting you with verified experts who share the best deals, <br /> A trusted platform connecting you with verified experts who share the best deals, <br />
services, and opportunities in your area. services, and opportunities in your area.
</p> </p>
<section class="grid grid-cols-1 md:grid-cols-3 gap-8"> <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="card flex flex-col space-y-4 shadow-xl p-8"> <x-card>
<div class="p-4 rounded-lg bg-blue-100 text-blue-700 w-fit"> <div class="p-4 rounded-lg bg-blue-100 text-blue-700 w-fit">
<x-heroicon-o-shield-check class="w-8"/> <x-heroicon-o-shield-check class="w-8"/>
</div> </div>
<h3 class="font-bold">Verified Brokers</h3> <h3 class="font-bold">Verified Brokers</h3>
<p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p> <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p>
</div> </x-card>
<div class="card flex flex-col space-y-4 shadow-xl p-8"> <x-card>
<div class="p-4 rounded-lg bg-[#F0EBFF] text-[#9470F9] w-fit"> <div class="p-4 rounded-lg bg-[#F0EBFF] text-[#9470F9] w-fit">
<x-heroicon-o-arrow-trending-up class="w-8"/> <x-heroicon-o-arrow-trending-up class="w-8"/>
</div> </div>
<h3 class="font-bold">Verified Brokers</h3> <h3 class="font-bold">Verified Brokers</h3>
<p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p> <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p>
</div> </x-card>
<div class="card flex flex-col space-y-4 shadow-xl p-8"> <x-card>
<div class="p-4 rounded-lg bg-[#F9EBF3] text-[#DB5A84] w-fit"> <div class="p-4 rounded-lg bg-[#F9EBF3] text-[#DB5A84] w-fit">
<x-heroicon-o-magnifying-glass class="w-8"/> <x-heroicon-o-magnifying-glass class="w-8"/>
</div> </div>
<h3 class="font-bold">Verified Brokers</h3> <h3 class="font-bold">Verified Brokers</h3>
<p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p> <p class="text-accent-600 text-md">All brokers are verified and vetted to ensure trustworthy recommendations and deals</p>
</div> </x-card>
</section> </section>
</section> </section>