diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png index a6e60be..df20545 100644 Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png index 2f14c8d..2b47db6 100644 Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index e34a352..382b1e0 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/background-texture.png b/public/background-texture.png deleted file mode 100644 index 86ba688..0000000 Binary files a/public/background-texture.png and /dev/null differ diff --git a/public/background-texture2.png b/public/background-texture2.png deleted file mode 100644 index 4fe9aa0..0000000 Binary files a/public/background-texture2.png and /dev/null differ diff --git a/public/background-texture3.png b/public/background-texture3.png deleted file mode 100644 index 8ec8e34..0000000 Binary files a/public/background-texture3.png and /dev/null differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml index fddb3df..b3930d0 100644 --- a/public/browserconfig.xml +++ b/public/browserconfig.xml @@ -3,7 +3,7 @@ - #2362C1 + #da532c diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index eb2b058..77cf38d 100644 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index d2c62c0..3ad01ce 100644 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index bac1b94..27cd2f2 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/fonts/NeueHaasDisplayMedium.ttf b/public/fonts/NeueHaasDisplayMedium.ttf new file mode 100644 index 0000000..01565a0 Binary files /dev/null and b/public/fonts/NeueHaasDisplayMedium.ttf differ diff --git a/public/hyperlane-banner.png b/public/hyperlane-banner.png new file mode 100644 index 0000000..e2b64cc Binary files /dev/null and b/public/hyperlane-banner.png differ diff --git a/public/icon.png b/public/icon.png deleted file mode 100644 index 2f14c8d..0000000 Binary files a/public/icon.png and /dev/null differ diff --git a/public/logo-blue.png b/public/logo-blue.png new file mode 100644 index 0000000..0d7b2e6 Binary files /dev/null and b/public/logo-blue.png differ diff --git a/public/logo-with-text.png b/public/logo-with-text.png index c944efa..ff97e24 100644 Binary files a/public/logo-with-text.png and b/public/logo-with-text.png differ diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..96669d2 Binary files /dev/null and b/public/logo.png differ diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png index a385caa..82fba4a 100644 Binary files a/public/mstile-150x150.png and b/public/mstile-150x150.png differ diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg index 9cb9a6f..1f3bcb5 100644 --- a/public/safari-pinned-tab.svg +++ b/public/safari-pinned-tab.svg @@ -2,23 +2,23 @@ Created by potrace 1.14, written by Peter Selinger 2001-2017 - - + diff --git a/src/components/animation/Fade.tsx b/src/components/animations/Fade.tsx similarity index 100% rename from src/components/animation/Fade.tsx rename to src/components/animations/Fade.tsx diff --git a/src/components/animation/Spinner.module.css b/src/components/animations/Spinner.module.css similarity index 100% rename from src/components/animation/Spinner.module.css rename to src/components/animations/Spinner.module.css diff --git a/src/components/animation/Spinner.tsx b/src/components/animations/Spinner.tsx similarity index 100% rename from src/components/animation/Spinner.tsx rename to src/components/animations/Spinner.tsx diff --git a/src/components/icons/Chevron.tsx b/src/components/icons/Chevron.tsx index b1bf459..2d41322 100644 --- a/src/components/icons/Chevron.tsx +++ b/src/components/icons/Chevron.tsx @@ -51,3 +51,84 @@ function _ChevronIcon({ width, height, direction, color, classes }: Props) { } export const ChevronIcon = memo(_ChevronIcon); + +interface Props { + width?: string | number; + height?: string | number; + direction: 'n' | 'e' | 's' | 'w'; + color?: string; + classes?: string; +} + +function _HyperlaneChevron({ width, height, direction, color, classes }: Props) { + let directionClass; + switch (direction) { + case 'n': + directionClass = '-rotate-90'; + break; + case 'e': + directionClass = ''; + break; + case 's': + directionClass = 'rotate-90'; + break; + case 'w': + directionClass = 'rotate-180'; + break; + default: + throw new Error(`Invalid chevron direction ${direction}`); + } + + return ( + + + + ); +} + +export const HyperlaneChevron = memo(_HyperlaneChevron); + +function _HyperlaneWideChevron({ width, height, direction, color, classes }: Props) { + let directionClass; + switch (direction) { + case 'n': + directionClass = '-rotate-90'; + break; + case 'e': + directionClass = ''; + break; + case 's': + directionClass = 'rotate-90'; + break; + case 'w': + directionClass = 'rotate-180'; + break; + default: + throw new Error(`Invalid chevron direction ${direction}`); + } + + return ( + + + + ); +} + +export const HyperlaneWideChevron = memo(_HyperlaneWideChevron); diff --git a/src/components/icons/Discord.tsx b/src/components/icons/Discord.tsx new file mode 100644 index 0000000..6dec103 --- /dev/null +++ b/src/components/icons/Discord.tsx @@ -0,0 +1,38 @@ +import { memo } from 'react' + +function _Discord({ + width, + height, + fill, + className = '', +}: { + width?: number | string + height?: number | string + fill?: string + className?: string +}) { + return ( + + + + + + + + + + + ) +} + +export const Discord = memo(_Discord) diff --git a/src/components/icons/Github.tsx b/src/components/icons/Github.tsx new file mode 100644 index 0000000..70d67d7 --- /dev/null +++ b/src/components/icons/Github.tsx @@ -0,0 +1,30 @@ +import { memo } from 'react' + +function _Github({ + width, + height, + fill, + className = '', +}: { + width?: number | string + height?: number | string + fill?: string + className?: string +}) { + return ( + + + + ) +} + +export const Github = memo(_Github) diff --git a/src/components/icons/LinkedIn.tsx b/src/components/icons/LinkedIn.tsx new file mode 100644 index 0000000..417dc8b --- /dev/null +++ b/src/components/icons/LinkedIn.tsx @@ -0,0 +1,30 @@ +import { memo } from 'react' + +function _Linkedin({ + width, + height, + fill, + className = '', +}: { + width?: number | string + height?: number | string + fill?: string + className?: string +}) { + return ( + + + + ) +} + +export const Linkedin = memo(_Linkedin) diff --git a/src/components/icons/Medium.tsx b/src/components/icons/Medium.tsx new file mode 100644 index 0000000..11d0d17 --- /dev/null +++ b/src/components/icons/Medium.tsx @@ -0,0 +1,32 @@ +import { memo } from 'react'; + +function _Medium({ + width, + height, + fill, + className = '', +}: { + width?: number | string; + height?: number | string; + fill?: string; + className?: string; +}) { + return ( + + + + ); +} + +export const Medium = memo(_Medium); diff --git a/src/components/icons/Twitter.tsx b/src/components/icons/Twitter.tsx new file mode 100644 index 0000000..0f98461 --- /dev/null +++ b/src/components/icons/Twitter.tsx @@ -0,0 +1,30 @@ +import { memo } from 'react' + +function _Twitter({ + width, + height, + fill, + className = '', +}: { + width?: number | string + height?: number | string + fill?: string + className?: string +}) { + return ( + + + + ) +} + +export const Twitter = memo(_Twitter) diff --git a/src/components/icons/Web.tsx b/src/components/icons/Web.tsx new file mode 100644 index 0000000..fed419d --- /dev/null +++ b/src/components/icons/Web.tsx @@ -0,0 +1,80 @@ +import { memo } from 'react' + +function _Web({ + width, + height, + fill, + className = '', +}: { + width?: number | string + height?: number | string + fill?: string + className?: string +}) { + return ( + + + + + + + + + + + + + + + + ) +} + +export const Web = memo(_Web) diff --git a/src/components/icons/XIcon.tsx b/src/components/icons/XIcon.tsx index 53477a8..311510f 100644 --- a/src/components/icons/XIcon.tsx +++ b/src/components/icons/XIcon.tsx @@ -1,19 +1,30 @@ import { memo } from 'react'; -import X from '../../images/icons/x.svg'; -import { IconButton } from '../buttons/IconButton'; - function _XIcon({ - onClick, - title, - size = 20, + width, + height, + fill, + className = '', }: { - onClick: () => void; - title?: string; - size?: number; + width?: number | string; + height?: number | string; + fill?: string; + className?: string; }) { return ( - + + + + ); } diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx index 67e5810..851446c 100644 --- a/src/components/layout/AppLayout.tsx +++ b/src/components/layout/AppLayout.tsx @@ -17,13 +17,18 @@ export function AppLayout({ pathName, children }: PropsWithChildren) { {`Hyperlane Explorer | ${getHeadTitle(pathName)}`} -
+
{/* */} -
-
-
{children}
-
+
+
+
+ {children} +
+
); @@ -34,3 +39,9 @@ function getHeadTitle(pathName: string) { if (segments.length <= 1 || !segments[1]) return 'Home'; else return toTitleCase(segments[1]); } + +const styles = { + container: { + width: 'min(900px,96vw)', + }, +}; diff --git a/src/components/layout/ContentFrame.tsx b/src/components/layout/ContentFrame.tsx deleted file mode 100644 index 733a46b..0000000 --- a/src/components/layout/ContentFrame.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { BackgroundBanner } from './BackgroundBanner'; - -export function ContentFrame(props: PropsWithChildren) { - return ( -
-
- -
{props.children}
-
-
- ); -} - -const styles = { - container: { - width: 'min(900px,96vw)', - }, -}; diff --git a/src/components/layout/Dropdown.tsx b/src/components/layout/Dropdown.tsx index db6c879..1aaf111 100644 --- a/src/components/layout/Dropdown.tsx +++ b/src/components/layout/Dropdown.tsx @@ -1,44 +1,40 @@ import { Menu, Popover, Transition } from '@headlessui/react'; -import { Fragment, ReactElement, ReactNode } from 'react'; +import { Fragment, PropsWithChildren, ReactElement, ReactNode } from 'react'; interface MenuProps { - buttonContent: ReactNode; + ButtonContent: (p: { isOpen: boolean }) => ReactElement; buttonClasses?: string; buttonTitle?: string; - menuItems: ReactNode[]; + menuItems: Array<(close: () => void) => ReactElement>; menuClasses?: string; + isFullscreen?: boolean; } // Uses Headless menu, which auto-closes on any item click export function DropdownMenu({ - buttonContent, + ButtonContent, buttonClasses, buttonTitle, menuItems, menuClasses, + isFullscreen, }: MenuProps) { + const menuItemsClass = isFullscreen + ? `z-50 fixed left-0 right-0 top-20 bottom-0 w-screen bg-blue-500 focus:outline-none ${menuClasses}` + : `z-50 absolute -right-1.5 mt-3 origin-top-right rounded-md bg-white shadow-md drop-shadow-md focus:outline-none ${menuClasses}`; + return ( - {buttonContent} + {({ open }) => } - - + + {menuItems.map((mi, i) => ( - {mi} + {({ close }) => mi(close)} ))} - + ); } @@ -64,21 +60,29 @@ export function DropdownModal({ {buttonContent} - + {({ close }) => modalContent(close)} - + ); } + +function DropdownTransition({ children }: PropsWithChildren) { + return ( + + {children} + + ); +} diff --git a/src/components/nav/Footer.tsx b/src/components/nav/Footer.tsx index bb13816..8552459 100644 --- a/src/components/nav/Footer.tsx +++ b/src/components/nav/Footer.tsx @@ -1,43 +1,110 @@ +// Mostly copied from https://github.com/hyperlane-xyz/hyperlane-website/blob/main/src/components/nav/Footer.tsx import Image from 'next/image'; import Link from 'next/link'; import { links } from '../../consts/links'; -import Discord from '../../images/logos/discord.svg'; -import Github from '../../images/logos/github.svg'; -import Hyperlane from '../../images/logos/hyperlane-logo.svg'; -import Medium from '../../images/logos/medium.svg'; -import Twitter from '../../images/logos/twitter.svg'; +// import FooterLine from '../../images/footer/footer-line-desktop.svg'; +// import FooterLineMobile from '../../images/footer/footer-line-mobile.svg'; +import FooterBg from '../../images/footer/footer-bg.svg'; +import FooterLogo from '../../images/footer/footer-logo.svg'; +import FooterTopBorder from '../../images/footer/footer-top-border.svg'; +import { Discord } from '../icons/Discord'; +import { Github } from '../icons/Github'; +import { Medium } from '../icons/Medium'; +import { Twitter } from '../icons/Twitter'; + +const footerLinks1 = [ + { title: 'Docs', url: links.docs, external: true }, + { title: 'Homepage', url: links.home, external: true }, + { title: 'Chains', url: links.chains, external: true }, +]; + +const footerLinks2 = [ + { title: 'Crew', url: `${links.home}/crew`, external: true }, + { title: 'Bounty', url: `${links.home}/bounty`, external: true }, + { title: 'Brand', url: links.brand, external: true }, +]; + +const footerLinks3 = [ + { title: 'Twitter', url: links.twitter, external: true, icon: }, + { title: 'Discord', url: links.discord, external: true, icon: }, + { title: 'Github', url: links.github, external: true, icon: }, + { title: 'Blog', url: links.blog, external: true, icon: }, +]; export function Footer() { return ( -