page.mdx

import Image from "next/image"; import { Button } from "@/components/ui/button"; import { CustomCard, CustomCardHorizontal } from "@/components/CustomCard"; import { WiStars } from "react-icons/wi"; import Link from "next/link";

export default function Landing() { return (

{/* Background */}

  {/* Hero Content */}
  <div className="relative z-10 flex flex-col items-center text-center max-w-4xl px-6 pt-24">
    {/* Small badge */}
   <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-gray-600/20 px-4 py-1 text-sm text-white hover:bg-gray-900/30 transition">
    <Link href="/science/weathergenerator" className="flex items-center gap-2">
      <WiStars size={18} className="text-white-300" />
      <span>New: WeatherGenerator Project</span>
    </Link>
  </div>

    {/* Main headline */}
    <h1 className="text-4xl md:text-6xl font-bold leading-tight text-white">
      Forecasting Earth’s Future with AI
    </h1>

    {/* Subheading */}
    <p className="mt-4 text-lg md:text-xl text-gray-300 max-w-2xl">
      Never miss the signals of change. From crop yields to ecosystem health,
      we help predict the future of Earth’s surface.
    </p>

    {/* CTA */}
    <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
      <Button
        size="lg"
        className="bg-gradient-to-r from-blue-600 to-teal-600 hover:from-blue-700 hover:to-teal-700 text-white px-8"
        asChild
      >
        <a href="/science">Explore Our Research</a>
      </Button>
      <Button
        size="lg"
        variant="outline"
        className="border-2 border-gray-300 text-gray-200 bg-black hover:bg-gray-200/10"
        asChild
      >
        <Link href="/resources/datasets">Access Datasets</Link>
      </Button>
    </div>
  </div>

  {/* Cards Section (inline with hero, still visible) */}
  <div className="relative z-10 w-full max-w-6xl px-6 py-12">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <CustomCardHorizontal
        title="Earth Surface Forecasting"
        description="Using Machine Learning to forecast the dynamics of Earth's surface, we can predict crop yield, forest health, the effects of a drought and more."
        href="/science"
        avatarSrc="publication_preview/requenamesa_earthvision_2021.gif"
      />

      <CustomCardHorizontal
        title="EarthNet Team"
        description="We are an interdisciplinary group interested in the applications of machine learning to Earth System Science."
        href="/team"
        avatarSrc="header/mpibgc_field.png"
      />

      <CustomCardHorizontal
        title="Opportunities"
        description="Come work or collaborate with us!"
        href="/resources/opportunities"
        avatarSrc="header/workshop_kigali.png"
      />
    </div>
  </div>
</section>

); }