FE Test: Modern Website

test.md

FE Test: Modern Website

From this design, create a website using a static site generator like Gatsby or Next. Apply the appropriate CSS style to respect the design. Supporting responsive is optional.

Once done, upload your project on GitHub or GitLab. Then email back the git repository URL or zip the project to the person who sent the task.

Notes

Existing page: https://protonmail.com/pricing

To get plans

API: GET https://api.protonmail.ch/payments/plans?Currency=EUR

Currencies available in the selector: EUR, CHF and USD.

Billing cycle available in the selector: Monthly: 1, Annualy: 12 and 2 years: 24.

const requestPlans = async (currency = 'EUR') => {
    const myHeaders = new Headers();

    myHeaders.append('Content-Type', 'application/json;charset=utf-8');
    myHeaders.append('x-pm-appversion', 'Other');
    myHeaders.append('x-pm-apiversion', '3');
    myHeaders.append('Accept', 'application/vnd.protonmail.v1+json');

    const myInit = {
        method: 'GET',
        headers: myHeaders,
        mode: 'cors',
        cache: 'default'
    };

    const response = await fetch(`https://api.protonmail.ch/payments/plans?${currency}`, myInit)
    const result = response.json();

    return result.Plans;
};

Result

{
	"Plans": [
    	{
        	"ID": "PlanID",
            "Name": "PlanName",
            "Currency": "EUR",
        	"Pricing": {
            		1: 100 // 1 EUR
            		12: 1200 // 12 EUR
                	24: 2400 // 24 EUR
            }
        },
        // ... other plans
    ]
}

Some data can be found in the result of the API request like Pricing or plan Name, some other needs to be “hardcoded”.