new

components/pages/home/banner.tsx

@@ -0,0 +1,96 @@
+import DotAnimatsiya from "../../dot/DotAnimatsiya";
+
+export function Banner() {
+  return (
+    <section className="relative w-full lg:h-[86vh] h-screen min-h-[600px] overflow-hidden pt-20">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/home/banner.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, #d2610ab0 0%, #1e1d1ce3 20%, #1e1d1ce3 100%)`,
+        }}
+      />
+
+      {/* Content Container */}
+      <div className="relative z-20 h-full flex items-end lg:mt-0 md:mt-[15vh] sm:mt-[5vh] mt-0">
+        <div className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
+            {/* Right side - Text Content */}
+            <div className="lg:hidden inline-block space-y-6 text-white">
+              {/* Badge */}
+              <div className="flex items-center gap-2 w-fit">
+                <DotAnimatsiya />
+                <span className="text-sm font-semibold tracking-wide">
+                  WELCOME TO FIREFORCE
+                </span>
+              </div>
+
+              {/* Main Heading */}
+              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
+                THE FIRE GUARDIAN
+              </h1>
+
+              {/* Description */}
+              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
+                They are seen as a beacon of hope, a figure who brings calm
+                amidst chaos and light in the darkest of moments.
+              </p>
+
+              {/* CTA Button */}
+              <button className="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">
+                GET STARTED
+              </button>
+            </div>
+
+            {/* Left side - Firefighters Image */}
+            <div className="flex items-end justify-center">
+              <img
+                src="/images/home/bannerHuman.png"
+                alt="Firefighters"
+                loading="lazy"
+                className="w-full max-lg:w-[80vw] h-auto object-cover drop-shadow-2xl"
+              />
+            </div>
+
+            {/* Right side - Text Content */}
+            <div className="lg:inline-block hidden space-y-6 text-white mb-20">
+              {/* Badge */}
+              <div className="flex items-center gap-2 w-fit">
+                <DotAnimatsiya />
+                <span className="text-sm font-semibold tracking-wide">
+                  WELCOME TO FIREFORCE
+                </span>
+              </div>
+
+              {/* Main Heading */}
+              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
+                THE FIRE GUARDIAN
+              </h1>
+
+              {/* Description */}
+              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
+                They are seen as a beacon of hope, a figure who brings calm
+                amidst chaos and light in the darkest of moments.
+              </p>
+
+              {/* CTA Button */}
+              <button className="shadow-[0px_0px_2px_8px_#ff01015c] 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">
+                GET STARTED
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/home/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from "./banner";
+export { Statistics } from "./statistics";

components/pages/home/statistics.tsx

@@ -0,0 +1,49 @@
+export function Statistics() {
+  const stats = [
+    {
+      number: '25',
+      symbol: '+',
+      label: 'Years Experience',
+    },
+    {
+      number: '450',
+      symbol: '+',
+      label: 'Families Saved',
+    },
+    {
+      number: '99',
+      symbol: '+',
+      label: 'Trained Staff',
+    },
+    {
+      number: '93',
+      symbol: '%',
+      label: 'Trusted Clients',
+    },
+  ];
+
+  return (
+    <section className="w-full bg-black py-10 sm:py-20 lg:py-15">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
+          {stats.map((stat, index) => (
+            <div key={index} className="flex flex-col items-center justify-center">
+              {/* Number and Symbol */}
+              <div className="flex items-baseline gap-2">
+                <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
+                  {stat.number}
+                </span>
+                <span className="text-2xl sm:text-3xl font-bold text-red-600">{stat.symbol}</span>
+              </div>
+
+              {/* Label */}
+              <p className="text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
+                {stat.label}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}