"use client"; import React, { useRef } from "react"; import { ArrowUpRight, Users, MessageSquare, Flag, Bookmark } from "lucide-react"; import { motion, useInView } from "framer-motion"; // ============================================================================ // ANIMATED CONTENT (inlined) // ============================================================================ interface AnimatedContentProps { children: React.ReactNode; delay?: number; className?: string; } function AnimatedContent({ children, delay = 0, className = "" }: AnimatedContentProps) { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-50px" }); return (

{children}

); } // ============================================================================ // MAIN COMPONENT // ============================================================================ interface Blog01PixaProps { className?: string; } export default function Blog01Pixa({ className }: Blog01PixaProps) { const blogPosts = [ { id: 1, image: "https://cdn.jiro.build/Pixa/blog-2.png", category: "Performance-based pricing", title: "How to give clear feedback that actually helps your team", badgeColor: "bg-[#F3E8FF] text-[#9333EA]", badgeIcon: MessageSquare }, { id: 2, image: "https://cdn.jiro.build/Pixa/blog-1.png", category: "Performance-based pricing", title: "Why continuous learning is key to team retention", badgeColor: "bg-[#FFEDD5] text-[#EA580C]", badgeIcon: Bookmark }, { id: 3, image: "https://cdn.jiro.build/Pixa/blog.png", category: "Performance-based pricing", title: "Building a culture of trust through transparent ops", badgeColor: "bg-[#FCE7F3] text-[#DB2777]", badgeIcon: Flag } ]; return ( <> {/* Google Fonts */}

{/* Section Header */}

Blog & insight

Smarter people ops start with learning

Save hours every week, simplify workflows, and help your HR team focus on people — not processes.

See it in action now

{/* Blog Grid */}

{blogPosts.map((post, index) => ( {/* Image Container */}

{/* Content */}

{/* Badge */}

{post.badgeIcon && } {post.category}

{/* Title */}

{post.title}

{/* Read More Link */} Read more

))}

); }