diff --git a/package-lock.json b/package-lock.json index 584865b..f991c75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,6 +71,7 @@ "react-intersection-observer": "^8.34.0", "react-router-dom": "^6.11.1", "react-scrollama": "^2.3.2", + "react-text-transition": "^3.1.0", "react-waypoint": "^10.3.0", "reactflow": "^11.7.4", "styled-components": "^5.3.3", @@ -5957,6 +5958,17 @@ "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-text-transition": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-text-transition/-/react-text-transition-3.1.0.tgz", + "integrity": "sha512-NtXEVAXvSh78+8JAnrVjpbftzD4kPowacv4GB2Nyq9C/8ko6fSm6M/XvKWQLCaZi68i9F28b++Sp8uVThlzLyg==", + "dependencies": { + "@react-spring/web": "^9.7.2" + }, + "peerDependencies": { + "react": ">=18.0.0" + } + }, "node_modules/react-waypoint": { "version": "10.3.0", "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-10.3.0.tgz", @@ -11224,6 +11236,14 @@ } } }, + "react-text-transition": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-text-transition/-/react-text-transition-3.1.0.tgz", + "integrity": "sha512-NtXEVAXvSh78+8JAnrVjpbftzD4kPowacv4GB2Nyq9C/8ko6fSm6M/XvKWQLCaZi68i9F28b++Sp8uVThlzLyg==", + "requires": { + "@react-spring/web": "^9.7.2" + } + }, "react-waypoint": { "version": "10.3.0", "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-10.3.0.tgz", diff --git a/package.json b/package.json index 046ec87..4a089db 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "react-intersection-observer": "^8.34.0", "react-router-dom": "^6.11.1", "react-scrollama": "^2.3.2", + "react-text-transition": "^3.1.0", "react-waypoint": "^10.3.0", "reactflow": "^11.7.4", "styled-components": "^5.3.3", diff --git a/src/HomePage/GlobalHomePage.tsx b/src/HomePage/GlobalHomePage.tsx index 91eb61c..5c9d437 100644 --- a/src/HomePage/GlobalHomePage.tsx +++ b/src/HomePage/GlobalHomePage.tsx @@ -1,30 +1,26 @@ import styled from 'styled-components'; import { Select } from 'antd'; import sortBy from 'lodash.sortby'; +import TextTransition, { presets } from 'react-text-transition'; +import { useState, useEffect } from 'react'; import CountryTaxonomy from '../Data/countryTaxonomy.json'; import IMAGES from '../img/images'; import { InterlinkageOverview } from './InterlinkageOverview'; import { SDG_COLOR_ARRAY } from '../Constants'; import { AccordionEl } from './Accordion'; import { ForceDirectedGraph } from './InterlinkageOverview/FDG'; - -const HeroImageEl = styled.div` - background: url(${IMAGES.GlobalHomepageBG}) no-repeat center; - background-size: cover; - margin-top: 116px; - padding: 10rem 3rem; - width: calc(100% - 6rem); -`; +import './HomePageStyle.css'; const FirstColumn = styled.div` - width: calc(66.66% - 1rem); + width: 100%; + max-width: 1024px; flex-grow: 1; @media (max-width: 600px) { width: 100%; } `; const SecondColumn = styled.div` - width: calc(33.33% - 1rem); + width: 100%; flex-grow: 1; @media (max-width: 600px) { width: 100%; @@ -45,361 +41,443 @@ const AccordionImageColumn = styled.div` } `; -export const GlobalHomePage = () => ( - <> - -
-

SDG Push Diagnostic

-

- The SDG Push Diagnostic reimagines and recalibrates how we determine, interrogate and advance development interventions that put countries on more stable footing. -

+const Button = styled.button` + width: 3rem; + height: 3rem; + border-radius: 3rem; + background-color: var(--white); + border: 0; +`; + +export const GlobalHomePage = () => { + const [index, setIndex] = useState(0); + const countriesList = ['Everyone', 'South Africa', 'Kuwait', 'Nepal', 'Sri Lanka', 'Benin', 'Everyone', 'Gabon', 'Cuba', 'Botswana', 'Iran', 'Cabo Verde', 'Everyone', 'Gambia', 'Philippines', 'Iraq', 'Namibia', 'Malawi', 'Everyone', 'Kyrgyzstan', 'Lesotho', 'Senegal', 'Bangladesh', 'Serbia', 'Everyone', 'Cameroon', 'Djibouti', 'Bhutan', 'Egypt', 'Maldives']; + + useEffect(() => { + const intervalId = setInterval( + () => setIndex((indx) => indx + 1), + 1000, // every 3 seconds + ); + return () => clearTimeout(intervalId); + }, []); + return ( + <> +
+
+
+
+
+

+ How is +

+

+ {countriesList[index % countriesList.length]} +

+

doing?

+

+ UNDP's Integrated SDG Insights explore how to achieve the SDGs by 2030. So that no one is left behind. +

+ +
+
- -
- { +
+ { Array.from(Array(17).keys()).map((d) =>
) } -
-
-
-
- -

SDG Push Diagnostic Features

- - - The SDG Push Diagnostic provides a dynamic visualization of the development landscape to help countries chart acceleration pathways through their policy choices. It integrates multiple data sources to establish a rapid landscape analysis that showcases SDG trends, national priorities, interlinkages, and potential futures. - -

Select a country or territory to explore

- - +
+
+
+

+ See how your country is doing +

+

+ The SDG Push Diagnostic provides a dynamic visualization of the development landscape to help countries chart acceleration pathways through their policy choices. +

+
-
- - -

- Assesses challenges and opportunities in national growth trajectories with insights on environmental sustainability and inclusiveness. -
-
- Data Sources -
- Future trajectories to 2025 are based on IMF-WEO GDP projections, distributions of per capita income or consumption from the World Bank, and CO2 emissions from the Global Carbon Budget 2022 and EDGAR (JRC and IEA). -

- - - sgd moment - -
+
+
+
+
+ +

SDG Push Diagnostic Features

+ + + The SDG Push Diagnostic provides a dynamic visualization of the development landscape to help countries chart acceleration pathways through their policy choices. It integrates multiple data sources to establish a rapid landscape analysis that showcases SDG trends, national priorities, interlinkages, and potential futures. + +
+
+ + +

+ Assesses challenges and opportunities in national growth trajectories with insights on environmental sustainability and inclusiveness. +
+
+ Data Sources +
+ Future trajectories to 2025 are based on IMF-WEO GDP projections, distributions of per capita income or consumption from the World Bank, and CO2 emissions from the Global Carbon Budget 2022 and EDGAR (JRC and IEA). +

+ + + sgd moment + +
)} - /> -
-
- - -

- Progress on the 17 SDGs are tracked through 169 sub-targets, which in turn are measured using - {' '} - 232 unique indicators - . -
-
- Understanding how countries perform against these provides an assessment of SDG progress and the baseline landscape against which to build SDG policy pathways. -
-
- Countries SDG trends are based on - {' '} - data - {' '} - and - {' '} - methodology - {' '} - from the UN Statistics Division. Additional data may be added to address gaps at government request, to provide a comprehensive landscape for identification of SDG policy pathways. -

-

Select a country or territory to explore SDG trends

- { window.open(`./${CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1']}/sdg-trends`, '_self'); }} + > + { sortBy(CountryTaxonomy, 'Country or Area').map((d, i: number) => {d['Country or Area']}) } - - - - sgd trends - -
+ + + + sgd trends + +
)} - /> -
-
- - -

- Current priorities are analysed using machine learning to reveal the most prominent SDGs referenced in national policy documents. This analysis uses a custom-built model for SDG classification. The training data is based on an improved - {' '} - OSDG Community Dataset - . It considers 100k+ terms, including phrases and expressions. -
-
- Explore the analysis of these priorities using Machine Learning by country. -

-

Select a country or territory to explore national priorities

- { window.open(`./${CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1']}/current-priorities`, '_self'); }} + > + { sortBy(CountryTaxonomy, 'Country or Area').map((d, i: number) => {d['Country or Area']}) } - - - - Future Scenarios - -
+ + + + Future Scenarios + +
)} - /> -
-
- - -

- The SDGs do not exist in silos. Understanding the interactions across social, economic and environmental elements of sustainable development is essential to move the needle on the SDGs. SDG Interlinkages show how actions directed towards one SDG can influence the others. Uncovering and understanding these interactions helps in achieving the 2030 Agenda - avoiding the unintended deterioration of the SDGs and their 169 associated targets. -
-
- The target-level interlinkages are based on the latest available methodology by the - {' '} - KnowSDGs Platform by European Commission - . A first literature review ( - Miola et al., 2019 - ) was updated and expanded in - {' '} - 2021-2022 - {' '} - by a team of researchers who retrieved and analysed all relevant scientific and grey literature* on SDG interlinkages, both in Scopus and Google Scholar. -

-

Select a country or territory to explore SDG interlinkages

- { window.open(`./${CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1']}/synergies-and-tradeoffs`, '_self'); }} + > + { sortBy(CountryTaxonomy, 'Country or Area').map((d, i: number) => {d['Country or Area']}) } - - - - interlinkages - -
+ + + + interlinkages + +
)} - /> -
-
- - -

- SDG Push identifies national - {' '} - SDG insights based on integrated accelerators - {' '} - across Governance, Social Protection, Green Economy and Digital Disruption. -
-
- Based on the systems model of - {' '} - international futures - , SDG Push models the impact that incorporating SDG Push accelerators in development can make, providing valuable insights into systems interactions across the SDGs. -

-

Select a country or territory to explore future scenarios

- { window.open(`./${CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1']}/future-scenarios`, '_self'); }} + > + { sortBy(CountryTaxonomy, 'Country or Area').map((d, i: number) => {d['Country or Area']}) } - - - - future scenarios - -
+ + + + future scenarios + +
)} - /> -
-
- - -

- Provides insight into indicators of fiscal and financial stress with options (INFF) for stimulus and other means to accelerate progress. -
-
- Data Sources -
- Most recent resource data from UNU-WIDER GRD (between 2018 and 2021), debt and revenue from IMF WEO (between 2020 and forecasts for 2023), external debt from IDS (2023), yields from Haver Analytics (8 June 2023), credit ratings from S&P, Moodys and FITCH (2023), and DSA ratings from World Bank/IMF (31 May 2023). -

- - - finance and stimulus - -
+ /> + +
+ + +

+ Provides insight into indicators of fiscal and financial stress with options (INFF) for stimulus and other means to accelerate progress. +
+
+ Data Sources +
+ Most recent resource data from UNU-WIDER GRD (between 2018 and 2021), debt and revenue from IMF WEO (between 2020 and forecasts for 2023), external debt from IDS (2023), yields from Haver Analytics (8 June 2023), credit ratings from S&P, Moodys and FITCH (2023), and DSA ratings from World Bank/IMF (31 May 2023). +

+ + + finance and stimulus + +
)} - /> + /> + - -
-
- -

The Integrated SDG Insight reports

- - -

- The Diagnostic powers the Integrated SDG Insights which provide a strong evidence-base and relevant insights to support national ambition at the SDG Summit 2023. -

-

- The methodology for the diagnostics can be found - {' '} - here - . -

- -
-
-
- - +
+
+ +

The Integrated SDG Insight reports

+ + +

+ The Diagnostic powers the Integrated SDG Insights which provide a strong evidence-base and relevant insights to support national ambition at the SDG Summit 2023. +

+

+ The methodology for the diagnostics can be found + {' '} + here + . +

+ +
+
+
+ + +

+ The insights are unique — not a statistical gaps report or evaluation of development impact — but a playbook, showing the policy choices that build SDG pathways. +

+

+ UNDP supported 90+ countries to generate these insights to come to the SDG Summit with a high level of ambition — and evidence-based pathways to achieve it. These insights are a result of country-level and government consultation, data analysis, machine learning, interlinkage mapping, and generating futures scenarios. +

+

+ It also includes national analysis of economic growth pathways and fiscal and financial constraints, providing insights that are grounded in the countries' realities. +

+ + +
+

+ 90+ +

+

Countries supported by UNDP

+
+ +
+ )} + /> +
+
+

- The insights are unique — not a statistical gaps report or evaluation of development impact — but a playbook, showing the policy choices that build SDG pathways. + Building from national trends and priorities, SDG interlinkages help to chart integrated SDG pathways that reflect policy choices with the most potential to accelerate the SDGs.

- UNDP supported 90+ countries to generate these insights to come to the SDG Summit with a high level of ambition — and evidence-based pathways to achieve it. These insights are a result of country-level and government consultation, data analysis, machine learning, interlinkage mapping, and generating futures scenarios. -

-

- It also includes national analysis of economic growth pathways and fiscal and financial constraints, providing insights that are grounded in the countries' realities. + SDG interlinkages reveal how actions directed towards one SDG can impact others. Uncovering and understanding these interactions can help to achieve the 2030 Agenda for Sustainable Development and navigating trade-offs.

- - -
-

- 90+ -

-

Countries supported by UNDP

-
- -
+
)} - /> -
-
- -

- Building from national trends and priorities, SDG interlinkages help to chart integrated SDG pathways that reflect policy choices with the most potential to accelerate the SDGs. -

-

- SDG interlinkages reveal how actions directed towards one SDG can impact others. Uncovering and understanding these interactions can help to achieve the 2030 Agenda for Sustainable Development and navigating trade-offs. -

-
- )} - /> + /> +
- -
-
-
- -

Emerging Patterns

- - - Across 90+ reports, common SDG targets emerged as key entry points where investment in one SDG can unlock progress on others. The visuals below show the key SDG targets and the combination of policy choices that can re-balance social, environmental, and economic achievements. - +
+
+
+ +

Emerging Patterns

+ + + Across 90+ reports, common SDG targets emerged as key entry points where investment in one SDG can unlock progress on others. The visuals below show the key SDG targets and the combination of policy choices that can re-balance social, environmental, and economic achievements. + +
+
+
+ +
+
-
+
+
+
+
+ +

Regional and Income Group Comparisons

+ + +

+ Explore the full dataset by region and income classification to show unique entry points for integrated SDG pathways. +

+

+ Explore the secondary targets associated to each primary target by clicking on the primary target bubbles below. + Click on the regions or income groups to see more detail of the countries analyzed within each group. +

+ +
- +
-
-
-
-
- -

Regional and Income Group Comparisons

- - -

- Explore the full dataset by region and income classification to show unique entry points for integrated SDG pathways. -

-

- Explore the secondary targets associated to each primary target by clicking on the primary target bubbles below. - Click on the regions or income groups to see more detail of the countries analyzed within each group. -

- -
-
- +
+
+

+ See how your country is doing +

+

+ The SDG Push Diagnostic provides a dynamic visualization of the development landscape to help countries chart acceleration pathways through their policy choices. +

+
-
-
-
With the support of the German Federal Ministry for Economic Cooperation and Development
- giz logo -
- -); +
+
With the support of the German Federal Ministry for Economic Cooperation and Development
+ giz logo +
+ + ); +}; diff --git a/src/HomePage/HomePageStyle.css b/src/HomePage/HomePageStyle.css new file mode 100644 index 0000000..681c6fa --- /dev/null +++ b/src/HomePage/HomePageStyle.css @@ -0,0 +1,104 @@ +@keyframes moveAndChangeColor1 { + 0% { + transform: translateX(50vw) translateY(50%) rotate(0deg); + background-color: #56C02B; + } + 14.29% { + transform: translateX(75vw) translateY(-50%) rotate(-60deg); + background-color: #FD6925; + } + 28.57% { + transform: translateX(50vw) translateY(0%) rotate(-120deg); + background-color: #E5243B; + } + 42.86% { + transform: translateX(35vw) translateY(-50%) rotate(-180deg); + background-color: #0A97D9; + } + 57.14% { + transform: translateX(50vw) translateY(50%) rotate(-240deg); + background-color: #006EB5; + } + 71.43% { + transform: translateX(75vw) translateY(-50%) rotate(-300deg); + background-color: #006EB5; + } + 85.71% { + transform: translateX(20vw) translateY(50%) rotate(-150deg); + background-color: #0A97D9; + } + 100% { + transform: translateX(50vw) translateY(50%) rotate(0deg); + background-color: #56C02B; + } +} + +@keyframes moveAndChangeColor2 { + 0% { + transform: translateX(40vw) translateY(0%) rotate(0deg); + background-color: #0A97D9; + } + 14.29% { + transform: translateX(65vw) translateY(0%) rotate(60deg); + background-color: #DD1367; + } + 28.57% { + transform: translateX(50vw) translateY(20%) rotate(120deg); + background-color: #FD6925; + } + 42.86% { + transform: translateX(65vw) translateY(20%) rotate(180deg); + background-color: #006EB5; + } + 57.14% { + transform: translateX(50vw) translateY(-20%) rotate(240deg); + background-color: #56C02B; + } + 71.43% { + transform: translateX(35vw) translateY(20%) rotate(300deg); + background-color: #0A97D9; + } + 85.71% { + transform: translateX(10vw) translateY(70%) rotate(160deg); + background-color: #FD6925; + } + 100% { + transform: translateX(40vw) translateY(0%) rotate(0deg); + background-color: #0A97D9; + } +} + +.blob { + --speed: 25s; + --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); + animation: var(--animation) var(--speed) var(--easing) infinite; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + opacity: 0.75; +} + +.blob1 { + --size: 900px; + --animation: moveAndChangeColor1; + width: calc(var(--size) * 1.2); + height: var(--size); + filter: blur(calc(var(--size) / 10)); +} + +.blob2 { + --size: 700px; + --animation: moveAndChangeColor2; + width: var(--size); + height: var(--size); + filter: blur(calc(var(--size) / 10)); +} + +.background { + background-color: #293647; + height: calc(100vh - 1rem); + width: 100%; + overflow: hidden; +} + +* { + transition: all 0.5s ease-out; +} \ No newline at end of file