> ## 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 Produktupdates, Plattformnotizen und Artikel zum praktischen Lernen.

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">
      Folge LabEx Produktupdates, Plattformveroffentlichungen und praktischen Artikeln zur technischen Ausbildung.
    </div>

    <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:mt-16">
      <NewsCard icon="terminal" cta="Artikel lesen" title="LabEx Challenges: LeetCode für Linux" description="Strukturiertes und messbares Linux-Training in echten Hands-on-Umgebungen." href="/de/news/labex-challenges-leetcode-for-linux" />

      <NewsCard icon="package" cta="Artikel lesen" title="LabEx - Die beste Alternative zu Play with Docker" description="Ein stabiler Docker Playground fur interaktives Lernen im Browser." href="/de/news/play-with-docker-alternative" />

      <NewsCard icon="code" cta="Artikel lesen" title="LabEx - Die beste Alternative zu Katacoda für interaktives Lernen" description="Browserbasierte Hands-on-Labs zum Erlernen von Programmier- und Technologiekenntnissen." href="/de/news/katacoda-alternative" />

      <NewsCard icon="replace" cta="Artikel lesen" title="LabEx Teams: Kostenlose Alternative zu Replit Teams für die Bildung" description="Eine praktische Unterrichtsplattform fur Linux, DevOps und Machine Learning." href="/de/news/replit-teams-for-education-alternative" />
    </div>
  </div>
</div>