-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #81 from Vizzuality/SKY30-155-footer
[SKY30-155] Add Header / Footer (+ design tweaks)
- Loading branch information
Showing
19 changed files
with
230 additions
and
109 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,51 @@ | ||
| import Link from 'next/link'; | ||
|
|
||
| const navigation = [ | ||
| { name: 'About', href: '/about' }, | ||
| { name: 'Contact', href: '/contact' }, | ||
| { name: 'Privacy Policy', href: '/privacy-policy' }, | ||
| ]; | ||
| import { Copyright } from 'lucide-react'; | ||
|
|
||
| import { PAGES } from '@/constants/pages'; | ||
|
|
||
| const Footer: React.FC = () => ( | ||
| <footer className="bg-black text-white"> | ||
| <div className="mx-auto max-w-7xl px-6 py-2 md:flex md:items-center md:justify-between lg:px-10"> | ||
| <ul className="flex justify-center space-x-6"> | ||
| {navigation.map(({ name, href }) => ( | ||
| <li key={href}> | ||
| <div className="px-8 md:mx-auto md:max-w-7xl"> | ||
| <div className="flex w-full flex-col"> | ||
| <div className="my-6"> | ||
| <div className="my-6"> | ||
| <h2 className="text-4xl font-extrabold md:text-5xl">Would you like to know more?</h2> | ||
| <Link | ||
| href={href} | ||
| className="block ring-offset-black transition-colors hover:text-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2" | ||
| href={PAGES.contact} | ||
| className="mt-8 inline-block bg-white px-4 py-2.5 font-mono text-xs uppercase text-black" | ||
| > | ||
| {name} | ||
| Get in touch | ||
| </Link> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
|
|
||
| <div className="mt-8 md:order-1 md:mt-0"> | ||
| <p className="text-center">© Skytruth 30x30 2023</p> | ||
| </div> | ||
| <address className="my-4 flex flex-col gap-0.5 pt-6 text-xs not-italic text-black-300 md:my-8"> | ||
| <span>30x30 Skytruth</span> | ||
| <span>140–142 St No Street, New York, EC1V XXX, US</span> | ||
| <a href="tel:+1 (0)23 0000 0000">+1 (0)23 0000 0000</a> | ||
| <a href="mailto:[email protected]">info@example</a> | ||
| <span>Registered in United States of America as 30x30 Tool Limited. 7792366</span> | ||
| </address> | ||
| </div> | ||
| </div> | ||
| <div className="flex w-full justify-between gap-8 border-t border-black-400 py-6 text-xs font-extralight"> | ||
| <div className="flex py-2"> | ||
| <Copyright className="mr-2 h-3.5 w-3.5" aria-hidden="true" /> SkyTruth 2023 | ||
| </div> | ||
| <nav className="flex gap-6"> | ||
| <Link className="py-2" href={PAGES.privacyPolicy}> | ||
| Privacy policy | ||
| </Link> | ||
| <Link className="py-2" href={PAGES.termsOfUse}> | ||
| Terms of use | ||
| </Link> | ||
| </nav> | ||
| </div> | ||
| <span | ||
| className="block h-[12vw] w-full bg-contain bg-bottom bg-no-repeat opacity-10 sm:mt-2 md:mx-auto md:mt-4 md:max-w-7xl xl:-mt-8" | ||
| style={{ | ||
| backgroundImage: `url(/images/static-pages/bg-images/footer.svg)`, | ||
| }} | ||
| /> | ||
| </div> | ||
| </footer> | ||
| ); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,9 @@ | ||
| export const PAGES = { | ||
| homepage: '/', | ||
| dataTool: '/data-tool', | ||
| knowledgeHub: '/knowledge-hub', | ||
| contact: '/contact', | ||
| about: '/about', | ||
| privacyPolicy: '/privacy-policy', | ||
| termsOfUse: '/terms-of-use', | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import Head from 'next/head'; | ||
| import Link from 'next/link'; | ||
|
|
||
| import Header from '@/components/header'; | ||
| import { PAGES } from '@/constants/pages'; | ||
|
|
||
| export interface ErrorPageLayoutProps { | ||
| pageTitle?: string; | ||
| error: 404 | 500; | ||
| title?: string; | ||
| description?: string; | ||
| } | ||
|
|
||
| const ErrorPageLayout: React.FC<ErrorPageLayoutProps> = ({ | ||
| pageTitle, | ||
| error, | ||
| title, | ||
| description, | ||
| }) => ( | ||
| <> | ||
| <Head> | ||
| <title>{`${pageTitle ? `${pageTitle} | ` : ''}Skytruth 30x30`}</title> | ||
| {description && <meta name="description" content={description} />} | ||
| </Head> | ||
| <div className="flex h-screen w-full flex-col"> | ||
| <div className="flex-shrink-0"> | ||
| <Header /> | ||
| </div> | ||
| <div className="flex h-full w-full items-center justify-center border-x border-b border-black"> | ||
| <div className="mb-8 inline-block max-w-2xl p-8 text-center"> | ||
| <h1 className="text-9xl font-extrabold leading-none text-orange md:text-[200px]"> | ||
| {error} | ||
| </h1> | ||
| <h2 className="my-4 mt-4 text-4xl md:mb-8 md:text-5xl">{title}</h2> | ||
| <p>{description}</p> | ||
| <Link | ||
| href={PAGES.homepage} | ||
| className="mt-6 inline-block bg-black px-8 py-3 font-mono text-xs uppercase text-white md:mt-4" | ||
| > | ||
| Go to homepage | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
|
|
||
| export default ErrorPageLayout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.