feat: new yearn landing

apps/common/components/AppCard.tsx

@@ -0,0 +1,70 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import {IconShare} from '@common/icons/IconShare';
+
+import type {TApp} from 'pages/home/[category]';
+import type {ReactElement} from 'react';
+
+type TAppCardProps = {
+	app: TApp;
+};
+
+export function AppCard(props: TAppCardProps): ReactElement {
+	return (
+		<>
+			<Link
+				href={props.app.appURI ?? ''}
+				target={'_blank'}
+				className={
+					'bg-grey-900 group relative hidden border border-gray-500/50 p-6 hover:bg-gray-600/40 md:block'
+				}>
+				<div className={'mb-10'}>
+					<div
+						className={
+							'absolute right-2 top-2 hidden size-10 items-center justify-center bg-gray-900 group-hover:flex'
+						}>
+						<IconShare className={'size-[10px]'} />
+					</div>
+					{props.app.logoURI ? (
+						<Image
+							src={props.app.logoURI}
+							alt={props.app.name}
+							width={240}
+							height={240}
+							className={'size-[120px] rounded-[32px] object-cover'}
+						/>
+					) : (
+						<div className={'size-[120px] rounded-[32px] bg-fallback'} />
+					)}
+				</div>
+				<div className={'mb-2 text-2xl font-bold text-white'}>{props.app.name}</div>
+
+				<p className={'text-base text-gray-400'}>{props.app.description}</p>
+			</Link>
+			<Link
+				href={props.app.appURI}
+				className={'flex items-center md:hidden'}>
+				<div className={''}>
+					{props.app.logoURI ? (
+						<div className={'size-16 rounded-2xl md:rounded-[32px]'}>
+							<Image
+								src={props.app.logoURI}
+								alt={props.app.name}
+								width={300}
+								height={300}
+								className={'size-full rounded-2xl bg-center object-cover md:rounded-[32px]'}
+							/>
+						</div>
+					) : (
+						<div className={'size-16 rounded-2xl bg-fallback md:rounded-[32px]'} />
+					)}
+				</div>
+
+				<div className={'ml-4'}>
+					<div className={'mb-1 text-base font-bold text-gray-300'}>{props.app.name}</div>
+					<p className={'text-base text-gray-400'}>{props.app.description}</p>
+				</div>
+			</Link>
+		</>
+	);
+}

apps/common/components/AppsCarousel.tsx

@@ -0,0 +1,32 @@
+import {type ForwardedRef, forwardRef, type ReactElement} from 'react';
+
+import {FeaturedApp} from './FeaturedApp';
+
+import type {TApp} from 'pages/home/[category]';
+
+export const AppsCarousel = forwardRef((props: {apps: TApp[]}, ref: ForwardedRef<HTMLDivElement>): ReactElement => {
+	return (
+		<section className={'left-0 -mx-1 w-full md:absolute'}>
+			<div
+				className={
+					'pointer-events-none absolute left-0 top-0 z-10 h-full w-1/6 bg-gradient-to-r from-gray-900 to-transparent'
+				}
+			/>
+			<div
+				className={
+					'pointer-events-none absolute right-0 top-0 z-10 h-full w-1/5 bg-gradient-to-l from-gray-900 to-transparent'
+				}
+			/>
+			<div
+				ref={ref}
+				className={'flex  gap-x-6 overflow-x-auto pb-1 pr-1 scrollbar-none md:pl-28 lg:pl-36'}>
+				{props.apps.map((app, i) => (
+					<FeaturedApp
+						key={app.name + i}
+						app={app}
+					/>
+				))}
+			</div>
+		</section>
+	);
+});

apps/common/components/CategorySection.tsx

@@ -0,0 +1,36 @@
+import {IconChevron} from '@common/icons/IconChevron';
+
+import {AppCard} from './AppCard';
+
+import type {TApp} from 'pages/home/[category]';
+import type {ReactElement} from 'react';
+
+type TAppSectionProps = {
+	title: string;
+	onExpandClick: () => void;
+	apps: TApp[];
+};
+
+export function CategorySection(props: TAppSectionProps): ReactElement {
+	return (
+		<div className={'flex flex-col gap-y-6 overflow-hidden'}>
+			<div className={'flex h-12 w-full items-center justify-between px-1'}>
+				<div className={'text-lg font-bold text-white'}>{props.title}</div>
+				<button
+					onClick={props.onExpandClick}
+					className={'flex px-4 py-2 outline !outline-1 outline-white hover:!outline-[3px]'}>
+					<span className={'mr-1 text-white'}>{'View all'}</span>
+					<IconChevron className={'size-6 -rotate-90 text-white'} />
+				</button>
+			</div>
+			<div className={'flex grid-rows-1 flex-col gap-6 md:grid md:grid-cols-2 lg:grid-cols-4'}>
+				{props.apps.slice(0, 4).map((app, i) => (
+					<AppCard
+						key={app.name + i}
+						app={app}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}

apps/common/components/Cutaway.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import {IconShare} from '@common/icons/IconShare';
+
+import type {ReactElement} from 'react';
+
+type TCutawayProps = {
+	title: string;
+	description: string;
+	link: string;
+	icon: ReactElement;
+};
+
+export function Cutaway(props: TCutawayProps): ReactElement {
+	return (
+		<Link
+			href={props.link}
+			target={'_blank'}
+			className={'relative flex items-center justify-between bg-gray-600/20 p-6 hover:bg-gray-600/40'}>
+			<div className={'flex flex-col md:flex-row'}>
+				<div className={'flex size-20 items-center justify-center'}>{props.icon}</div>
+				<div className={'md:ml-6'}>
+					<p className={'mb-2 text-2xl font-bold text-gray-300'}>{props.title}</p>
+					<p className={'text-base text-gray-400'}>{props.description}</p>
+				</div>
+			</div>
+			<div className={'absolute right-7 top-7 md:static'}>
+				<IconShare />
+			</div>
+		</Link>
+	);
+}

apps/common/components/FeaturedApp.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import {cl} from '@builtbymom/web3/utils';
+import {IconShare} from '@common/icons/IconShare';
+
+import type {TApp} from 'pages/home/[category]';
+import type {ReactElement} from 'react';
+
+export function FeaturedApp(props: {app: TApp}): ReactElement {
+	return (
+		<Link
+			href={props.app.appURI}
+			target={'_blank'}
+			className={cl(
+				'group relative flex h-[376px] w-full min-w-[280px] cursor-pointer flex-col justify-end px-6 py-10 z-20 overflow-hidden outline outline-1 outline-gray-500/50  md:h-[520px] md:min-w-[384px]'
+			)}>
+			<Image
+				src={props.app.logoURI}
+				alt={props.app.name}
+				width={1400}
+				height={2000}
+				className={
+					'absolute right-0 top-0 size-full bg-center object-cover transition-shadow duration-200 group-hover:scale-105'
+				}
+			/>
+			<div
+				className={
+					'absolute right-2 top-2 hidden size-10 items-center justify-center bg-gray-900 transition-all group-hover:flex'
+				}>
+				<IconShare className={'size-[10px]'} />
+			</div>
+			<div className={'absolute left-0 top-0 size-full bg-gradient-to-b from-transparent to-gray-900'} />
+			<p className={'z-20 text-xl font-bold text-white'}>{props.app.name}</p>
+			<p className={'z-20 text-gray-400 group-hover:block md:hidden'}>{props.app.description}</p>
+		</Link>
+	);
+}

apps/common/components/MobileNavbar.tsx

@@ -0,0 +1,87 @@
+import Link from 'next/link';
+import {usePathname} from 'next/navigation';
+import {cl} from '@builtbymom/web3/utils';
+import {IconCommunity} from '@common/icons/IconCommunity';
+import {IconYearn} from '@common/icons/IconYearn';
+import {IconYearnXApps} from '@common/icons/IconYearnXApps';
+import {LogoDiscordRound} from '@common/icons/LogoDiscordRound';
+import {LogoParagraphRound} from '@common/icons/LogoParagraphRound';
+import {LogoTwitterRound} from '@common/icons/LogoTwitterRound';
+import {LANDING_SIDEBAR_LINKS, MENU_TABS} from '@common/utils/constants';
+
+import type {ReactElement} from 'react';
+
+const iconsDict = {
+	'/': <IconYearn />,
+	community: <IconCommunity />,
+	'yearn-x': <IconYearnXApps />
+};
+
+export function MobileNavbar({
+	set_isNavbarOpen,
+	set_isSearchOpen
+}: {
+	set_isNavbarOpen: (value: boolean) => void;
+	set_isSearchOpen: (value: boolean) => void;
+}): ReactElement {
+	const pathName = usePathname();
+
+	const currentTab = pathName?.startsWith('/home/') ? pathName?.split('/')[2] : '/';
+	return (
+		<div
+			className={
+				'flex h-full w-screen flex-col justify-end border-t border-gray-600/50 bg-gradient-to-b from-gray-900 to-[#1A1A1A] '
+			}>
+			<div className={'flex flex-col items-start gap-y-2 bg-transparent p-6 pb-4'}>
+				{MENU_TABS.map(tab => (
+					<Link
+						className={cl(
+							'text-base flex items-center gap-x-2 py-2 text-gray-400',
+							currentTab === tab.route ? 'text-white' : 'text-gray-400'
+						)}
+						onClick={() => {
+							set_isSearchOpen(false);
+							set_isNavbarOpen(false);
+						}}
+						href={tab.route === '/' ? tab.route : `/home/${tab.route}`}>
+						<div className={'flex size-6 items-center justify-center'}>
+							{iconsDict[tab.route as '/' | 'community' | 'yearn-x']}
+						</div>
+						<p>{tab.title}</p>
+					</Link>
+				))}
+			</div>
+
+			<div className={'w-full border-t border-gray-500 p-6'}>
+				<div className={'flex w-full justify-between'}>
+					{LANDING_SIDEBAR_LINKS.slice(0, 5).map(link => (
+						<Link
+							href={link.href}
+							className={'text-sm text-gray-400'}
+							target={'_blank'}>
+							{link.title}
+						</Link>
+					))}
+				</div>
+
+				<div className={'mt-6 flex gap-x-6'}>
+					<Link
+						target={'_blank'}
+						href={'https://discord.com/invite/yearn'}>
+						<LogoDiscordRound />
+					</Link>
+					<Link
+						target={'_blank'}
+						href={''}>
+						<LogoParagraphRound />
+					</Link>
+					<Link
+						target={'_blank'}
+						href={'https://twitter.com/yearnfi'}>
+						<LogoTwitterRound />
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/common/components/MobileTopNav.tsx

@@ -0,0 +1,75 @@
+import {type ReactElement, useCallback} from 'react';
+import {useRouter} from 'next/navigation';
+import {useSearch} from '@common/contexts/useSearch';
+import {IconBurger} from '@common/icons/IconBurger';
+import {IconSearch} from '@common/icons/IconSearch';
+import {LogoYearn} from '@common/icons/LogoYearn';
+
+import {SearchBar} from './SearchBar';
+
+export function MobileTopNav({
+	isSearchOpen,
+	set_isSearchOpen,
+	set_isNavbarOpen
+}: {
+	isSearchOpen: boolean;
+	set_isSearchOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	set_isNavbarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}): ReactElement {
+	const {configuration, dispatch} = useSearch();
+	const router = useRouter();
+
+	const onSearchClick = useCallback(() => {
+		if (!configuration.searchValue) {
+			return;
+		}
+		router.push(`/home/search?query=${configuration.searchValue}`);
+	}, [configuration.searchValue, router]);
+
+	return (
+		<div className={'z-50 bg-gray-900'}>
+			<div className={'flex w-full justify-between bg-gray-900 p-6'}>
+				<div className={'flex items-center'}>
+					<button
+						className={'mr-4'}
+						onClick={() => set_isNavbarOpen(prev => !prev)}>
+						<IconBurger />
+					</button>
+					<button
+						onClick={() => {
+							router.push('/');
+							set_isSearchOpen(false);
+						}}>
+						<LogoYearn
+							className={'size-8'}
+							back={'text-blue-500'}
+							front={'text-white'}
+						/>
+					</button>
+				</div>
+				<div>
+					<button
+						onClick={() => {
+							set_isNavbarOpen(false);
+							set_isSearchOpen(prev => !prev);
+						}}>
+						<IconSearch />
+					</button>
+				</div>
+			</div>
+
+			{isSearchOpen && (
+				<div className={'!w-full bg-gray-900 px-6 pb-6'}>
+					<SearchBar
+						className={'!max-w-none !border-0 !border-white !bg-gray-500 text-white '}
+						searchValue={configuration.searchValue}
+						onSearch={(value: string) => dispatch({type: 'SET_SEARCH', payload: value})}
+						searchPlaceholder={'Search Apps'}
+						onSearchClick={onSearchClick}
+						shouldSearchByClick
+					/>
+				</div>
+			)}
+		</div>
+	);
+}