-
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.
Full development of a mroe developed front eny start screen
- Loading branch information
1 parent
4469750
commit b70718e
Showing
14 changed files
with
417 additions
and
25 deletions.
There are no files selected for viewing
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
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,54 @@ | ||
| import React from "react"; | ||
| import "../../StartingZoom/styles/animations.css"; | ||
| import { BsArrowRightSquareFill } from "react-icons/bs"; | ||
|
|
||
| const AboutSection = ({ onNext, onButtonClick }) => { | ||
| const handleButtonClick = () => { | ||
| if (onButtonClick) { | ||
| onButtonClick(); // Call the function passed from the parent component | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="Main__container"> | ||
| <div className="Main"> | ||
| <h1 className="heading">About Maya</h1> | ||
| <p className="body_coppy"> | ||
| Maya emerged as an innovative response to the global challenge of water scarcity, exacerbated by | ||
| climate change. This web-based platform is at the forefront of translating complex environmental | ||
| data into actionable insights, designed to foster a comprehensive understanding among local | ||
| stakeholders, international donors, and the broader community. | ||
| </p> | ||
| <p> | ||
| By transforming dense water case studies from the Levant into accessible, design-driven narratives, | ||
| Maya sets a new standard for environmental communication. With its proven success and positive | ||
| feedback from initial tests, Maya is poised for expansion. Our vision is to empower specialists and | ||
| stakeholders across regions, turning critical data into meaningful action. Join us on this journey | ||
| to illuminate paths toward resilience and sustainability, one insight at a time. | ||
| </p> | ||
| <button | ||
| onClick={() => { | ||
| if (onNext) { | ||
| onNext(); // Call the function passed from the parent component | ||
| } | ||
| handleButtonClick(); // Call the handleButtonClick function | ||
| }} | ||
| className="jump-animation" | ||
| style={{ | ||
| background: "transparent", | ||
| padding: "0", | ||
| border: "none", | ||
| cursor: "pointer", // To visually indicate the element is clickable | ||
| display: "inline-flex", // Use 'flex' to align the icon center if needed | ||
| alignItems: "center", // Vertically center the icon in the button | ||
| justifyContent: "right", // Horizontally center the icon in the button | ||
| }} | ||
| > | ||
| <BsArrowRightSquareFill style={{ fontSize: "3rem", color: "white" }} /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AboutSection; |
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,71 @@ | ||
| import React from "react"; | ||
| import Button from "@mui/material/Button"; | ||
|
|
||
| const ActionSection = ({ onZoom, onOtherAction }) => { | ||
| const handleLaunch = () => { | ||
| onZoom(); // Trigger the zoom functionality. | ||
| onOtherAction(); // Hide the ZoomFrontLoadScreen component. | ||
| }; | ||
|
|
||
|
|
||
| return ( | ||
| <div className="Main__container"> | ||
| <div className="Main"> | ||
| <div style={{ marginBottom: "40px" }}> | ||
| <h1>Launch Maya</h1> | ||
| <p>Explore, compare and enhance your understanding of water scarcity and the impacts of climate change across the Levant.</p> | ||
| </div> | ||
| <div className="widget"> | ||
| <h2 style={{ marginBottom: "0" }}>Baalbek-Hermel Governorate, Lebanon</h2> | ||
| <h5 style={{ marginTop: "0", fontWeight: "500" }}>Last updated on - 09/04/24</h5> | ||
| <p>A comprehensive investigation into River Basin Management within the Baalbek-Hermel Governorate, specifically targeting water usage across localities most at risk throughout the region.</p> | ||
| <Button | ||
| onClick={handleLaunch} | ||
| style={{ | ||
| backgroundColor: "#ffffff", | ||
| color: "333333", /* Set the text color */ | ||
| padding: "15px", | ||
| marginBottom: "20px", | ||
| border: "none", | ||
| borderRadius: "5px", | ||
| cursor: "pointer", | ||
| fontSize: "16px", | ||
| fontWeight: "bold", | ||
| width: "100%", | ||
| }} | ||
| > | ||
| Launch Baalbek-Hermel | ||
| </Button> | ||
| </div> | ||
|
|
||
| {/* Explore More Section */} | ||
| <div className="widget"> | ||
| <h2 style={{marginBottom: "0"}}>Al-Qādisiyyah Governorate, Iraq</h2> | ||
| <h5 style={{marginTop: "0", fontWeight: "500"}}>Last updated on - To Be confirmed</h5> | ||
| <p>An ongoing, in-depth examination of River Basin Management within the Al-Qādisiyyah Governorate, Iraq, is currently underway.</p> | ||
| <Button | ||
| onClick={onOtherAction} | ||
| disabled={true} // Disable the button functionality | ||
| style={{ | ||
| backgroundColor: "#ededed", // Change background color to a light gray | ||
| color: "#c0c0c0", // Change text color to a lighter shade of gray | ||
| padding: "15px 30px", | ||
| marginBottom: "20px", | ||
| border: "none", | ||
| borderRadius: "5px", | ||
| cursor: "not-allowed", // Change cursor to indicate not clickable | ||
| fontSize: "16px", | ||
| fontWeight: "bold", | ||
| width: "100%", | ||
| }} | ||
| > | ||
| Launch Al-Qādisiyyah | ||
| </Button> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ActionSection; |
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,82 @@ | ||
| import React from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import Button from "@mui/material/Button"; | ||
| import { BsArrowRightSquareFill } from "react-icons/bs"; | ||
|
|
||
| const MayaIntro = ({ onNext }) => { | ||
| // Animation variants for Framer Motion | ||
| const containerVariants = { | ||
| hidden: { opacity: 0, y: 20 }, | ||
| visible: { | ||
| opacity: 1, | ||
| y: 0, | ||
| transition: { | ||
| when: "beforeChildren", | ||
| staggerChildren: 0.3, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const childVariants = { | ||
| hidden: { opacity: 0, y: 20 }, | ||
| visible: { | ||
| opacity: 1, | ||
| y: 0, | ||
| transition: { | ||
| duration: 0.5, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| // Adding button variants for animation | ||
| const buttonVariants = { | ||
| hidden: { opacity: 0, y: 20 }, | ||
| visible: { | ||
| opacity: 1, | ||
| y: 0, | ||
| transition: { | ||
| delay: 2, | ||
| duration: 0.5, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <motion.div | ||
| initial="hidden" | ||
| animate="visible" | ||
| variants={containerVariants} | ||
| style={{ | ||
| textAlign: "center", | ||
| color: "#ffffff", | ||
| alignItems: "center", | ||
| zIndex: 10000, | ||
| }} | ||
| > | ||
| <motion.h1 variants={childVariants} style={{ fontSize: "5em", marginBottom: "0" }}>Maya</motion.h1> | ||
| <motion.h2 variants={childVariants}>Your Gateway to Understanding</motion.h2> | ||
| <motion.p variants={childVariants}>Visualising the complex connection between Water Scarcity and Climate Change</motion.p> | ||
| <motion.div variants={buttonVariants}> | ||
| <Button | ||
| variant="contained" | ||
| onClick={onNext} | ||
| className="jump-animation" | ||
| style={{ | ||
| backgroundColor: "transparent", | ||
| padding: "0", | ||
| display: "inline-block", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| border: "none", | ||
| boxShadow: "none", | ||
| marginTop: "2rem", | ||
| }} | ||
| > | ||
| <BsArrowRightSquareFill style={{ fontSize: "3rem" }} /> | ||
| </Button> | ||
| </motion.div> | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MayaIntro; |
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 was deleted.
Oops, something went wrong.
Oops, something went wrong.