> ## Documentation Index
> Fetch the complete documentation index at: https://support.labex.io/llms.txt
> Use this file to discover all available pages before exploring further.

# News

> Latest LabEx product updates, platform notes, and hands-on learning articles.

export const NewsCard = ({ icon, title, description, href, cta }) => {
  return (
    <a
      className="group relative flex h-56 overflow-hidden rounded-3xl border border-gray-200/80 bg-white/90 p-6 shadow-sm shadow-gray-950/5 transition-all duration-200 hover:-translate-y-1 hover:border-blue-300 hover:bg-white hover:shadow-xl hover:shadow-blue-950/10 dark:border-zinc-800/80 dark:bg-zinc-950/80 dark:shadow-black/20 dark:hover:border-blue-700 dark:hover:bg-zinc-950"
      href={href}
    >
      <div className="pointer-events-none absolute -right-8 -top-8 opacity-10 transition-all duration-200 group-hover:scale-105 group-hover:opacity-20">
        <Icon icon={icon} size={150} color="#9CA3AF" />
      </div>

      <div className="relative z-10 flex h-full flex-col justify-between">
        <div>
          <h3 className="max-w-3xl line-clamp-2 text-xl font-medium leading-7 text-gray-950 transition-colors group-hover:text-blue-700 dark:text-zinc-50 dark:group-hover:text-blue-400">
            {title}
          </h3>
          <p className="mt-3 max-w-2xl line-clamp-2 text-sm leading-6 text-gray-600 dark:text-zinc-400">
            {description}
          </p>
        </div>

        <div className="mt-7 flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-zinc-100">
          <span className="transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">{cta}</span>
          <span className="translate-x-0 text-blue-600 transition-transform duration-200 group-hover:translate-x-1 dark:text-blue-400">
            <Icon icon="arrow-right" size={16} />
          </span>
        </div>
      </div>
    </a>
  );
};

<div className="relative">
  <div className="relative z-10 px-4 py-16 lg:py-28 max-w-5xl mx-auto">
    <h1 className="text-center text-4xl font-medium text-gray-900 dark:text-zinc-50">
      News
    </h1>

    <div className="mx-auto mt-4 max-w-2xl px-4 text-center text-lg text-gray-500 dark:text-zinc-500">
      Follow LabEx product updates, learning platform releases, and practical notes for hands-on technical education.
    </div>

    <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:mt-16">
      <NewsCard icon="network" cta="Read article" title="LabEx Skill Trees V2: A More Precise Skill Model for Hands-On Learning" description="A more rigorous, domain-aware model for mapping technical skills to labs, challenges, progress, and recommendations." href="/en/news/labex-skill-trees-v2" />

      <NewsCard icon="terminal" cta="Read article" title="LabEx Challenges: LeetCode for Linux" description="Structured, measurable Linux practice in real hands-on environments." href="/en/news/labex-challenges-leetcode-for-linux" />

      <NewsCard icon="package" cta="Read article" title="LabEx - The Best Alternative to Play with Docker" description="A stable Docker Playground for interactive, browser-based learning." href="/en/news/play-with-docker-alternative" />

      <NewsCard icon="code" cta="Read article" title="LabEx - The Best Alternative to Katacoda for Interactive Learning" description="Browser-based hands-on labs for mastering programming and technology skills." href="/en/news/katacoda-alternative" />

      <NewsCard icon="replace" cta="Read article" title="LabEx Teams: Free Alternative to Replit Teams for Education" description="A practical classroom platform for Linux, DevOps, and machine learning courses." href="/en/news/replit-teams-for-education-alternative" />
    </div>
  </div>
</div>