> ## 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.

# ニュース

> LabEx の製品アップデート、プラットフォーム情報、ハンズオン学習の記事。

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">ニュース</h1>

    <div className="mx-auto mt-4 max-w-2xl px-4 text-center text-lg text-gray-500 dark:text-zinc-500">
      LabEx の製品アップデート、学習プラットフォームのリリース、ハンズオン技術教育の実践記事を紹介します。
    </div>

    <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:mt-16">
      <NewsCard icon="terminal" cta="記事を読む" title="LabEx Challenges: Linux 版 LeetCode" description="構造化され測定可能な Linux 練習を、実際のハンズオン環境で提供します。" href="/jp/news/labex-challenges-leetcode-for-linux" />

      <NewsCard icon="package" cta="記事を読む" title="LabEx - Play with Docker に代わる最適な選択肢" description="ブラウザベースの対話型学習に適した安定した Docker Playground。" href="/jp/news/play-with-docker-alternative" />

      <NewsCard icon="code" cta="記事を読む" title="LabEx - インタラクティブ学習のための Katacoda の最良の代替手段" description="プログラミングと技術スキルを習得するためのブラウザベースのハンズオンラボ。" href="/jp/news/katacoda-alternative" />

      <NewsCard icon="replace" cta="記事を読む" title="LabEx Teams: 教育向けの Replit Teams の無料代替手段" description="Linux、DevOps、機械学習コース向けの実践的な教室プラットフォーム。" href="/jp/news/replit-teams-for-education-alternative" />
    </div>
  </div>
</div>