-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d68daa2
commit 8275c69
Showing
14 changed files
with
229 additions
and
77 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| import Link from "next/link"; | ||
| import Intro from "@/components/intro"; | ||
| import Section1 from "@/components/section-1"; | ||
| import Section2 from "@/components/section-2"; | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <main> | ||
| <Intro /> | ||
| <div className="text-black text-lg hover:gray-500 space-x-5"> | ||
| <Link href="/globe">Globe</Link> | ||
| </div> | ||
| <Section1 /> | ||
| <Section2 /> | ||
| </main > | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }) => ( | ||
| <Button variant="vanilla" size="auto" className="justify-center items-center gap-4 group" onClick={onClick}> | ||
| <div className="justify-center items-center gap-4 flex"> | ||
| <div className="text-xl underline tracking-tight">{opened ? 'Show less' : 'Know more'}</div> | ||
| <ArrowDown className={cn("w-6 h-6 group-hover:translate-y-1 transition-transform duration-300", | ||
| { "rotate-180": opened })} | ||
| /> | ||
| </div> | ||
| </Button> | ||
| ); | ||
| export default KnowMoreButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<number | null>(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 ( | ||
| <section className="relative bg-white py-20 "> | ||
| <Lines verticalClassName="pl-[152px] pr-[152px]" sectionName="section-1" rows={[474, (!hoveredIndex || hoveredIndex === 0) ? 1134 : 1154]} colorClass="bg-blue-900/20" hoveringColumnsNumber={3} hoveredIndex={hoveredIndex} /> | ||
| <div className="container px-[150px]"> | ||
| <div className="max-w-[594px] text-green-700 space-y-5 pb-20"> | ||
| <div className=" text-lg font-medium uppercase">Understanding digital twins</div> | ||
| <h3 className="text-2xl">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.</h3> | ||
| <KnowMoreButton onClick={() => setOpenedKnowMore(!openedKnowMore)} opened={openedKnowMore} /> | ||
| <AnimatePresence> | ||
| {openedKnowMore && <motion.div | ||
| initial={{ opacity: 0, height: 0 }} | ||
| exit={{ opacity: 0, height: 0 }} | ||
| animate={{ opacity: 1, height: 'auto' }} | ||
| > | ||
| 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. | ||
| </motion.div>} | ||
| </AnimatePresence> | ||
| </div> | ||
| <div className={cn("flex w-full h-[480px] overflow-hidden mb-10", gridColumns)}> | ||
| {Array(3).fill(null).map((_, index) => ( | ||
| <div key={index} | ||
| className={cn("relative z-10 flex items-center h-full")} | ||
| onMouseEnter={() => setHoveredIndex(index)} | ||
| onMouseLeave={() => setHoveredIndex(null)} | ||
| > | ||
| <Image | ||
| alt="" | ||
| src={`/images/home-understanding-${index + 1}.png`} | ||
| layout="fill" | ||
| objectFit="cover" | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className={cn("text-green-700 grid")} | ||
| > | ||
| <div className={cn(gridColumns)}> | ||
| <h4 className="text-xl pr-10 mb-4 col-span-1 max-w-[350px]"> | ||
| How the digital twin for climate change adaptation helps research and society? | ||
| </h4> | ||
| </div> | ||
| <div className={cn(gridColumns, 'mb-[30px]')}> | ||
| <div className="col-start-2"> | ||
| <div className="flex-col gap-4 flex pr-10"> | ||
| <div className="flex-col flex "> | ||
| <div className="text-lg leading-relaxed">01</div> | ||
| <div className="text-lg leading-relaxed">Understanding processes:</div> | ||
| </div> | ||
| <div className="text-sm leading-tight max-w-[350px]">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.</div> | ||
| </div> | ||
| </div> | ||
| <div className="col-start-3"> | ||
| <div className="flex-col gap-4 flex pr-10"> | ||
| <div className="flex-col flex"> | ||
| <div className="text-lg leading-relaxed">02</div> | ||
| <div className="text-lg leading-relaxed">Simulating scenarios:</div> | ||
| </div> | ||
| <div className="text-sm leading-tight max-w-[350px]">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.</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={cn(gridColumns)}> | ||
| <div className="col-start-2"> | ||
| <div className="flex-col gap-4 flex pr-10"> | ||
| <div className="flex-col flex "> | ||
| <div className="text-lg leading-relaxed">03</div> | ||
| <div className="text-lg leading-relaxed">Improving decision-making:</div> | ||
| </div> | ||
| <div className="text-sm leading-tight max-w-[350px]">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</div> | ||
| </div> | ||
| </div> | ||
| <div className="col-start-3"> | ||
| <div className="flex-col gap-4 flex pr-10"> | ||
| <div className="flex-col flex"> | ||
| <div className="text-lg leading-relaxed">04</div> | ||
| <div className="text-lg leading-relaxed">Enhancing interdisciplinary and transdisciplinarity::</div> | ||
| </div> | ||
| <div className="text-sm leading-tight max-w-[350px]">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.</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section >); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| 'use client'; | ||
| import Lines from "@/components/lines"; | ||
| import Globe from "@/components/globe"; | ||
|
|
||
| export default function Section1() { | ||
|
|
||
| return ( | ||
| <section className="relative bg-green-700 py-20 px-[150px]"> | ||
| <Lines verticalClassName="left-8" sectionName="section-1" columns={[100]} rows={[100]} colorClass="bg-blue-900/20" /> | ||
| <Globe /> | ||
| </section >); | ||
| }; |