Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

About page redesign #394

Merged
merged 4 commits into from
Aug 3, 2021
Merged

About page redesign #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3405fa6
Change About page design
Aug 3, 2021
24768bd
Fix Column props
Aug 3, 2021
e09c090
Fix style issues
Aug 3, 2021
afbab59
Fix Hero component: theme prop is optional
Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added app/images/about/bg-utilities.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/images/about/utilities-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 25 additions & 18 deletions app/layout/about/utilities/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import React from 'react';
import Column from 'layout/statics/column';
import Wrapper from 'layout/wrapper';

import BackgroundImage from 'images/about/bg-utilities.jpg';
import UtilitiesImage from 'images/about/utilities-1.png';

import { UTILITIES } from './constants';

export interface AboutUtilitiesProps {
Expand All @@ -11,25 +14,29 @@ export interface AboutUtilitiesProps {

export const AboutUtilities: React.FC<AboutUtilitiesProps> = () => {
return (
<Wrapper>
<div className="grid w-full max-w-5xl grid-cols-2 py-16 mx-auto border-t border-white gap-x-36 border-opacity-20">
<Column
title="What can I do with this Marxan planning platform?"
subtitle="This platform hosts the Marxan software suite which includes Marxan, Marxan with Zones, and Marxan with Connectivity on a stable Azure cloud environment. You can use this platform to:"
caption="Learn more"
href="https://marxansolutions.org"
external
/>
<div className="flex flex-col items-start gap-10">
{UTILITIES.map((u) => (
<div className="flex flex-row gap-16" key={u.order}>
<p className="text-2xl font-semibold text-gray-600">{u.order}</p>
<p className="text-lg font-heading">{u.description}</p>
</div>
))}
<div
style={{
backgroundImage: `url(${BackgroundImage})`,
backgroundSize: 'cover',
}}
>
<Wrapper>
<div className="grid w-full max-w-5xl grid-cols-2 py-28 mx-auto border-t border-white gap-x-36 border-opacity-20">
<Column
title="What can I do with this Marxan planning platform?"
image={UtilitiesImage}
/>
pedrogpimenta marked this conversation as resolved.
Show resolved Hide resolved
<div className="flex flex-col items-start gap-10">
{UTILITIES.map((u) => (
<div className="flex flex-row gap-16" key={u.order}>
<p className="text-2xl font-semibold text-primary-500">{u.order}</p>
<p className="text-lg font-heading">{u.description}</p>
</div>
))}
</div>
</div>
</div>
</Wrapper>
</Wrapper>
</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion app/layout/about/values/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const AboutValues: React.FC<AboutValuesProps> = () => {
<p className="mb-5 text-sm text-black">
{v.description}
</p>
<a className="text-base text-black hover:underline" href={v.hyperlink} rel="noopener noreferrer" target="_blank">{v.hypertext}</a>
<a className="text-base text-black underline" href={v.hyperlink} rel="noopener noreferrer" target="_blank">{v.hypertext}</a>
</div>
))}
</div>
Expand Down
25 changes: 21 additions & 4 deletions app/layout/statics/column/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ export interface StaticColumnProps {
title: string;
subtitle?: string;
description?: string;
caption: string;
href: string,
caption?: string;
image?: string;
href?: string,
external?: boolean,
}

Expand All @@ -16,12 +17,13 @@ export const StaticColumn: React.FC<StaticColumnProps> = ({
subtitle,
description,
caption,
image,
href,
external = false,
}: StaticColumnProps) => {
return (
<div>
<h2 className="h-56 pb-10 text-4xl leading-relaxed text-transparent font-heading max-w-max bg-gradient-to-r from-blue-700 via-blue-400 to-green-300 bg-clip-text">
<h2 className="h-56 pb-10 text-4xl leading-relaxed font-heading max-w-max">
{title}
</h2>
{subtitle && (
Expand All @@ -34,7 +36,22 @@ export const StaticColumn: React.FC<StaticColumnProps> = ({
{description}
</p>
)}
<ButtonLink caption={caption} href={href} external={external} />
{image && (
<div>
<img
src={image}
alt=""
style={{
width: '403px',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm afraid of this magic numbers

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me too. I usually don't like it but I also don't see a good way to do it, a good way to add these images with the size the designers want. I could probably put some percentages, but I'm not sure this is a whole lot better... WDYT @mbarrenechea ?

height: 'auto',
filter: 'drop-shadow(0px 8px 15px rgba(0, 0, 0, .35))',
}}
/>
</div>
)}
{href && (
<ButtonLink caption={caption} href={href} external={external} />
)}
</div>
);
};
Expand Down
49 changes: 27 additions & 22 deletions app/layout/statics/hero/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,48 @@
import React from 'react';

import classnames from 'classnames';

import Backlink from 'layout/statics/backlink';
import Wrapper from 'layout/wrapper';

export interface StaticHeroProps {
section: string;
section?: string;
title: string;
description: string;
backlink?: string,
backlink?: string;
theme?: 'dark' | 'light';
}

export const StaticHero: React.FC<StaticHeroProps> = ({
section,
title,
description,
backlink,
theme = 'dark',
}: StaticHeroProps) => {
return (
<Wrapper>
<div className="w-full max-w-5xl mx-auto my-32">
{backlink && (
<Backlink href={backlink}>{section}</Backlink>
)}
{!backlink && (
<h1 className="max-w-3xl text-lg font-semibold font-heading opacity-40">
{section}
</h1>
)}
<h2
className="pb-16 mt-3 font-semibold leading-tight text-left max-w-max bg-clip-text text-7xl"
>
{title}
</h2>
<div className={classnames({
'bg-primary-50 text-black': theme === 'light',
'bg-black': theme === 'dark',
})}
>
<Wrapper>
<div className="w-full max-w-5xl mx-auto my-32">
{backlink && (
<Backlink href={backlink}>{section}</Backlink>
)}
<h2
className="pb-16 mt-3 font-semibold leading-tight text-left max-w-max bg-clip-text text-7xl"
>
{title}
</h2>

<p className="text-lg leading-8 text-justify max-w-max font-heading">
{description}
</p>
</div>
</Wrapper>
<p className="text-lg leading-8 max-w-max">
{description}
</p>
</div>
</Wrapper>
</div>
);
};

Expand Down
4 changes: 2 additions & 2 deletions app/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ const About: React.FC = () => {
/>

<main>
<Header size="base" />
<Header size="base" theme="light" />
<Hero
section="About"
theme="light"
title={TITLE_TEXT}
description={DESCRIPTION_TEXT}
/>
Expand Down