contact page

components/pages/home/blog.tsx

@@ -0,0 +1,97 @@
+import Image from "next/image";
+import { ChevronRight } from "lucide-react";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+const blogPosts = [
+  {
+    id: 1,
+    image: "/images/home/videoSlide1.jpg",
+    category: "Tips & Trick",
+    title: "BEHIND THE HELMET: LIFE AS A FIREFIGHTER",
+    author: "John Doe",
+    date: "July 24, 2025",
+  },
+  {
+    id: 2,
+    image: "/images/home/videoSlide2.jpg",
+    category: "Insight",
+    title: "FIREFIGHTING EQUIPMENT: TOOLS OF THE TRADE",
+    author: "John Doe",
+    date: "July 24, 2025",
+  },
+  {
+    id: 3,
+    image: "/images/home/videoSlide4.jpg",
+    category: "News",
+    title: "FIREFIGHTER TRAINING TAKES TO BECOME A HERO",
+    author: "John Doe",
+    date: "July 24, 2025",
+  },
+];
+
+export function Blog() {
+  return (
+    <section className="bg-[#1f1f1f] py-45">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-12 text-center">
+          <div className="mb-4 flex items-center justify-center gap-2">
+            <DotAnimatsiya />
+            <span className="text-sm font-semibold tracking-wider text-white uppercase">
+              Blog & Articles
+            </span>
+          </div>
+          <h2
+            className="bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
+          >
+            LATEST BLOG & NEWS
+          </h2>
+        </div>
+
+        {/* Blog Cards Grid */}
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-sm:place-items-center">
+          {blogPosts.map((post) => (
+            <article key={post.id} className="group">
+              {/* Image Container */}
+              <div className="relative mb-6 aspect-4/2 md:aspect-4/3 overflow-hidden rounded-lg">
+                <Image
+                  src={post.image || "/placeholder.svg"}
+                  alt={post.title}
+                  fill
+                  className="object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+                {/* Category Badge */}
+                <div className="absolute bottom-4 left-4">
+                  <span className="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white">
+                    {post.category}
+                  </span>
+                </div>
+              </div>
+
+              {/* Content */}
+              <div>
+                <h3 className="mb-3 text-lg font-bold leading-tight tracking-wide text-white uppercase md:text-xl">
+                  {post.title}
+                </h3>
+                <p className="mb-4 text-sm text-gray-400">
+                  <span className="text-gray-500">by </span>
+                  <span className="text-white">{post.author}</span>
+                  <span className="mx-2 text-gray-500">•</span>
+                  <span className="text-gray-400">{post.date}</span>
+                </p>
+                <a
+                  href="#"
+                  className="inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
+                >
+                  Read More
+                  <ChevronRight className="h-4 w-4" />
+                </a>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}