J M Rossy
2 years ago
parent
3678a0c538
commit
70af6e86ea
@ -0,0 +1,49 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
import { Color } from '../../styles/Color'; |
||||
|
||||
interface Props { |
||||
width?: string | number; |
||||
height?: string | number; |
||||
direction: 'n' | 'e' | 's' | 'w'; |
||||
color?: string; |
||||
classes?: string; |
||||
} |
||||
|
||||
function _BigChevron({ 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 ( |
||||
<svg |
||||
fill="none" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="1.2 1 139.1 322" |
||||
width={width} |
||||
height={height} |
||||
className={`${directionClass} ${classes}`} |
||||
> |
||||
<path |
||||
d="M6.3 1h61.3a20 20 0 0 1 18.7 13L140 158.3a5 5 0 0 1 0 3.4l-.3.9-53.5 147.2A20 20 0 0 1 67.4 323H6.2a5 5 0 0 1-4.7-6.6l55.2-158.1L1.7 7.7A5 5 0 0 1 6.2 1Z" |
||||
fill={color || Color.primaryBlack} |
||||
></path> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const BigChevron = memo(_BigChevron); |
||||
@ -1,55 +1,79 @@ |
||||
import Image from 'next/future/image'; |
||||
import Link from 'next/link'; |
||||
|
||||
import { links } from '../../consts/links'; |
||||
import Book from '../../images/icons/book.svg'; |
||||
import Briefcase from '../../images/icons/briefcase.svg'; |
||||
import InfoCircle from '../../images/icons/info-circle.svg'; |
||||
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'; |
||||
|
||||
export function Footer() { |
||||
return ( |
||||
<footer className="mt-3 px-4 py-4 sm:pl-6 sm:pr-8 opacity-80"> |
||||
<div className="flex justify-between items-center"> |
||||
<footer className="mt-2 px-4 py-6 sm:px-10 opacity-80"> |
||||
<div className="flex flex-col sm:flex-row sm:justify-between items-center gap-6 sm:gap-0"> |
||||
<div className="flex items-center"> |
||||
<div className="flex scale-90 sm:scale-100"> |
||||
<Image src={Hyperlane} width={52} height={52} alt="" /> |
||||
<Image src={Hyperlane} width={56} height={56} alt="" /> |
||||
</div> |
||||
<div className="flex flex-col ml-3"> |
||||
<p className="text-sm font-light"> |
||||
<p className="text-sm font-light leading-5"> |
||||
<span className="text-base font-medium">Hyperlane</span> is the platform |
||||
<br /> |
||||
for developers building |
||||
<br /> |
||||
the interchain universe |
||||
the interchain universe. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div className="grid grid-rows-2 grid-cols-3 gap-y-4 gap-x-5 md:gap-x-8"> |
||||
<FooterIconLink to={links.twitter} imgSrc={Twitter} text="Twitter" /> |
||||
<FooterIconLink to={links.docs} imgSrc={Book} text="Docs" /> |
||||
<FooterIconLink to={links.home} imgSrc={InfoCircle} text="About" /> |
||||
<FooterIconLink to={links.discord} imgSrc={Discord} text="Discord" /> |
||||
<FooterIconLink to={links.github} imgSrc={Github} text="Github" /> |
||||
<FooterIconLink to={links.jobs} imgSrc={Briefcase} text="Jobs" /> |
||||
<div className="flex"> |
||||
<div className="flex flex-col"> |
||||
<FooterLink href={links.home} text="About" /> |
||||
<FooterLink href={links.docs} text="Docs" /> |
||||
<FooterLink href={links.chains} text="Chains" /> |
||||
<FooterLink href={links.jobs} text="Jobs" /> |
||||
</div> |
||||
<div className="flex flex-col ml-24 sm:ml-16"> |
||||
<FooterIconLink href={links.twitter} imgSrc={Twitter} text="Twitter" /> |
||||
<FooterIconLink href={links.discord} imgSrc={Discord} text="Discord" /> |
||||
<FooterIconLink href={links.github} imgSrc={Github} text="Github" /> |
||||
<FooterIconLink href={links.blog} imgSrc={Medium} text="Blog" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
); |
||||
} |
||||
|
||||
function FooterIconLink({ to, imgSrc, text }: { to: string; imgSrc: any; text: string }) { |
||||
function FooterLink({ href, text }: { href: string; text: string }) { |
||||
const aClasses = |
||||
'mt-1.5 text-sm hover:underline underline-offset-4 hover:opacity-70 transition-all'; |
||||
|
||||
if (href[0] === '/') { |
||||
return ( |
||||
<Link href={href}> |
||||
<a className={aClasses}>{text}</a> |
||||
</Link> |
||||
); |
||||
} else { |
||||
return ( |
||||
<a href={href} target="_blank" rel="noopener noreferrer" className={aClasses}> |
||||
{text} |
||||
</a> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function FooterIconLink({ href, imgSrc, text }: { href: string; imgSrc: any; text: string }) { |
||||
return ( |
||||
<a |
||||
href={to} |
||||
href={href} |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
className="flex items-center hover:underline hover:opacity-70 transition-all" |
||||
className="mt-1.5 flex items-center hover:underline underline-offset-4 hover:opacity-70 transition-all" |
||||
> |
||||
<Image src={imgSrc} alt={text} width={18} height={18} /> |
||||
<span className="hidden sm:inline ml-2 text-sm">{text}</span> |
||||
<Image src={imgSrc} width={18} height={18} alt="" /> |
||||
<span className="ml-2.5 text-sm">{text}</span> |
||||
</a> |
||||
); |
||||
} |
||||
|
||||
|
After Width: | Height: | Size: 766 B |
|
After Width: | Height: | Size: 716 B |
|
After Width: | Height: | Size: 347 B |
Loading…
Reference in new issue