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

Fixed verification page white heading overlay #387

Merged
merged 1 commit into from
Jul 18, 2023
Merged

Fixed verification page white heading overlay #387

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
137 changes: 110 additions & 27 deletions pages/verification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import BasicPage from "../components/BasicPage"
import Head from "next/head"
import Image from "next/image"
import Hero from "../components/Hero"
Expand All @@ -13,12 +12,22 @@ import illoProfile from "../public/illustrations/verification_profile.png"
import illoEdit from "../public/illustrations/verification_edit.png"

const Account = ({ name, username, url, image }) => (
<a href={url} rel="noopener" className="bg-white rounded-lg flex group p-8 text-gray-0 hover:text-blurple-500">
<div className="w-14 h-14 rounded-[50%] relative flex-shrink-0">{image && <Image src={image} alt="" layout="fill" className="rounded-[50%] " />}</div>
<a
href={url}
rel="noopener"
className="group flex rounded-lg bg-white p-8 text-gray-0 hover:text-blurple-500"
>
<div className="relative h-14 w-14 flex-shrink-0 rounded-[50%]">
{image && (
<Image src={image} alt="" layout="fill" className="rounded-[50%] " />
)}
</div>

<div className="truncate px-4">
<span className="block b1 truncate !font-bold">{name}</span>
<span className="b2 !font-semibold text-blurple-600 group-hover:text-blurple-500">@{username}</span>
<span className="b1 block truncate !font-bold">{name}</span>
<span className="b2 !font-semibold text-blurple-600 group-hover:text-blurple-500">
@{username}
</span>
</div>
</a>
)
Expand All @@ -30,16 +39,25 @@ const Verification = () => {
<Layout>
<div dir="ltr" className="[unicode-bidi:plaintext]">
<Hero homepage>
<div className="b2 pt-6 !font-bold uppercase text-nightshade-100">
<FormattedMessage id="verification.feature_highlight" defaultMessage="Feature Highlight" />
<div className="b2 mb-4 pt-8 !font-bold uppercase text-nightshade-100">
<FormattedMessage
id="verification.feature_highlight"
defaultMessage="Feature Highlight"
/>
</div>

<h1 className="h1 mb-4">
<FormattedMessage id="verification.title" defaultMessage="Verification on Mastodon" />
<FormattedMessage
id="verification.title"
defaultMessage="Verification on Mastodon"
/>
</h1>

<p className="sh1 mb-11 max-w-[50ch]">
<FormattedMessage id="verification.lead" defaultMessage="Verifying your identity on Mastodon is for everyone. Based on open web standards, now and forever free." />
<p className="sh1 mb-11 max-w-[40ch]">
<FormattedMessage
id="verification.lead"
defaultMessage="Verifying your identity on Mastodon is for everyone. Based on open web standards, now and forever free."
/>
</p>

<div className="flex justify-center gap-12">
Expand All @@ -62,23 +80,53 @@ const Verification = () => {
<div className="full-width-bg">
<div className="full-width-bg__inner">
<section className="grid grid-cols-12 gap-gutter pb-20">
<div className="col-span-12 xl:col-span-10 xl:col-start-2 grid gap-gutter md:grid-cols-3">
<div className="col-span-12 grid gap-gutter md:grid-cols-3 xl:col-span-10 xl:col-start-2">
<IconCard
title={<FormattedMessage id="verification.why.privacy.title" defaultMessage="Privacy-friendly" />}
title={
<FormattedMessage
id="verification.why.privacy.title"
defaultMessage="Privacy-friendly"
/>
}
icon="privacy"
copy={<FormattedMessage id="verification.why.privacy.body" defaultMessage="You do not need to submit your documents anywhere, so there is no chance of them being leaked." />}
copy={
<FormattedMessage
id="verification.why.privacy.body"
defaultMessage="You do not need to submit your documents anywhere, so there is no chance of them being leaked."
/>
}
/>

<IconCard
title={<FormattedMessage id="verification.why.equality.title" defaultMessage="For everyone" />}
title={
<FormattedMessage
id="verification.why.equality.title"
defaultMessage="For everyone"
/>
}
icon="safe"
copy={<FormattedMessage id="verification.why.equality.body" defaultMessage="You do not have to be a celebrity to verify your identity. You just need to have a website or web page." />}
copy={
<FormattedMessage
id="verification.why.equality.body"
defaultMessage="You do not have to be a celebrity to verify your identity. You just need to have a website or web page."
/>
}
/>

<IconCard
title={<FormattedMessage id="verification.why.decentralization.title" defaultMessage="Decentralized" />}
title={
<FormattedMessage
id="verification.why.decentralization.title"
defaultMessage="Decentralized"
/>
}
icon="decentralized"
copy={<FormattedMessage id="verification.why.decentralization.body" defaultMessage="There is no need to trust a central authority. The verification can be manually confirmed anytime." />}
copy={
<FormattedMessage
id="verification.why.decentralization.body"
defaultMessage="There is no need to trust a central authority. The verification can be manually confirmed anytime."
/>
}
/>
</div>
</section>
Expand All @@ -88,13 +136,23 @@ const Verification = () => {
<div className="full-width-bg bg-gray-5">
<div className="full-width-bg__inner">
<section className="pt-14 pb-[4.5rem] md:grid md:grid-cols-2 md:items-center md:gap-gutter xl:grid-cols-12">
<div className="row-span-full xl:col-span-5 order-2 xl:col-start-8">
<div className="order-2 row-span-full xl:col-span-5 xl:col-start-8">
<Image src={illoProfile} alt="" />
</div>

<div className="row-span-full xl:col-span-5 xl:col-start-2">
<h2 className="h4 md:h3 mb-2 md:mb-5"><FormattedMessage id="verification.features.no_badge.title" defaultMessage="There is no blue badge" /></h2>
<p className="sh1 mb-8 text-gray-1"><FormattedMessage id="verification.features.no_badge.body" defaultMessage={`Identity is not a yes or no question. There are few truly unique names in the world, so why should only the famous ones get a "yes"? At Mastodon, we don't rely on legal names and blue badges. Instead, we rely on the fact that people can be identified by their official websites.`} /></p>
<h2 className="h4 md:h3 mb-2 md:mb-5">
<FormattedMessage
id="verification.features.no_badge.title"
defaultMessage="There is no blue badge"
/>
</h2>
<p className="sh1 mb-8 text-gray-1">
<FormattedMessage
id="verification.features.no_badge.body"
defaultMessage={`Identity is not a yes or no question. There are few truly unique names in the world, so why should only the famous ones get a "yes"? At Mastodon, we don't rely on legal names and blue badges. Instead, we rely on the fact that people can be identified by their official websites.`}
/>
</p>
</div>
</section>
</div>
Expand All @@ -108,27 +166,52 @@ const Verification = () => {
</div>

<div className="row-span-full xl:col-span-5 xl:col-start-8">
<h2 className="h4 md:h3 mb-2 md:mb-5"><FormattedMessage id="verification.features.how_to.title" defaultMessage="Here's how" /></h2>
<p className="sh1 mb-8 text-gray-1"><FormattedMessage id="verification.features.how_to.body" defaultMessage={`Put a link to your Mastodon profile on your website or webpage. The important part is that the link has to have a <code>rel="me"</code> attribute on it. Then edit your Mastodon profile and put the address of your website or web page in one of your four profile fields. Save your profile, that's it!`} values={{ code: text => <code className="font-mono font-medium text-blurple-600">{text}</code> }}/></p>
<h2 className="h4 md:h3 mb-2 md:mb-5">
<FormattedMessage
id="verification.features.how_to.title"
defaultMessage="Here's how"
/>
</h2>
<p className="sh1 mb-8 text-gray-1">
<FormattedMessage
id="verification.features.how_to.body"
defaultMessage={`Put a link to your Mastodon profile on your website or webpage. The important part is that the link has to have a <code>rel="me"</code> attribute on it. Then edit your Mastodon profile and put the address of your website or web page in one of your four profile fields. Save your profile, that's it!`}
values={{
code: (text) => (
<code className="font-mono font-medium text-blurple-600">
{text}
</code>
),
}}
/>
</p>
</div>
</section>
</div>
</div>

<div className="full-width-bg bg-gray-5 -mb-footer-offset pb-footer-offset">
<div className="full-width-bg -mb-footer-offset bg-gray-5 pb-footer-offset">
<div className="full-width-bg__inner">
<section className="grid grid-cols-12 gap-gutter py-20">
<div className="col-span-12 lg:col-span-10 lg:col-start-2">
<h3 className="h3 pb-6 text-center">
<FormattedMessage id="verification.examples.title" defaultMessage="In the wild" />
<FormattedMessage
id="verification.examples.title"
defaultMessage="In the wild"
/>
</h3>

<p className="b1 mb-16 text-center ">
<FormattedMessage id="verification.examples.lead" defaultMessage="Anyone can use verification on Mastodon, but here are just some of the most recognizable names that do…" />
<FormattedMessage
id="verification.examples.lead"
defaultMessage="Anyone can use verification on Mastodon, but here are just some of the most recognizable names that do…"
/>
</p>

<div className="grid grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] gap-1">
{verified.map(({ url, ...other }) => <Account key={url} url={url} {...other} />)}
{verified.map(({ url, ...other }) => (
<Account key={url} url={url} {...other} />
))}
</div>
</div>
</section>
Expand Down Expand Up @@ -175,4 +258,4 @@ const Verification = () => {

export default Verification

export const getStaticProps = withDefaultStaticProps()
export const getStaticProps = withDefaultStaticProps()