+ {match(pathname)
+ .with(
+ P.when(p => p.startsWith('/insights')),
+ () =>
+ )
+}
+
+export type { Props as LogoProps }
diff --git a/apps/website/src/components/nav-menu.tsx b/apps/website/src/components/nav-menu.tsx
new file mode 100644
index 00000000..328a58cd
--- /dev/null
+++ b/apps/website/src/components/nav-menu.tsx
@@ -0,0 +1,100 @@
+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'
+import { cx } from 'class-variance-authority'
+
+import { LINKS } from '@/config/links'
+
+import { Link } from './link'
+import { Logo } from './logo'
+
+export const NavMenu = () => {
+ const [visible, setVisible] = useState(false)
+
+ // 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)
+ }
+ }, [])
+
+ return (
+
+
+ {Object.entries(LINKS).map(([name, links]) => (
+
+
+
+ {name}
+
+
+
+
+ {links.map(link => {
+ const external = link.href.startsWith('http')
+ return (
+
+
+
+ {link.name}
+
+ {external && (
+
+ )
+ })}
+
+
+ ))}
+
+
+ }>
+ Get Status
+
+
+
+
+
+ )
+}
+
+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/config/links.ts b/apps/website/src/config/links.ts
new file mode 100644
index 00000000..10b16bee
--- /dev/null
+++ b/apps/website/src/config/links.ts
@@ -0,0 +1,67 @@
+export const LINKS = {
+ Features: [
+ { name: 'Communities', href: '/features/communities' },
+ { name: 'Messenger', href: '/features/messenger' },
+ { name: 'Wallet', href: '/features/wallet' },
+ { name: 'Browser', href: '/features/browser' },
+ ],
+ Platforms: [
+ { name: 'Mobile', href: '/platforms/mobile' },
+ { name: 'Desktop', href: '/platforms/desktop' },
+ { name: 'Web', href: '/platforms/web' },
+ ],
+ About: [
+ { name: 'Mission', href: '/' },
+ { name: 'Principles', href: '/' },
+ { name: 'Team', href: '/' },
+ { name: 'Partners', href: '/' },
+ { name: 'Press Kit', href: '/' },
+ ],
+ Learn: [
+ { name: 'Getting Started', href: '/learn/' },
+ { name: 'Using Status', href: '/learn/' },
+ { name: 'Communities', href: '/learn/' },
+ { name: 'Wallet', href: '/learn/' },
+ { name: 'Profile', href: '/learn/' },
+ ],
+ Collaborate: [
+ { name: 'Discuss', href: '/' },
+ { name: 'Feature upvote', href: '/' },
+ { name: 'Blog', href: '/blog' },
+ { name: 'Translations', href: '/' },
+ { name: 'Community groups', href: '/' },
+ { name: 'Jobs', href: '/' },
+ ],
+ Developers: [
+ { name: 'Repos', href: 'https://github.com/status-im' },
+ { name: 'Insights', href: '/insights' },
+ { name: 'Integrations', href: '/' },
+ ],
+ SNT: [
+ { name: 'Token', href: '/' },
+ { name: 'Governance', href: '/' },
+ { name: 'Curate', href: '/' },
+ { name: 'Exchanges', href: '/' },
+ ],
+} as const
+
+export const SOCIALS = {
+ status: {
+ name: 'Status',
+ href: '
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+
+
+ {/* ROUNDED WHITE BG */}
+ {/*
+
+ )
+}
diff --git a/apps/website/src/layouts/insights-layout.tsx b/apps/website/src/layouts/insights-layout.tsx
index e02fd459..e11faf80 100644
--- a/apps/website/src/layouts/insights-layout.tsx
+++ b/apps/website/src/layouts/insights-layout.tsx
@@ -1,33 +1,24 @@
-import { Button, Text } from '@status-im/components'
-import { LockedIcon, StatusIcon } from '@status-im/icons'
-import Link from 'next/link'
+import { Text } from '@status-im/components'
import { useRouter } from 'next/router'
+import { Link } from '@/components/link'
+
+import { AppLayout } from './app-layout'
+
import type { PageLayout } from 'next'
import type { LinkProps } from 'next/link'
export const InsightsLayout: PageLayout = page => {
- 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
+
+
+ {page}
*/}
+ {page}
+
+
-
-
-
- }>
- Log in
-
-
- {page}
-
+ return AppLayout(
+
+
+ {page}
+
)
}
@@ -38,13 +29,12 @@ const NavLink = (props: LinkProps & { children: string }) => {
const active = asPath === props.href
return (
-
-
+
{getLayout(
)
diff --git a/apps/website/src/pages/_document.tsx b/apps/website/src/pages/_document.tsx
index df9bd6c0..d352f7e2 100644
--- a/apps/website/src/pages/_document.tsx
+++ b/apps/website/src/pages/_document.tsx
@@ -29,6 +29,7 @@ export default class Document extends NextDocument {
id="tamagui"
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
/>
+
diff --git a/apps/website/src/pages/blog/[slug].tsx b/apps/website/src/pages/blog/[slug].tsx
new file mode 100644
index 00000000..5f2c4a70
--- /dev/null
+++ b/apps/website/src/pages/blog/[slug].tsx
@@ -0,0 +1,15 @@
+import { AppLayout } from '@/layouts/app-layout'
+
+import type { Page } from 'next'
+
+const BlogDetailPage: Page = () => {
+ return (
+
+
+ )
+}
+
+BlogPage.getLayout = AppLayout
+
+export default BlogPage
diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
new file mode 100644
index 00000000..d5bafa64
--- /dev/null
+++ b/apps/website/src/pages/index.tsx
@@ -0,0 +1,130 @@
+import { Button, Text } from '@status-im/components'
+import { DownloadIcon, PlayIcon } from '@status-im/icons'
+
+import { AppLayout } from '@/layouts/app-layout'
+
+import type { Page } from 'next'
+
+const HomePage: Page = () => {
+ return (
+ <>
+
+
+ )
+}
+
+const FeatureGrid = () => {
+ return (
+
-
+
+ )
+}
+
+BlogDetailPage.getLayout = AppLayout
+
+export default BlogDetailPage
diff --git a/apps/website/src/pages/blog/index.tsx b/apps/website/src/pages/blog/index.tsx
new file mode 100644
index 00000000..08f43a6d
--- /dev/null
+++ b/apps/website/src/pages/blog/index.tsx
@@ -0,0 +1,68 @@
+import { Button, Shadow, Tag, Text } from '@status-im/components'
+
+import { AppLayout } from '@/layouts/app-layout'
+
+import type { Page } from 'next'
+
+const BlogPage: Page = () => {
+ return (
+ Blog
+
+
+ )
+}
+
+const PostCard = () => {
+ return (
+
+
+
+ Long form articles, thoughts, and ideas.
+
+
+ Blog
+
+
+
+
+ {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(v => (
+
+
+
+
+
+
+ Long form articles, thoughts, and ideas.
+
+
+
+
+
+
+ Status
+
+
+ on Jul 12, 2022
+
+
+
+ {/* eslint-disable-next-line jsx-a11y/alt-text */}
+ 
+
+
+
+
+
+
+
+
+
+
+ Make the
+
+
+
+ An open source, decentralized communication super app
+
+
+
+
+ Make the
+
+ jump to web3
+
+
+
+
+ Avaliable for Mac, Windows, Linux, iOS & Android
+
+
+
+ }>
+ Get Status
+
+ }>
+ Watch Video
+
+
+
+
+ {"Don't give Discord and Telegram power over your community."}
+
+
+
+ + Own a community? Time to take back control! +
+
+
+
+ )
+}
+
+type FeatureSectionProps = {
+ title: string
+ description: string
+}
+
+const FeatureSection = ({ title, description }: FeatureSectionProps) => {
+ return (
+
+
+
+ + {title} +
+ +
+ {description}
+
+ Learn More
+
+
+
+
+ )
+}
+
+HomePage.getLayout = AppLayout
+
+export default HomePage
diff --git a/apps/website/src/pages/insights/repos.tsx b/apps/website/src/pages/insights/repos.tsx
index eb320f58..3c34f36a 100644
--- a/apps/website/src/pages/insights/repos.tsx
+++ b/apps/website/src/pages/insights/repos.tsx
@@ -1,6 +1,6 @@
import { Text } from '@status-im/components'
-import Link from 'next/link'
+import { Link } from '@/components/link'
import { InsightsLayout } from '@/layouts/insights-layout'
import type { Page } from 'next'
@@ -53,14 +53,12 @@ const ReposPage: Page = () => {
+
+ Title
+
+
+
+
+ Title
+
+
+
+
+ Title
+
+
+
+
+ Title
+
+
+
+
{repos.map(repo => (
{repo.name}
diff --git a/apps/website/src/pages/learn/[slug].tsx b/apps/website/src/pages/learn/[slug].tsx
new file mode 100644
index 00000000..5f2c4a70
--- /dev/null
+++ b/apps/website/src/pages/learn/[slug].tsx
@@ -0,0 +1,15 @@
+import { AppLayout } from '@/layouts/app-layout'
+
+import type { Page } from 'next'
+
+const BlogDetailPage: Page = () => {
+ return (
+
+
+ )
+}
+
+BlogDetailPage.getLayout = AppLayout
+
+export default BlogDetailPage
diff --git a/apps/website/src/pages/learn/index.tsx b/apps/website/src/pages/learn/index.tsx
new file mode 100644
index 00000000..9764ad64
--- /dev/null
+++ b/apps/website/src/pages/learn/index.tsx
@@ -0,0 +1,15 @@
+import { AppLayout } from '@/layouts/app-layout'
+
+import type { Page } from 'next'
+
+const LearnPage: Page = () => {
+ return (
+ Blog
+
+
+ )
+}
+
+LearnPage.getLayout = AppLayout
+
+export default LearnPage
diff --git a/apps/website/src/styles/app.css b/apps/website/src/styles/app.css
deleted file mode 100644
index 3ec312a6..00000000
--- a/apps/website/src/styles/app.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html,
-body,
-#__next {
- height: 100%;
- overscroll-behavior: none;
- user-select: none;
- color: #000;
-}
-
-*::selection {
- color: #fff;
- background: hsla(229, 71%, 57%, 1);
-}
-
-#app {
- position: relative;
- isolation: isolate;
- height: 100%;
-}
diff --git a/apps/website/src/styles/reset.css b/apps/website/src/styles/global.css
similarity index 84%
rename from apps/website/src/styles/reset.css
rename to apps/website/src/styles/global.css
index a9bb35ba..5e825901 100644
--- a/apps/website/src/styles/reset.css
+++ b/apps/website/src/styles/global.css
@@ -1,3 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ body {
+ @apply !bg-neutral-100;
+ }
+}
+
/*
1. Use a more-intuitive box-sizing model.
*/
@@ -8,12 +18,7 @@
}
:root {
- font-family: var(--font-sans);
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
-
- color-scheme: light dark;
+ /* color-scheme: light dark; */
/* color: rgba(255, 255, 255, 0.87); */
/* background-color: #fff; */
@@ -35,12 +40,16 @@
3. Allow percentage-based heights in the application
*/
html,
-body {
+body,
+#__next,
+#app {
width: 100vw;
- min-height: 100%;
+ min-height: 100vh;
/* overflow: hidden; */
overscroll-behavior-y: none; /* not working on Safari */
+ user-select: none;
}
+
/*
Typographic tweaks!
4. Add accessible line-height
@@ -52,6 +61,7 @@ body {
padding: 0;
-webkit-overflow-scrolling: touch;
}
+
/*
6. Improve media defaults
*/
@@ -63,6 +73,7 @@ svg {
display: block;
max-width: 100%;
}
+
/*
7. Remove built-in form typography styles
*/
@@ -73,6 +84,7 @@ select {
font: inherit;
all: unset;
}
+
/*
8. Avoid text overflows
*/
@@ -88,7 +100,6 @@ h6 {
/*
9. Create a root stacking context
*/
-#root,
#__next {
isolation: isolate;
}
diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
index 41cb12f4..804c8a8e 100644
--- a/apps/website/tailwind.config.js
+++ b/apps/website/tailwind.config.js
@@ -1,5 +1,8 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { fontFamily } = require('tailwindcss/defaultTheme')
const colors = require('@status-im/colors')
+const plugin = require('tailwindcss/plugin')
/** @type {import('tailwindcss').Config} */
module.exports = {
@@ -9,20 +12,51 @@ module.exports = {
],
theme: {
fontFamily: {
- sans: ['var(--font-inter)'],
+ sans: ['var(--font-inter)', ...fontFamily.sans],
},
colors,
- // use