diff --git a/public/images/energy-section-1-1.png b/public/images/energy-section-1-1.png new file mode 100644 index 0000000..05105ec Binary files /dev/null and b/public/images/energy-section-1-1.png differ diff --git a/public/images/energy-section-1-2.png b/public/images/energy-section-1-2.png new file mode 100644 index 0000000..638b040 Binary files /dev/null and b/public/images/energy-section-1-2.png differ diff --git a/public/images/energy-section-1-3.png b/public/images/energy-section-1-3.png new file mode 100644 index 0000000..33fee2b Binary files /dev/null and b/public/images/energy-section-1-3.png differ diff --git a/public/videos/energy-intro-bg.webm b/public/videos/energy-intro-bg.webm new file mode 100644 index 0000000..3b81925 Binary files /dev/null and b/public/videos/energy-intro-bg.webm differ diff --git a/public/videos/energy-section-1.webm b/public/videos/energy-section-1.webm new file mode 100644 index 0000000..973eda1 Binary files /dev/null and b/public/videos/energy-section-1.webm differ diff --git a/src/app/case-study-energy/page.tsx b/src/app/case-study-energy/page.tsx index fa8fd46..af2ffe7 100644 --- a/src/app/case-study-energy/page.tsx +++ b/src/app/case-study-energy/page.tsx @@ -1,9 +1,11 @@ import Intro from '@/components/energy/intro'; +import Section1 from '@/components/energy/section-1'; export default function Energy() { return (
+
); } \ No newline at end of file diff --git a/src/components/energy/section-1/index.tsx b/src/components/energy/section-1/index.tsx new file mode 100644 index 0000000..23d0d97 --- /dev/null +++ b/src/components/energy/section-1/index.tsx @@ -0,0 +1,166 @@ +'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"; +import FadeIn from "@/components/animations/fade-in"; +import { useIsMobile } from "@/lib/hooks"; + +export default function Section1() { + const [openedKnowMore, setOpenedKnowMore] = useState(false); + const [hoveredIndex, setHoveredIndex] = useState(null); + const isMobile = useIsMobile(); + + const gridColumns = isMobile ? 'flex flex-col' : { + 'grid transition-all duration-500': true, + 'grid-cols-[1.3fr_0.9fr_0.9fr_0.9fr]': hoveredIndex === 0, + 'grid-cols-[0.9fr_1.3fr_0.9fr_0.9fr]': hoveredIndex === 1, + 'grid-cols-[0.9fr_0.9fr_1.3fr_0.9fr]': hoveredIndex === 2, + 'grid-cols-[0.9fr_0.9fr_0.9fr_1.3fr]': hoveredIndex === 3, + 'grid-cols-[1fr_1fr_1fr_1fr]': hoveredIndex === null + }; + + return ( +
+
+ +
+
Wind energy production
+
+ Advanced simulations for a climate resilient energy sector +
+
+
+ +
+
+

The green transition boosts resilience to climate disruptions through renewable energy and advanced digital simulations.

+ setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} /> + + {openedKnowMore && + Effective planning and implementation of renewable energy sources, such as wind power, can significantly reduce our dependence on fossil fuels, leading to a cleaner and more stable energy future. By providing advanced simulations and data-driven insights, the climate adaptation digital twin is instrumental in this transformation. + } + +
+ {isMobile ? +
+ + + +
:
+
+ + {Array(3).fill(null).map((_, index) => ( + setHoveredIndex(index + 1)} + onMouseLeave={() => setHoveredIndex(null)} + > + + + ))} + +
} +
+
+ +

+ How can a digital twin help the energy sector? +

+ +
+ +
+
+
+
+
01
+
Predicting renewable energy production:
+
+
The advanced simulations of the digital twin enable users to explore different climate scenarios and predict renewable energy production according to the variability of climate conditions.
+
+
+
+
+
+
02
+
Enhancing grid stability and reliability:
+
+
A more accurate prediction of renewable energy production facilitates a smoother integration of renewable sources to the energy grid, enhancing grid stability and reducing the dependence on less reliable energy sources. This is key to ensure that the energy supply can meet the energy demand.
+
+
+
+
+
+
03
+
Developing strategies for climate extremes:
+
+
A digital twin allows the analysis of past extreme events to understand the conditions under which they had occurred. This allows the development of more efficient adaptation strategies in the light of the future increase in the frequency and the intensity of extreme events, offering a powerful combination of retrospective and prospective analysis.
+
+
+
+ +
+
+
+ +
+
+

Transforming wind to energy

+

The renewable energy sector is significantly impacted by climate variability and change.

+ setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} /> + + {openedKnowMore && + Phenomena such as wind droughts, heatwaves, and droughts can both affect energy supply and demand. In the case of wind, daily variability is especially relevant, which makes high-resolution information desirable. + } + +
+
+
+
); +}; \ No newline at end of file diff --git a/src/components/lines/index.tsx b/src/components/lines/index.tsx index 2281e06..d15c7b5 100644 --- a/src/components/lines/index.tsx +++ b/src/components/lines/index.tsx @@ -31,6 +31,15 @@ const Lines = ({ 'grid-cols-[1fr_1fr_1fr_1px]': hoveredIndex === null, }; + const gridColumns4 = { + 'grid transition-all duration-500': true, + 'grid-cols-[1.3fr_0.9fr_0.9fr_0.9fr_1px]': hoveredIndex === 0, + 'grid-cols-[0.9fr_1.3fr_0.9fr_0.9fr_1px]': hoveredIndex === 1, + 'grid-cols-[0.9fr_0.9fr_1.3fr_0.9fr_1px]': hoveredIndex === 2, + 'grid-cols-[0.9fr_0.9fr_0.9fr_1.3fr_1px]': hoveredIndex === 3, + 'grid-cols-[1fr_1fr_1fr_1fr_1px]': hoveredIndex === null + }; + const gridColumns5 = { 'grid transition-all duration-500': true, 'grid-cols-[1.4fr_0.9fr_0.9fr_0.9fr_0.9fr_1px]': hoveredIndex === 0, @@ -44,6 +53,7 @@ const Lines = ({ const gridColumns = { 2: gridColumns2, 3: gridColumns3, + 4: gridColumns4, 5: gridColumns5 }[columnsNumber];