feat: add world

components/Header.tsx

@@ -0,0 +1,117 @@
+import React, {ReactElement} 				from 	'react';
+import type * as NavbarTypes 				from 	'components/Navbar.d';
+import	{motion, useInView}					from	'framer-motion';
+import	Link								from	'next/link';
+import	{useRouter}							from	'next/router';
+import	Image								from	'next/image';
+import	LogoYearn							from	'components/icons/LogoYearn';
+import	MobileHeader						from	'components/MobileHeader';
+
+const variants = {
+	enter: {
+		x: 0,
+		opacity: 1,
+		transition: {
+			duration: 1,
+			ease: 'easeInOut'
+		}
+	},
+	initial: {
+		x: -600,
+		opacity: 0,
+		transition: {
+			duration: 1,
+			ease: 'easeInOut'
+		}
+	}
+};
+
+function	NavbarMenuItem({option, isSelected}: NavbarTypes.TMenuItem): ReactElement {
+	return (
+		<div className={'header-nav-item'} aria-selected={isSelected}>
+			<p className={'hover-fix'} title={option.label} >
+				{option.label}
+			</p>
+			<div />
+		</div>
+	);
+}
+
+function	Header({
+	options,
+	children,
+	wrapper
+}: NavbarTypes.TNavbar): ReactElement {
+	const	ref = React.useRef(null);
+	const	isInView = useInView(ref);
+	const	router = useRouter();
+
+	return (
+		<>
+			<MobileHeader
+				options={options}
+				wrapper={wrapper} />
+			<header className={'h-full w-full bg-neutral-100 md:h-[728px]'}>
+				<div className={'flex h-full w-full flex-col items-center px-4 pt-8 pb-0'}>
+					<Link href={'/'} scroll={false}>
+						<div className={'hidden cursor-pointer md:flex'}>
+							<LogoYearn />
+						</div>
+					</Link>
+					<div ref={ref} className={'mt-0 md:mt-[105px]'}>
+						<h1 className={'mb-4 text-center text-7xl font-bold text-neutral-900'}>
+							{'Yearn World'}
+						</h1>
+						<div className={'text-center text-lg text-neutral-500'}>
+							<p>{'A decentralized project registry for a decentralized brand.'}</p>
+							<p>{'Take the blue pill and enter the world of yearn.'}</p>
+						</div>
+					</div>
+					<div className={'flex w-full items-center justify-center'}>
+						<Image
+							objectFit={'contain'}
+							src={'/world.png'}
+							width={348}
+							height={348}
+							quality={90}
+							loading={'eager'}
+							priority />
+					</div>
+				</div>
+			</header>
+			<div
+				aria-label={'desktop-navigation'}
+				className={'sticky top-0 z-50 mt-auto hidden flex-col bg-neutral-100 pt-6 md:flex'}>
+				<nav className={'mx-auto flex w-full max-w-6xl flex-row items-center justify-between'}>
+					<div>
+						<Link href={'/'} scroll={false}>
+							<motion.div
+								initial={'initial'}
+								animate={isInView ? 'initial' : 'enter'}
+								className={'cursor-pointer pb-3.5'}
+								variants={variants}>
+								<LogoYearn />
+							</motion.div>
+						</Link>
+					</div>
+					<div className={'flex w-full flex-row items-center justify-center'}>
+						{options.map((option: NavbarTypes.TNavbarOption): ReactElement  => {
+							return (
+								<div key={option.route}>
+									{React.cloneElement(
+										wrapper,
+										{href: option.route},
+										<a><NavbarMenuItem option={option} isSelected={router.pathname === option.route} /></a>
+									)}
+								</div>
+							);
+						})}
+					</div>
+				</nav>
+				{children}
+			</div>
+		</>
+	);
+}
+
+export default Header;

components/MobileHeader.tsx

@@ -0,0 +1,62 @@
+import	React, {ReactElement}				from	'react';
+import	Link								from	'next/link';
+import	{Card, ModalMobileMenu}				from	'@yearn-finance/web-lib/components';
+import	{Hamburger}							from	'@yearn-finance/web-lib/icons';
+import	LogoYearn							from	'components/icons/LogoYearn';
+import type * as NavbarTypes 				from    'components/Navbar.d';
+
+function	NavbarMenuItem({option}: NavbarTypes.TMenuItem): ReactElement {
+	return (
+		<div className={'mobile-nav-item'}>
+			<p className={'font-bold'}>
+				{option.label}
+			</p>
+		</div>
+	);
+}
+
+function	MobileHeader({options, wrapper}: NavbarTypes.TNavbar): ReactElement {
+	const	[hasMobileMenu, set_hasMobileMenu] = React.useState(false);
+
+	return (
+		<div className={'sticky top-0 z-30 w-full p-0 md:hidden'}>
+			<Card className={'flex h-auto items-center justify-between !bg-neutral-100 md:h-20'}>
+				<div className={'flex w-full flex-row items-center'}>
+					<Link href={'/'} scroll={false}>
+						<div className={'cursor-pointer'}>
+							<LogoYearn />
+						</div>
+					</Link>
+				</div>
+				<div className={'flex flex-row items-center space-x-4 md:hidden'}>
+					<button onClick={(): void => set_hasMobileMenu(true)}>
+						<Hamburger />
+					</button>
+				</div>
+			</Card>
+			<ModalMobileMenu
+				shouldUseWallets={false}
+				shouldUseNetworks={false}
+				isOpen={hasMobileMenu}
+				onClose={(): void => set_hasMobileMenu(false)}>
+				{options.map((option: NavbarTypes.TNavbarOption): ReactElement  => {
+					return (
+						<div key={option.route} onClick={(): void => set_hasMobileMenu(false)}>
+							{React.cloneElement(
+								wrapper,
+								{href: option.route},
+								<a>
+									<NavbarMenuItem 
+										option={option} 
+										isSelected={false} />
+								</a>
+							)}
+						</div>
+					);
+				})}
+			</ModalMobileMenu>
+		</div>
+	);
+}
+
+export default MobileHeader;

components/Navbar.d.tsx

@@ -0,0 +1,23 @@
+import	{ReactElement}	from	'react';
+
+export type TNavbarOption = {
+	route: string;
+	values: string | string[];
+	label: string;
+	icon?: ReactElement;
+	options?: TNavbarOption[];
+}
+
+export type TNavbar = {
+	options: TNavbarOption[];
+	logo?: ReactElement;
+	title?: string;
+	selected?: string;
+	children?: ReactElement;
+	wrapper: ReactElement;
+}
+
+export type TMenuItem = {
+	option: TNavbarOption;
+	isSelected: boolean;
+}

components/ProjectCard.tsx

@@ -0,0 +1,74 @@
+import	React, {ReactElement}							from	'react';
+import	axios											from	'axios';
+import	useSWR											from	'swr';
+import	type {TMetadata, TGithubReleases, TOverwrite}	from	'types/metadata.d';
+
+const fetcher = async (path: string, url: string): Promise<TMetadata> => axios.get(path, {params: {url}}).then((res): any => res.data).catch((e): void => console.log(e));
+const fetcherSimple = async (url: string): Promise<TGithubReleases[]> => axios.get(url).then((res): any => res.data).catch((e): void => console.log(e));
+
+const	tagClassNames: any = {
+	'Yield Farming': 'bg-up-only-green-600 text-white',
+	'Data analytics': 'bg-metaverse-sunset-600 text-white',
+	'Experimental Defi': 'bg-up-only-green-600 text-white',
+	'Design': 'bg-tokyo-party-400 text-white',
+	'Communication': 'bg-disco-salmon-600 text-white',
+	'NFT': 'bg-tokyo-party-400 text-white',
+	'Other': 'bg-neutral-400 text-white'
+};
+
+function	ProjectCard({
+	url,
+	tags,
+	overwrite
+}: {url: string, tags: string[], overwrite: TOverwrite}): ReactElement {
+	const	{data: metadata} = useSWR(['/api/metadata', url], fetcher);
+	const	{data: releases} = useSWR(
+		metadata?.['git-url'] ? `https://api.github.com/repos/${metadata?.['git-url'].replaceAll('https://github.com/', '')}/releases` : undefined,
+		fetcherSimple
+	);
+
+	return (
+		<div className={'w-full'}>
+			<a target={'_blank'} href={metadata?.url} className={'cursor-pointer'} rel={'noreferrer'}>
+				<div className={'flex aspect-video w-full items-center justify-center bg-yearn-blue px-4'}>
+					<h3 className={'text-center text-3xl font-bold text-neutral-0'}>
+						{overwrite?.title ? overwrite?.title : metadata?.title || ''}
+					</h3>
+				</div>
+			</a>
+			<div className={'flex w-full flex-col p-6 pt-4'}>
+				<div className={'flex flex-row gap-4 pb-4'}>
+					{tags.map((tag): ReactElement => (
+						<div key={tag} className={`py-1 px-2 text-xs font-bold ${tagClassNames[tag] as string}`}>
+							{tag}
+						</div>
+					))}
+				</div>
+				<p className={'pb-4 text-neutral-500'}>{metadata?.description}</p>
+				<div>
+					<p className={'pb-2 font-mono text-xs text-neutral-500'}>
+						{'url: '}&nbsp;
+						<a target={'_blank'} href={metadata?.url} className={'cursor-pointer font-mono text-xs text-yearn-blue'} rel={'noreferrer'}>
+							{(metadata?.url || '').replaceAll('https://', '').replace(/\/+$/, '')}
+						</a>
+					</p>
+					<p className={'pb-2 font-mono text-xs text-neutral-500'}>
+						{'git: '}&nbsp;
+						<a target={'_blank'} href={metadata?.['git-url']} className={'cursor-pointer font-mono text-xs text-yearn-blue'} rel={'noreferrer'}>
+							{(metadata?.['git-url'] || '-').replaceAll('https://', '').replace(/\/+$/, '')}
+						</a>
+					</p>
+					<p className={'break-all font-mono text-xs text-neutral-500 '}>
+						{'ipfs: '}
+						<a target={'_blank'} href={`ipfs://${releases?.[0]?.name}`} className={'cursor-pointer font-mono text-xs text-yearn-blue'} rel={'noreferrer'}>
+							{`${releases?.[0]?.name || '-'}`}
+						</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+
+export default ProjectCard;

components/SocialCard.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image';
+import	React, {ReactElement}							from	'react';
+
+function	SocialCard({
+	url,
+	name,
+	logo,
+	bgColor,
+	textColor,
+	width = 48
+}: {url: string, name: string, logo: string, bgColor: string, textColor: string, width: number}): ReactElement {
+
+	return (
+		<div className={'w-full'}>
+			<a target={'_blank'} href={url} className={'cursor-pointer'} rel={'noreferrer'}>
+				<div className={'flex aspect-video w-full flex-col items-center justify-center px-4'} style={{backgroundColor: bgColor}}>
+					<Image src={logo} width={width} height={48} />
+					<h3 className={'mt-8 text-center text-2xl font-bold'} style={{color: textColor}}>
+						{name}
+					</h3>
+				</div>
+			</a>
+		</div>
+	);
+}
+
+
+export default SocialCard;

components/YearnLogo.tsx

@@ -0,0 +1,12 @@
+import	React, {ReactElement}		from	'react';
+
+function	YearnLogo(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg {...props} width={'320'} height={'345'} viewBox={'0 0 306.8 359.68'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+			<path fill={'#0657f9'} d={'M288.19,138.27l-46.65,45.56c2.56,8.33,3.89,17.07,3.89,26.01,0,24.01-9.57,46.59-26.96,63.57-17.38,16.98-40.5,26.33-65.08,26.33s-47.7-9.35-65.08-26.33c-17.38-16.98-26.96-39.55-26.96-63.57,0-8.94,1.33-17.68,3.89-26.01l-46.65-45.56C6.74,159.54,0,183.93,0,209.85c0,82.75,68.68,149.83,153.4,149.83s153.4-67.08,153.4-149.83c0-25.92-6.74-50.31-18.6-71.57Z'}/><polygon fill={'#0657f9'} points={'122.72 239.82 184.08 239.82 184.08 144.46 288.53 42.4 245.13 .02 153.43 89.63 61.66 0 18.27 42.38 122.72 144.4 122.72 239.82'}/>
+		</svg>
+	);
+}
+
+export default YearnLogo;
+