diff --git a/apps/common/components/WithFonts.tsx b/apps/common/components/WithFonts.tsx index 8abf90cda..0e5ae2031 100644 --- a/apps/common/components/WithFonts.tsx +++ b/apps/common/components/WithFonts.tsx @@ -8,6 +8,11 @@ const aeonik = localFont({ variable: '--font-aeonik', display: 'swap', src: [ + { + path: '../../../public/fonts/Aeonik-Light.ttf', + weight: '300', + style: 'normal' + }, { path: '../../../public/fonts/Aeonik-Regular.woff2', weight: '400', diff --git a/apps/landing/components/common/Button.tsx b/apps/landing/components/common/Button.tsx new file mode 100644 index 000000000..ac15a0398 --- /dev/null +++ b/apps/landing/components/common/Button.tsx @@ -0,0 +1,20 @@ +import {cl} from '@builtbymom/web3/utils'; + +import type {ButtonHTMLAttributes, ReactElement} from 'react'; + +const STYLE = { + primary: 'bg-primary hover:bg-[#004BE0]', + secondary: 'bg-transparent border border-white/30 hover:bg-white/10' +}; + +export function Button( + props: {variant?: 'primary' | 'secondary'} & ButtonHTMLAttributes +): ReactElement { + const {variant = 'primary', ...rest} = props; + + return ( + + ); +} diff --git a/apps/landing/components/common/EarnCard.tsx b/apps/landing/components/common/EarnCard.tsx new file mode 100644 index 000000000..77c4d7d7e --- /dev/null +++ b/apps/landing/components/common/EarnCard.tsx @@ -0,0 +1,44 @@ +import {type ReactElement, useState} from 'react'; +import Image from 'next/image'; + +import {IconArrow} from '../icons/IconArrow'; + +export function EarnCard(props: {title: string; info: string; logoSrc: string; hoverLogoSrc: string}): ReactElement { + const [isHovering, set_isHovering] = useState(false); + + return ( +
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 flex h-full overflow-hidden p-6'}> +
+
+

{props.title}

+

{props.info}

+
+
+ +
+
+ {'app-logo'} + {'app-logo'} +
+ ); +} diff --git a/apps/landing/components/common/Header.tsx b/apps/landing/components/common/Header.tsx new file mode 100644 index 000000000..7fda7ed4f --- /dev/null +++ b/apps/landing/components/common/Header.tsx @@ -0,0 +1,140 @@ +import {type ReactElement, useMemo, useState} from 'react'; +import Link from 'next/link'; +import {useRouter} from 'next/router'; +import {AppName, APPS} from '@common/components/Apps'; + +import {IconYearnLogo} from '../icons/IconYearnLogo'; + +type TMenu = {path: string; label: string | ReactElement; target?: string}; +type TNavbar = {nav: TMenu[]; currentPathName: string}; + +function Navbar({nav, currentPathName}: TNavbar): ReactElement { + return ( + + ); +} + +export function LandingAppHeader(): ReactElement { + const {pathname} = useRouter(); + const [isMenuOpen, set_isMenuOpen] = useState(false); + + const menu = useMemo((): TMenu[] => { + const HOME_MENU = {path: '/', label: 'Home'}; + + if (pathname.startsWith('/ycrv')) { + return [HOME_MENU, ...APPS[AppName.YCRV].menu]; + } + + if (pathname.startsWith('/v3')) { + return [HOME_MENU, ...APPS[AppName.VAULTSV3].menu]; + } + + if (pathname.startsWith('/vaults')) { + return [HOME_MENU, ...APPS[AppName.VAULTS].menu]; + } + + if (pathname.startsWith('/veyfi')) { + return [HOME_MENU, ...APPS[AppName.VEYFI].menu]; + } + + return [ + HOME_MENU, + { + path: 'https://gov.yearn.fi/', + label: 'Governance', + target: '_blank' + }, + {path: 'https://blog.yearn.fi/', label: 'Blog', target: '_blank'}, + {path: 'https://docs.yearn.fi/', label: 'Docs', target: '_blank'}, + {path: 'https://discord.gg/yearn', label: 'Support', target: '_blank'} + ]; + }, [pathname]); + + return ( +
+
+
+
+ +
+
+ +
+ +
+
+ {/* set_isMenuOpen(false)} + supportedNetworks={[]}> + {menu?.map( + (option): ReactElement => ( + +
set_isMenuOpen(false)}> +

{option.label}

+
+ + ) + )} + */} +
+ ); +} diff --git a/apps/landing/components/icons/IconArrow.tsx b/apps/landing/components/icons/IconArrow.tsx new file mode 100644 index 000000000..4f687a71d --- /dev/null +++ b/apps/landing/components/icons/IconArrow.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import type {ReactElement} from 'react'; + +function IconArrow(props: React.SVGProps): ReactElement { + return ( + + + + + ); +} + +export {IconArrow}; diff --git a/apps/landing/components/icons/IconYearnLogo.tsx b/apps/landing/components/icons/IconYearnLogo.tsx new file mode 100644 index 000000000..91155ea45 --- /dev/null +++ b/apps/landing/components/icons/IconYearnLogo.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import type {ReactElement} from 'react'; + +function IconYearnLogo(props: React.SVGProps): ReactElement { + return ( + + + + + ); +} + +export {IconYearnLogo}; diff --git a/apps/landing/components/sections/Hero.tsx b/apps/landing/components/sections/Hero.tsx new file mode 100644 index 000000000..6ac0e6c6d --- /dev/null +++ b/apps/landing/components/sections/Hero.tsx @@ -0,0 +1,37 @@ +import {Button} from '../common/Button'; + +import type {ReactElement} from 'react'; + +//todo: ask design to remove border +export function Hero(): ReactElement { + return ( +
+
+
+

{'THE DEFI WAY'}

+

{'TO EARN CRYPTO'}

+

+ {'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'} +

+
+
+ + +
+
+
+ ); +} diff --git a/apps/landing/components/sections/WaysToEarn.tsx b/apps/landing/components/sections/WaysToEarn.tsx new file mode 100644 index 000000000..188d9803c --- /dev/null +++ b/apps/landing/components/sections/WaysToEarn.tsx @@ -0,0 +1,79 @@ +import {type ReactElement, useState} from 'react'; +import Image from 'next/image'; + +import {Button} from '../common/Button'; +import {EarnCard} from '../common/EarnCard'; +import {IconArrow} from '../icons/IconArrow'; + +export function WaysToEarn(): ReactElement { + const [isHovering, set_isHovering] = useState(false); + + return ( +
+

+ {'THERE ARE LOADS OF WAYS TO EARN, WITH YEARN!'} +

+
+
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-7 row-span-4 overflow-hidden rounded-lg p-10 transition-colors' + }> +

+ {'VAULTS PUT YOUR CRYPTO TO WORK, SO YOU DONT HAVE TO.'} +

+

+ { + '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.' + } +

+ {'safe-hover'} + {'safe'} + +
+
+ +
+
+ +
+
+
+ ); +} diff --git a/bun.lockb b/bun.lockb index 48ba0101c..b1fe6dc24 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/pages/_app.tsx b/pages/_app.tsx index fa08b8784..9822001ed 100755 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,6 +3,7 @@ import {Toaster} from 'react-hot-toast'; import {usePathname} from 'next/navigation'; import {useRouter} from 'next/router'; import PlausibleProvider from 'next-plausible'; +import {LandingAppHeader} from 'apps/landing/components/common/Header'; import {AnimatePresence, domAnimation, LazyMotion, motion} from 'framer-motion'; import {WithMom} from '@builtbymom/web3/contexts/WithMom'; import {cl} from '@builtbymom/web3/utils'; @@ -47,7 +48,11 @@ const WithLayout = memo(function WithLayout(props: {supportedNetworks: Chain[]} return ( <>
- + {pathName === '/landing' ? ( + + ) : ( + + )}
+ + +
+ ); +} + +export default Landing; diff --git a/public/fonts/Aeonik-Light.ttf b/public/fonts/Aeonik-Light.ttf new file mode 100644 index 000000000..8f8f3a2c4 Binary files /dev/null and b/public/fonts/Aeonik-Light.ttf differ diff --git a/public/landing/community-hover.png b/public/landing/community-hover.png new file mode 100644 index 000000000..bf51399ae Binary files /dev/null and b/public/landing/community-hover.png differ diff --git a/public/landing/community-logo.png b/public/landing/community-logo.png new file mode 100644 index 000000000..77a0e2347 Binary files /dev/null and b/public/landing/community-logo.png differ diff --git a/public/landing/hero.png b/public/landing/hero.png new file mode 100644 index 000000000..0451e2720 Binary files /dev/null and b/public/landing/hero.png differ diff --git a/public/landing/integrations-hover.png b/public/landing/integrations-hover.png new file mode 100644 index 000000000..7cc16b1d3 Binary files /dev/null and b/public/landing/integrations-hover.png differ diff --git a/public/landing/integrations.png b/public/landing/integrations.png new file mode 100644 index 000000000..b855b92fa Binary files /dev/null and b/public/landing/integrations.png differ diff --git a/public/landing/safe-hover.png b/public/landing/safe-hover.png new file mode 100644 index 000000000..323b64cca Binary files /dev/null and b/public/landing/safe-hover.png differ diff --git a/public/landing/safe.png b/public/landing/safe.png new file mode 100644 index 000000000..53d3c404f Binary files /dev/null and b/public/landing/safe.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 42b89a1f4..f07bcf2e9 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,7 +20,8 @@ module.exports = { white: 'rgb(255, 255, 255)', transparent: 'transparent', inherit: 'inherit', - primary: '#0657F9' + primary: '#0657F9', + grey: {400: '#9D9D9D', 800: '#282828', 900: '#0C0C0C'} }, fontFamily: { aeonik: ['var(--font-aeonik)', 'Aeonik', ...defaultTheme.fontFamily.sans],