service compoennt responsive fixed
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -21,109 +21,91 @@ export function OurService() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cards Section 1 - Top Two Cards */}
|
||||
<div className="max-w-6xl w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-6 my-10 md:my-14 lg:my-16">
|
||||
{/* Card 1 - Larger Card */}
|
||||
<div className="relative space-y-4 md:space-y-5 p-6 sm:p-8 lg:p-10 rounded-xl md:col-span-1 lg:col-span-1 bg-linear-to-br from-black via-black to-[#d2610a] min-h-70 sm:min-h-80 md:min-h-87.5 overflow-hidden">
|
||||
<h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
|
||||
{/* cards */}
|
||||
<div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
|
||||
<div className="relative space-y-4 py-6 px-8 rounded-xl sm:w-[55%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
|
||||
<p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
Operation Force
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm sm:text-base max-w-xs">
|
||||
</p>
|
||||
<p className="text-gray-400 max-w-80 w-full">
|
||||
Aliquam lorem ante dapibus in viverra feugiat phasellus.
|
||||
</p>
|
||||
<button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors">
|
||||
<button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
|
||||
LEARN MORE <ChevronRight size={20} />
|
||||
</button>
|
||||
<div className="absolute bottom-0 right-0 md:right-2 w-32 sm:w-40 md:w-48 lg:w-52">
|
||||
<Image
|
||||
src="/images/home/gruop.png"
|
||||
alt="Operation Force"
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain w-full h-auto"
|
||||
className="object-contain sm:absolute bottom-0 right-2 z-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="relative overflow-hidden space-y-4 md:space-y-5 p-6 sm:p-8 lg:p-10 rounded-xl bg-linear-to-br from-black via-black to-[#d2610a] min-h-70 sm:min-h-80 md:min-h-87.5">
|
||||
<h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
|
||||
<div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl sm:w-[45%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
|
||||
<p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
Operation Force
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm sm:text-base max-w-xs">
|
||||
</p>
|
||||
<p className="text-gray-400 max-w-70 w-full">
|
||||
Aliquam lorem ante dapibus in viverra feugiat phasellus.
|
||||
</p>
|
||||
<button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors">
|
||||
<button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
|
||||
LEARN MORE <ChevronRight size={20} />
|
||||
</button>
|
||||
<div className="absolute -bottom-4 -right-4 w-32 sm:w-40 md:w-48 lg:w-52">
|
||||
<Image
|
||||
src="/images/home/redShlang.png"
|
||||
alt="Red Hose"
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain w-full h-auto"
|
||||
className="object-contain sm:absolute -bottom-4 -right-4 z-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards Section 2 - Bottom Row */}
|
||||
<div className="max-w-6xl w-full mx-auto grid grid-cols-1 lg:grid-cols-5 gap-5 lg:gap-6">
|
||||
{/* Card 3 - Ambulance */}
|
||||
<div className="relative rounded-xl lg:col-span-2 bg-linear-to-br from-[#d2610a] via-black to-black overflow-hidden">
|
||||
<div className="w-full flex justify-center pt-5 px-4">
|
||||
<div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt-5 w-full mx-auto">
|
||||
<div className="relative rounded-xl sm:w-[40%] w-full bg-[linear-gradient(to_bottom_right,#d2610a,#000000,#000000)]">
|
||||
<Image
|
||||
src="/images/home/ambulance.png"
|
||||
alt="Ambulance"
|
||||
alt="images"
|
||||
width={300}
|
||||
height={200}
|
||||
className="object-contain w-full max-w-xs sm:max-w-sm h-auto"
|
||||
className="object-contain mt-5"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4 md:space-y-5 p-6 sm:p-8">
|
||||
<h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
|
||||
<div className="space-y-4 py-6 px-8">
|
||||
<p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
Operation Force
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm sm:text-base max-w-xs">
|
||||
</p>
|
||||
<p className="text-gray-400 max-w-80 w-full">
|
||||
Aliquam lorem ante dapibus in viverra feugiat phasellus.
|
||||
</p>
|
||||
<button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors">
|
||||
<button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
|
||||
LEARN MORE <ChevronRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="lg:col-span-3 space-y-5 lg:space-y-6">
|
||||
{/* Card 4 - Balloon */}
|
||||
<div className="relative overflow-hidden space-y-4 md:space-y-5 p-6 sm:p-8 lg:p-10 rounded-xl bg-linear-to-br from-black via-black to-[#d2610a] min-h-70 sm:min-h-75">
|
||||
<h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
|
||||
<p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
||||
Operation Force
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm sm:text-base max-w-xs lg:max-w-sm">
|
||||
</p>
|
||||
<p className="text-gray-400 max-w-70 w-full">
|
||||
Aliquam lorem ante dapibus in viverra feugiat phasellus.
|
||||
</p>
|
||||
<button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors lg:mt-20">
|
||||
<button className="sm:mt-38 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
|
||||
LEARN MORE <ChevronRight size={20} />
|
||||
</button>
|
||||
<div className="absolute -bottom-32 sm:-bottom-36 lg:-bottom-40 -right-4 w-32 sm:w-40 md:w-48 lg:w-52">
|
||||
<Image
|
||||
src="/images/home/balon.png"
|
||||
alt="Balloon"
|
||||
alt="images"
|
||||
width={200}
|
||||
height={100}
|
||||
className="object-contain w-full h-auto"
|
||||
className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Card */}
|
||||
<div className="p-6 sm:p-8 lg:p-10 rounded-xl bg-linear-to-tr from-black via-black to-[#d2610a] flex flex-col sm:flex-row items-center justify-between gap-6">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-semibold font-armanai text-white text-center sm:text-left">
|
||||
<div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#000000,#d2610a)] flex sm:flex-row flex-col gap-5 items-center justify-between">
|
||||
<h2 className="sm:text-3xl text-xl font-semibold font-armanai text-white">
|
||||
View more service
|
||||
</h2>
|
||||
<button className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-bold py-3 px-6 sm:px-8 lg:px-10 rounded-full transition-all duration-300 transform hover:scale-105 active:scale-95 whitespace-nowrap text-sm sm:text-base">
|
||||
<button className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit">
|
||||
GET STARTED
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user