diff --git a/app/components/ApiCard.tsx b/app/components/ApiCard.tsx index d608d53..6d394d1 100644 --- a/app/components/ApiCard.tsx +++ b/app/components/ApiCard.tsx @@ -16,7 +16,12 @@ export interface CardProps { const ApiCard = ({ header, subHeader, CardIcon, href }: CardProps) => { return ( - + { return ( - - - - - - | Developer Portal - - - - - - - - Data catalog - - - - - Resources - - - - - Contact - - - - - About the project - - - + ); }; diff --git a/app/components/InfoCard.tsx b/app/components/InfoCard.tsx index 9c2b807..f926cfd 100644 --- a/app/components/InfoCard.tsx +++ b/app/components/InfoCard.tsx @@ -27,7 +27,7 @@ const InfoCard = ({ - {header} + {header} {externalLink ? : } diff --git a/app/components/ResourceCard.tsx b/app/components/ResourceCard.tsx index 1e9b1f4..508b50a 100644 --- a/app/components/ResourceCard.tsx +++ b/app/components/ResourceCard.tsx @@ -20,14 +20,28 @@ const ResourceCard = ({ alt, }: ResourceCardProps) => { return ( - + - {alt} + {alt} - + {header} diff --git a/app/contact/page.tsx b/app/contact/page.tsx index e15fbaa..47e4697 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -11,12 +11,17 @@ import Link from 'next/link'; const Home = () => { return ( - + Need help or want to get involved - + Submit bugs, feature requests and more @@ -40,7 +45,7 @@ const Home = () => { - + Join the community and join the discussion @@ -63,7 +68,7 @@ const Home = () => { - + General enquiry about the project @@ -71,18 +76,45 @@ const Home = () => { className={'w-full'} variant={'filled'} placeholder={'Name'} + label={'Name'} + sx={{ + '& .MuiFilledInput-underline:after': { + borderBottomColor: '#006D41', + }, + '& label.Mui-focused': { + color: '#006D41', + }, + }} /> @@ -104,7 +136,9 @@ const Home = () => { - Send us a line + + Send us a line + You may also contact us directly through email: diff --git a/app/data-catalog/deforestation/page.tsx b/app/data-catalog/deforestation/page.tsx index 1ef7b6d..8086486 100644 --- a/app/data-catalog/deforestation/page.tsx +++ b/app/data-catalog/deforestation/page.tsx @@ -22,8 +22,13 @@ const Home = () => { - Deforestation API - + + Deforestation API + + Aggregated deforestation data on a global scale @@ -48,8 +53,10 @@ const Home = () => { /> - More info - Data sources + More info + + Data sources + The deforestation data covers the period from 2001 to 2022 and is provided by the{' '} @@ -92,13 +99,19 @@ const Home = () => { . - Processing + + Processing + Using the river basin polygons, the deforestation data are aggregated per basin and year. - Examples - Example 1 + + Examples + + + Example 1 + Get the total forest cover loss within the queried river basin over the given time period using JavaScript. diff --git a/app/data-catalog/flood/page.tsx b/app/data-catalog/flood/page.tsx index efd738d..24e6f75 100644 --- a/app/data-catalog/flood/page.tsx +++ b/app/data-catalog/flood/page.tsx @@ -22,8 +22,13 @@ const Home = () => { - Flood API - + + Flood API + + Flood forecasting based on the{' '} { /> - More info - Data sources + More info + + Data sources + Part of the data for this Flood API consists of the 30-day forecasted river discharge data retrieved on a daily basis from the Copernicus{' '} @@ -89,7 +96,9 @@ const Home = () => { . - Processing + + Processing + The forecasted river discharge data is processed in order to obtain the summary and detailed forecasts. The summary forecast corresponds @@ -122,8 +131,12 @@ const Home = () => { to the following bounding box covering parts of Western, Central, and Eastern Africa: -18.0° to 52.0° longitude and -6.0° to 17.0° latitude. - Examples - Example 1 + + Examples + + + Example 1 + Retrieving the peak day of the summary forecast for the 5° by 5° grid cell that the given coordinates fall into using JavaScript. @@ -132,7 +145,9 @@ const Home = () => { language={'javascript'} codeString={getCodeExample('flood-summary.js')} /> - Example 2 + + Example 2 + Retrieving the minimum forecasted discharge of the first day of the detailed forecast for the 5° by 5° grid cell that the given @@ -142,7 +157,9 @@ const Home = () => { language={'javascript'} codeString={getCodeExample('flood-detailed.py')} /> - Example 3 + + Example 3 + Retrieving the 2-year return period threshold for the 5° by 5° grid cell that the given coordinates fall into using JavaScript. diff --git a/app/data-catalog/geocoding/page.tsx b/app/data-catalog/geocoding/page.tsx index cfaf447..6ebeeea 100644 --- a/app/data-catalog/geocoding/page.tsx +++ b/app/data-catalog/geocoding/page.tsx @@ -22,8 +22,13 @@ const Home = () => { - Geocoding API - + + Geocoding API + + Geocoding and reverse-geocoding based on{' '} { - More info - Data sources + More info + + Data sources + The API is exclusively fetching data from{' '} { . - Processing + + Processing + The data obtained from{' '} { {' '} is presented as is, without any further processing or modification. - Examples - Example 1 + + Examples + + + Example 1 + Retrieving the coordinates of Berlin using JavaScript. @@ -104,7 +119,9 @@ const Home = () => { language={'javascript'} codeString={getCodeExample('geocoding.js')} /> - Example 2 + + Example 2 + Retrieving the coordinates of Berlin using Python. @@ -112,7 +129,9 @@ const Home = () => { language={'python'} codeString={getCodeExample('geocoding.py')} /> - Example 3 + + Example 3 + Retrieving a location near the given coordinate using JavaScript. @@ -120,7 +139,9 @@ const Home = () => { language={'javascript'} codeString={getCodeExample('reverse-geocoding.js')} /> - Example 4 + + Example 4 + Retrieving a location near the given coordinate using Python. diff --git a/app/data-catalog/page.tsx b/app/data-catalog/page.tsx index 3a1855d..99200a2 100644 --- a/app/data-catalog/page.tsx +++ b/app/data-catalog/page.tsx @@ -27,7 +27,7 @@ const cards: CardProps[] = [ { id: 3, header: 'Geocoding', - subHeader: 'This section offers geocoding and address lookup services.', + subHeader: 'This section provides geocoding and address lookup services.', CardIcon: GeocodingIcon, href: '/data-catalog/geocoding', }, @@ -45,40 +45,17 @@ const Home = () => { return ( - + Data catalog of open data - Sub header + + We currently have 4 APIs available. + - {/* - - Resource type - - } - label={'Show all'} - clickable - /> - } - label={'API'} - clickable - /> - } - label={'Databank'} - clickable - /> - - - */} - + {cards.map((card) => ( { ))} - Client libraries - + + Client libraries + + We provide two client libraries to make use of our data easier. diff --git a/app/data-catalog/weather/page.tsx b/app/data-catalog/weather/page.tsx index 900f1aa..d69586d 100644 --- a/app/data-catalog/weather/page.tsx +++ b/app/data-catalog/weather/page.tsx @@ -22,8 +22,13 @@ const Home = () => { - Weather API - + + Weather API + + Global weather forecasts and information about sunrise and sunset @@ -46,8 +51,10 @@ const Home = () => { /> - More info - Data sources + More info + + Data sources + The data for this Weather API is exclusively retrieved from{' '} { This source provides users with dependable weather forecasts and precise information on sunrise and sunset times. - Processing + + Processing + The data obtained from the Norwegian Meteorological Institute is presented as is, without any further processing or modification. - Examples - Example 1 + + Examples + + + Example 1 + Retrieving weather forecast for a given location for the next 9 days using javascript. @@ -75,7 +88,9 @@ const Home = () => { language={'javascript'} codeString={getCodeExample('weather.js')} /> - Example 2 + + Example 2 + Retrieving weather forecast for a given location for the next 9 days using python. diff --git a/app/icons/ExternalLinkIconSmall.tsx b/app/icons/ExternalLinkIconSmall.tsx new file mode 100644 index 0000000..7d15ee1 --- /dev/null +++ b/app/icons/ExternalLinkIconSmall.tsx @@ -0,0 +1,14 @@ +export const ExternalLinkIconSmall = () => ( + + + +); diff --git a/app/page.tsx b/app/page.tsx index c9e376d..3221f59 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -16,14 +16,18 @@ import { LightBulbIcon } from '@/app/icons/LightBulbIcon'; const Home = () => { return ( - + - + { - - - Global open source data - - - enabling local innovation - - + + + Global open source data enabling local innovation + - Truly open source + + Truly open source + - + Verified and quality assured data @@ -67,24 +74,24 @@ const Home = () => { - + Unique factor about the platform - + - + Data catalog of open data - + We currently have 4 APIs available. @@ -99,7 +106,7 @@ const Home = () => { { { - Client libraries - + + Client libraries + + We provide two client libraries to make use of our data easier diff --git a/app/resources/metadata-specification/page.tsx b/app/resources/metadata-specification/page.tsx deleted file mode 100644 index 4e6e690..0000000 --- a/app/resources/metadata-specification/page.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import Link from 'next/link'; -import { BackIcon } from '@/app/icons/BackIcon'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -const Home = () => { - return ( - - - - Back to resources - - - - - - Our metadata specification - - Lead paragraph - - - - Background - - Begin your journey by creating a user account. This will be your - gateway to a world of data-driven possibilities. Click the - "Sign Up" button, fill in your details, and voila! - You're one step closer to unlocking the full potential of our - platform. - - - - Sub heading - - Begin your journey by creating a user account. This will be your - gateway to a world of data-driven possibilities. Click the - "Sign Up" button, fill in your details, and voila! - You're one step closer to unlocking the full potential of our - platform. There is a need for a robust and accessible digital - infrastructure for open data and algorithms on weather, water, - earth, and vegetation, across projects, sectors, and contexts – - providing a base for the necessary local technology innovation. - The Open Earth Platform (OpenEPI) is an initiative to prepare for - such an infrastructure. - - - There is a need for a robust and accessible digital infrastructure - for open data and algorithms on weather, water, earth, and - vegetation, across projects, sectors, and contexts – providing a - base for the necessary local technology innovation. The Open Earth - Platform (OpenEPI) is an initiative to prepare for such an - infrastructure. - - - - Sub heading - - Begin your journey by creating a user account. This will be your - gateway to a world of data-driven possibilities. Click the - "Sign Up" button, fill in your details, and voila! - You're one step closer to unlocking the full potential of our - platform. There is a need for a robust and accessible digital - infrastructure for open data and algorithms on weather, water, - earth, and vegetation, across projects, sectors, and contexts – - providing a base for the necessary local technology innovation. - The Open Earth Platform (OpenEPI) is an initiative to prepare for - such an infrastructure. - - - There is a need for a robust and accessible digital infrastructure - for open data and algorithms on weather, water, earth, and - vegetation, across projects, sectors, and contexts – providing a - base for the necessary local technology innovation. The Open Earth - Platform (OpenEPI) is an initiative to prepare for such an - infrastructure. - - - - - - ); -}; - -export default Home; diff --git a/app/resources/open-policy/page.tsx b/app/resources/open-policy/page.tsx deleted file mode 100644 index d6db2ea..0000000 --- a/app/resources/open-policy/page.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import Link from 'next/link'; -import { BackIcon } from '@/app/icons/BackIcon'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -const Home = () => { - return ( - - - - Back to resources - - - - - Our open policy - Lead paragraph - - - - Background - - Begin your journey by creating a user account. This will be your - gateway to a world of data-driven possibilities. Click the - "Sign Up" button, fill in your details, and voila! - You're one step closer to unlocking the full potential of our - platform. - - - - Sub heading - - Begin your journey by creating a user account. This will be your - gateway to a world of data-driven possibilities. Click the - "Sign Up" button, fill in your details, and voila! - You're one step closer to unlocking the full potential of our - platform. There is a need for a robust and accessible digital - infrastructure for open data and algorithms on weather, water, - earth, and vegetation, across projects, sectors, and contexts – - providing a base for the necessary local technology innovation. - The Open Earth Platform (OpenEPI) is an initiative to prepare for - such an infrastructure. - - - There is a need for a robust and accessible digital infrastructure - for open data and algorithms on weather, water, earth, and - vegetation, across projects, sectors, and contexts – providing a - base for the necessary local technology innovation. The Open Earth - Platform (OpenEPI) is an initiative to prepare for such an - infrastructure. - - - - Sub heading - - Begin your journey by creating a user account. This will be your - gateway to a world of data-driven possibilities. Click the - "Sign Up" button, fill in your details, and voila! - You're one step closer to unlocking the full potential of our - platform. There is a need for a robust and accessible digital - infrastructure for open data and algorithms on weather, water, - earth, and vegetation, across projects, sectors, and contexts – - providing a base for the necessary local technology innovation. - The Open Earth Platform (OpenEPI) is an initiative to prepare for - such an infrastructure. - - - There is a need for a robust and accessible digital infrastructure - for open data and algorithms on weather, water, earth, and - vegetation, across projects, sectors, and contexts – providing a - base for the necessary local technology innovation. The Open Earth - Platform (OpenEPI) is an initiative to prepare for such an - infrastructure. - - - - - - ); -}; - -export default Home; diff --git a/app/resources/page.tsx b/app/resources/page.tsx index 488761d..134baa9 100644 --- a/app/resources/page.tsx +++ b/app/resources/page.tsx @@ -12,81 +12,116 @@ const Home = () => { return ( - Open source resources - + + Open source resources + + Design and frontend resources, policies and specifications. - Documents - + + Documents + + - - - + + + Our open policy - + - Sub text + {/* + Sub text + */}{' '} - - - + + + Our metadata specification - + - Sub text + {/* + Sub text + */} - - - + + + OpenAPI Specification - Sub text + {/* + Sub text + */} - Frontend - + + Frontend + + { imageUrl={'/tailwind.png'} alt={'tailwind css logo'} /> - - - - - - Design + + Design + { imageUrl={'/material-symbols.png'} alt={'material symbols logo'} /> - - - - - diff --git a/app/theme/typography.ts b/app/theme/typography.ts index 1c30d73..854e82e 100644 --- a/app/theme/typography.ts +++ b/app/theme/typography.ts @@ -4,7 +4,7 @@ export const typography = { fontWeight: 400, fontSize: '57px', lineHeight: '64px', - letterSpacing: '-0.25px', + letterSpacing: '0px', }, h2: { fontFamily: 'Inter, Arial, sans-serif', @@ -46,48 +46,48 @@ export const typography = { fontWeight: 400, fontSize: '16px', lineHeight: '24px', - letterSpacing: '0.5px', + letterSpacing: '0px', }, subtitle2: { fontFamily: 'Inter, Arial, sans-serif', fontWeight: 400, fontSize: '14px', lineHeight: '20px', - letterSpacing: '0.25px', + letterSpacing: '0px', }, body1: { fontFamily: 'Inter, Arial, sans-serif', fontWeight: 400, fontSize: '14px', lineHeight: '16px', - letterSpacing: '0.4px', + letterSpacing: '0px', }, body2: { fontFamily: 'Inter, Arial, sans-serif', fontWeight: 500, fontSize: '14px', lineHeight: '20px', - letterSpacing: '0.1px', + letterSpacing: '0px', }, button: { fontFamily: 'Inter, Arial, sans-serif', fontWeight: 500, fontSize: '16px', lineHeight: '24px', - letterSpacing: '0.15px', + letterSpacing: '0px', }, caption: { fontFamily: 'Inter, Arial, sans-serif', fontWeight: 500, fontSize: '12px', lineHeight: '16px', - letterSpacing: '0.5px', + letterSpacing: '0px', }, overline: { fontFamily: 'Inter, Arial, sans-serif', fontWeight: 500, fontSize: '11px', lineHeight: '16px', - letterSpacing: '0.5px', + letterSpacing: '0px', }, }; diff --git a/public/font-awesome.png b/public/font-awesome.png deleted file mode 100644 index b3119f6..0000000 Binary files a/public/font-awesome.png and /dev/null differ diff --git a/tailwind.config.ts b/tailwind.config.ts index a360206..9a51932 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -8,6 +8,26 @@ const config: Config = { ], important: true, theme: { + screens: { + '2xs': '320px', + + xs: '580px', + + sm: '640px', + // => @media (min-width: 640px) { ... } + + md: '768px', + // => @media (min-width: 768px) { ... } + + lg: '1024px', + // => @media (min-width: 1024px) { ... } + + xl: '1280px', + // => @media (min-width: 1280px) { ... } + + '2xl': '1536px', + // => @media (min-width: 1536px) { ... } + }, colors: { primary: { main: '#006D41',