feat: add about & partners sections

apps/landing/components/sections/About.tsx

@@ -0,0 +1,58 @@
+import {type ReactElement, useState} from 'react';
+import {cl} from '@builtbymom/web3/utils';
+
+export function About(): ReactElement {
+	const [isReadMore, set_isReadMore] = useState(false);
+	return (
+		<div
+			className={'mt-[160px] h-[444px] w-full max-w-[1920px]'}
+			style={{
+				backgroundImage: "url('/landing/about_bg.png')",
+				backgroundRepeat: 'no-repeat',
+				backgroundSize: 'auto 100%',
+				backgroundPosition: 'center'
+			}}>
+			<div className={'relative ml-[22%]'}>
+				<p className={'mb-10 text-left text-5xl font-light text-white'}>{'WTF IS YEARN VAULT?'}</p>
+				<div
+					className={cl(
+						'max-w-[720px] text-lg transition-all overflow-hidden leading-7',
+						isReadMore ? 'max-h-screen' : 'max-h-[160px] gradient-mask-b-10'
+					)}>
+					<p className={cl('text-grey-400 to-indigo-400')}>
+						{
+							'In ‘traditional finance’ (boo, hiss) you can earn yield on your savings by depositing them in a bank'
+						}
+						{'- who use the capital for loans and other productive money growing means.'}
+					</p>
+					<br />
+					<div className={cl('text-grey-400')}>
+						<p>{'Yearn Vaults are like crypto savings accounts floating in cyberspace. You deposit'}</p>{' '}
+						<p className={cl('text-grey-400')}>
+							{'your assets, andYearn puts them to work within the DeFi ecosystem, returning the earned'}
+							{'yield back to you.'}
+						</p>
+					</div>
+					<br />
+
+					<p className={cl('text-grey-400')}>
+						{
+							'Unlike a bank account - none of this takes place behind closed doors (no offence to doors). DeFi'
+						}
+						{
+							'runs on public blockchains, so you are in control of your assets and can see where they are at all'
+						}
+						{'times.'}
+					</p>
+				</div>
+				{!isReadMore && (
+					<button
+						className={'mt-6 text-lg font-light text-primary'}
+						onClick={() => set_isReadMore(true)}>
+						{'Read more'}
+					</button>
+				)}
+			</div>
+		</div>
+	);
+}

apps/landing/components/sections/Hero.tsx

@@ -19,7 +19,7 @@ export function Hero(): ReactElement {
 				<div className={'mt-[88px] text-center'}>
 					<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'THE DEFI WAY'}</p>
 					<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'TO EARN CRYPTO'}</p>
-					<p className={'text-grey-400 mt-4'}>
+					<p className={'mt-4 text-grey-400'}>
 						{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
 					</p>
 				</div>

apps/landing/components/sections/Partners.tsx

@@ -0,0 +1,67 @@
+import Marquee from 'react-fast-marquee';
+import Image from 'next/image';
+
+import type {ReactElement} from 'react';
+
+export function Partners(): ReactElement {
+	return (
+		<div className={'flex w-full justify-center'}>
+			<div className={'h-20 w-full'}>
+				<Marquee
+					gradient
+					gradientColor={'black'}
+					pauseOnHover={true}
+					className={'grid h-full overflow-hidden'}>
+					<div className={'mx-5 flex h-full flex-col items-center justify-center pr-10 '}>
+						<Image
+							src={'/landing/partners/ajna.png'}
+							alt={'Ajna'}
+							width={174}
+							height={32}
+						/>
+					</div>{' '}
+					<div className={'mx-5 flex flex-col items-center justify-center pr-10 '}>
+						<Image
+							src={'/landing/partners/ajna.png'}
+							alt={'Ajna'}
+							width={174}
+							height={32}
+						/>
+					</div>
+					<div className={'mx-5 flex flex-col items-center justify-center pr-10 '}>
+						<Image
+							src={'/landing/partners/ajna.png'}
+							alt={'Ajna'}
+							width={174}
+							height={32}
+						/>
+					</div>
+					<div className={'mx-5 flex flex-col items-center justify-center pr-10 '}>
+						<Image
+							src={'/landing/partners/ajna.png'}
+							alt={'Ajna'}
+							width={174}
+							height={32}
+						/>
+					</div>
+					<div className={'mx-5 flex flex-col items-center justify-center pr-10 '}>
+						<Image
+							src={'/landing/partners/ajna.png'}
+							alt={'Ajna'}
+							width={174}
+							height={32}
+						/>
+					</div>
+					<div className={'mx-5 flex flex-col items-center justify-center pr-10 '}>
+						<Image
+							src={'/landing/partners/ajna.png'}
+							alt={'Ajna'}
+							width={174}
+							height={32}
+						/>
+					</div>
+				</Marquee>
+			</div>
+		</div>
+	);
+}

package.json

@@ -35,9 +35,11 @@
     "nprogress": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-fast-marquee": "^1.6.5",
     "react-paginate": "^8.2.0",
     "recharts": "^2.12.7",
     "swr": "^2.2.5",
+    "tailwind-gradient-mask-image": "^1.2.0",
     "viem": "2.17.3",
     "vite": "^5.2.13",
     "wagmi": "2.10.10",

pages/landing.tsx

@@ -1,13 +1,17 @@
+import {About} from 'apps/landing/components/sections/About';
 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 Landing(): ReactElement {
 	return (
-		<div className={'flex w-full flex-col items-center'}>
+		<div className={'flex w-full flex-col items-center bg-[#080A0C]'}>
 			<Hero />
 			<WaysToEarn />
+			<About />
+			<Partners />
 		</div>
 	);
 }

tailwind.config.js

@@ -82,5 +82,5 @@ module.exports = {
 			}
 		}
 	},
-	plugins: []
+	plugins: [require('tailwind-gradient-mask-image')]
 };