tenext redesign

components/sections/BlogSection.tsx

@@ -0,0 +1,75 @@
+import Link from "next/link";
+import Image from "next/image";
+import { ArrowUpRight } from "lucide-react";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { resources } from "@/data/site-pages";
+
+/** Cover images, paired to the insights in data/site-pages.ts by order. */
+const coverImages = [
+  "/images/tenext/portrait-confident-man.jpg",
+  "/images/tenext/Group-18301.jpg",
+  "/images/tenext/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png",
+];
+
+const blogPosts = resources.map((resource, i) => ({
+  title: resource.title,
+  description: resource.description,
+  image: coverImages[i % coverImages.length],
+  category: resource.category,
+  link: `/resources#${resource.id}`,
+}));
+
+export function BlogSection() {
+  return (
+    <section className="bg-[#F8F9FA] px-[20px] py-[80px] md:py-[120px]">
+      <div className="mx-auto max-w-[1260px]">
+        <div className="mb-[60px] flex flex-col items-center text-center">
+          <SectionHeading
+            tag="insights"
+            title="Perspectives on cloud, data, AI, and product engineering"
+            titleClassName="max-w-[800px] text-tenext-dark"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 gap-[30px] md:grid-cols-2 lg:grid-cols-3">
+          {blogPosts.map((post, index) => (
+            <div
+              key={index}
+              className="group flex flex-col overflow-hidden rounded-[25px] border border-tenext-card-border bg-white transition-shadow duration-300 hover:shadow-xl"
+            >
+              <div className="relative h-[250px] w-full overflow-hidden">
+                <Image
+                  src={post.image}
+                  alt={post.title}
+                  fill
+                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                  className="object-cover transition-transform duration-500 group-hover:scale-110"
+                />
+                <div className="absolute left-[20px] top-[20px] rounded-full bg-white px-[15px] py-[5px] text-[12px] font-bold tracking-wide text-tenext-dark uppercase font-[var(--font-sora)]">
+                  {post.category}
+                </div>
+              </div>
+              <div className="flex flex-col p-[30px]">
+                <h4 className="mb-[12px] text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)] transition-colors group-hover:text-tenext-accent-teal">
+                  <Link href={post.link}>{post.title}</Link>
+                </h4>
+                <p className="mb-[20px] text-[15px] leading-[1.6] text-tenext-text-muted">
+                  {post.description}
+                </p>
+                <div className="mt-auto">
+                  <Link
+                    href={post.link}
+                    className="inline-flex items-center gap-[10px] text-[15px] font-bold text-tenext-dark font-[var(--font-sora)] hover:text-tenext-accent-teal"
+                  >
+                    Learn more
+                    <ArrowUpRight className="h-[18px] w-[18px]" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}