Skip to content

cards #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lazarusA merged 1 commit into from
Jul 30, 2025
Merged

cards #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,5 @@ yarn-error.log*
next-env.d.ts
package-lock.json
page.module.css
NewsCard.tsx
NewsCard.tsx
pnpm-lock.yaml
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@mdx-js/react": "^3.1.0",
"@next/mdx": "^15.3.3",
"@radix-ui/react-accordion": "^1.2.11",
"@radix-ui/react-avatar": "^1.1.10",
"@radix-ui/react-navigation-menu": "^1.2.13",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slot": "^1.2.3",
Expand Down
110 changes: 45 additions & 65 deletions src/app/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import ContentSplitSection from '@/components/ContentSplitSection';
import Image from 'next/image';
// import EarthGlobe from '@/components/EarthGlobe';
Expand All @@ -12,73 +11,54 @@ import { SiMdx } from "react-icons/si";
import { SiThreedotjs } from "react-icons/si";
import { SiTypescript } from "react-icons/si";
import { FaHeartbeat } from "react-icons/fa";
import { CustomCard, CustomCardHorizontal } from '@/components/CustomCard';

import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"

<div className={`w-full rounded-lg overflow-hidden`}>
<div className="mx-auto py-2 md:py-2 flex flex-col md:flex-row items-center">
<>
<div className="md:w-2/3 mb-8 md:mb-0 md:mx-8 text-center md:text-left">
<h1
className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl font-bold leading-tight px-2 -mb-3"
style={{
background: 'linear-gradient(90deg, #2563eb, #22c55e, #0d9488)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}
>
EarthNet Initiative
</h1>
<h2 className="text-xl md:text-2xl lg:text-3xl font-semibold leading-tight px-2 text-gray-700">
Towards Earth surface forecasting
</h2>
</div>
<div className={`md:w-1/2 flex justify-center md:mx-8`}>
<MagicBox />
</div>
</>
<div className={`w-full rounded-lg overflow-hidden`}>
<div className="mx-auto py-2 md:py-2 flex flex-col md:flex-row items-center">
<>
<div className="md:w-2/3 mb-8 md:mb-0 md:mx-8 text-center md:text-left">
<h1
className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl font-bold leading-tight px-2 -mb-3"
style={{
background: 'linear-gradient(90deg, #2563eb, #22c55e, #0d9488)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}
>
EarthNet Initiative
</h1>
<h2 className="text-xl md:text-2xl lg:text-3xl font-semibold leading-tight px-2 text-gray-700">
Towards Earth surface forecasting
</h2>
</div>
</div>

{/* <ContentSplitSection
title="EarthNet Initiative"
subtitle="Towards Earth surface forecasting"
media={<MagicBox />}
layout='text-emphasis'
/> */}
<div className={`md:w-1/2 flex justify-center md:mx-8`}>
<MagicBox />
</div>
</>
</div>
</div>

{/* set a grid of cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<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"
/>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> <a href='/science' target='_blank'> Earth surface forecasting </a> </CardTitle>
<FaHeartbeat size={24}/>
<CardDescription>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. </CardDescription>
</CardHeader>
</Card>
<CustomCard
title="EarthNet Team"
description="Meet our team."
href="/team"
avatarSrc="https://github.com/shadcn.png"
avatarFallback="AI"
/>

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> <a href='/team' target='_blank'> EarthNet Team </a> </CardTitle>
<SiMdx size={24} />
<CardDescription> Meet our team. </CardDescription>
</CardHeader>
</Card>
<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle><a href='/resources/opportunities' target='_blank'>Opportunities</a></CardTitle>
<SiNextdotjs size={24}/>
<CardDescription>Come work or collaborate with us!</CardDescription>
</CardHeader>
</Card>
<CustomCard
title="Opportunities"
description="Come work or collaborate with us!"
href="/resources/opportunities"
/>
</div>
54 changes: 15 additions & 39 deletions src/app/science/deepcube/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,30 @@
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { CustomCard, CustomCardHorizontal } from '@/components/CustomCard';
import { FilteredTeamCardsGallery } from '@/components/TeamCardsGallery';


<div className="flex justify-center my-8">
<img src="/projects/logo_deepcube.png" alt="DeepCube" className="w-64 h-auto" />
</div>



Welcome to DeepCube – a Horizon 2020 Space project that will unlock the potential of big Copernicus data with Artificial Intelligence and Semantic Web technologies, with the objective to address problems of high environmental and societal impact.



<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> <a href='https://deepcube-h2020.eu/' target='_blank'> Visit DeepCube-H2020.eu </a> </CardTitle>
<CardDescription> For further information </CardDescription>
</CardHeader>
</Card>

</div>
<CustomCard
title="Visit DeepCube-H2020.eu"
description="For further information"
href="https://deepcube-h2020.eu/"
/>


<h1 className="text-3xl font-bold text-center -mb-6">EarthNet Team Contributions</h1>
<div></div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<div className="flex items-start gap-3">
<img src="/projects/deepcube_droughticon.png" alt="Drought" className="w-16 h-16 mt-1 flex-shrink-0" />
<div className="flex-1">
<CardTitle> <a href='https://deepcube-h2020.eu/use-cases/forecasting-localized-extreme-drought-and-heat-impacts-in-africa/' target='_blank'> Forecasting Drought Impacts in Africa </a> </CardTitle>
<CardDescription> We leverage deep neural networks to forecast the impact of drought on vegetation as seen from Sentinel 2 satellite images. </CardDescription>
</div>
</div>
</CardHeader>
</Card>

<br/>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
<CustomCardHorizontal
title="Forecasting Drought Impacts in Africa"
description="We leverage deep neural networks to forecast the impact of drought on vegetation as seen from Sentinel 2 satellite images."
href="https://deepcube-h2020.eu/use-cases/forecasting-localized-extreme-drought-and-heat-impacts-in-africa/"
avatarSrc="/projects/deepcube_droughticon.png"
/>
</div>


Expand Down
54 changes: 18 additions & 36 deletions src/app/science/deepextremes/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { CustomCard, CustomCardHorizontal } from '@/components/CustomCard';
import { FilteredTeamCardsGallery } from '@/components/TeamCardsGallery';


Expand All @@ -25,38 +17,27 @@ The principle is to start from sampling a subset of large events in Sentinel era

The activity then aims to train complementary deep-learning methods for prediction and understanding dynamics in such events, implement the tested and validated workflow in a cloud environment and developing it further based on community feedback. Science community engagement is planned via workshops and science discussions to further develop the proposed framework.


<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> <a href='https://rsc4earth.de/project/deepextremes/' target='_blank'> Visit the RSC4Earth Center website</a> </CardTitle>
<CardDescription> For further information </CardDescription>
</CardHeader>
</Card>

</div>
<CustomCard
title="Visit the RSC4Earth Center website"
description="For further information"
href="https://rsc4earth.de/project/deepextremes/"
/>


<h1 className="text-3xl font-bold text-center -mb-6">Published Datasets</h1>
<div></div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> <a href='https://www.nature.com/articles/s41597-025-04447-5#Sec10' target='_blank'> DeepExtremeCubes </a> </CardTitle>
<CardDescription> Minicubes co-located with compound hot and dry events </CardDescription>
</CardHeader>
</Card>

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> <a href='https://essd.copernicus.org/preprints/essd-2024-396/' target='_blank'> Dheed </a> </CardTitle>
<CardDescription> A global database of compound hot and dry extremes </CardDescription>
</CardHeader>
</Card>

<CustomCard
title="DeepExtremeCubes"
description="Minicubes co-located with compound hot and dry events"
href="https://www.nature.com/articles/s41597-025-04447-5#Sec10"
/>
<CustomCard
title=" Dheed"
description="A global database of compound hot and dry extremes"
href="https://essd.copernicus.org/preprints/essd-2024-396/"
/>
</div>


Expand All @@ -68,5 +49,6 @@ The activity then aims to train complementary deep-learning methods for predicti


<h1 className="text-3xl font-bold text-center -mb-6">Partners</h1>
<div></div>
<br/>

![Overview of all the DeepExtremes partners: Leipzig University, Brockmann Consult, Universitat de Valencia and Max Planck Institute for Biogeochemistry](/projects/deepextremes_partnersoverview.png)
44 changes: 12 additions & 32 deletions src/app/science/elias/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,32 @@
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { CustomCard, CustomCardHorizontal } from '@/components/CustomCard';
import { FilteredTeamCardsGallery } from '@/components/TeamCardsGallery';


<div className="flex justify-center my-8">
<img src="/projects/logo_elias.png" alt="ELIAS" className="w-64 h-auto" />
</div>



European Lighthouse of AI for Sustainability.

ELIAS aims at establishing Europe as a leader in Artificial Intelligence (AI) research that drives sustainable innovation and economic development.

We will create a Network of Excellence connecting researchers in academia with practitioners in the industry to differentiate Europe as a region where AI research builds towards a sustainable long-term future for our planet, contributes to a cohesive society, and respects individual preferences and rights.



<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> <a href='https://elias-ai.eu/' target='_blank'> Visit ELIAS-AI.eu </a> </CardTitle>
<CardDescription> For further information </CardDescription>
</CardHeader>
</Card>

</div>

<CustomCard
title="Visit ELIAS-AI.eu"
description="For further information"
href="https://elias-ai.eu/"
/>

<h1 className="text-3xl font-bold text-center -mb-6">EarthNet Team Contributions</h1>
<div></div>
<br/>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">

<Card className="w-full max-w-sm hover:bg-[var(--accent)] transition-colors duration-200">
<CardHeader>
<CardTitle> AI for Forecasting of Vegetation State </CardTitle>
<CardDescription>Studying AI-based predictions of the effects of climate extremes on ecosystems, which can then be translated into crop harvest, forest health and water balance forecasts. </CardDescription>
</CardHeader>
</Card>
<CustomCard
title="AI for Forecasting of Vegetation State"
description="Studying AI-based predictions of the effects of climate extremes on ecosystems, which can then be translated into crop harvest, forest health and water balance forecasts."
/>

</div>

Expand Down
Loading
Loading