Skip to content

Commit 456876e

Browse files
jkbktljkbktl
authored
chore: update hero (#1065)
* update hero * fix news tag * fix release article * fix tag color, build * fix spacing * fix spacing * Create changeset for hero update Add changeset for hero update with patch status. * address feedback
1 parent 0d2476e commit 456876e

File tree

5 files changed

+129
-88
lines changed

5 files changed

+129
-88
lines changed

‎.changeset/dry-zebras-decide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"status.app": patch
3+
---
4+
5+
update hero

‎apps/status.app/src/app/(website)/_components/news-tag.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { ChevronRightIcon } from '@status-im/icons/16'
2+
3+
import { Link } from '~components/link'
4+
5+
import type { PostOrPage } from '@tryghost/content-api'
6+
7+
type Props = {
8+
post: PostOrPage
9+
}
10+
11+
export function NewsTag({ post }: Props) {
12+
return (
13+
<Link
14+
href={`/blog/${post.slug}`}
15+
className="inline-flex h-8 max-w-[320px] select-none items-center gap-2 md:max-w-[425px]"
16+
>
17+
<span
18+
className="inline-flex h-6 shrink-0 items-center rounded-12 px-2 text-11 font-semibold text-white-100"
19+
style={{
20+
background:
21+
'linear-gradient(78deg, #2A799B -30%, #F6B03C 8%, #FF33A3 98%)',
22+
}}
23+
>
24+
NEW
25+
</span>
26+
<span className="line-clamp-1 min-w-0 truncate text-13 font-medium text-white-100">
27+
{post.title}
28+
</span>
29+
<ChevronRightIcon className="shrink-0 text-white-40" />
30+
</Link>
31+
)
32+
}

‎apps/status.app/src/app/(website)/_lib/ghost/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { clientEnv } from '~/config/env.client.mjs'
22

33
import { GhostContentAPI } from './client'
44

5+
import type { PostOrPage } from '@tryghost/content-api'
6+
57
/** @see https://ghost.org/docs/content-api# */
68
const ghost = GhostContentAPI({
79
url: clientEnv.NEXT_PUBLIC_GHOST_API_URL,
@@ -60,6 +62,18 @@ export const getPosts = async (params: Params = {}) => {
6062
}
6163
}
6264

65+
const RELEASE_TITLE_PATTERN = /\bv\d+\.\d+/
66+
67+
export function findLatestReleasePost(posts: PostOrPage[]): PostOrPage | null {
68+
if (posts.length === 0) return null
69+
70+
const releasePost = posts.find(
71+
post => post.title && RELEASE_TITLE_PATTERN.test(post.title)
72+
)
73+
74+
return releasePost ?? null
75+
}
76+
6377
export const getPostBySlug = async (slug: string) => {
6478
try {
6579
const post = await ghost.posts.read(

‎apps/status.app/src/app/(website)/page.tsx‎

Lines changed: 70 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Button, Text } from '@status-im/components'
2+
import { ExternalIcon } from '@status-im/icons/20'
23
import { cx } from 'class-variance-authority'
34

45
import { ROUTES } from '~/config/routes'
56
import { jsonLD, JSONLDScript } from '~/utils/json-ld'
67
import { Image, Video } from '~components/assets'
78
import { Body } from '~components/body'
89
import { ColorTheme } from '~website/_components/color-theme'
9-
import { getPosts } from '~website/_lib/ghost'
10+
import { findLatestReleasePost, getPosts } from '~website/_lib/ghost'
1011
import { PostGrid } from '~website/blog/_components/post-grid'
1112

1213
import { CopyrightSymbol } from './_components/copyright-symbol'
@@ -17,130 +18,111 @@ import { DownloadMobileButton } from './_components/download-mobile-button'
1718
import { FeatureList } from './_components/feature-list'
1819
import { FeatureTag } from './_components/feature-tag'
1920
import { HandsSection } from './_components/hands-section'
21+
import { NewsTag } from './_components/news-tag'
2022
import { ParallaxCircle } from './_components/parallax-circle'
2123

2224
import type { FeatureListProps } from './_components/feature-list'
2325

2426
export const revalidate = 3600 // 1 hour
2527

2628
export default async function HomePage() {
27-
const { posts } = await getPosts({ limit: 3 })
29+
const { posts: allPosts } = await getPosts({ limit: 10 })
30+
const releaseResult = findLatestReleasePost(allPosts)
31+
const posts = allPosts.slice(0, 3)
2832

2933
const organizationSchema = jsonLD.organization({
3034
description:
31-
'The open-source, decentralised wallet and messenger. Make the jump to web3.',
35+
'Private, secure by design. Transact, Message, Browse on your Terms.',
3236
})
3337

3438
const websiteSchema = jsonLD.website({
3539
description:
36-
'The open-source, decentralised wallet and messenger. Make the jump to web3.',
40+
'Private, secure by design. Transact, Message, Browse on your Terms.',
3741
})
3842

3943
return (
4044
<>
4145
<JSONLDScript schema={[organizationSchema, websiteSchema]} />
42-
<div className="relative flex w-full justify-center">
43-
<Image
44-
id="Non Beta Release/Illustrations/hero-1:930:1424"
45-
alt=""
46-
aria-hidden
47-
width={465}
48-
height={712}
49-
className="absolute top-0 z-10 hidden xl:left-[-150px] xl:block 2xl:left-[-75px] 3xl:left-0"
50-
priority
51-
/>
52-
<Image
53-
id="Non Beta Release/Illustrations/hero-2:950:1424"
54-
alt=""
55-
aria-hidden
56-
width={475}
57-
height={712}
58-
className="absolute top-0 z-10 hidden xl:right-[-150px] xl:block 2xl:right-[-75px] 3xl:right-0"
59-
priority
60-
/>
61-
{/* HERO */}
62-
<div
63-
data-theme="dark"
64-
className="flex flex-col items-center bg-neutral-100 px-5 pb-[386px] pt-16 lg:pt-44 xl:pb-24"
65-
>
66-
<div className="relative z-20 mb-6 grid max-w-[582px] place-items-center text-center lg:mb-8">
67-
{/* {latestPost && (
68-
<Link
69-
href={`/blog/${latestPost.slug}`}
70-
className="mb-4 inline-flex h-8 select-none items-center rounded-[56px] border border-white-10 bg-white-5 pl-2 pr-[6px]"
71-
>
72-
<p className="line-clamp-1 text-left text-15 font-medium text-white-100">
73-
{latestPost.title}
74-
</p>
75-
<ChevronRightIcon className="ml-[2px] text-white-40" />
76-
</Link>
77-
)} */}
78-
79-
<h1 className="mb-4 text-48 font-bold text-white-100 lg:mb-6 lg:text-88">
80-
Make the
46+
{/* HERO */}
47+
<div
48+
data-theme="dark"
49+
className="relative w-full overflow-x-clip bg-neutral-100 pb-8 pt-16 lg:pb-16 lg:pt-24"
50+
>
51+
<div className="container mx-auto grid grid-cols-1 gap-8 px-5 xl:grid-cols-2 xl:gap-0">
52+
<div className="relative z-10 mx-auto flex max-w-[636px] flex-col items-center text-center xl:mx-0 xl:min-w-[640px] xl:items-start xl:text-left">
53+
<h1 className="mb-4 text-48 font-bold text-white-100 lg:mb-10 lg:text-88">
54+
Private, secure
8155
<br />
82-
jump to web3
56+
by design
8357
</h1>
8458

85-
<p className="text-27 text-white-100">
86-
Use the open-source, decentralised wallet and messenger.
59+
<p className="mb-6 max-w-[320px] text-19 font-medium text-white-100 lg:mb-8 lg:max-w-[600px] lg:text-27 lg:font-regular">
60+
Transact, Message, Browse on your Terms ...integrated into one
61+
powerful super app
8762
</p>
88-
</div>
8963

90-
<div className="relative z-20 inline-flex w-[237px] flex-col items-center gap-6 text-center md:w-full">
91-
<div
92-
data-theme="dark"
93-
className={cx(
94-
'hidden w-fit flex-row items-stretch gap-2 rounded-20 border border-dashed border-neutral-80 p-2',
95-
'md:w-fit md:flex-row md:items-center',
96-
'ios:flex android:flex unknown:flex xl:unknown:hidden'
97-
)}
98-
>
99-
<DownloadDesktopButton variant="primary" show="all" />
100-
<DownloadMobileButton variant="outline" />
64+
<div className="mb-6 flex max-w-full flex-col items-center gap-4 lg:mb-8 xl:items-start">
65+
<div
66+
data-theme="dark"
67+
className={cx(
68+
'hidden max-w-full flex-row flex-wrap items-stretch justify-center gap-2 rounded-20 border border-dashed border-neutral-80 p-2',
69+
'sm:w-fit sm:flex-nowrap sm:justify-start',
70+
'ios:flex android:flex unknown:flex xl:unknown:hidden'
71+
)}
72+
>
73+
<DownloadDesktopButton variant="outline" show="all" />
74+
<DownloadMobileButton variant="primary" />
75+
</div>
76+
<div
77+
data-theme="dark"
78+
className={cx(
79+
'hidden max-w-full flex-row flex-wrap items-stretch justify-center gap-2 rounded-20 border border-dashed border-neutral-80 p-2',
80+
'sm:w-fit sm:flex-nowrap sm:justify-start',
81+
'macos:flex windows:flex linux:flex xl:unknown:flex'
82+
)}
83+
>
84+
<DownloadDesktopButton variant="primary" show="all" />
85+
<DownloadMobileButton variant="outline" />
86+
</div>
10187
</div>
102-
</div>
103-
<div
104-
data-theme="dark"
105-
className={cx(
106-
'hidden w-fit flex-row items-stretch gap-2 rounded-20 border border-dashed border-neutral-80 p-2',
107-
'md:w-fit md:flex-row md:items-center',
108-
'macos:flex windows:flex linux:flex xl:unknown:flex'
109-
)}
110-
>
111-
<DownloadDesktopButton variant="primary" show="all" />
112-
<DownloadMobileButton variant="outline" />
113-
</div>
114-
<div
115-
data-theme="dark"
116-
className="mt-6 flex max-w-[572px] flex-row items-center gap-4 rounded-16 border border-solid border-white-10 bg-white-5 p-[6px] pl-[12px] text-left lg:flex-row lg:gap-10"
117-
>
118-
<div className="flex text-left">
119-
<p className="text-15 font-400 text-white-100">
88+
89+
<div className="mb-9 flex max-w-full flex-row items-center gap-3 text-left sm:max-w-[572px] lg:mb-20">
90+
<p className="text-13 font-medium text-white-100">
12091
Still on the Status Legacy mobile app? Migrate now.
12192
</p>
122-
</div>
123-
<div className="flex shrink-0 items-center">
12493
<Button
12594
size="32"
126-
variant="outline"
95+
variant="darkGrey"
12796
href="https://status.app/blog/migrate-from-status-legacy-to-unified-status-mobile-app"
12897
target="_blank"
12998
rel="noopener noreferrer"
99+
iconAfter={<ExternalIcon className="text-white-100" />}
130100
>
131101
Learn more
132102
</Button>
133103
</div>
104+
105+
{releaseResult && <NewsTag post={releaseResult} />}
106+
</div>
107+
108+
<div className="relative hidden xl:block">
109+
<Image
110+
id="Homepage/Hero/device-mockups:2128:1292"
111+
alt="Status app showing wallet and messenger on devices"
112+
width={2128}
113+
height={1292}
114+
className="absolute left-0 top-1/2 z-20 ml-[18%] w-[170%] max-w-none translate-y-[-36%]"
115+
/>
116+
</div>
117+
<div className="relative mb-[-80px] xl:hidden">
118+
<Image
119+
id="Homepage/Hero/device-mockups-mobile:1267:770"
120+
alt="Status app showing wallet and messenger on devices"
121+
width={1267}
122+
height={770}
123+
className="relative z-20 w-[130%] max-w-none"
124+
/>
134125
</div>
135-
<Image
136-
id="Non Beta Release/Illustrations/Hero_Non_Beta_Release_Mobile_Long-optimized:1470:813"
137-
alt=""
138-
aria-hidden
139-
width={735}
140-
height={406}
141-
className="absolute bottom-[-200px] left-[-70px] block max-w-[735px] -translate-y-40 md:left-1/2 md:-translate-x-1/2 xl:hidden"
142-
priority
143-
/>
144126
</div>
145127
</div>
146128

‎apps/status.app/src/app/_components/assets/types.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
export type ImageType =
2+
| {
3+
id: 'Homepage/Hero/device-mockups-mobile:1267:770'
4+
alt: 'Status app showing wallet and messenger on devices'
5+
}
6+
| {
7+
id: 'Homepage/Hero/device-mockups:2128:1292'
8+
alt: 'Status app showing wallet and messenger on devices'
9+
}
210
| {
311
id: 'Platforms/Screens/Extension Screens/Connector_04:1102:1012'
412
alt: ''

0 commit comments

Comments
 (0)