+
diff --git a/apps/website/src/components/wallet/comparision-section.tsx b/apps/website/src/components/wallet/comparision-section.tsx
new file mode 100644
index 00000000..11663be3
--- /dev/null
+++ b/apps/website/src/components/wallet/comparision-section.tsx
@@ -0,0 +1,178 @@
+import { Button, Counter, Tag, Text } from '@status-im/components'
+
+import { useParalax } from '@/hooks/use-parallax'
+
+import { ParalaxCircle } from './parallax-circle'
+
+const ComparisionSection = () => {
+ const { top, bottom } = useParalax({
+ initialTop: -690,
+ })
+
+ return (
+
+
+
+
+
+
+
+
+
+ Alice has 50 DAI on both Ethereum Mainnet and Optimism and wants
+ to send 100 DAI to Bob on Arbitrum.
+
+
+
+
+
+ Finally! Multi-chain done right!
+
+
+
+ Interested in how Status’s send with auto routing and bridging
+ works and helps users?{' '}
+
+
+
+
+
+
+
+
+
+
+ Other wallets
+
+
+ {listOneData.map(item => (
+
+
+
+
+ Status Wallet
+
+
+ {listTwoData.map(item => (
+
+
+
+
+
+ eth:opt:arb:0xAgafhja
+
+
+ )
+}
+
+export { ComparisionSection }
+
+const listOneData = [
+ {
+ count: 1,
+ label: 'Open dApp Browser',
+ },
+ {
+ count: 2,
+ label: 'Visit Bridge dApp',
+ },
+ {
+ count: 3,
+ label: 'Bridge DAI from Mainnet to Arbitrum',
+ },
+ {
+ count: 4,
+ label: 'Send DAI on Arbitrum',
+ },
+ {
+ count: 5,
+ label: 'Open dApp Browser',
+ },
+ {
+ count: 6,
+ label: 'Visit Bridge dApp',
+ },
+ {
+ count: 7,
+ label: 'Bridge DAI from Optimism to Arbitrum',
+ },
+ {
+ count: 8,
+ label: 'Send DAI on Arbitrum',
+ noBorder: true,
+ },
+ {
+ count: '😮💨',
+ label: 'Is that it?',
+ secondaryLabel: 'Did I use cheapest route and bridges?',
+ noBorder: true,
+ },
+]
+
+const listTwoData = [
+ {
+ count: 1,
+ label: 'Select the token',
+ },
+ {
+ count: 2,
+ label: 'Select the amount',
+ },
+ {
+ count: 3,
+ label: 'Send',
+ noBorder: true,
+ },
+ {
+ count: '🎉',
+ label: 'That’s it!',
+ secondaryLabel: 'Lowest possible cost!',
+ noBorder: true,
+ },
+]
+
+const Item = (props: {
+ count: string | number
+ label: string
+ secondaryLabel?: string
+ noBorder?: boolean
+}) => {
+ const { count, label, secondaryLabel, noBorder } = props
+ const isNumber = typeof count === 'number'
+ return (
+
+ {isNumber ? (
+
+ ) : (
+
{count}
+ )}
+
+
+ {label}
+
+ {!isNumber && (
+
+ {secondaryLabel}
+
+ )}
+
+
+ )
+}
diff --git a/apps/website/src/components/wallet/hands-section.tsx b/apps/website/src/components/wallet/hands-section.tsx
new file mode 100644
index 00000000..59fffa8e
--- /dev/null
+++ b/apps/website/src/components/wallet/hands-section.tsx
@@ -0,0 +1,62 @@
+import { Text } from '@status-im/components'
+
+const HandsSection = () => {
+ return (
+
+
+
+
+ Take control
+
+ of your crypto
+
+
+
+ No one (including Status!) has the power to freeze, lock-out or
+ stop a Status user from accessing and transacting their tokens.
+
+
+
+
+
+
+
+
+
+ Ethereum based assets
+
+
+ We support all assets in the Uniswap Labs default tokenlist and
+ those minted by communities using Status.
+
+
+
+
+
+
+
+ NFTs and collectibles
+
+
+ We will display any NFTs or collectibles listed on OpenSea plus
+ those minted by communities using Status.
+
+
+
+
+
+
+
+ )
+}
+
+export { HandsSection }
diff --git a/apps/website/src/components/wallet/hero-section.tsx b/apps/website/src/components/wallet/hero-section.tsx
new file mode 100644
index 00000000..2111c23c
--- /dev/null
+++ b/apps/website/src/components/wallet/hero-section.tsx
@@ -0,0 +1,73 @@
+import { Button, Tag, Text } from '@status-im/components'
+import { DownloadIcon, WalletIcon } from '@status-im/icons'
+import image1 from 'public/assets/wallet/1.png'
+import image2 from 'public/assets/wallet/2.png'
+import image3 from 'public/assets/wallet/3.png'
+import image4 from 'public/assets/wallet/vegas.png'
+
+import { GridHero } from '../cards/grid-hero'
+import { ParalaxCircle } from './parallax-circle'
+
+const HeroSection = () => {
+ return (
+
+
+
+
+
+
+
+
+ The future
+
+ is multi-chain
+
+
+
+ L2s made simple - send and manage your crypto easily and safely
+ across multiple networks.
+
+
+
+
+
+
+ }
+ variant="yellow"
+ >
+ Sign up for early access
+
+
+
+
+
+
+ )
+}
+
+export { HeroSection }
diff --git a/apps/website/src/components/wallet/index.tsx b/apps/website/src/components/wallet/index.tsx
new file mode 100644
index 00000000..149c6e29
--- /dev/null
+++ b/apps/website/src/components/wallet/index.tsx
@@ -0,0 +1,5 @@
+export { ComparisionSection } from './comparision-section'
+export { HandsSection } from './hands-section'
+export { HeroSection } from './hero-section'
+export { ParalaxCircle } from './parallax-circle'
+export { VideoSection } from './video-section'
diff --git a/apps/website/src/components/wallet/parallax-circle.tsx b/apps/website/src/components/wallet/parallax-circle.tsx
new file mode 100644
index 00000000..dc620dd2
--- /dev/null
+++ b/apps/website/src/components/wallet/parallax-circle.tsx
@@ -0,0 +1,28 @@
+import { useParalax } from '@/hooks/use-parallax'
+
+type ParalaxProps = {
+ initialLeft?: number
+ initialTop?: number
+ initialRight?: number
+ initialBottom?: number
+}
+
+const ParalaxCircle = (props: ParalaxProps) => {
+ const { top, bottom } = useParalax(props)
+
+ return (
+
+ )
+}
+
+export { ParalaxCircle }
diff --git a/apps/website/src/components/wallet/video-section.tsx b/apps/website/src/components/wallet/video-section.tsx
new file mode 100644
index 00000000..258acd99
--- /dev/null
+++ b/apps/website/src/components/wallet/video-section.tsx
@@ -0,0 +1,76 @@
+import { ContextTag, Text } from '@status-im/components'
+
+import { ParalaxCircle } from './parallax-circle'
+
+const VideoSection = () => {
+ return (
+
+
+
+
+
+ Fully
+
+ Decentralized
+
+ Networks
+
+
+
+
+ Status supports blockchain networks that are fully committed to
+ decentralization.
+
+
+
+ Currently supported networks
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export { VideoSection }
diff --git a/apps/website/src/config/links.ts b/apps/website/src/config/links.ts
index 10b16bee..55e3c40f 100644
--- a/apps/website/src/config/links.ts
+++ b/apps/website/src/config/links.ts
@@ -1,3 +1,10 @@
+import {
+ AdvancedIcon,
+ AirdropIcon,
+ CommunitiesIcon,
+ TokenIcon,
+} from '@status-im/icons'
+
export const LINKS = {
Features: [
{ name: 'Communities', href: '/features/communities' },
@@ -45,22 +52,27 @@ export const LINKS = {
],
} as const
+// TODO Update icons when available
export const SOCIALS = {
status: {
name: 'Status',
href: '
',
+ icon: CommunitiesIcon,
},
twitter: {
name: 'Twitter',
href: 'https://twitter.com/ethstatus',
+ icon: TokenIcon,
},
github: {
name: 'GitHub',
href: 'https://github.com/status-im',
+ icon: AirdropIcon,
},
youtube: {
name: 'YouTube',
href: 'https://youtube.com/',
+ icon: AdvancedIcon,
},
}
diff --git a/apps/website/src/hooks/use-lock-scroll.ts b/apps/website/src/hooks/use-lock-scroll.ts
new file mode 100644
index 00000000..9ff78a4d
--- /dev/null
+++ b/apps/website/src/hooks/use-lock-scroll.ts
@@ -0,0 +1,12 @@
+export const useLockScroll = (open = false) => {
+ if (typeof document === 'undefined') {
+ return
+ }
+ // Adds the following code to disable scrolling when the menu is open
+ const rootElement = document.documentElement
+ if (open) {
+ rootElement.style.overflowY = 'hidden'
+ } else {
+ rootElement.style.overflowY = 'auto'
+ }
+}
diff --git a/apps/website/src/hooks/use-outside-click.ts b/apps/website/src/hooks/use-outside-click.ts
new file mode 100644
index 00000000..c6cee2bd
--- /dev/null
+++ b/apps/website/src/hooks/use-outside-click.ts
@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react'
+
+export const useOutsideClick = (callback: () => void) => {
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const handleClick = (event: MouseEvent) => {
+ if (ref.current && !ref.current.contains(event.target as Node)) {
+ callback()
+ }
+ }
+
+ document.addEventListener('click', handleClick, true)
+
+ return () => {
+ document.removeEventListener('click', handleClick, true)
+ }
+ }, [callback])
+
+ return ref
+}
diff --git a/apps/website/src/hooks/use-parallax.ts b/apps/website/src/hooks/use-parallax.ts
new file mode 100644
index 00000000..a12b976b
--- /dev/null
+++ b/apps/website/src/hooks/use-parallax.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+
+type ParalaxProps = {
+ initialLeft?: number
+ initialTop?: number
+ initialRight?: number
+ initialBottom?: number
+}
+
+const PARALLAX_SPEED = 4
+
+function useParalax(props?: ParalaxProps) {
+ const initialTop = props?.initialTop || 0
+ const initialBottom = props?.initialBottom || 0
+
+ const [top, setTop] = useState(initialTop)
+
+ const [bottom, setBottom] = useState(initialBottom)
+
+ useEffect(() => {
+ const handleScroll = () => {
+ const scrollY = window.scrollY
+
+ setTop(scrollY / PARALLAX_SPEED + initialTop)
+ setBottom(scrollY / PARALLAX_SPEED + initialBottom)
+ }
+ window.addEventListener('scroll', handleScroll, { passive: true })
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [initialBottom, initialTop])
+
+ return { top, bottom }
+}
+
+export { useParalax }
diff --git a/apps/website/src/layouts/app-layout.tsx b/apps/website/src/layouts/app-layout.tsx
index a97b3ba5..befd5964 100644
--- a/apps/website/src/layouts/app-layout.tsx
+++ b/apps/website/src/layouts/app-layout.tsx
@@ -1,100 +1,38 @@
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import { Button, Text } from '@status-im/components'
-import { DownloadIcon, ExternalIcon } from '@status-im/icons'
-import { cx } from 'class-variance-authority'
+import { Footer } from '@/components/footer/footer'
+import { FooterMobile } from '@/components/footer/footer-mobile'
+import { FloatingMenu } from '@/components/navigation/floating-menu'
+import { NavDesktop } from '@/components/navigation/nav-desktop'
+import { NavMobile } from '@/components/navigation/nav-mobile'
+import { Prefooter } from '@/components/pre-footer'
-import { Logo } from '@/components/logo'
-import { NavMenu } from '@/components/nav-menu'
-import { PageFooter } from '@/components/page-footer'
-import { LINKS } from '@/config/links'
+import type { ReactElement } from 'react'
-import { Link } from '../components/link'
+type AppLayoutProps = {
+ hasPreFooter?: boolean
+ children: ReactElement
+}
-import type { PageLayout } from 'next'
-
-export const AppLayout: PageLayout = page => {
+export const AppLayout: React.FC = ({
+ hasPreFooter = true,
+ children,
+}) => {
return (
<>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {Object.entries(LINKS).map(([name, links]) => (
-
-
-
- {name}
-
-
-
- {links.map(link => {
- const external = link.href.startsWith('http')
-
- return (
-
-
-
- {link.name}
-
- {external && (
-
- )}
-
-
- )
- })}
-
-
- ))}
-
-
-
-
- }
- >
- Sign up for early access
-
-
-
+
+
+
+
{/* ROUNDED WHITE BG */}
- {/*
{page}
*/}
- {page}
-
-
+
+ {/* TODO Check max-width to use */}
+
+ {children}
+
+
+ {hasPreFooter &&
}
+
+
)
diff --git a/apps/website/src/layouts/insights-layout.tsx b/apps/website/src/layouts/insights-layout.tsx
index 3fba19f9..be9193d6 100644
--- a/apps/website/src/layouts/insights-layout.tsx
+++ b/apps/website/src/layouts/insights-layout.tsx
@@ -1,7 +1,7 @@
import { SideBar } from '../components'
import { AppLayout } from './app-layout'
-import type { PageLayout } from 'next'
+import type { ReactNode } from 'react'
// Eventually this will be fetched from the API, at least the nested links
const MENU_LINKS = [
@@ -81,11 +81,17 @@ const MENU_LINKS = [
},
]
-export const InsightsLayout: PageLayout = page => {
- return AppLayout(
-
-
- {page}
-
+interface InsightsLayoutProps {
+ children: ReactNode
+}
+
+export const InsightsLayout: React.FC
= ({ children }) => {
+ return (
+
+
+
+ {children}
+
+
)
}
diff --git a/apps/website/src/pages/blog/[slug].tsx b/apps/website/src/pages/blog/[slug].tsx
index 20c99d3f..5732b894 100644
--- a/apps/website/src/pages/blog/[slug].tsx
+++ b/apps/website/src/pages/blog/[slug].tsx
@@ -248,6 +248,8 @@ const BlogDetailPage: Page = ({ post, relatedPosts }) => {
)
}
-BlogDetailPage.getLayout = AppLayout
+BlogDetailPage.getLayout = function getLayout(page) {
+ return {page}
+}
export default BlogDetailPage
diff --git a/apps/website/src/pages/blog/index.tsx b/apps/website/src/pages/blog/index.tsx
index 1db8a2cd..aa3ce4c9 100644
--- a/apps/website/src/pages/blog/index.tsx
+++ b/apps/website/src/pages/blog/index.tsx
@@ -222,6 +222,8 @@ export const PostCard = (props: PostCardProps) => {
)
}
-BlogPage.getLayout = AppLayout
+BlogPage.getLayout = function getLayout(page) {
+ return {page}
+}
export default BlogPage
diff --git a/apps/website/src/pages/features/wallet.tsx b/apps/website/src/pages/features/wallet.tsx
new file mode 100644
index 00000000..7ece4b26
--- /dev/null
+++ b/apps/website/src/pages/features/wallet.tsx
@@ -0,0 +1,124 @@
+import { Text } from '@status-im/components'
+import imageSection1 from 'public/assets/wallet/4.png'
+import imageSection2 from 'public/assets/wallet/5.png'
+import imageSection3 from 'public/assets/wallet/6.png'
+import imageSection4 from 'public/assets/wallet/7.png'
+import imageSection5 from 'public/assets/wallet/8.png'
+import cubeImage from 'public/assets/wallet/cube.png'
+import duckImage from 'public/assets/wallet/duck.png'
+import megaphone from 'public/assets/wallet/megaphone.png'
+import pizzaImage from 'public/assets/wallet/pizza.png'
+import skullImage from 'public/assets/wallet/skull.png'
+
+import { Section } from '@/components/cards'
+import {
+ ComparisionSection,
+ HandsSection,
+ HeroSection,
+ ParalaxCircle,
+ VideoSection,
+} from '@/components/wallet'
+import { AppLayout } from '@/layouts/app-layout'
+
+import type { Page } from 'next'
+
+const WalletPage: Page = () => {
+ return (
+
+
+
+
+
+
+
+ EIP-3770 format:
+
+
+ eth:
+ opt:
+ artb:
+ 0xAbc123...xyz789
+
+
+ }
+ />
+
-
+
+
Make the
@@ -23,7 +23,7 @@ const HomePage: Page = () => {
-
+
}>
Sign up for early access
@@ -80,7 +80,7 @@ type FeatureSectionProps = {
const FeatureSection = ({ title, description }: FeatureSectionProps) => {
return (
-
+
{title}
@@ -125,6 +125,8 @@ const FeatureGrid = () => {
)
}
-HomePage.getLayout = AppLayout
+HomePage.getLayout = function getLayout(page) {
+ return
{page}
+}
export default HomePage
diff --git a/apps/website/src/pages/insights/epics/[epic].tsx b/apps/website/src/pages/insights/epics/[epic].tsx
index f17567a2..4642e461 100644
--- a/apps/website/src/pages/insights/epics/[epic].tsx
+++ b/apps/website/src/pages/insights/epics/[epic].tsx
@@ -26,6 +26,8 @@ const EpicsDetailPage: Page = () => {
)
}
-EpicsDetailPage.getLayout = InsightsLayout
+EpicsDetailPage.getLayout = function getLayout(page) {
+ return
{page}
+}
export default EpicsDetailPage
diff --git a/apps/website/src/pages/insights/epics/index.tsx b/apps/website/src/pages/insights/epics/index.tsx
index c6aab954..7ddec7d5 100644
--- a/apps/website/src/pages/insights/epics/index.tsx
+++ b/apps/website/src/pages/insights/epics/index.tsx
@@ -59,12 +59,13 @@ const EpicsPage: Page = () => {
))}
-
>(
@@ -25,7 +31,7 @@ export function createIcon
>(
const Icon = forwardRef((props, ref) => {
const { size, color = '$neutral-100', ...rest } = props
const theme = useTheme()
- const token = theme[color]?.val
+ const token = isColorTokens(color) ? theme[color]?.val : color
return createElement(Component, {
ref,