Skip to content

Commit 9501d95

Browse files
WhiteMindsWhiteMinds
committed
feat: replace the static images in the homepage features section with Spline
1 parent 276f7d7 commit 9501d95

File tree

8 files changed

+42
-16
lines changed

8 files changed

+42
-16
lines changed

‎packages/magickbase/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"dependencies": {
1212
"@radix-ui/react-dialog": "1.0.4",
1313
"@splinetool/react-spline": "2.2.6",
14-
"@splinetool/runtime": "0.9.490",
14+
"@splinetool/runtime": "0.9.516",
1515
"@types/node": "20.8.6",
1616
"@types/react": "18.2.28",
1717
"@types/react-dom": "18.2.13",

‎packages/neuron/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"@radix-ui/react-dropdown-menu": "^2.0.5",
2222
"@radix-ui/react-popover": "^1.0.6",
2323
"@radix-ui/react-tooltip": "^1.0.6",
24+
"@splinetool/react-spline": "^2.2.6",
25+
"@splinetool/runtime": "^0.9.516",
2426
"@tanstack/react-query": "^4.29.12",
2527
"@trpc/client": "^10.28.2",
2628
"@trpc/next": "^10.28.2",

‎packages/neuron/src/pages/home/easy.png

-691 KB
Binary file not shown.

‎packages/neuron/src/pages/home/index.module.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,13 @@
152152
align-items: center;
153153
justify-content: space-between;
154154

155+
.spline {
156+
width: 400px;
157+
height: 400px;
158+
}
159+
155160
&:nth-child(even) {
156-
> img {
161+
.spline {
157162
order: 2;
158163
}
159164
}
@@ -180,7 +185,7 @@
180185
flex-direction: column;
181186
gap: 24px;
182187

183-
> img {
188+
.spline {
184189
order: 2;
185190
max-width: 300px;
186191
height: auto;

‎packages/neuron/src/pages/home/index.page.tsx

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import { GetStaticProps, type NextPage } from 'next'
22
import { Trans, useTranslation } from 'next-i18next'
33
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
44
import Image, { StaticImageData } from 'next/image'
5-
import { ComponentProps, FC, PropsWithChildren, useEffect, useMemo, useState } from 'react'
5+
import { ComponentProps, FC, PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react'
66
import clsx from 'clsx'
77
import Link from 'next/link'
88
import { UAParser } from 'ua-parser-js'
9+
import Spline from '@splinetool/react-spline'
10+
import { Application } from '@splinetool/runtime'
911
import { Page } from '../../components/Page'
1012
import styles from './index.module.scss'
1113
import TopShadow from './top-shadow.svg'
@@ -14,9 +16,6 @@ import IconOval from './oval.svg'
1416
import IconGithub from './github.svg'
1517
import ImgNeuronOverviewEN from './neuron-overview-en.png'
1618
import ImgNeuronOverviewZH from './neuron-overview-zh.png'
17-
import ImgEasy from './easy.png'
18-
import ImgPrivate from './private.png'
19-
import ImgReliable from './reliable.png'
2019
import ImgNeuronLogo from './neuron-logo.png'
2120
import { ParsedAsset, Release, getAssetsFromNeuronRelease, getLatestRelease } from '../../utils'
2221

@@ -30,6 +29,12 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
3029

3130
const ImgNeuronOverview = getNeuronOverviewImg(locale)
3231

32+
const initFeatureSpline = useCallback((spline: Application) => {
33+
spline.canvas.style.width = ''
34+
spline.canvas.style.height = ''
35+
spline.canvas.classList.add(styles.spline ?? '')
36+
}, [])
37+
3338
return (
3439
<Page className={styles.page} contentWrapper={{ className: styles.contentWrapper }}>
3540
<TopShadow className={styles.topShadow} />
@@ -67,7 +72,11 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
6772

6873
<div className={styles.features}>
6974
<div className={styles.feature}>
70-
<Image src={ImgEasy} width={400} height={400} alt="Easy CKB wallet concept map" />
75+
<Spline
76+
scene="https://prod.spline.design/WulXRsTwZxwaILcy/scene.splinecode"
77+
style={{ width: 'auto', height: 'auto' }}
78+
onLoad={initFeatureSpline}
79+
/>
7180
<div className={styles.textWrapper}>
7281
<div className={styles.title}>{t('Easy to use')}</div>
7382
<div className={styles.description}>
@@ -79,7 +88,11 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
7988
</div>
8089

8190
<div className={styles.feature}>
82-
<Image src={ImgPrivate} width={400} height={400} alt="Shields with a sci-fi feel" />
91+
<Spline
92+
scene="https://prod.spline.design/dODJjWBI8TGyDe3f/scene.splinecode"
93+
style={{ width: 'auto', height: 'auto' }}
94+
onLoad={initFeatureSpline}
95+
/>
8396
<div className={styles.textWrapper}>
8497
<div className={styles.title}>{t('Private and Secure')}</div>
8598
<div className={styles.description}>
@@ -91,7 +104,11 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
91104
</div>
92105

93106
<div className={styles.feature}>
94-
<Image src={ImgReliable} width={400} height={400} alt="Frosted Glass Textured Statistical Statements" />
107+
<Spline
108+
scene="https://prod.spline.design/T6POKwH2p9nWnNm9/scene.splinecode"
109+
style={{ width: 'auto', height: 'auto' }}
110+
onLoad={initFeatureSpline}
111+
/>
95112
<div className={styles.textWrapper}>
96113
<div className={styles.title}>{t('Reliable Support')}</div>
97114
<div className={styles.description}>

‎packages/neuron/src/pages/home/private.png

-897 KB
Binary file not shown.

‎packages/neuron/src/pages/home/reliable.png

-613 KB
Binary file not shown.

‎yarn.lock

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2262,7 +2262,7 @@ __metadata:
22622262
dependencies:
22632263
"@radix-ui/react-dialog": 1.0.4
22642264
"@splinetool/react-spline": 2.2.6
2265-
"@splinetool/runtime": 0.9.490
2265+
"@splinetool/runtime": 0.9.516
22662266
"@types/node": 20.8.6
22672267
"@types/react": 18.2.28
22682268
"@types/react-dom": 18.2.13
@@ -2294,6 +2294,8 @@ __metadata:
22942294
"@radix-ui/react-dropdown-menu": ^2.0.5
22952295
"@radix-ui/react-popover": ^1.0.6
22962296
"@radix-ui/react-tooltip": ^1.0.6
2297+
"@splinetool/react-spline": ^2.2.6
2298+
"@splinetool/runtime": ^0.9.516
22972299
"@svgr/webpack": ^8.0.1
22982300
"@tanstack/react-query": ^4.29.12
22992301
"@trpc/client": ^10.28.2
@@ -3416,7 +3418,7 @@ __metadata:
34163418
languageName: node
34173419
linkType: hard
34183420

3419-
"@splinetool/react-spline@npm:2.2.6":
3421+
"@splinetool/react-spline@npm:2.2.6, @splinetool/react-spline@npm:^2.2.6":
34203422
version: 2.2.6
34213423
resolution: "@splinetool/react-spline@npm:2.2.6"
34223424
dependencies:
@@ -3430,13 +3432,13 @@ __metadata:
34303432
languageName: node
34313433
linkType: hard
34323434

3433-
"@splinetool/runtime@npm:0.9.490":
3434-
version: 0.9.490
3435-
resolution: "@splinetool/runtime@npm:0.9.490"
3435+
"@splinetool/runtime@npm:0.9.516, @splinetool/runtime@npm:^0.9.516":
3436+
version: 0.9.516
3437+
resolution: "@splinetool/runtime@npm:0.9.516"
34363438
dependencies:
34373439
on-change: ^4.0.0
34383440
semver-compare: ^1.0.0
3439-
checksum: 66fdc1689e05fcf081c3f1562e92e9f8d2f0dda8f842be6ae0486e82b399d4d629ee92a847b23aea5179addf2334d123754472cef1b997c97746bb38fce93ce4
3441+
checksum: 88dff989b44aeda4faac59b3b69a2406e2ce96dd5608d21d9d3cdc67305ded33140e7d13847ef9ba7493c66e9363a3e87eafd004802cf287ca92ee5ac1b6543a
34403442
languageName: node
34413443
linkType: hard
34423444

0 commit comments

Comments
 (0)