J M Rossy
1 year ago
committed by
GitHub
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 818 B After Width: | Height: | Size: 760 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 317 B |
|
After Width: | Height: | Size: 290 B |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -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 ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 71 55" |
||||
fill="none" |
||||
> |
||||
<g clipPath="url(#a)"> |
||||
<path |
||||
d="M60.1 4.9A58.5 58.5 0 0 0 45.4.5l-1.8 3.7a54 54 0 0 0-16.2 0 37.4 37.4 0 0 0-2-3.8A58.4 58.4 0 0 0 10.7 5 60 60 0 0 0 .4 45.6a58.9 58.9 0 0 0 18 8.8 42 42 0 0 0 3.6-5.9l-.1-.3c-2-.7-3.8-1.6-5.6-2.6a.2.2 0 0 1 0-.4 30.3 30.3 0 0 0 1.3-.9 42 42 0 0 0 36 0l1 1c.2 0 .2.2 0 .3-1.7 1-3.6 1.9-5.5 2.6a47.2 47.2 0 0 0 3.8 6.3 58.7 58.7 0 0 0 17.8-9.1A59.5 59.5 0 0 0 60 4.9ZM23.7 37.3c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Zm23.6 0c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Z" |
||||
fill={fill} |
||||
/> |
||||
</g> |
||||
<defs> |
||||
<clipPath id="a"> |
||||
<path fill="#fff" d="M0 0h71v55H0z" /> |
||||
</clipPath> |
||||
</defs> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Discord = memo(_Discord); |
||||
@ -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 ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 16 16" |
||||
> |
||||
<path |
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Github = memo(_Github); |
||||
@ -0,0 +1,38 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _HyperlaneLogo({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 117 118" |
||||
> |
||||
<path |
||||
d="M64.4787 0H88.4134C91.6788 0 94.6004 1.89614 95.7403 4.7553L116.749 57.4498C116.911 57.8563 116.913 58.3035 116.754 58.7112L116.637 59.014L116.635 59.017L95.7152 112.81C94.5921 115.698 91.6551 117.62 88.3666 117.62H64.4355C63.0897 117.62 62.1465 116.379 62.59 115.192L84.1615 57.4498L62.6428 2.45353C62.1766 1.26188 63.1208 0 64.4787 0Z" |
||||
fill={fill} |
||||
/> |
||||
<path |
||||
d="M1.99945 0H25.9342C29.1996 0 32.1211 1.89614 33.261 4.7553L54.2696 57.4498C54.4316 57.8563 54.4336 58.3035 54.275 58.7112L54.1573 59.014L54.1561 59.017L33.236 112.81C32.1129 115.698 29.1759 117.62 25.8874 117.62H1.95626C0.610483 117.62 -0.332722 116.379 0.110804 115.192L21.6823 57.4498L0.163626 2.45353C-0.302638 1.26188 0.641544 0 1.99945 0Z" |
||||
fill={fill} |
||||
/> |
||||
<path |
||||
d="M80.7202 46.2178H46.9324V71.7089H80.7202L86.2411 58.5992L80.7202 46.2178Z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const HyperlaneLogo = memo(_HyperlaneLogo); |
||||
@ -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 ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 30 30" |
||||
> |
||||
<path |
||||
d="M9 25H4V10h5v15zM6.5 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM27 25h-4.8v-7.3c0-1.74-.04-3.98-2.5-3.98-2.5 0-2.9 1.9-2.9 3.85V25H12V9.99h4.61v2.05h.07a5.08 5.08 0 0 1 4.55-2.42c4.87 0 5.77 3.1 5.77 7.15V25z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Linkedin = memo(_Linkedin); |
||||
@ -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 ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 -55 256 256" |
||||
preserveAspectRatio="xMidYMid" |
||||
fill="none" |
||||
> |
||||
<path |
||||
fill={fill} |
||||
d="M72.2 0c39.88 0 72.2 32.55 72.2 72.7 0 40.14-32.33 72.69-72.2 72.69-39.87 0-72.2-32.55-72.2-72.7C0 32.56 32.33 0 72.2 0Zm115.3 4.26c19.94 0 36.1 30.64 36.1 68.44 0 37.79-16.16 68.43-36.1 68.43-19.93 0-36.1-30.64-36.1-68.43 0-37.8 16.16-68.44 36.1-68.44Zm55.8 7.13c7.01 0 12.7 27.45 12.7 61.3 0 33.86-5.68 61.32-12.7 61.32-7.01 0-12.7-27.46-12.7-61.31 0-33.86 5.7-61.31 12.7-61.31Z" |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Medium = memo(_Medium); |
||||
@ -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 ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 16 16" |
||||
> |
||||
<path |
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Twitter = memo(_Twitter); |
||||
@ -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 ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 29 29" |
||||
> |
||||
<path |
||||
fill={fill} |
||||
d="m11 18.6-.39.17a13.45 13.45 0 0 0 1.12 2.9 5.25 5.25 0 0 0 2.08 2.24c.36.18.7.26 1.03.26.95 0 2.1-.71 3.1-2.5.46-.82.85-1.8 1.13-2.9a10.3 10.3 0 0 0-8.06-.17Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M20.34 19.46a11.88 11.88 0 0 1-1.88 3.99 9.63 9.63 0 0 0 3.63-2.6 10.3 10.3 0 0 0-1.75-1.4Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M24.41 15.27a9.55 9.55 0 0 1-1.48 4.45l-.53-.49c-.54-.45-1.12-.86-1.74-1.22.08-.45.15-.9.2-1.38l.05-.61c.02-.25.04-.5.04-.75h3.46Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M22.96 9.45a9.55 9.55 0 0 1 1.45 4.42h-3.46a19 19 0 0 0-.28-2.7c.83-.47 1.6-1.06 2.3-1.72Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="m22.05 8.24.07.08c-.54.54-1.14 1.01-1.78 1.42a11.84 11.84 0 0 0-1.91-4.08 9.63 9.63 0 0 1 3.62 2.58Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M16.35 5.53a2.55 2.55 0 0 0-1.51-.57c-.96 0-2.11.72-3.11 2.5-.15.28-.3.57-.43.88l-.24.58c-.17.47-.33.97-.46 1.5a10.24 10.24 0 0 0 8.47 0 12.18 12.18 0 0 0-1.12-2.95 6.02 6.02 0 0 0-1.6-1.94Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M7.54 8.3a9.68 9.68 0 0 1 3.7-2.63 11.9 11.9 0 0 0-1.9 4.07 10.4 10.4 0 0 1-1.8-1.44Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M5.26 13.87A9.53 9.53 0 0 1 6.7 9.45c.69.67 1.46 1.25 2.3 1.73a19 19 0 0 0-.29 2.69H5.26Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M6.73 19.72a9.53 9.53 0 0 1-1.47-4.45h3.46c.03.95.14 1.87.3 2.74a11.33 11.33 0 0 0-2.29 1.7Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M11.24 23.47a9.62 9.62 0 0 1-3.66-2.61c.53-.54 1.12-1.01 1.76-1.41.45 1.6 1.1 2.98 1.9 4.02Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M19.55 15.27a14 14 0 0 1-.2 2.1 11.66 11.66 0 0 0-9.03 0c-.1-.67-.17-1.38-.2-2.1h9.43Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M19.55 13.87h-9.43c.03-.71.1-1.4.2-2.05a11.78 11.78 0 0 0 9.04 0 18.37 18.37 0 0 1 .2 2.05Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
fill-rule="evenodd" |
||||
d="M28.84 14.57a14 14 0 1 0-14 14 14 14 0 0 0 14-14Zm-3 0a11 11 0 1 0-22 0 11 11 0 0 0 22 0Z" |
||||
clip-rule="evenodd" |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Web = memo(_Web); |
||||
@ -1,11 +1,16 @@ |
||||
import { PropsWithChildren } from 'react'; |
||||
|
||||
interface Props { |
||||
classes?: string; |
||||
className?: string; |
||||
padding?: string; |
||||
} |
||||
|
||||
export function Card({ classes, children }: PropsWithChildren<Props>) { |
||||
export function Card({ className, padding = 'p-4 sm:p-5', children }: PropsWithChildren<Props>) { |
||||
return ( |
||||
<div className={`p-4 bg-white shadow border rounded overflow-auto ${classes}`}>{children}</div> |
||||
<div |
||||
className={`bg-white ring ring-blue-300 rounded-3xl overflow-auto ${padding} ${className}`} |
||||
> |
||||
{children} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,20 +0,0 @@ |
||||
import { PropsWithChildren } from 'react'; |
||||
|
||||
import { BackgroundBanner } from './BackgroundBanner'; |
||||
|
||||
export function ContentFrame(props: PropsWithChildren) { |
||||
return ( |
||||
<div className="flex flex-col justify-center items-center min-h-full"> |
||||
<div style={styles.container} className="relative overflow-visible mt-7 mb-8"> |
||||
<BackgroundBanner /> |
||||
<div className="relative z-20 mt-1">{props.children}</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const styles = { |
||||
container: { |
||||
width: 'min(900px,96vw)', |
||||
}, |
||||
}; |
||||
@ -1,79 +1,117 @@ |
||||
// Partly 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/backgrounds/footer-line-desktop.svg';
|
||||
// import FooterLineMobile from '../../images/backgrounds/footer-line-mobile.svg';
|
||||
import FooterBg from '../../images/backgrounds/footer-bg.svg'; |
||||
import FooterTopBorder from '../../images/backgrounds/footer-top-border.svg'; |
||||
import { Color } from '../../styles/Color'; |
||||
import { Discord } from '../icons/Discord'; |
||||
import { Github } from '../icons/Github'; |
||||
import { HyperlaneLogo } from '../icons/HyperlaneLogo'; |
||||
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: <Twitter fill="#fff" /> }, |
||||
{ title: 'Discord', url: links.discord, external: true, icon: <Discord fill="#fff" /> }, |
||||
{ title: 'Github', url: links.github, external: true, icon: <Github fill="#fff" /> }, |
||||
{ title: 'Blog', url: links.blog, external: true, icon: <Medium fill="#fff" /> }, |
||||
]; |
||||
|
||||
export function Footer() { |
||||
return ( |
||||
<footer className="px-4 pt-5 pb-7 sm:px-10 opacity-80"> |
||||
<div className="flex 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={50} height={50} alt="" /> |
||||
</div> |
||||
<div className="hidden sm:flex flex-col ml-3"> |
||||
<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. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<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-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" /> |
||||
<footer className="text-white "> |
||||
<div className="relative"> |
||||
<Image className="relative z-0 w-full" src={FooterBg} alt="background" /> |
||||
<Image |
||||
className="absolute z-10 bottom-[1.5rem] w-full h-auto" |
||||
src={FooterTopBorder} |
||||
alt="border" |
||||
/> |
||||
</div> |
||||
<div className="px-8 py-5 bg-pink-500"> |
||||
<div className="flex flex-col sm:flex-row gap-10 items-center justify-between"> |
||||
<div className="flex items-center justify-center"> |
||||
<div className="ml-2 w-16 sm:w-20 h-16 sm:h-20"> |
||||
<HyperlaneLogo fill={Color.White} /> |
||||
</div> |
||||
<div className="text-xl sm:text-2xl font-medium ml-6 space-y-1 "> |
||||
<div>Go Interchain</div> |
||||
<div>With Hyperlane</div> |
||||
</div> |
||||
{/* <div className="absolute"> |
||||
<div className="hidden sm:block"> |
||||
<Image src={FooterLine} alt="" /> |
||||
</div> |
||||
<div className="sm:hidden"> |
||||
<Image src={FooterLineMobile} alt="" /> |
||||
</div> |
||||
</div> */} |
||||
</div> |
||||
<nav className="flex text-lg font-medium"> |
||||
<ul className={`${styles.linkCol} mr-14`}> |
||||
{footerLinks1.map((item) => ( |
||||
<li className="" key={item.title}> |
||||
<Link |
||||
className={styles.linkItem} |
||||
target={item.external ? '_blank' : '_self'} |
||||
href={item.url} |
||||
> |
||||
<div className="">{item.title}</div> |
||||
</Link> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
<ul className={`${styles.linkCol} mr-14`}> |
||||
{footerLinks2.map((item) => ( |
||||
<li key={item.title}> |
||||
<Link |
||||
className={styles.linkItem} |
||||
target={item.external ? '_blank' : '_self'} |
||||
href={item.url} |
||||
> |
||||
<div className="">{item.title}</div> |
||||
</Link> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
<ul className={`${styles.linkCol}`}> |
||||
{footerLinks3.map((item) => ( |
||||
<li key={item.title}> |
||||
<Link |
||||
className={styles.linkItem} |
||||
target={item.external ? '_blank' : '_self'} |
||||
href={item.url} |
||||
> |
||||
{item?.icon && <div className="mr-4 w-6">{item?.icon}</div>} |
||||
<div className="">{item.title}</div> |
||||
</Link> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
); |
||||
} |
||||
|
||||
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} className={aClasses}> |
||||
{text} |
||||
</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={href} |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
className="mt-1.5 flex items-center hover:underline underline-offset-4 hover:opacity-70 transition-all" |
||||
> |
||||
<Image src={imgSrc} width={18} height={18} alt="" /> |
||||
<span className="ml-2.5 text-sm">{text}</span> |
||||
</a> |
||||
); |
||||
} |
||||
const styles = { |
||||
linkCol: 'flex flex-col gap-3', |
||||
linkItem: 'flex items-center capitalize text-decoration-none hover:underline underline-offset-2', |
||||
}; |
||||
|
||||
|
After Width: | Height: | Size: 245 B |
|
After Width: | Height: | Size: 194 B |
|
After Width: | Height: | Size: 199 B |
|
After Width: | Height: | Size: 454 B |
|
After Width: | Height: | Size: 290 B |
|
Before Width: | Height: | Size: 346 B After Width: | Height: | Size: 346 B |
|
Before Width: | Height: | Size: 459 B After Width: | Height: | Size: 380 B |
|
Before Width: | Height: | Size: 311 B After Width: | Height: | Size: 316 B |
|
Before Width: | Height: | Size: 716 B |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 5.2 KiB |