fix: merge

yearn · Nov 20, 2024 · a0d96e7 · a0d96e7
1 parent 28d1b48
commit a0d96e7
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 101 deletions.
diff --git a/apps/landing/components/common/EarnCard.tsx b/apps/landing/components/common/EarnCard.tsx
@@ -1,12 +1,20 @@
 import {type ReactElement, useState} from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 import {IconArrow} from '@common/icons/IconArrow';
 
-export function EarnCard(props: {title: string; info: string; logoSrc: string; hoverLogoSrc: string}): ReactElement {
+export function EarnCard(props: {
+	title: string;
+	info: string;
+	logoSrc: string;
+	hoverLogoSrc: string;
+	href: string;
+}): ReactElement {
 	const [isHovering, set_isHovering] = useState(false);
 
 	return (
-		<div
+		<Link
+			href={props.href}
 			onMouseEnter={() => set_isHovering(true)}
 			onMouseLeave={() => set_isHovering(false)}
 			style={{
@@ -38,6 +46,6 @@ export function EarnCard(props: {title: string; info: string; logoSrc: string; h
 				height={200}
 				alt={'app-logo'}
 			/>
-		</div>
+		</Link>
 	);
 }
diff --git a/apps/landing/components/common/Header.tsx b/apps/landing/components/common/Header.tsx
@@ -32,7 +32,7 @@ export function LandingAppHeader(): ReactElement {
 	const [isMenuOpen, set_isMenuOpen] = useState<boolean>(false);
 
 	const menu = useMemo((): TMenu[] => {
-		const HOME_MENU = {path: '/', label: 'Home'};
+		const HOME_MENU = {path: '/home', label: 'Home'};
 
 		return [
 			HOME_MENU,

diff --git a/apps/landing/components/sections/Contribute.tsx b/apps/landing/components/sections/Contribute.tsx
@@ -3,16 +3,38 @@ import Link from 'next/link';
 import {IconArrow} from '@common/icons/IconArrow';
 
 const CARDS = [
-	{title: 'BUG BOUNTY.', description: 'Bugs?! Ew! Report a bug and you might earn $$.'},
-	{title: 'LEAVE FEEDBACK.', description: "Thoughts? Ideas? Improvements? Let's hear it!"},
-	{title: 'WRITE DOCS.', description: 'Want to help write docs for Yearn, be our guest!'},
-	{title: 'BUILD.', description: 'Yearn is open source, anyone can contribute to its future!'}
+	{
+		title: 'BUG BOUNTY.',
+		description: 'Bugs?! Ew! Report a bug and you might earn $$.',
+		href: 'https://immunefi.com/bug-bounty/yearnfinance/information/',
+		target: '_blank'
+	},
+	{
+		title: 'LEAVE FEEDBACK.',
+		description: "Thoughts? Ideas? Improvements? Let's hear it!",
+		href: 'https://gov.yearn.fi/c/general-chat/feedback/2',
+		target: '_blank'
+	},
+	{
+		title: 'WRITE DOCS.',
+		description: 'Want to help write docs for Yearn, be our guest!',
+		href: 'https://docs.yearn.fi/',
+		target: '_blank'
+	},
+	{
+		title: 'BUILD.',
+		description: 'Yearn is open source, anyone can contribute to its future!',
+		href: 'https://github.com/yearn',
+		target: '_blank'
+	}
 ];
 
-function ContributeCard(props: {title: string; description: string}): ReactElement {
+function ContributeCard(props: {title: string; description: string; href: string; target: string}): ReactElement {
 	const [isHovering, set_isHovering] = useState(false);
 	return (
-		<div
+		<Link
+			href={props.href}
+			target={props.target}
 			onMouseEnter={() => set_isHovering(true)}
 			onMouseLeave={() => set_isHovering(false)}
 			style={{
@@ -28,14 +50,10 @@ function ContributeCard(props: {title: string; description: string}): ReactEleme
 				<div className={'opacity-60'}>{props.description}</div>
 			</div>
 			<div className={'flex justify-between gap-2'}>
-				<Link
-					className={'leading-6 underline opacity-70 transition-opacity hover:opacity-100'}
-					href={'/'}>
-					{'Read more'}
-				</Link>
+				<p className={'leading-6 underline opacity-70 transition-opacity hover:opacity-100'}>{'Read more'}</p>
 				{isHovering && <IconArrow className={'text-black'} />}
 			</div>
-		</div>
+		</Link>
 	);
 }
 

diff --git a/apps/landing/components/sections/Hero.tsx b/apps/landing/components/sections/Hero.tsx
@@ -133,7 +133,9 @@ export function Hero(): ReactElement {
 						</p>
 					</div>
 					<div className={'mt-[72px] flex gap-2 md:mt-[48px] lg:mt-[72px]'}>
-						<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
+						<Link href={'/home'}>
+							<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
+						</Link>
 						<Button
 							onClick={() => scrollToHash('form')}
 							variant={'secondary'}

diff --git a/apps/landing/components/sections/WaysToEarn.tsx b/apps/landing/components/sections/WaysToEarn.tsx
@@ -1,5 +1,6 @@
 import {type ReactElement, useState} from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 import {IconArrow} from '@common/icons/IconArrow';
 
 import {Button} from '../common/Button';
@@ -14,65 +15,71 @@ export function WaysToEarn(): ReactElement {
 				{'THERE ARE LOADS OF WAYS TO EARN, WITH YEARN!'}
 			</p>
 			<div className={'mt-10 grid grid-flow-row grid-cols-12 grid-rows-10 gap-6 md:h-[480px] md:grid-flow-col'}>
-				<div
+				<Link
+					href={'/home'}
+					className={
+						'group relative col-span-12 row-span-4 overflow-hidden rounded-lg border border-[#292929] p-6 transition-colors md:col-span-7 md:row-span-12 md:p-10'
+					}
 					onMouseEnter={() => set_isHovering(true)}
 					onMouseLeave={() => set_isHovering(false)}
 					style={{
 						background: isHovering
 							? '#0657F9'
 							: 'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)'
-					}}
-					className={
-						'group relative col-span-12 row-span-4 overflow-hidden rounded-lg border border-[#292929] p-6 transition-colors md:col-span-7 md:row-span-12 md:p-10'
-					}>
-					<div className={'flex h-full flex-col justify-between'}>
-						<div>
-							<p className={'text-md mb-4 text-white md:text-[32px] md:group-hover:text-grey-900'}>
-								{'VAULTS PUT YOUR CRYPTO TO WORK, SO YOU DONT HAVE TO.'}
-							</p>
-							<p className={'z-20 text-grey-400 md:group-hover:text-grey-900'}>
-								{
-									'The DeFi economy offers loads of way to earn yield on your capital. Yearn Vaults automatically take advantage of these opportunities to give you the best risk adjusted yields without you having to lift a finger.'
-								}
-							</p>
-						</div>
-						<div className={'relative h-[120px] md:h-[400px]'}>
-							<Image
-								className={
-									'absolute -bottom-24 left-[-18px] z-10 w-[200px] md:bottom-auto md:left-[-34px] md:w-[400px]'
-								}
-								src={'/landing/safe-hover.png'}
-								width={400}
-								height={400}
-								alt={'safe-hover'}
-							/>
-							<Image
+					}}>
+					<div>
+						<div className={'flex h-full flex-col justify-between'}>
+							<div>
+								<p className={'text-md mb-4 text-white md:text-[32px] md:group-hover:text-grey-900'}>
+									{'VAULTS PUT YOUR CRYPTO TO WORK, SO YOU DONT HAVE TO.'}
+								</p>
+								<p className={'z-20 text-grey-400 md:group-hover:text-grey-900'}>
+									{
+										'The DeFi economy offers loads of way to earn yield on your capital. Yearn Vaults automatically take advantage of these opportunities to give you the best risk adjusted yields without you having to lift a finger.'
+									}
+								</p>
+							</div>
+							<div className={'relative h-[120px] md:h-[400px]'}>
+								<Image
+									className={
+										'absolute -bottom-24 left-[-18px] z-10 w-[200px] md:bottom-auto md:left-[-34px] md:w-[400px]'
+									}
+									src={'/landing/safe-hover.png'}
+									width={400}
+									height={400}
+									alt={'safe-hover'}
+								/>
+								<Image
+									className={
+										'absolute left-[-34px] z-10 hidden opacity-0 transition-opacity group-hover:opacity-0 md:block md:opacity-100'
+									}
+									src={'/landing/safe.png'}
+									width={400}
+									height={400}
+									alt={'safe'}
+								/>
+							</div>
+							<Button
 								className={
-									'absolute left-[-34px] z-10 hidden opacity-0 transition-opacity group-hover:opacity-0 md:block md:opacity-100'
-								}
-								src={'/landing/safe.png'}
-								width={400}
-								height={400}
-								alt={'safe'}
+									'absolute bottom-10 right-10 z-20 hidden w-[160px] hover:!bg-grey-800 group-hover:bg-grey-900 md:block'
+								}>
+								<div className={'flex items-center justify-between'}>
+									<p>{'DISCOVER'}</p>
+									<IconArrow className={'size-4'} />
+								</div>
+							</Button>
+							<IconArrow
+								className={'absolute bottom-6 right-6 size-6 group-hover:text-grey-900 md:hidden'}
 							/>
 						</div>
-						<Button
-							className={
-								'absolute bottom-10 right-10 z-20 hidden w-[160px] hover:!bg-grey-800 group-hover:bg-grey-900 md:block'
-							}>
-							<div className={'flex items-center justify-between'}>
-								<p>{'DISCOVER'}</p>
-								<IconArrow className={'size-4'} />
-							</div>
-						</Button>
-						<IconArrow className={'absolute bottom-6 right-6 size-6 group-hover:text-grey-900 md:hidden'} />
 					</div>
-				</div>
+				</Link>
 				<div className={'col-span-12 row-span-3 md:col-span-5 md:row-span-6'}>
 					<EarnCard
 						title={'COMMUNITY APPS.'}
 						info={'Apps built on Yearn vaults by contributors and the wider community!'}
 						logoSrc={'/landing/community-logo.png'}
+						href={'/home/community-apps'}
 						hoverLogoSrc={'/landing/community-hover.png'}
 					/>
 				</div>
@@ -83,6 +90,7 @@ export function WaysToEarn(): ReactElement {
 							'Yearn Vaults are a core part of DeFi, and you can access them through many popular apps and UIs.'
 						}
 						logoSrc={'/landing/integrations.png'}
+						href={'/home/integrations'}
 						hoverLogoSrc={'/landing/integrations-hover.png'}
 					/>
 				</div>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -27,6 +27,7 @@ import type {ReactElement} from 'react';
 import type {Chain} from 'viem';
 
 import '../style.css';
+import {usePathname} from 'next/navigation';
 
 /** 🔵 - Yearn Finance ***************************************************************************
  ** The 'WithLayout' function is a React functional component that returns a ReactElement. It is used
@@ -49,9 +50,10 @@ const WithLayout = memo(function WithLayout(
 	const {name} = useCurrentApp(props.router);
 	const [isSearchOpen, set_isSearchOpen] = useState(false);
 	const [isNavbarOpen, set_isNavbarOpen] = useState(false);
-	const isOnLanding = props.router.asPath?.startsWith('/home/') || props.router.asPath === '/';
+	const isHomepage = props.router.asPath?.startsWith('/home');
+	const pathName = usePathname();
 
-	if (isOnLanding) {
+	if (isHomepage) {
 		return (
 			<SearchContextApp>
 				<div
@@ -113,11 +115,7 @@ const WithLayout = memo(function WithLayout(
 	return (
 		<>
 			<div className={cl('mx-auto mb-0 flex font-aeonik max-w-6xl absolute top-0 inset-x-0')}>
-				{pathName === '/landing' ? (
-					<LandingAppHeader />
-				) : (
-					<AppHeader supportedNetworks={props.supportedNetworks} />
-				)}
+				{pathName === '/' ? <LandingAppHeader /> : <AppHeader supportedNetworks={props.supportedNetworks} />}
 			</div>
 			<div
 				id={'app'}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,9 +1,31 @@
-import Home from './home';
+import {About} from 'apps/landing/components/sections/About';
+import {Contribute} from 'apps/landing/components/sections/Contribute';
+import {Footer} from 'apps/landing/components/sections/Footer';
+import {Form} from 'apps/landing/components/sections/Form';
+import {Hero} from 'apps/landing/components/sections/Hero';
+import {Partners} from 'apps/landing/components/sections/Partners';
+import {WaysToEarn} from 'apps/landing/components/sections/WaysToEarn';
 
 import type {ReactElement} from 'react';
 
 function Index(): ReactElement {
-	return <Home />;
+	return (
+		<div>
+			<main className={'flex w-full flex-col items-center bg-[#080A0C]'}>
+				<Hero />
+				<WaysToEarn />
+				<About />
+				<Partners />
+				<Contribute />
+				<div id={'form'}>
+					<Form />
+				</div>
+			</main>
+			<footer className={'flex w-full flex-col items-center bg-[#080A0C] pt-[104px] md:pt-[160px]'}>
+				<Footer />
+			</footer>
+		</div>
+	);
 }
 
 export default Index;
diff --git a/pages/landing.tsx b/pages/landing.tsx