update: mobile layout

yearn · Nov 16, 2024 · 4e86c99 · 4e86c99
1 parent 6bad90d
commit 4e86c99
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 63 deletions.
diff --git a/apps/common/components/WithFonts.tsx b/apps/common/components/WithFonts.tsx
@@ -35,6 +35,11 @@ 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',

diff --git a/apps/landing/components/common/Button.tsx b/apps/landing/components/common/Button.tsx
@@ -13,7 +13,9 @@ export function Button(
 	const {variant = 'primary', ...rest} = props;
 
 	return (
-		<button className={cl('py-3 px-4 rounded-[4px] transition-colors', STYLE[variant], rest.className)}>
+		<button
+			{...rest}
+			className={cl('py-3 px-4 rounded-[4px] transition-colors', STYLE[variant], rest.className)}>
 			{rest.children}
 		</button>
 	);

diff --git a/apps/landing/components/sections/About.tsx b/apps/landing/components/sections/About.tsx
@@ -5,18 +5,23 @@ export function About(): ReactElement {
 	const [isReadMore, set_isReadMore] = useState(false);
 	return (
 		<div
-			className={'mt-[160px] h-[444px] w-full max-w-[1920px]'}
+			className={'mt-[160px] flex w-full max-w-[1920px] justify-center px-6 pb-10 md:h-[430px] md:pb-0'}
 			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={'relative lg:mr-[400px]'}>
+				<p
+					className={
+						'mb-10 text-left font-aeonikFono text-3xl font-light text-white md:text-center md:text-5xl'
+					}>
+					{'WTF IS YEARN VAULT?'}
+				</p>
 				<div
 					className={cl(
-						'max-w-[720px] text-lg transition-all overflow-hidden leading-7',
+						'md: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')}>

diff --git a/apps/landing/components/sections/Contribute.tsx b/apps/landing/components/sections/Contribute.tsx
@@ -20,7 +20,7 @@ function ContributeCard(props: {title: string; description: string}): ReactEleme
 					: 'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)'
 			}}
 			className={
-				'flex h-[360px] flex-col justify-between rounded-lg border border-[#292929] px-8 pb-8 pt-10 text-white transition-all hover:text-black'
+				'flex h-[240px] flex-col justify-between rounded-lg border border-[#292929] px-8 pb-8 pt-10 text-white transition-all hover:text-black md:h-[360px]'
 			}>
 			<div>
 				<div className={'mb-2 text-xl'}>{props.title}</div>
@@ -37,9 +37,14 @@ function ContributeCard(props: {title: string; description: string}): ReactEleme
 
 export function Contribute(): ReactElement {
 	return (
-		<div className={'max-w-6xl pt-[160px]'}>
-			<p className={'text-center text-5xl font-light text-white'}>{'CONTRIBUTE AND HELP BUILD THE YEARN DAO'}</p>
-			<div className={'mt-10 grid grid-cols-4 gap-6'}>
+		<div className={'max-w-6xl px-6 pt-[104px] md:pt-[160px]'}>
+			<p className={'text-left font-aeonikFono text-3xl font-light text-white md:text-center md:text-5xl'}>
+				{'CONTRIBUTE AND HELP BUILD THE YEARN DAO'}
+			</p>
+			<div
+				className={
+					'mt-10 grid grid-flow-col grid-cols-1 grid-rows-4 gap-6 sm:grid-cols-2 sm:grid-rows-2 md:grid-flow-row md:grid-cols-4 md:grid-rows-1'
+				}>
 				{CARDS.map(card => (
 					<ContributeCard {...card} />
 				))}

diff --git a/apps/landing/components/sections/Footer.tsx b/apps/landing/components/sections/Footer.tsx
@@ -27,7 +27,60 @@ const LINKS = [
 	}
 ];
 
-//todo: update img
+function FooterContent(): ReactElement {
+	return (
+		<>
+			<div className={'flex flex-col-reverse justify-between gap-y-6 md:flex-row'}>
+				<div>
+					<p className={'font-aeonikFono text-5xl'}>{'TAKE THE BLUE PILL.'}</p>
+				</div>
+				<div>
+					<LogoYearn
+						className={'size-14'}
+						front={'text-white'}
+						back={'text-primary'}
+					/>
+				</div>
+			</div>
+			<div className={'flex flex-col justify-between gap-y-20 md:flex-row md:items-end'}>
+				<div className={'flex flex-col gap-y-4'}>
+					{LINKS.map(link => (
+						<Link
+							className={
+								'flex items-center justify-between gap-x-4 text-3xl transition-colors hover:text-primary md:justify-start'
+							}
+							key={link.label}
+							href={link.href}>
+							<span>{link.label}</span>
+							<IconArrow className={'size-4'} />
+						</Link>
+					))}
+				</div>
+				<div className={'items-cente flex gap-6'}>
+					<Link
+						href={'/'}
+						target={'_blank'}
+						className={'flex items-center gap-x-4'}>
+						<IconParagraph className={'size-8 transition-colors hover:text-primary'} />
+					</Link>
+					<Link
+						href={'/'}
+						target={'_blank'}
+						className={'flex items-center gap-x-4'}>
+						<IconDiscord className={'size-8 transition-colors hover:text-primary'} />
+					</Link>
+					<Link
+						href={'/'}
+						target={'_blank'}
+						className={'flex items-center gap-x-4'}>
+						<IconTwitter className={'size-8 transition-colors hover:text-primary'} />
+					</Link>
+				</div>
+			</div>
+		</>
+	);
+}
+
 export function Footer(): ReactElement {
 	return (
 		<div className={'flex w-full justify-center '}>
@@ -39,53 +92,21 @@ export function Footer(): ReactElement {
 					backgroundPosition: 'center'
 				}}
 				className={
-					'items-between relative m-6 flex h-[640px] w-full max-w-[2352px] flex-col justify-between self-center rounded-lg border border-[#292929] bg-[#0C0E14] px-14 py-12'
+					'items-between relative m-6 hidden h-[640px] w-full max-w-[2352px] flex-col justify-between self-center rounded-lg border border-[#292929] bg-[#0C0E14] px-14 py-12 md:flex'
 				}>
-				<div className={'flex justify-between'}>
-					<div>
-						<p className={'font-aeonikFono text-4xl'}>{'TAKE THE BLUE PILL.'}</p>
-					</div>
-					<div>
-						<LogoYearn
-							className={'size-14'}
-							front={'text-white'}
-							back={'text-primary'}
-						/>
-					</div>
-				</div>
-				<div className={'flex items-end justify-between'}>
-					<div className={'flex flex-col gap-y-4'}>
-						{LINKS.map(link => (
-							<Link
-								className={'flex items-center gap-x-4 text-3xl transition-colors hover:text-primary'}
-								key={link.label}
-								href={link.href}>
-								<span>{link.label}</span>
-								<IconArrow className={'size-4'} />
-							</Link>
-						))}
-					</div>
-					<div className={'items-cente flex gap-6'}>
-						<Link
-							href={'/'}
-							target={'_blank'}
-							className={'flex items-center gap-x-4'}>
-							<IconParagraph className={'size-8 transition-colors hover:text-primary'} />
-						</Link>
-						<Link
-							href={'/'}
-							target={'_blank'}
-							className={'flex items-center gap-x-4'}>
-							<IconDiscord className={'size-8 transition-colors hover:text-primary'} />
-						</Link>
-						<Link
-							href={'/'}
-							target={'_blank'}
-							className={'flex items-center gap-x-4'}>
-							<IconTwitter className={'size-8 transition-colors hover:text-primary'} />
-						</Link>
-					</div>
-				</div>
+				<FooterContent />
+			</div>
+			<div
+				style={{
+					backgroundImage: "url('/landing/footer-background-mobile.png')",
+					backgroundRepeat: 'no-repeat',
+					backgroundSize: '100% auto',
+					backgroundPosition: 'center'
+				}}
+				className={
+					'items-between relative flex h-[640px] w-full max-w-[2352px] flex-col justify-between self-center rounded-lg bg-[#0C0E14] px-8 pb-10 pt-12 md:hidden'
+				}>
+				<FooterContent />
 			</div>
 		</div>
 	);

diff --git a/apps/landing/components/sections/Form.tsx b/apps/landing/components/sections/Form.tsx
@@ -4,8 +4,12 @@ import type {ReactElement} from 'react';
 
 export function Form(): ReactElement {
 	return (
-		<div className={'flex max-w-6xl flex-col items-center pt-[160px]'}>
-			<p className={'text-center text-5xl font-light text-white'}>{'SUBMIT YOUR APP IDEA OR INTEGRATION'}</p>
+		<div
+			className={'flex max-w-6xl flex-col items-center pt-[160px]'}
+			id={'form'}>
+			<p className={'text-left font-aeonikFono text-3xl font-light text-white md:text-center md:text-5xl'}>
+				{'SUBMIT YOUR APP IDEA OR INTEGRATION'}
+			</p>
 			<form className={'mt-10 flex w-full max-w-[480px] flex-col gap-4'}>
 				<input
 					className={'h-[56px] rounded-lg border bg-transparent px-4'}

diff --git a/apps/landing/components/sections/Hero.tsx b/apps/landing/components/sections/Hero.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import {scrollToHash} from 'apps/landing/utils/scrollToHash';
 import {motion} from 'framer-motion';
 
 import {Button} from '../common/Button';
@@ -8,7 +9,6 @@ import type {ReactElement} from 'react';
 function AnimatedLogos(): ReactElement {
 	return (
 		<>
-			{' '}
 			<motion.div
 				className={'absolute'}
 				style={{
@@ -134,6 +134,7 @@ export function Hero(): ReactElement {
 					<div className={'mt-[72px] flex gap-2'}>
 						<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
 						<Button
+							onClick={() => scrollToHash('form')}
 							variant={'secondary'}
 							className={'w-[192px]'}>
 							{'SUBMIT YOUR APP'}
@@ -166,7 +167,11 @@ export function Hero(): ReactElement {
 				</div>
 				<div className={'mt-10 flex w-full flex-col gap-2'}>
 					<Button className={'px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
-					<Button variant={'secondary'}>{'SUBMIT YOUR APP'}</Button>
+					<Button
+						variant={'secondary'}
+						onClick={() => scrollToHash('form')}>
+						{'SUBMIT YOUR APP'}
+					</Button>
 				</div>
 			</div>
 		</>

diff --git a/apps/landing/components/sections/WaysToEarn.tsx b/apps/landing/components/sections/WaysToEarn.tsx
@@ -10,7 +10,7 @@ export function WaysToEarn(): ReactElement {
 
 	return (
 		<div className={'max-w-6xl pt-[160px]'}>
-			<p className={'text-left text-3xl font-light text-white md:text-center md:text-5xl'}>
+			<p className={'text-left font-aeonikFono text-3xl font-light text-white md:text-center md:text-5xl'}>
 				{'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'}>

diff --git a/apps/landing/utils/scrollToHash.ts b/apps/landing/utils/scrollToHash.ts
@@ -0,0 +1,4 @@
+export const scrollToHash = (id: string): void => {
+	const element = document.getElementById(id);
+	element?.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
+};
diff --git a/pages/landing.tsx b/pages/landing.tsx
@@ -17,9 +17,11 @@ function Landing(): ReactElement {
 				<About />
 				<Partners />
 				<Contribute />
-				<Form />
+				<div id={'form'}>
+					<Form />
+				</div>
 			</main>
-			<footer className={'flex w-full flex-col items-center bg-[#080A0C] pt-[136px]'}>
+			<footer className={'flex w-full flex-col items-center bg-[#080A0C] pt-[104px] md:pt-[160px]'}>
 				<Footer />
 			</footer>
 		</div>

diff --git a/public/fonts/AeonikFono-Light.otf b/public/fonts/AeonikFono-Light.otf
diff --git a/public/landing/footer-background-mobile.png b/public/landing/footer-background-mobile.png