feat: migrate landing

apps/common/components/Header.tsx

@@ -5,10 +5,11 @@ import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {truncateHex} from '@builtbymom/web3/utils/tools.address';
 import {useAccountModal, useChainModal} from '@rainbow-me/rainbowkit';
 import {LogoPopover} from '@yearn-finance/web-lib/components/LogoPopover';
-import {ModalMobileMenu} from '@yearn-finance/web-lib/components/ModalMobileMenu';
 import {IconWallet} from '@yearn-finance/web-lib/icons/IconWallet';
+import {IconBurger} from '@common/icons/IconBurger';
 
 import {AppName, APPS} from './Apps';
+import {ModalMobileMenu} from './ModalMobileMenu';
 
 import type {ReactElement} from 'react';
 import type {Chain} from 'viem';
@@ -94,7 +95,7 @@ function AppHeader(props: {supportedNetworks: Chain[]}): ReactElement {
 	const [isMenuOpen, set_isMenuOpen] = useState<boolean>(false);
 
 	const menu = useMemo((): TMenu[] => {
-		const HOME_MENU = {path: '/', label: 'Home'};
+		const HOME_MENU = {path: '/apps', label: 'Apps'};
 
 		if (pathname.startsWith('/ycrv')) {
 			return [HOME_MENU, ...APPS[AppName.YCRV].menu];
@@ -138,38 +139,7 @@ function AppHeader(props: {supportedNetworks: Chain[]}): ReactElement {
 					<div className={'flex w-1/3 md:hidden'}>
 						<button onClick={(): void => set_isMenuOpen(!isMenuOpen)}>
 							<span className={'sr-only'}>{'Open menu'}</span>
-							<svg
-								className={'text-neutral-500'}
-								width={'20'}
-								height={'20'}
-								viewBox={'0 0 24 24'}
-								fill={'none'}
-								xmlns={'http://www.w3.org/2000/svg'}>
-								<path
-									d={
-										'M2 2C1.44772 2 1 2.44772 1 3C1 3.55228 1.44772 4 2 4H22C22.5523 4 23 3.55228 23 3C23 2.44772 22.5523 2 22 2H2Z'
-									}
-									fill={'currentcolor'}
-								/>
-								<path
-									d={
-										'M2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10H14C14.5523 10 15 9.55228 15 9C15 8.44772 14.5523 8 14 8H2Z'
-									}
-									fill={'currentcolor'}
-								/>
-								<path
-									d={
-										'M1 15C1 14.4477 1.44772 14 2 14H22C22.5523 14 23 14.4477 23 15C23 15.5523 22.5523 16 22 16H2C1.44772 16 1 15.5523 1 15Z'
-									}
-									fill={'currentcolor'}
-								/>
-								<path
-									d={
-										'M2 20C1.44772 20 1 20.4477 1 21C1 21.5523 1.44772 22 2 22H14C14.5523 22 15 21.5523 15 21C15 20.4477 14.5523 20 14 20H2Z'
-									}
-									fill={'currentcolor'}
-								/>
-							</svg>
+							<IconBurger />
 						</button>
 					</div>
 					<div className={'flex w-1/3 justify-center'}>

apps/common/components/MobileNavbar.tsx

@@ -11,7 +11,7 @@ import type {ReactElement} from 'react';
 export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 	const pathName = usePathname();
 
-	const currentTab = pathName?.startsWith('/home/') ? pathName?.split('/')[2] : '/';
+	const currentTab = pathName?.startsWith('/apps') ? pathName?.split('/')[2] : '/';
 	return (
 		<div
 			className={
@@ -25,7 +25,7 @@ export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 							currentTab === tab.route ? 'text-white' : 'text-gray-400'
 						)}
 						onClick={onClose}
-						href={tab.route === '/' ? tab.route : `/home/${tab.route}`}>
+						href={tab.route === '/apps' ? tab.route : `/apps/${tab.route}`}>
 						<div className={'flex size-6 items-center justify-center'}>
 							{iconsDict[tab.route as keyof typeof iconsDict]}
 						</div>

apps/common/components/MobileTopNav.tsx

@@ -1,7 +1,7 @@
 import {type ReactElement, useCallback} from 'react';
 import {useRouter} from 'next/router';
 import {useSearch} from '@common/contexts/useSearch';
-import {IconBurger} from '@common/icons/IconBurger';
+import {IconBurgerPlain} from '@common/icons/IconBurgerPlain';
 import {IconCross} from '@common/icons/IconCross';
 import {IconSearch} from '@common/icons/IconSearch';
 import {LogoYearn} from '@common/icons/LogoYearn';
@@ -24,9 +24,10 @@ export function MobileTopNav({
 
 	const onSearchClick = useCallback(() => {
 		if (!configuration.searchValue) {
+			router.push('/apps');
 			return;
 		}
-		router.push(`/home/search?query=${configuration.searchValue}`);
+		router.push(`/apps/search/${encodeURIComponent(configuration.searchValue)}`);
 	}, [configuration.searchValue, router]);
 
 	return (
@@ -36,7 +37,7 @@ export function MobileTopNav({
 					<button
 						className={'mr-4 flex size-6 items-center justify-center'}
 						onClick={() => set_isNavbarOpen(prev => !prev)}>
-						{isNavbarOpen ? <IconCross /> : <IconBurger />}
+						{isNavbarOpen ? <IconCross /> : <IconBurgerPlain />}
 					</button>
 					<button
 						onClick={() => {

apps/common/components/ModalMobileMenu.tsx

@@ -0,0 +1,152 @@
+'use client';
+import React, {Fragment, useMemo} from 'react';
+import Link from 'next/link';
+import {Dialog, Transition, TransitionChild} from '@headlessui/react';
+import {IconArrow} from '@common/icons/IconArrow';
+import {IconClose} from '@common/icons/IconClose';
+import {IconDiscord} from '@common/icons/IconDiscord';
+import {IconParagraph} from '@common/icons/IconParagraph';
+import {IconTwitter} from '@common/icons/IconTwitter';
+import {LogoYearn} from '@common/icons/LogoYearn';
+
+import type {ReactElement, ReactNode} from 'react';
+import type {Chain} from 'viem';
+import type {TMenu} from '@yearn-finance/web-lib/components/Header';
+
+export function FooterNav(): ReactElement {
+	const menu = useMemo((): TMenu[] => {
+		const HOME_MENU = {path: '/apps', label: 'Apps'};
+
+		return [
+			HOME_MENU,
+			{
+				path: 'https://gov.yearn.fi/',
+				label: 'Governance',
+				target: '_blank'
+			},
+			{path: 'https://blog.yearn.fi/', label: 'Blog', target: '_blank'},
+			{path: 'https://docs.yearn.fi/', label: 'Docs', target: '_blank'},
+			{path: 'https://discord.gg/yearn', label: 'Support', target: '_blank'}
+		];
+	}, []);
+
+	return (
+		<div className={'flex flex-col justify-between gap-y-20 md:flex-row md:items-end'}>
+			<div className={'flex flex-col gap-y-4'}>
+				{menu.map(link => (
+					<Link
+						className={
+							'flex items-center justify-between gap-x-4 text-3xl transition-colors hover:text-primary md:justify-start'
+						}
+						key={link.path}
+						target={link.target}
+						href={link.path}>
+						<span>{link.label}</span>
+						<IconArrow className={'size-4'} />
+					</Link>
+				))}
+			</div>
+			<div className={'flex items-center gap-6'}>
+				<Link
+					href={'https://paragraph.xyz/@yearn'}
+					target={'_blank'}
+					className={'flex items-center gap-x-4'}>
+					<IconParagraph className={'size-8 transition-colors hover:text-primary'} />
+				</Link>
+				<Link
+					href={'https://discord.com/invite/b8ENPNqG5c'}
+					target={'_blank'}
+					className={'flex items-center gap-x-4'}>
+					<IconDiscord className={'size-8 transition-colors hover:text-primary'} />
+				</Link>
+				<Link
+					href={'https://x.com/yearnfi'}
+					target={'_blank'}
+					className={'flex items-center gap-x-4'}>
+					<IconTwitter className={'size-8 transition-colors hover:text-primary'} />
+				</Link>
+			</div>
+		</div>
+	);
+}
+
+type TModalMobileMenu = {
+	isOpen: boolean;
+	shouldUseWallets: boolean;
+	shouldUseNetworks: boolean;
+	onClose: () => void;
+	children: ReactNode;
+	supportedNetworks: Chain[];
+};
+
+export type TModal = {
+	isOpen: boolean;
+	onClose: () => void;
+	children: ReactNode;
+} & React.ComponentPropsWithoutRef<'div'>;
+
+export function ModalMobileMenu(props: TModalMobileMenu): ReactElement {
+	const {isOpen, onClose} = props;
+
+	return (
+		<Transition
+			show={isOpen}
+			as={Fragment}>
+			<Dialog
+				as={'div'}
+				className={'fixed inset-0 overflow-y-auto md:hidden'}
+				style={{zIndex: 88}}
+				onClose={onClose}>
+				<div className={`relative flex min-h-screen items-end justify-end px-0 pb-0 pt-4 text-center`}>
+					<TransitionChild
+						as={Fragment}
+						enter={'ease-out duration-300'}
+						enterFrom={'opacity-0'}
+						enterTo={'opacity-100'}
+						leave={'ease-in duration-200'}
+						leaveFrom={'opacity-100'}
+						leaveTo={'opacity-0'}>
+						<div className={`yearn--modal-overlay`} />
+					</TransitionChild>
+
+					<span
+						className={'hidden'}
+						aria-hidden={'true'}>
+						&#8203;
+					</span>
+					<TransitionChild
+						as={Fragment}
+						enter={'ease-out duration-200'}
+						enterFrom={'opacity-0 translate-y-full'}
+						enterTo={'opacity-100 translate-y-0'}
+						leave={'ease-in duration-200'}
+						leaveFrom={'opacity-100 translate-y-0'}
+						leaveTo={'opacity-0 translate-y-full'}>
+						<div className={`yearn--modal fixed bottom-0 mb-0 h-full max-w-full`}>
+							<div className={'flex items-center justify-between border-b border-[#292929] p-6'}>
+								<button onClick={onClose}>
+									<IconClose />
+								</button>
+								<Link href={'/'}>
+									<LogoYearn
+										className={'size-10'}
+										front={'text-black'}
+										back={'text-white'}
+									/>
+								</Link>
+							</div>
+							<div
+								style={{
+									background:
+										'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)'
+								}}
+								className={'flex h-[calc(100vh-88px)] w-full flex-col justify-end px-6 pb-[104px]'}>
+								<FooterNav />
+							</div>
+						</div>
+					</TransitionChild>
+				</div>
+			</Dialog>
+		</Transition>
+	);
+}

apps/common/components/Sidebar.tsx

@@ -19,14 +19,14 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 	const router = useRouter();
 	const {configuration, dispatch} = useSearch();
 
-	const currentTab = pathName?.startsWith('/home/') ? pathName?.split('/')[2] : '/';
+	const currentTab = pathName?.startsWith('/apps') ? pathName?.split('/')[2] : '/';
 
 	const onSearchClick = useCallback(() => {
 		if (!configuration.searchValue) {
-			router.push('/');
+			router.push('/apps');
 			return;
 		}
-		router.push(`/home/search/${encodeURIComponent(configuration.searchValue)}`);
+		router.push(`/apps/search/${encodeURIComponent(configuration.searchValue)}`);
 	}, [configuration.searchValue, router]);
 
 	return (
@@ -64,10 +64,14 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 								'py-2 px-[28px] flex gap-4 text-base hover:bg-gray-600/40',
 								currentTab === tab.route ? 'text-white font-bold' : 'text-gray-400'
 							)}
-							href={tab.route === '/' ? tab.route : `/home/${tab.route}`}
+							href={tab.route === '/apps' ? tab.route : `/apps/${tab.route}`}
 							key={tab.route}>
 							<div className={'flex size-6 items-center justify-center'}>
-								{iconsDict[tab.route as '/' | 'community-apps' | 'vaults' | 'yearn-x' | 'integrations']}
+								{
+									iconsDict[
+										tab.route as '/apps' | 'community-apps' | 'vaults' | 'yearn-x' | 'integrations'
+									]
+								}
 							</div>
 							<p>{tab.title}</p>
 						</Link>

apps/common/components/WithFonts.tsx

@@ -8,6 +8,11 @@ const aeonik = localFont({
 	variable: '--font-aeonik',
 	display: 'swap',
 	src: [
+		{
+			path: '../../../public/fonts/Aeonik-Light.ttf',
+			weight: '300',
+			style: 'normal'
+		},
 		{
 			path: '../../../public/fonts/Aeonik-Regular.woff2',
 			weight: '400',
@@ -26,6 +31,23 @@ const aeonik = localFont({
 	]
 });
 
+const aeonikFono = localFont({
+	variable: '--font-aeonik-fono',
+	display: 'swap',
+	src: [
+		{
+			path: '../../../public/fonts/AeonikFono-Light.otf',
+			weight: '300',
+			style: 'normal'
+		},
+		{
+			path: '../../../public/fonts/AeonikFono-Regular.otf',
+			weight: '400',
+			style: 'normal'
+		}
+	]
+});
+
 const sourceCodePro = Source_Code_Pro({
 	weight: ['400', '500', '600', '700'],
 	subsets: ['latin'],
@@ -35,13 +57,17 @@ const sourceCodePro = Source_Code_Pro({
 
 export function WithFonts({children}: {children: ReactNode}): ReactElement {
 	return (
-		<div style={{fontFamily: `${aeonik.style.fontFamily}, ${sourceCodePro.style.fontFamily}`}}>
+		<div
+			style={{
+				fontFamily: `${aeonik.style.fontFamily}, ${aeonikFono.style.fontFamily}, ${sourceCodePro.style.fontFamily}`
+			}}>
 			<style
 				jsx
 				global>
 				{`
 					:root {
 						--font-aeonik: ${aeonik.style.fontFamily};
+						--font-aeonik-fono: ${aeonikFono.style.fontFamily};
 						--scp-font: ${sourceCodePro.style.fontFamily};
 					}
 				`}

apps/common/hooks/useCurrentApp.tsx

@@ -1,4 +1,5 @@
 import {useMemo} from 'react';
+import landingManifest from 'public/apps/landing-manifest.json';
 import homeManifest from 'public/manifest.json';
 import {VaultsHeader} from '@vaults/components/header/VaultsHeader';
 import {AppName, APPS} from '@common/components/Apps';
@@ -25,6 +26,11 @@ export function useCurrentApp({pathname}: NextRouter): TCurrentApp {
 			'/vaults': {
 				...APPS[AppName.VAULTS],
 				header: <VaultsHeader pathname={pathname} />
+			},
+			'/landing': {
+				name: 'Home',
+				manifest: landingManifest,
+				menu: []
 			}
 		};