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

> 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">News</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="/ko/news/labex-challenges-leetcode-for-linux" />

      <NewsCard icon="package" cta="아티클 읽기" title="LabEx - 최고의 Play with Docker 대안" description="브라우저 기반 인터랙티브 학습을 위한 안정적인 Docker Playground." href="/ko/news/play-with-docker-alternative" />

      <NewsCard icon="code" cta="아티클 읽기" title="LabEx - 대화형 학습을 위한 Katacoda 의 최고의 대안" description="프로그래밍과 기술 역량을 익히는 브라우저 기반 실습 랩." href="/ko/news/katacoda-alternative" />

      <NewsCard icon="replace" cta="아티클 읽기" title="LabEx Teams: 교육을 위한 Replit Teams 의 무료 대안" description="Linux, DevOps, 머신 러닝 수업을 위한 실습형 교실 플랫폼." href="/ko/news/replit-teams-for-education-alternative" />
    </div>
  </div>
</div>