about page done

app/about/page.tsx

@@ -0,0 +1,13 @@
+import { AboutBanner, Story, WhyChooseUs } from "@/components/pages/about";
+import { Statistics } from "@/components/pages/home";
+
+export default function Page() {
+  return (
+    <div className="mb-0">
+      <AboutBanner />
+      <Story />
+      <Statistics/>
+      <WhyChooseUs/>
+    </div>
+  );
+}

app/globals.css

@@ -125,7 +125,7 @@
 }
 
 .loi{
-  color:#a60404ad;
+  color:#a6040400;
 }
 
 .gradient-text {

components/pages/about/aboutBanner.tsx

@@ -0,0 +1,43 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+export function AboutBanner() {
+  return (
+    <section className="relative w-full lg:h-[60vh] h-screen min-h-100 overflow-hidden pt-10">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/about/aboutBanner.jpg)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      />
+
+      {/* Gradient Overlay - Bottom-left to top-right */}
+      <div
+        className="absolute inset-0 z-10"
+        style={{
+          background: `linear-gradient(to top right, #d2610a 0%, #1e1d1ce3 30%, #1e1d1ce3 100%)`,
+        }}
+      />
+
+      <div className="max-w-250 w-full mx-auto px-4">
+        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
+          <div className="spacw-y-4 ">
+            <DotAnimatsiya />
+            <p
+              className=" bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
+            >
+              Fire Fighter <br /> At The Ready
+            </p>
+          </div>
+          <div className="lg:w-[40%] text-gray-300 mt-20">
+            It emphasizes that these firefighters are there not just as public
+            servants but as a vital part of the community.
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/about/aboutLine.tsx

@@ -0,0 +1,33 @@
+import { Phone } from "lucide-react";
+import Image from "next/image";
+
+export function AboutLine() {
+  return (
+    <div className="bg-black py-10 px-4">
+      <div className="max-w-280 w-full mx-auto relative py-10 flex items-center justify-between ">
+        <div className="text-white flex flex-col items-start justify-start gap-5 ">
+          <h2 className="lg:text-5xl sm:text-3xl text-2xl max-w-[80%] w-full font-semibold">
+            Ready for Action 24/7: Contact Us at
+          </h2>
+          <p className="flex items-center justify-center gap-4 font-semibold sm:text-xl text-lg">
+            <span
+              className="shrink-0 w-10 h-10 bg-red-600 rounded-full flex items-center justify-center
+                  shadow-[0_0_0px_4px_rgba(239,68,68,0.1)]"
+            >
+              <Phone className="text-white w-5 h-5" />
+            </span>
+            +123-456-7890
+          </p>
+        </div>
+        <Image
+          src="/images/about/fire-box.png"
+          alt="image"
+          width={60}
+          height={60}
+          priority
+          className=" sm:flex hidden object-contain w-80 h-80 absolute -bottom-25 right-0"
+        />
+      </div>
+    </div>
+  );
+}

components/pages/about/index.ts

@@ -0,0 +1,4 @@
+export { AboutBanner } from "./aboutBanner";
+export { Story } from "./story";
+export { AboutLine } from "./aboutLine";
+export { WhyChooseUs } from "./whyChooseUs";

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>
+  );
+}

components/pages/about/whyChooseUs.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import Image from "next/image";
+import { Check } from "lucide-react";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+export function WhyChooseUs() {
+  const features = [
+    { title: "Fast Response Team" },
+    { title: "Experienced Firefighter" },
+    { title: "Ready 24 Hours" },
+    { title: "Fast Response Team" },
+  ];
+
+  return (
+    <section className=" bg-[#1e1d1c] px-4 py-30 pb-40 md:px-8 lg:px-12">
+      <div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-2 lg:gap-16">
+        {/* Left Content */}
+        <div className="flex flex-col justify-center space-y-8">
+          {/* Header */}
+          <div>
+            <div className="mb-4 flex items-center gap-2">
+              <DotAnimatsiya />
+              <span className="text-sm font-semibold tracking-wider text-white">
+                WHY CHOOSE US
+              </span>
+            </div>
+            <h2
+              className="bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl font-bold sm:text-5xl lg:text-6xl"
+            >
+              WE ARE BEST
+              <br />
+              FIREFIGHTER
+            </h2>
+          </div>
+
+          {/* Description */}
+          <p className="text-base leading-relaxed text-gray-400 sm:text-lg">
+            Aliquam lorem ante dapibus in viverra quis a tellus phasellus
+            viverra nulla ut metus varius laoreet quisque rutrum.
+          </p>
+
+          {/* Features Grid */}
+          <div className="grid grid-cols-2 gap-4 sm:gap-6">
+            {features.map((feature, index) => (
+              <div key={index} className="flex items-center gap-3">
+                <div className="shrink-0">
+                  <Check className="h-5 w-5 text-red-600 sm:h-6 sm:w-6" />
+                </div>
+                <span className="text-sm font-medium text-white sm:text-base">
+                  {feature.title}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* CTA Button */}
+          <div>
+            <button className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4">
+              CONTACT US
+            </button>
+          </div>
+        </div>
+
+        {/* Right Image Section */}
+        <div className="relative flex items-center justify-center">
+          <div className="relative h-96 md:w-[80%] w-full sm:h-125 lg:h-150">
+            {/* Main Image */}
+            <Image
+              src="/images/about/fighter.jpg"
+              alt="Best Award Firefighter"
+              fill
+              className="rounded-3xl object-cover object-right"
+            />
+
+            {/* Overlay Gradient */}
+            <div className="absolute inset-0 rounded-3xl bg-linear-to-t from-black via-transparent to-black/0" />
+
+            {/* Award Badge */}
+            <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-3 ">
+              <Image
+                src="/images/home/emblem.png"
+                alt="Award"
+                width={70}
+                height={70}
+                className="h-24 w-24 sm:h-20 sm:w-20"
+              />
+              <div>
+                <p className="text-sm font-bold text-white sm:text-base">
+                  BEST AWARD
+                </p>
+                <p className="text-xs text-gray-400 sm:text-sm">
+                  FIREFIGHTER 2025
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/contact/form.tsx

@@ -209,7 +209,7 @@ export default function Form() {
           <button
             type="button"
             onClick={handleCheckboxChange}
-            className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
+            className={` flex h-5 w-5 items-center justify-center rounded border-2 transition ${
               formData.agreeToPolicy
                 ? "border-red-600 bg-red-600"
                 : "border-gray-400 bg-transparent"
@@ -227,7 +227,7 @@ export default function Form() {
         <button
           type="submit"
           disabled={isSubmitting}
-          className="rounded-full bg-red-600 px-8 py-3 text-sm font-semibold uppercase tracking-wider text-white transition hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-8 py-3 text-sm font-semibold uppercase tracking-wider text-white transition hover:cursor-pointer hover:scale-90 disabled:cursor-not-allowed disabled:opacity-50"
         >
           {isSubmitting ? "Sending..." : "Send Message"}
         </button>