diff --git a/public/images/energy-section-7-1.png b/public/images/energy-section-7-1.png new file mode 100644 index 0000000..116c3a5 Binary files /dev/null and b/public/images/energy-section-7-1.png differ diff --git a/public/images/energy-section-7-2.png b/public/images/energy-section-7-2.png new file mode 100644 index 0000000..7e83918 Binary files /dev/null and b/public/images/energy-section-7-2.png differ diff --git a/public/images/energy-section-7-3.png b/public/images/energy-section-7-3.png new file mode 100644 index 0000000..271cc94 Binary files /dev/null and b/public/images/energy-section-7-3.png differ diff --git a/public/images/energy-section-7-4.png b/public/images/energy-section-7-4.png new file mode 100644 index 0000000..9704b02 Binary files /dev/null and b/public/images/energy-section-7-4.png differ diff --git a/public/images/energy-section-7-content-1-1.svg b/public/images/energy-section-7-content-1-1.svg new file mode 100644 index 0000000..83f2c2e --- /dev/null +++ b/public/images/energy-section-7-content-1-1.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/case-study-energy/page.tsx b/src/app/case-study-energy/page.tsx index 61faa43..2dd6cc9 100644 --- a/src/app/case-study-energy/page.tsx +++ b/src/app/case-study-energy/page.tsx @@ -2,6 +2,7 @@ import Intro from '@/components/energy/intro'; import Section1 from '@/components/energy/section-1'; import Section3 from '@/components/energy/section-3'; import Section5 from '@/components/energy/section-5'; +import Section7 from '@/components/energy/section-7'; export default function Energy() { return ( @@ -10,6 +11,7 @@ export default function Energy() { + ); } \ No newline at end of file diff --git a/src/components/energy/section-7/data.ts b/src/components/energy/section-7/data.ts new file mode 100644 index 0000000..d5b554a --- /dev/null +++ b/src/components/energy/section-7/data.ts @@ -0,0 +1,71 @@ +export const TAB_DATA = [ + { + title: "Energy planner", + subtitle: "How to ensure energy supply, price and grid stability in European countries?", + image: "/images/energy-section-7-1.png", + value: "tab1", + }, + { + title: "Urban planner", + subtitle: "How to define urban regulations for climate vulnerability extremes?", + image: "/images/energy-section-7-2.png", + value: "tab2", + }, + { + title: "Health agency", + subtitle: "Coming soon ...", + image: "/images/energy-section-7-3.png", + value: "tab3", + disabled: true, + }, + { + title: "Citizen", + subtitle: "Coming soon ...", + image: "/images/energy-section-7-4.png", + value: "tab4", + disabled: true, + }, +]; + +export const TAB_CONTENT = [ + [ + { + text: "Andrea is an energy engineer working for a public organisation at the European level. He is tasked with supplying policymakers with evidence-based facts to advance European energy policies. His main concerns are ensuring the security of the energy supply, the price and grid stability of the European energy system. Therefore, he is interested in estimating the energy supply in European and also neighbouring countries.", + image: "/images/energy-section-7-content-1-1.svg", + }, + { + text: "Andrea gets information on wind resource data from current climate models, which provide wind speed data at 10 metres and at a low spatial resolution, since he is interested in national data. However, wind turbines are placed at a much higher height (around 100 m), and many times wind farms are placed in mountainous areas, which have a very particular orography not well captured by global climate models. This makes the estimation of potential wind energy production more challenging.", + image: "/images/energy-section-7-content-1-1.svg", + }, + { + text: "He knows that the climate adaptation digital twin has revolutionised the way climate information is provided. Without hesitating he accesses the digital twin model outputs and realises that wind speed at 100 m height is available globally at high resolution. This information is extremely valuable for more accurately estimating the capacity factor, an indicator widely used by the energy sector and that corresponds to the amount of energy that a turbine produces compared to its maximum theoretical output.", + image: "/images/energy-section-7-content-1-1.svg", + }, + { + text: "With this information, Andrea analyses the changes in the distribution of the capacity factor 30 years into the future. He can now estimate the changes in energy output in different wind farms and in different European countries. He provides this information to policymakers, who will be able to better plan for impacts on the energy demand and energy prices in the future (e.g., under more frequent heatwave episodes) as well as to better estimate particular regions that will become productive for renewable energy in the next decades.", + image: "/images/energy-section-7-content-1-1.svg", + }, + { + text: "Andrea is an energy engineer working for a public organisation at the European level. He is tasked with supplying policymakers with evidence-based facts to advance European energy policies. His main concerns are ensuring the security of the energy supply, the price and grid stability of the European energy system. Therefore, he is interested in estimating the energy supply in European and also neighbouring countries.", + image: "/images/energy-section-7-content-1-1.svg", + }, + ], + [ + { + text: "Picture Lisbon, the capital of Portugal, situated on the Atlantic coast. In the last 20 years, heatwaves have become a common occurrence here, and this summer is no different. Those with air conditioning at home can probably cope better with the scorching heat, but there is also a higher risk of blackouts if energy supply cannot meet the peak in the demand. To account for the climate hazards, their accompanying risks, and the possibilities of citizens in different vulnerability situations, an urban planning regulation is in place in Lisbon. Urban green infrastructure is vital to the city’s ability to cope with climate change.", + image: "/images/energy-section-7-content-1-1.svg", + }, + { + text: "Ana, a geospatial data scientist with a passion for understanding the urban climate, has become skilled in running model simulations in her daily job. While analyzing the climate adaptiveness of Lisbon, she discovers that, unlike flooding and sea-level rise, changes in the urban climate are not translated into regulation enforcement. For example, ventilation corridors in the city valleys can become blocked if new settlements are built, ramping up the city temperature.", + image: "/images/energy-section-7-content-1-1.svg", + }, + { + text: "By closely examining the climate maps, she confirms that the regional information available from climate models is not fit for building meaningful urban scenarios and forecasts. Due to the positioning and characteristics of Lisbon, a mountainous coastal city, the heat island effect is quite unique. With outputs from regional models, she is not able to capture the thermal signal between neighborhoods during a heatwave.", + image: "/images/energy-section-7-content-1-1.svg", + }, + { + text: "Ana is aware of the recent climate modelling efforts to build a digital twin of the Earth’s climate. She finds out that the high-resolution model outputs from the digital twin can help her determine energy acclimatisation needs in the city, as well as to calculate other handy indicators during a heatwave, such as the number of tropical nights and the excess heat factor, which can help estimate health risks and hospital submission rates. The digital twin may help urban planners to interact with the simulations for a better understanding of the best adaptation practices against extreme temperatures in urban environments.", + image: "/images/energy-section-7-content-1-1.svg", + }, + ], +]; diff --git a/src/components/energy/section-7/index.tsx b/src/components/energy/section-7/index.tsx new file mode 100644 index 0000000..1856521 --- /dev/null +++ b/src/components/energy/section-7/index.tsx @@ -0,0 +1,94 @@ +'use client'; +import { useState } from "react"; +import dynamic from 'next/dynamic'; +const Lines = dynamic(() => import('@/components/lines'), { ssr: false }); +import { motion, AnimatePresence } from "framer-motion"; +import KnowMoreButton from "@/components/know-more-button"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import TabContentItem from "./tab-content-item"; +import TabTriggerItem from "./tab-trigger-item"; +import { TAB_DATA } from "./data"; + +const SharedImpactTabs = () => { + const [selectedValue, setSelectedValue] = useState(TAB_DATA[0].value); + const [hoveredValue, setHoveredValue] = useState(null); + const handleValueChange = (value: string) => { + if (TAB_DATA.find(tab => tab.value === value)?.disabled) { + return; + } + setSelectedValue(value); + } + + return ( + + + {TAB_DATA.map((tab, index) => ( + { + setSelectedValue(tab.value) + }} + onMouseEnter={() => { + setHoveredValue(tab.value) + }} + onMouseLeave={() => setHoveredValue(null)} + className="normal-case data-[state=active]:no-underline p-0 relative" + + > + + + ))} + + + + + + + + ); +} + +export default function Section7() { + const [openedKnowMore, setOpenedKnowMore] = useState(false); + return ( +
+
+ +
+
Unlocking Future Possibilities
+
+ Harnessing Digital Twins for on-demand simulations. +
+
+
+
+
+
+
+

Climate change affects various aspects of our lives, making it essential to understand its wide-ranging impacts, this way strategies for adaptation can be prepared.

+
+ setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} /> + + {openedKnowMore && + Climate change is not just an environmental issue. It affects every aspect of our lives, from energy security to public health, to the way we design the cities we live in. Therefore, it is crucial to understand its wide-ranging effects. Learn how digital twins are revolutionising our ability to navigate and respond to climate-related challenges, and gain insights into the interconnected nature of climate change impacts. + } + + +
+
+
Our shared impact
+

Discover the faces behind climate impacts on energy

+
+ +
+
+
); +}; \ No newline at end of file diff --git a/src/components/energy/section-7/tab-content-item.tsx b/src/components/energy/section-7/tab-content-item.tsx new file mode 100644 index 0000000..891b13c --- /dev/null +++ b/src/components/energy/section-7/tab-content-item.tsx @@ -0,0 +1,87 @@ +import ArrowRight from "@/svgs/arrow-right.svg"; +import { useState } from "react"; +import { cn } from "@/lib/utils"; +import { TAB_CONTENT } from "./data"; +import Image from "next/image"; + +const Arrows = ({ changeTextIndex, textIndex, isMaxIndex }: { + changeTextIndex: (index: number) => void, + textIndex: number; + isMaxIndex: boolean; +}) => ( +
+ + +
+); + +const TabContentItem = ({ index = 0 }: { index: number }) => { + const [textIndex, setTextIndex] = useState(0); + const maxIndex = TAB_CONTENT[index].length - 1; + const content = TAB_CONTENT[index][textIndex]; + const changeTextIndex = (index: number) => { + setTextIndex((prevIndex) => { + let newIndex = prevIndex + index; + if (newIndex < 0) { + newIndex = 0; + } else if (newIndex > maxIndex) { + newIndex = maxIndex; + } + return newIndex + } + ); + } + + return ( +
+
+ +
+
+ {content.text} +
+ {Array(TAB_CONTENT[index].length).fill(null).map((_, index) => ( +
+ ))} +
+
+ +
); +} + +export default TabContentItem; \ No newline at end of file diff --git a/src/components/energy/section-7/tab-trigger-item.tsx b/src/components/energy/section-7/tab-trigger-item.tsx new file mode 100644 index 0000000..6971f45 --- /dev/null +++ b/src/components/energy/section-7/tab-trigger-item.tsx @@ -0,0 +1,72 @@ +import Image from "next/image"; +import CursorSelect from "@/svgs/cursor-select.svg"; +import { cn } from "@/lib/utils"; + +const TabTriggerItem = ({ title, subtitle, image, disabled, index, isSelected, isHovered }: + { + title: string; + subtitle: string; + image: string; + index: number; + disabled?: boolean; + isSelected: boolean; + isHovered: boolean; + } +) => ( +
+
+ +
+
+
+
+ {'0'}{index + 1} +
+ {isSelected &&
+ Selected profile +
} + {(isHovered && !isSelected && !disabled) && + (
+ Select profile + +
+ )} +
+
+ {title} +
+
+ {subtitle} +
+
+
+); + +export default TabTriggerItem; \ No newline at end of file diff --git a/src/components/home/section-2/index.tsx b/src/components/home/section-2/index.tsx index 7d8d457..d55c02f 100644 --- a/src/components/home/section-2/index.tsx +++ b/src/components/home/section-2/index.tsx @@ -200,7 +200,11 @@ export default function Section2() { ref={descriptionRef} > {isMobile &&
- -