about page done

components/pages/about/story.tsx

@@ -0,0 +1,107 @@
+import Image from "next/image";
+
+export function Story() {
+  return (
+    <div className="bg-[#1e1d1c] pb-0 relative z-10 max-[350px]:pb-30 ">
+      <div className="max-w-260 mx-auto px-4">
+        <section className="relative -top-30 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
+          {/* Background Image */}
+          <div
+            className="absolute inset-0 z-0 rounded-xl"
+            style={{
+              backgroundImage: "url(/images/about/mainImage.jpg)",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }}
+          />
+
+          {/* Gradient Overlay */}
+          <div
+            className="absolute inset-0 z-10 rounded-xl"
+            style={{
+              background: `linear-gradient(to bottom right, black 5%, transparent 70%, transparent 90%)`,
+            }}
+          />
+
+          {/* Content */}
+          <div className="relative z-20 p-8 lg:p-12 max-w-130">
+            <h2 className="text-white text-4xl lg:text-5xl font-bold mb-6">
+              OUR STORY
+            </h2>
+            <p className="text-gray-300 mb-4">
+              Our story is one of unwavering dedication, selflessness, and a{" "}
+              <span className="text-white font-semibold">
+                deep commitment to the safety
+              </span>
+              and well-being of our communities.
+            </p>
+            <p className="text-gray-400 mb-6">
+              Aliquam lorem ante dapibus in viverra quis a tellus phasellus
+              viverra nulla ut metus varius laoreet quisque rutrum.
+            </p>
+            <button className="text-white flex items-center gap-2 hover:text-red-500 transition">
+              READ MORE
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </div>
+
+          {/* bottom cards */}
+          <div className="flex max-md:flex-col items-end justify-center md:gap-10 gap-5 z-20 relative bottom-0 mx-auto max-md:pb-5 max-sm:px-2">
+            <div
+              className="flex sm:flex-row flex-col sm:items-center items-start 
+            md:rounded-t-xl rounded-xl max-w-md w-full sm:p-7 p-2 bg-linear-to-br 
+            from-[#f21b1b] to-[#830909] sm:gap-5 gap-2"
+            >
+              <span className="sm:rounded-xl rounded-lg bg-black sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
+                <Image
+                  src="/images/about/fireforce-vision.png"
+                  alt="image icon"
+                  width={100}
+                  height={100}
+                  className="object-cover"
+                />
+              </span>
+              <div className="space-y-1 text-white">
+                <h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
+                <p>
+                  Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
+                  Quisque rutrum aenean augue vulputate eleifend.
+                </p>
+              </div>
+            </div>
+            <div className="flex sm:flex-row flex-col sm:items-center items-start  md:rounded-t-xl rounded-xl max-w-md w-full sm:p-7 p-2 bg-black sm:gap-5 gap-2">
+              <span className="sm:rounded-xl rounded-lg bg-[#1e1d1c] sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
+                <Image
+                  src="/images/about/fireforce-mission.png"
+                  alt="image icon"
+                  width={100}
+                  height={100}
+                  className=""
+                />
+              </span>
+              <div className="space-y-1 text-white">
+                <h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
+                <p>
+                  Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
+                  Quisque rutrum aenean augue vulputate eleifend.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}