- Bridging data and discovery with state-of-the-art digital twin technology
+ return (
+
+
+
+
+
+
Digital Twins:
+ Innovative Research for a Sustainable Future
+
+
+
+ Bridging data and discovery with state-of-the-art digital twin technology
+
+
+ Advancing climate knowledge through digital twins
+
+
+ Harnessing advanced simulations to adapt to and mitigate climate impacts
+
+
+
+
+
+
+ Keep exploring
+
+
-
- Advancing climate knowledge through digital twins
-
-
- Harnessing advanced simulations to adapt to and mitigate climate impacts
-
-
-
-
-
-
- Keep exploring
-
-
-
Bridging data and discovery with state-of-the-art digital twin technology
- Advancing climate knowledge through digital twins
- Harnessing advanced simulations to adapt to and mitigate climate impacts
-
- );
+
+ Bridging data and discovery with state-of-the-art digital twin technology
+ Advancing climate knowledge through digital twins
+ Harnessing advanced simulations to adapt to and mitigate climate impacts
+
+ );
};
\ No newline at end of file
diff --git a/src/components/know-more-button/index.tsx b/src/components/know-more-button/index.tsx
new file mode 100644
index 0000000..2bb04df
--- /dev/null
+++ b/src/components/know-more-button/index.tsx
@@ -0,0 +1,18 @@
+import ArrowDown from "@/svgs/arrow-down.svg";
+import { Button } from "@/components/button";
+import { cn } from "@/lib/utils";
+
+const KnowMoreButton = ({ onClick, opened }: {
+ onClick: () => void;
+ opened?: boolean;
+}) => (
+
+);
+export default KnowMoreButton;
\ No newline at end of file
diff --git a/src/components/lines/index.tsx b/src/components/lines/index.tsx
index 067cc51..5bf2885 100644
--- a/src/components/lines/index.tsx
+++ b/src/components/lines/index.tsx
@@ -2,40 +2,68 @@
import { cn } from '@/lib/utils';
import { AnimatePresence, motion, stagger } from 'framer-motion';
-const Lines = ({
- sectionName,
- columns = [],
- rows = [],
- colorClass = 'bg-white/20'
-}: {
+type LinesProps = {
sectionName: string;
- columns?: number[];
rows?: number[];
colorClass?: string;
-}) => {
+ verticalClassName?: string;
+} & (
+ | { hoveringColumnsNumber: number; columns?: never; hoveredIndex: number | null }
+ | { columns: number[]; hoveringColumnsNumber?: never; hoveredIndex?: never }
+ );
+const Lines = ({
+ sectionName,
+ columns = [],
+ rows = [],
+ colorClass = 'bg-white/20',
+ verticalClassName,
+ hoveringColumnsNumber = 0,
+ hoveredIndex,
+}: LinesProps) => {
+ console.log(hoveringColumnsNumber, Array(hoveringColumnsNumber).fill(null))
+ const gridColumns = {
+ 'grid transition-all duration-500': true,
+ 'grid-cols-[1.2fr_0.9fr_0.9fr]': hoveredIndex === 0,
+ 'grid-cols-[0.9fr_1.2fr_0.9fr]': hoveredIndex === 1,
+ 'grid-cols-[0.9fr_0.9fr_1.2fr]': hoveredIndex === 2,
+ 'grid-cols-[1fr_1fr_1fr]': hoveredIndex === null,
+ };
return <>
-
-
+ {/* Vertical lines */}
+
+
{
- columns.map((x, index) => (
-
- ))
+ !!columns?.length ?
+ columns.map((x, index) => (
+
+ )) :
+ (
+ Array(hoveringColumnsNumber).fill(null).map((_, index) => (
+
+ ))
+ )
}
-
+ {/* Horizontal lines */}
+
{rows.map((y, index) => (
))}
diff --git a/src/components/section-1/index.tsx b/src/components/section-1/index.tsx
new file mode 100644
index 0000000..e97b46e
--- /dev/null
+++ b/src/components/section-1/index.tsx
@@ -0,0 +1,103 @@
+'use client';
+import Lines from "@/components/lines";
+import Image from "next/image";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import KnowMoreButton from "@/components/know-more-button";
+import { cn } from "@/lib/utils";
+
+export default function Section1() {
+ const [openedKnowMore, setOpenedKnowMore] = useState(false);
+ const [hoveredIndex, setHoveredIndex] = useState
(null);
+ const gridColumns = {
+ 'grid transition-all duration-500': true,
+ 'grid-cols-[1.2fr_0.9fr_0.9fr]': hoveredIndex === 0,
+ 'grid-cols-[0.9fr_1.2fr_0.9fr]': hoveredIndex === 1,
+ 'grid-cols-[0.9fr_0.9fr_1.2fr]': hoveredIndex === 2,
+ 'grid-cols-[1fr_1fr_1fr]': hoveredIndex === null,
+ };
+ return (
+
+
+
+
+
Understanding digital twins
+
A digital twin is a highly sophisticated virtual replica of a physical system, process, or object. It includes a tight integration between models, data and decisions with applications across multiple areas of science, technology, and society.
+
setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} />
+
+ {openedKnowMore &&
+ In the context of climate science, a digital twin of the Earth system integrates extensive data sets from real-world observations and simulations to create a dynamic, interactive model. This virtual environment allows the climate adaptation and mitigation community to experiment, predict, and analyse different scenarios with unprecedented detail, quality and consistency, while allowing users to address relevant ‘what-if’ questions.
+ }
+
+
+
+ {Array(3).fill(null).map((_, index) => (
+
setHoveredIndex(index)}
+ onMouseLeave={() => setHoveredIndex(null)}
+ >
+
+
+ ))}
+
+
+
+
+ How the digital twin for climate change adaptation helps research and society?
+
+
+
+
+
+
+
01
+
Understanding processes:
+
+
The digital twin produces simulations that allow researchers to understand the complex interactions of phenomena in the Earth-system that determine how our planet evolves.
+
+
+
+
+
+
02
+
Simulating scenarios:
+
+
The digital twin allows researchers, policy makers and practitioners to develop and test different climate and impact scenarios that help understand what might happen under various conditions.
+
+
+
+
+
+
+
+
03
+
Improving decision-making:
+
+
By providing clear and accurate insights on the past, present and future, the digital twin can support decision-makers, policy-makers and world leaders make better informed decisions to address climate-related risks effectively and sustainably
+
+
+
+
+
+
04
+
Enhancing interdisciplinary and transdisciplinarity::
+
+
Virtual models support collaboration among users from different disciplines, impact sectors, and geographical locations, ensuring a holistic approach to studying and solving real climate challenges.
+
+
+
+
+