From 8470e69c1a7a47d700b094786defaf51b4fb1904 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Mon, 26 Jan 2026 20:59:28 +0500
Subject: [PATCH] home page service updated

---
 components/pages/home/ourService.tsx | 184 +++++++++++++++------------
 1 file changed, 101 insertions(+), 83 deletions(-)

diff --git a/components/pages/home/ourService.tsx b/components/pages/home/ourService.tsx
index 5b5afc5..0fd0f1d 100644
--- a/components/pages/home/ourService.tsx
+++ b/components/pages/home/ourService.tsx
@@ -4,108 +4,126 @@ import Image from "next/image";
 
 export function OurService() {
   return (
-    <div className="bg-[#1e1d1c] py-10">
-      <div className="max-w-300 w-full mx-auto">
-        {/* header */}
-        <div className="space-y-4">
-          <div className="flex items-center w-full justify-center gap-2 text-white font-bold">
+    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20">
+      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="space-y-4 md:space-y-6">
+          <div className="flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
             <DotAnimatsiya />
             OUR SERVICES
           </div>
-          <div className="text-5xl tracking-[5px] font-bold bg-linear-to-br text-center w-full from-white via-white to-black text-transparent bg-clip-text">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
             FIREFIGHTER RESPONSIBILITIES
-          </div>
-          <div className="text-center w-full text-gray-400 max-w-150 mx-auto">
+          </h1>
+          <p className="text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-3xl mx-auto px-4">
             Aliquam lorem ante dapibus in viverra quis feugiat a tellus
             phasellus viverra nulla ut metus varius laoreet quisque rutrum.
-          </div>
+          </p>
         </div>
 
-        {/* cards */}
-        <div className="max-w-250 w-full mx-auto flex items-center gap-5 my-10">
-          <div className="relative space-y-4 py-6 px-8 rounded-xl w-[55%] 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">
+        {/* 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-gradient-to-br from-black via-black to-[#d2610a] min-h-[280px] sm:min-h-[320px] md:min-h-[350px] overflow-hidden">
+            <h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
               Operation Force
-            </p>
-            <p className="text-gray-400 max-w-80 w-full">
+            </h3>
+            <p className="text-gray-400 text-sm sm:text-base max-w-xs">
               Aliquam lorem ante dapibus in viverra feugiat phasellus.
             </p>
-            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
+            <button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors">
               LEARN MORE <ChevronRight size={20} />
             </button>
-            <Image
-              src="/images/home/gruop.png"
-              alt="images"
-              width={200}
-              height={100}
-              className="object-contain absolute bottom-0 right-2 z-50"
-            />
-          </div>
-          <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-[45%] 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
-            </p>
-            <p className="text-gray-400 max-w-70 w-full">
-              Aliquam lorem ante dapibus in viverra feugiat phasellus.
-            </p>
-            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-              LEARN MORE <ChevronRight size={20} />
-            </button>
-            <Image
-              src="/images/home/redShlang.png"
-              alt="images"
-              width={200}
-              height={100}
-              className="object-contain absolute -bottom-4 -right-4 z-50"
-            />
-          </div>
-        </div>
-
-        <div className="max-w-250 flex items-start justify-between gap-5 mt-5 w-full mx-auto">
-          <div className="relative rounded-xl w-[40%] bg-[linear-gradient(to_bottom_right,#d2610a,#000000,#000000)]">
-            <Image
-              src="/images/home/ambulance.png"
-              alt="images"
-              width={300}
-              height={200}
-              className="object-contain mt-5"
-            />
-            <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
-              </p>
-              <p className="text-gray-400 max-w-80 w-full">
-                Aliquam lorem ante dapibus in viverra feugiat phasellus.
-              </p>
-              <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
-                LEARN MORE <ChevronRight size={20} />
-              </button>
-            </div>
-          </div>
-          <div className="w-[60%]">
-            <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
-              </p>
-              <p className="text-gray-400 max-w-70 w-full">
-                Aliquam lorem ante dapibus in viverra feugiat phasellus.
-              </p>
-              <button className="mt-38 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/balon.png"
-                alt="images"
+                src="/images/home/gruop.png"
+                alt="Operation Force"
                 width={200}
                 height={100}
-                className="object-contain absolute -bottom-40 -right-4 z-50"
+                className="object-contain w-full h-auto"
               />
             </div>
-            <div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#000000,#d2610a)] flex items-center justify-between">
-              <h2 className="text-3xl font-semibold font-armanai text-white">
+          </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-gradient-to-br from-black via-black to-[#d2610a] min-h-[280px] sm:min-h-[320px] md:min-h-[350px]">
+            <h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
+              Operation Force
+            </h3>
+            <p className="text-gray-400 text-sm sm:text-base max-w-xs">
+              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">
+              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"
+                width={200}
+                height={100}
+                className="object-contain w-full h-auto"
+              />
+            </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-gradient-to-br from-[#d2610a] via-black to-black overflow-hidden">
+            <div className="w-full flex justify-center pt-5 px-4">
+              <Image
+                src="/images/home/ambulance.png"
+                alt="Ambulance"
+                width={300}
+                height={200}
+                className="object-contain w-full max-w-xs sm:max-w-sm h-auto"
+              />
+            </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-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
+                Operation Force
+              </h3>
+              <p className="text-gray-400 text-sm sm:text-base max-w-xs">
+                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">
+                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-gradient-to-br from-black via-black to-[#d2610a] min-h-[280px] sm:min-h-[300px]">
+              <h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-gradient-to-br from-white via-white to-gray-400 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">
+                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">
+                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"
+                  width={200}
+                  height={100}
+                  className="object-contain w-full h-auto"
+                />
+              </div>
+            </div>
+
+            {/* CTA Card */}
+            <div className="p-6 sm:p-8 lg:p-10 rounded-xl bg-gradient-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">
                 View more service
               </h2>
-              <button className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
+              <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">
                 GET STARTED
               </button>
             </div>
@@ -114,4 +132,4 @@ export function OurService() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file