+
diff --git a/apps/website/src/components/footer/action-card.tsx b/apps/website/src/components/footer/action-card.tsx
new file mode 100644
index 00000000..2d1c939a
--- /dev/null
+++ b/apps/website/src/components/footer/action-card.tsx
@@ -0,0 +1,29 @@
+import { Button, Text } from '@status-im/components'
+
+type Props = {
+ title: string
+ description: string
+ action: string
+}
+
+const ActionCard = (props: Props) => {
+ const { title, description, action } = props
+
+ return (
+ Status
-
-
-
- {/* todo: app stores banners/redirects */}
- {/* todo: eval following meta tags */}
-
-
-
-
-
-
- {imageUrl && }
-
-
-
- {/* */}
-
-
-
-
-
-
-
-
- {/* todo?: except communities; ask product */}
- {!index && }
- {/* todo?: entity QR */}
- {/* todo?: fallback OG */}
- {children}
-
- )
-}
-
-export { _Head as Head }
diff --git a/apps/website/src/components/link.tsx b/apps/website/src/components/link.tsx
index 51701a61..d8dff052 100644
--- a/apps/website/src/components/link.tsx
+++ b/apps/website/src/components/link.tsx
@@ -1,8 +1,8 @@
import NextLink from 'next/link'
-import type { ComponentProps } from 'react'
+import type { ComponentPropsWithRef } from 'react'
-export const Link = (props: ComponentProps) => {
+export const Link = (props: ComponentPropsWithRef) => {
const external =
typeof props.href === 'string'
? props.href.startsWith('http')
diff --git a/apps/website/src/components/logo.tsx b/apps/website/src/components/logo.tsx
index 5dbb1b4c..ca9d307f 100644
--- a/apps/website/src/components/logo.tsx
+++ b/apps/website/src/components/logo.tsx
@@ -2,21 +2,23 @@ import Image from 'next/image'
import { useRouter } from 'next/router'
import { match, P } from 'ts-pattern'
+import logoBlogSrc from '../../public/images/logo/blog.svg'
import logoSrc from '../../public/images/logo/default.svg'
import logoDevSrc from '../../public/images/logo/dev.svg'
import logoLearnSrc from '../../public/images/logo/learn.svg'
type Props = {
label?: boolean
+ isTopbarDesktop?: boolean
}
export const Logo = (props: Props) => {
- const { label = true } = props
+ const { label = true, isTopbarDesktop } = props
const { pathname } = useRouter()
return (
-
+
+ )
+}
+
+export { ActionCard }
diff --git a/apps/website/src/components/footer/components/dot.tsx b/apps/website/src/components/footer/components/dot.tsx
new file mode 100644
index 00000000..99da4e63
--- /dev/null
+++ b/apps/website/src/components/footer/components/dot.tsx
@@ -0,0 +1,13 @@
+export const Dot = () => (
+
+
+
+)
diff --git a/apps/website/src/components/footer/components/messari-icon.tsx b/apps/website/src/components/footer/components/messari-icon.tsx
new file mode 100644
index 00000000..10d768ce
--- /dev/null
+++ b/apps/website/src/components/footer/components/messari-icon.tsx
@@ -0,0 +1,31 @@
+export const MessariIcon = () => {
+ return (
+
+ )
+}
diff --git a/apps/website/src/components/footer/footer-mobile.tsx b/apps/website/src/components/footer/footer-mobile.tsx
new file mode 100644
index 00000000..4619758c
--- /dev/null
+++ b/apps/website/src/components/footer/footer-mobile.tsx
@@ -0,0 +1,77 @@
+import { Text } from '@status-im/components'
+
+import { SOCIALS } from '@/config/links'
+
+import { Logo } from '../logo'
+import { AccordionMenu } from '../navigation/accordion-menu'
+import { Dot } from './components/dot'
+import { MessariIcon } from './components/messari-icon'
+
+type Props = {
+ hasBorderTop?: boolean
+}
+
+export const FooterMobile = (props: Props) => {
+ const { hasBorderTop } = props
+
+ return (
+
+ )
+}
diff --git a/apps/website/src/components/footer/footer.tsx b/apps/website/src/components/footer/footer.tsx
new file mode 100644
index 00000000..e71bce08
--- /dev/null
+++ b/apps/website/src/components/footer/footer.tsx
@@ -0,0 +1,94 @@
+import { Text } from '@status-im/components'
+import { cva } from 'class-variance-authority'
+
+import { LINKS, SOCIALS } from '@/config/links'
+
+import { Logo } from '../logo'
+import { Dot } from './components/dot'
+import { MessariIcon } from './components/messari-icon'
+import { Section } from './section'
+
+type Props = {
+ hasBorderTop?: boolean
+}
+
+const section = cva(
+ [
+ 'border-neutral-80',
+ 'mb-6',
+ 'flex',
+ 'items-start',
+ 'border-dashed',
+ 'pl-6',
+ 'pt-6',
+ ],
+ {
+ variants: {
+ hasBorderTop: {
+ true: ['border-t'],
+ false: ['border-t-0'],
+ },
+ },
+ }
+)
+
+export const Footer = (props: Props) => {
+ const { hasBorderTop } = props
+
+ return (
+
+ )
+}
diff --git a/apps/website/src/components/footer/section.tsx b/apps/website/src/components/footer/section.tsx
new file mode 100644
index 00000000..403aa38f
--- /dev/null
+++ b/apps/website/src/components/footer/section.tsx
@@ -0,0 +1,79 @@
+import { Text } from '@status-im/components'
+import { cva } from 'class-variance-authority'
+
+import { Link } from '../link'
+
+import type { Links } from '@/config/links'
+
+type Props = {
+ title: string
+ links: Links
+ hasBorderLeft?: boolean
+ hasBorderTop?: boolean
+}
+
+const section = cva(
+ [
+ 'border-neutral-80',
+ 'relative',
+ 'grid',
+ 'gap-3',
+ 'border-dashed',
+ 'px-5',
+ 'pb-6',
+ 'pt-6',
+ 'lg:border-l',
+ 'lg:pb-0',
+ ],
+ {
+ variants: {
+ hasBorderTop: {
+ true: ['border-t'],
+ false: ['border-t-0'],
+ },
+ hasBorderLeft: {
+ true: ['border-l'],
+ false: ['border-l-0'],
+ },
+ },
+ }
+)
+
+const Section = (props: Props) => {
+ const { title, links, hasBorderLeft, hasBorderTop } = props
+
+ return (
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+ )
+}
+
+export { Section }
diff --git a/apps/website/src/components/head.tsx b/apps/website/src/components/head.tsx
deleted file mode 100644
index 8bb42724..00000000
--- a/apps/website/src/components/head.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Head from 'next/head'
-
-type Props = {
- index?: boolean
- children?: React.ReactElement
- imageUrl?: string
-}
-
-function _Head(props: Props) {
- const { index = true, children, imageUrl } = props
- return (
-
-
+
+
+ {title}
+
+
+ -
+ {links.map(link => (
+
-
+
+
+ {link.name} + + +
+ ))}
+
+
{match(pathname)
.with(
P.when(p => p.startsWith('/insights')),
@@ -28,7 +30,7 @@ export const Logo = (props: Props) => {
)
.with(
P.when(p => p.startsWith('/blog')),
- () => {
+ const [openLink, setOpenLink] = useState('')
+
+ const handleToggle = (value: string) => {
+ setOpenLink(value === openLink ? '' : value)
+ }
+
+ return (
+
@@ -58,7 +39,7 @@ export const NavMenu = () => {
className={cx([
'grid gap-3 pb-12 pl-[60px] pt-6',
'data-[state=open]:animate-in',
- 'data-[state=closed]:animate-out fade-out-20',
+ 'fade-out-20 data-[state=closed]:animate-out',
])}
>
{links.map(link => {
@@ -91,10 +72,12 @@ export const NavMenu = () => {
)
}
+
+export { FloatingDesktop }
diff --git a/apps/website/src/components/navigation/floating-menu.tsx b/apps/website/src/components/navigation/floating-menu.tsx
new file mode 100644
index 00000000..5fd4a8b4
--- /dev/null
+++ b/apps/website/src/components/navigation/floating-menu.tsx
@@ -0,0 +1,82 @@
+import { useRef, useState } from 'react'
+
+import { animated, useScroll } from '@react-spring/web'
+import { cx } from 'class-variance-authority'
+
+import { useLockScroll } from '@/hooks/use-lock-scroll'
+import { useOutsideClick } from '@/hooks/use-outside-click'
+
+import { FloatingDesktop } from './floating-desktop'
+import { FloatingMobile } from './floating-mobile'
+
+const FloatingMenu = (): JSX.Element => {
+ const [visible, setVisible] = useState(false)
+ const [open, setOpen] = useState(false)
+ const openRef = useRef(open)
+ openRef.current = open
+
+ // Using ref to prevent re-running of useEffect
+ const visibleRef = useRef(visible)
+ const scrollYRef = useRef(0)
+ visibleRef.current = visible
+
+ // Close menu on outside click
+ const ref = useOutsideClick(() => setOpen(false))
+ useLockScroll(open)
+
+ useScroll({
+ onChange: ({ value: { scrollYProgress } }) => {
+ const isMenuOpen = openRef.current
+ const isScrollingUp = scrollYProgress < scrollYRef.current
+ const detectionPoint = scrollYProgress > 0.005
+
+ if (detectionPoint && isScrollingUp) {
+ if (!visibleRef.current) {
+ setVisible(true)
+ }
+ } else {
+ if (!isMenuOpen) {
+ setVisible(false)
+ }
+ }
+ scrollYRef.current = scrollYProgress
+ },
+ default: {
+ immediate: true,
+ },
+ })
+
+ return (
+ <>
+
+
+
+
+
+ )
+}
+
+export { FloatingMenu }
diff --git a/apps/website/src/components/navigation/floating-mobile.tsx b/apps/website/src/components/navigation/floating-mobile.tsx
new file mode 100644
index 00000000..ac861943
--- /dev/null
+++ b/apps/website/src/components/navigation/floating-mobile.tsx
@@ -0,0 +1,61 @@
+import { Button, IconButton } from '@status-im/components'
+import { CloseIcon, DownloadIcon, MenuIcon } from '@status-im/icons'
+
+import { Link } from '../link'
+import { Logo } from '../logo'
+import { AccordionMenu } from './accordion-menu'
+
+type Props = {
+ open: boolean
+ setOpen: (open: boolean) => void
+}
+
+const FloatingMobile = (props: Props) => {
+ const { open, setOpen } = props
+ return (
+
+
+
+ )
+}
+
+export { NavDesktop }
diff --git a/apps/website/src/components/navigation/nav-mobile.tsx b/apps/website/src/components/navigation/nav-mobile.tsx
new file mode 100644
index 00000000..69729319
--- /dev/null
+++ b/apps/website/src/components/navigation/nav-mobile.tsx
@@ -0,0 +1,67 @@
+import { useState } from 'react'
+
+import { Button, IconButton } from '@status-im/components'
+import { CloseIcon, DownloadIcon, MenuIcon } from '@status-im/icons'
+
+import { Logo } from '@/components/logo'
+import { useLockScroll } from '@/hooks/use-lock-scroll'
+
+import { Link } from '../link'
+import { AccordionMenu } from './accordion-menu'
+
+const NavMobile = () => {
+ const [open, setOpen] = useState(false)
+ const screenHeight = typeof window !== 'undefined' ? window.innerHeight : 0
+
+ useLockScroll(open)
+ const handleToggle = () => {
+ setOpen(prevOpen => !prevOpen)
+ }
+
+ return (
+ = {
+ community: 'Join',
+ channel: 'View',
+ profile: 'Open',
+}
+
const INSTRUCTIONS_HEADING: Record = {
community: 'How to join this community:',
channel: 'How to join this channel:',
@@ -93,7 +99,7 @@ const JOIN_BUTTON_LABEL: Record = {
}
export function PreviewPage(props: PreviewPageProps) {
- const { type, decodedData, encodedData } = props
+ const { type, decodedData, encodedData, index } = props
const { asPath } = useRouter()
@@ -109,8 +115,10 @@ export function PreviewPage(props: PreviewPageProps) {
channelUuid: urlChannelUuid,
data: urlData,
errorCode: urlErrorCode,
+ isLoading: urlIsLoading,
} = useURLData(type, decodedData, encodedData)
+ const wakuQueryIsEnabled = Boolean(publicKey)
const {
data: wakuData,
isLoading,
@@ -119,7 +127,7 @@ export function PreviewPage(props: PreviewPageProps) {
} = useQuery({
refetchOnWindowFocus: false,
queryKey: [type],
- enabled: !!publicKey,
+ enabled: wakuQueryIsEnabled,
queryFn: async function ({ queryKey }): Promise {
const client = await getRequestClient()
@@ -179,7 +187,20 @@ export function PreviewPage(props: PreviewPageProps) {
},
})
- const loading = status === 'loading' || isLoading
+ const loading = getLoading()
+
+ function getLoading(): boolean {
+ if (urlIsLoading) {
+ return true
+ }
+
+ if (wakuQueryIsEnabled) {
+ return status === 'loading' || isLoading
+ }
+
+ return false
+ }
+
const data: Data | undefined = wakuData ?? urlData
const { avatarURL, bannerURL } = useMemo(() => {
@@ -201,9 +222,34 @@ export function PreviewPage(props: PreviewPageProps) {
return
+ {`${ACTION_VERB[type]} ${data.info.displayName} in Status`}
+
+
+
+
+ {/* */}
+
+
+ {!index && }
+
<>
{/* todo: theme; based on user system settings */}
- {/* todo: (system or both?) install banner */}
+ {Object.entries(LINKS).map(([name, links]) => (
+
+
+
+
+ ))}
+
+ )
+}
+
+export { AccordionMenu }
diff --git a/apps/website/src/components/nav-menu.tsx b/apps/website/src/components/navigation/floating-desktop.tsx
similarity index 67%
rename from apps/website/src/components/nav-menu.tsx
rename to apps/website/src/components/navigation/floating-desktop.tsx
index 8053df8a..ba3a7aa0 100644
--- a/apps/website/src/components/nav-menu.tsx
+++ b/apps/website/src/components/navigation/floating-desktop.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useRef, useState } from 'react'
-
import * as NavigationMenu from '@radix-ui/react-navigation-menu'
import { Button, Text } from '@status-im/components'
import { DownloadIcon, ExternalIcon } from '@status-im/icons'
@@ -7,39 +5,22 @@ import { cx } from 'class-variance-authority'
import { LINKS } from '@/config/links'
-import { Link } from './link'
-import { Logo } from './logo'
+import { Link } from '../link'
+import { Logo } from '../logo'
-export const NavMenu = () => {
- const [visible, setVisible] = useState(false)
+type Props = {
+ visible: boolean
+}
- // Using ref to prevent re-running of useEffect
- const visibleRef = useRef(visible)
- visibleRef.current = visible
- useEffect(() => {
- const handleScroll = () => {
- if (window.scrollY > 60) {
- visibleRef.current === false && setVisible(true)
- } else {
- visibleRef.current === true && setVisible(false)
- }
- }
-
- handleScroll()
-
- window.addEventListener('scroll', handleScroll, { passive: true })
- return () => {
- window.removeEventListener('scroll', handleScroll)
- }
- }, [])
+const FloatingDesktop = (props: Props) => {
+ const { visible } = props
return (
+
+
+ {name}
+
+
+
+
+
+
+
+
+ {links.map((link, index) => {
+ const external = link.href.startsWith('http')
+ return (
+
+
+
+
+ {link.name}
+
+
+ {external && (
+
+ )
+ })}
+
+
+ )
+}
+
+export { FloatingMobile }
diff --git a/apps/website/src/components/navigation/nav-desktop.tsx b/apps/website/src/components/navigation/nav-desktop.tsx
new file mode 100644
index 00000000..6773dd85
--- /dev/null
+++ b/apps/website/src/components/navigation/nav-desktop.tsx
@@ -0,0 +1,88 @@
+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 { Logo } from '@/components/logo'
+import { LINKS } from '@/config/links'
+
+import { Link } from '../link'
+
+const NavDesktop = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ }
+ fullWidth
+ >
+ Sign up for early access
+
+
+
+
+
+
+
+
+
+
+ {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
+
+
+
+
+ )
+}
+
+export { NavMobile }
diff --git a/apps/website/src/components/page-footer.tsx b/apps/website/src/components/page-footer.tsx
deleted file mode 100644
index 7b8507f2..00000000
--- a/apps/website/src/components/page-footer.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Button, Text } from '@status-im/components'
-import Link from 'next/link'
-
-import { LINKS, SOCIALS } from '@/config/links'
-
-import { Logo } from './logo'
-
-import type { Links } from '@/config/links'
-
-export const PageFooter = () => {
- return (
-
- )
-}
-
-type SectionProps = {
- title: string
- links: Links
-}
-
-const Section = (props: SectionProps) => {
- const { title, links } = props
-
- return (
-
+
+
+
+
+
+
+
+
+ }
+ fullWidth
+ >
+ Sign up for early access
+
+
+
-
- )
-}
-
-type ActionCardProps = {
- title: string
- description: string
- action: string
-}
-
-const ActionCard = (props: ActionCardProps) => {
- const { title, description, action } = props
-
- return (
-
-
- {title}
-
-
- -
- {links.map(link => (
-
-
-
-
- {link.name} - - -
- ))}
-
-
- )
-}
diff --git a/apps/website/src/components/pre-footer.tsx b/apps/website/src/components/pre-footer.tsx
new file mode 100644
index 00000000..9b132407
--- /dev/null
+++ b/apps/website/src/components/pre-footer.tsx
@@ -0,0 +1,48 @@
+import { Button, Text } from '@status-im/components'
+import { DownloadIcon } from '@status-im/icons'
+import Image from 'next/image'
+
+import logoSrc from '../../public/images/logo/default.svg'
+import { ComingSoon } from './coming-soon'
+
+const Prefooter = () => {
+ return (
+
-
- {title}
-
-
- {description}
-
-
-
-
+
+ )
+}
+
+export { Prefooter }
diff --git a/apps/website/src/components/preview-page.tsx b/apps/website/src/components/preview-page.tsx
index 2ca361d1..624734fb 100644
--- a/apps/website/src/components/preview-page.tsx
+++ b/apps/website/src/components/preview-page.tsx
@@ -21,9 +21,9 @@ import {
QrCodeIcon,
} from '@status-im/icons'
import { useQuery } from '@tanstack/react-query'
+import Head from 'next/head'
import { useRouter } from 'next/router'
-import { Head } from '@/components/head'
import { ERROR_CODES } from '@/consts/error-codes'
import { useURLData } from '@/hooks/use-url-data'
import { getRequestClient } from '@/lib/request-client'
@@ -80,6 +80,12 @@ export type Data =
info: UserInfo
}
+const ACTION_VERB: Record
+
+
+
+ Use the open source, decentralized crypto communication super app.
+
+
+
+ + Be unstoppable +
+ +
+
+
+ }
+ variant="yellow"
+ >
+ Sign up for early access
+
+
+
+
+ Betas for Mac, Windows, Linux
+ Alphas for iOS & Android +
+
+ + Alphas for iOS & Android +
+
+
@@ -311,16 +357,39 @@ export function PreviewPage(props: PreviewPageProps) {
return (
<>
-
+
+
-
-
+
+
{bannerURL && (
![]()
-
+
-
{INSTRUCTIONS_HEADING[type]}
@@ -460,7 +529,7 @@ export function PreviewPage(props: PreviewPageProps) {
+
Have Status already?
diff --git a/apps/website/src/components/qr-dialog.tsx b/apps/website/src/components/qr-dialog.tsx
index 4f16e77c..4a205ca1 100644
--- a/apps/website/src/components/qr-dialog.tsx
+++ b/apps/website/src/components/qr-dialog.tsx
@@ -26,8 +26,8 @@ export const QrDialog = (props: Props) => {
-
-
+
+
diff --git a/apps/website/src/components/side-bar/side-bar.tsx b/apps/website/src/components/side-bar/side-bar.tsx
index 0cdad8f8..dfc8ec35 100644
--- a/apps/website/src/components/side-bar/side-bar.tsx
+++ b/apps/website/src/components/side-bar/side-bar.tsx
@@ -36,8 +36,8 @@ const SideBar = (props: Props) => {
}, [defaultLabel])
return (
-
-