Merge branch 'feat/landing2.0' of https://github.com/yearn/yearn.fi i…

…nto feat/landing2.0

apps/common/components/AppCard.tsx

@@ -18,7 +18,7 @@ export function AppCard(props: TAppCardProps): ReactElement {
 				className={
 					'bg-grey-900 group relative hidden rounded-lg border border-gray-700/50 p-6 hover:bg-gray-600/40 md:block'
 				}>
-				<div className={'mb-10'}>
+				<div className={'mb-4'}>
 					<div
 						className={
 							'absolute right-2 top-2 hidden size-10 items-center justify-center rounded-lg bg-gray-900 group-hover:flex'
@@ -32,13 +32,13 @@ export function AppCard(props: TAppCardProps): ReactElement {
 							unoptimized
 							width={240}
 							height={240}
-							className={'size-[80px] rounded-full object-contain'}
+							className={'size-[80px] rounded-full border border-[#29292980] object-contain'}
 						/>
 					) : (
 						<div className={'size-[80px] rounded-full bg-fallback'} />
 					)}
 				</div>
-				<div className={'mb-2 text-lg font-bold text-white'}>{props.app.name}</div>
+				<div className={'mb-1 text-lg font-bold text-white'}>{props.app.name}</div>
 
 				<p className={'text-sm text-gray-400'}>{props.app.description}</p>
 			</Link>
@@ -47,7 +47,7 @@ export function AppCard(props: TAppCardProps): ReactElement {
 				className={'flex items-center md:hidden'}>
 				<div>
 					{props.app.logoURI ? (
-						<div className={'size-16 rounded-2xl md:rounded-[32px]'}>
+						<div className={'size-16 rounded-2xl border border-[#29292980] md:rounded-[32px]'}>
 							<Image
 								src={props.app.logoURI}
 								alt={props.app.name}

apps/common/components/AppsCarousel.tsx

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

apps/common/components/CategorySection.tsx

@@ -37,7 +37,7 @@ export function CategorySection({title, onExpandClick, apps, shouldRandomize = f
 					className={
 						'flex items-center rounded-[4px] px-4 py-2 outline !outline-1 outline-gray-600/50 hover:bg-gray-600/40'
 					}>
-					<span className={'mr-1 text-xs text-white'}>{'View all'}</span>
+					<span className={'mr-2 text-xs text-white'}>{'View all'}</span>
 					<IconChevron className={'size-3 -rotate-90 text-white'} />
 				</button>
 			</div>

apps/common/components/PromoPoster.tsx

@@ -10,7 +10,7 @@ export function PromoPoster(): ReactElement {
 			className={
 				'border-1 relative flex flex-col rounded-lg border border-gray-600/50 bg-gradient-to-b from-gray-900 to-[#1A1A1A] p-4 hover:from-[#1A1A1A] hover:to-[#262626]'
 			}>
-			<div className={'mb-4 flex w-full justify-start text-3xl font-bold uppercase leading-[40px] text-white'}>
+			<div className={'mb-4 flex w-full justify-start text-3xl font-bold uppercase text-white'}>
 				{'earn with'}
 				<br /> {'yearn'}
 			</div>
@@ -20,7 +20,7 @@ export function PromoPoster(): ReactElement {
 			</div>
 
 			<div className={'max-w-[610px]'}>
-				<p className={'text-base text-gray-400'}>
+				<p className={'text-sm text-gray-400'}>
 					{
 						'Yearn is a decentralized suite of products helping individuals, DAOs, and other protocols earn yield on their digital assets.'
 					}

apps/common/components/SearchBar.tsx

@@ -29,7 +29,7 @@ export function SearchBar(props: TSearchBar): ReactElement {
 						suppressHydrationWarning
 						className={cl(
 							props.inputClassName,
-							'h-10 w-full overflow-x-scroll border-none bg-transparent px-0 py-2 text-base outline-none scrollbar-none placeholder:text-neutral-400'
+							'h-10 w-full overflow-x-scroll border-none bg-transparent pl-2 px-0 py-2 text-base outline-none scrollbar-none placeholder:text-neutral-400'
 						)}
 						type={'text'}
 						placeholder={props.searchPlaceholder}

apps/common/components/Sidebar.tsx

@@ -35,11 +35,13 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 			<div>
 				<div className={'px-4'}>
 					<div className={'mb-4 ml-2'}>
-						<LogoYearn
-							className={'size-10'}
-							back={'text-blue-500'}
-							front={'text-white'}
-						/>
+						<Link href={'/'}>
+							<LogoYearn
+								className={'size-10'}
+								back={'text-blue-500'}
+								front={'text-white'}
+							/>
+						</Link>
 					</div>
 					<div className={'mb-4'}>
 						<PromoPoster />

apps/common/utils/constants.tsx

@@ -41,7 +41,7 @@ export const FRONTENDS_APPS: TApp[] = [
 	},
 	{
 		name: 'Superform',
-		description: 'Earn Yield & Distribute Vaults',
+		description: 'Earn Yield & Distribute Vaults.',
 		logoURI: 'https://www.superform.xyz/icon.png',
 		appURI: 'https://www.superform.xyz'
 	}
@@ -56,13 +56,13 @@ export const LOCKERS_APPS: TApp[] = [
 	},
 	{
 		name: 'yCRV',
-		description: 'Put your yCRV to work',
+		description: 'Put your yCRV to work.',
 		logoURI: 'https://ycrv.yearn.fi/ycrv-logo.svg',
 		appURI: 'https://ycrv.yearn.fi'
 	},
 	{
 		name: 'yPrisma',
-		description: 'Put your yPRISMA to work',
+		description: 'Put your yPRISMA to work.',
 		logoURI: 'https://assets.smold.app/api/token/1/0xe3668873d944e4a949da05fc8bde419eff543882/logo-128.png',
 		appURI: 'https://yprisma.yearn.fi'
 	},
@@ -141,7 +141,7 @@ export const INTEGRATIONS_APPS: TApp[] = [
 		name: 'Sturdy',
 		description:
 			'Isolated lending with shared liquidity. Permissionlessly create a liquid money market for any asset.',
-		logoURI: 'https://v2.sturdy.finance/apple-icon.png',
+		logoURI: 'https://avatars.githubusercontent.com/u/90377574?s=200&v=4',
 		appURI: 'https://v2.sturdy.finance'
 	},
 	{
@@ -157,55 +157,55 @@ export const FEATURED_APPS = [
 	{
 		name: 'Juiced',
 		description: 'Discover yields juiced with extra token rewards.',
-		logoURI: '/juiced-featured.png',
+		logoURI: '/juiced-featured.jpg',
 		appURI: 'https://juiced.app/'
 	},
 	{
 		name: 'Gimme',
 		description: 'DeFi yields, designed for everyone.',
-		logoURI: '/gimme-featured.png',
+		logoURI: '/gimme-featured.jpg',
 		appURI: 'https://gimme.mom/'
 	},
 	{
 		name: 'Vaults',
 		description: 'The full Yearn experience with all Vaults, for sophisticated users.',
-		logoURI: '/v3-featured.png',
+		logoURI: '/v3-featured.jpg',
 		appURI: '/v3'
 	},
 	{
 		name: 'Juiced',
 		description: 'Discover yields juiced with extra token rewards.',
-		logoURI: '/juiced-featured.png',
+		logoURI: '/juiced-featured.jpg',
 		appURI: 'https://juiced.app/'
 	},
 	{
 		name: 'Gimme',
 		description: 'DeFi yields, designed for everyone.',
-		logoURI: '/gimme-featured.png',
+		logoURI: '/gimme-featured.jpg',
 		appURI: 'https://gimme.mom/'
 	},
 	{
 		name: 'Vaults',
 		description: 'The full Yearn experience with all Vaults, for sophisticated users.',
-		logoURI: '/v3-featured.png',
+		logoURI: '/v3-featured.jpg',
 		appURI: '/v3'
 	},
 	{
 		name: 'Juiced',
 		description: 'Discover yields juiced with extra token rewards.',
-		logoURI: '/juiced-featured.png',
+		logoURI: '/juiced-featured.jpg',
 		appURI: 'https://juiced.app/'
 	},
 	{
 		name: 'Gimme',
 		description: 'DeFi yields, designed for everyone.',
-		logoURI: '/gimme-featured.png',
+		logoURI: '/gimme-featured.jpg',
 		appURI: 'https://gimme.mom/'
 	},
 	{
 		name: 'Vaults',
 		description: 'The full Yearn experience with all Vaults, for sophisticated users.',
-		logoURI: '/v3-featured.png',
+		logoURI: '/v3-featured.jpg',
 		appURI: '/v3'
 	}
 ];

pages/home/index.tsx

@@ -41,7 +41,7 @@ export default function Home(): ReactElement {
 	return (
 		<div className={'relative mb-4 mt-24 flex w-full justify-start md:mt-10'}>
 			<div className={'md:max-w- w-full p-6 !pl-8 pb-24 pt-0 md:px-2'}>
-				<div className={'flex flex-col gap-y-6'}>
+				<div className={'flex flex-col gap-y-16'}>
 					<div className={'md:hidden'}>
 						<PromoPoster />
 					</div>
@@ -73,7 +73,7 @@ export default function Home(): ReactElement {
 						/>
 					</div>
 
-					<div className={'mt-[300px] flex flex-col gap-10'}>
+					<div className={'flex flex-col gap-10'}>
 						<CategorySection
 							title={'Frontends'}
 							onExpandClick={() => router.push('/home/frontends')}