Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: replace the static images in the homepage features section with Spline #32

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat: replace the static images in the homepage features section with Spline #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/magickbase/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@radix-ui/react-dialog": "1.0.4",
"@splinetool/react-spline": "2.2.6",
"@splinetool/runtime": "0.9.490",
"@splinetool/runtime": "0.9.516",
"@types/node": "20.8.6",
"@types/react": "18.2.28",
"@types/react-dom": "18.2.13",
Expand Down
2 changes: 2 additions & 0 deletions packages/neuron/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-tooltip": "^1.0.6",
"@splinetool/react-spline": "^2.2.6",
"@splinetool/runtime": "^0.9.516",
"@tanstack/react-query": "^4.29.12",
"@trpc/client": "^10.28.2",
"@trpc/next": "^10.28.2",
Expand Down
Binary file removed packages/neuron/src/pages/home/easy.png
View file
Open in desktop
Binary file not shown.
24 changes: 20 additions & 4 deletions packages/neuron/src/pages/home/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,19 @@
align-items: center;
justify-content: space-between;

.spline {
// Because the canvas is hidden until it finishes loading, we need a placeholder width and height to prevent page jitter.
width: 400px;
height: 400px;

canvas {
width: 400px;
height: 400px;
}
}

&:nth-child(even) {
> img {
.spline {
order: 2;
}
}
Expand All @@ -180,10 +191,15 @@
flex-direction: column;
gap: 24px;

> img {
.spline {
order: 2;
max-width: 300px;
height: auto;
width: 300px;
height: 300px;

canvas {
width: 300px;
height: 300px;
}
}

.textWrapper {
Expand Down
33 changes: 26 additions & 7 deletions packages/neuron/src/pages/home/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import { GetStaticProps, type NextPage } from 'next'
import { Trans, useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import Image, { StaticImageData } from 'next/image'
import { ComponentProps, FC, PropsWithChildren, useEffect, useMemo, useState } from 'react'
import { ComponentProps, FC, PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react'
import clsx from 'clsx'
import Link from 'next/link'
import { UAParser } from 'ua-parser-js'
import Spline from '@splinetool/react-spline'
import { Application } from '@splinetool/runtime'
import { Page } from '../../components/Page'
import styles from './index.module.scss'
import TopShadow from './top-shadow.svg'
Expand All @@ -14,9 +16,6 @@ import IconOval from './oval.svg'
import IconGithub from './github.svg'
import ImgNeuronOverviewEN from './neuron-overview-en.png'
import ImgNeuronOverviewZH from './neuron-overview-zh.png'
import ImgEasy from './easy.png'
import ImgPrivate from './private.png'
import ImgReliable from './reliable.png'
import ImgNeuronLogo from './neuron-logo.png'
import { ParsedAsset, Release, getAssetsFromNeuronRelease, getLatestRelease } from '../../utils'

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

const ImgNeuronOverview = getNeuronOverviewImg(locale)

const initFeatureSpline = useCallback((spline: Application) => {
spline.canvas.style.width = ''
spline.canvas.style.height = ''
}, [])

return (
<Page className={styles.page} contentWrapper={{ className: styles.contentWrapper }}>
<TopShadow className={styles.topShadow} />
Expand Down Expand Up @@ -67,7 +71,12 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {

<div className={styles.features}>
<div className={styles.feature}>
<Image src={ImgEasy} width={400} height={400} alt="Easy CKB wallet concept map" />
<Spline
className={styles.spline}
style={{ width: '', height: '' }}
scene="https://prod.spline.design/WulXRsTwZxwaILcy/scene.splinecode"
onLoad={initFeatureSpline}
/>
<div className={styles.textWrapper}>
<div className={styles.title}>{t('Easy to use')}</div>
<div className={styles.description}>
Expand All @@ -79,7 +88,12 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
</div>

<div className={styles.feature}>
<Image src={ImgPrivate} width={400} height={400} alt="Shields with a sci-fi feel" />
<Spline
className={styles.spline}
style={{ width: '', height: '' }}
scene="https://prod.spline.design/dODJjWBI8TGyDe3f/scene.splinecode"
onLoad={initFeatureSpline}
/>
<div className={styles.textWrapper}>
<div className={styles.title}>{t('Private and Secure')}</div>
<div className={styles.description}>
Expand All @@ -91,7 +105,12 @@ const Home: NextPage<PageProps> = ({ locale, release }) => {
</div>

<div className={styles.feature}>
<Image src={ImgReliable} width={400} height={400} alt="Frosted Glass Textured Statistical Statements" />
<Spline
className={styles.spline}
style={{ width: '', height: '' }}
scene="https://prod.spline.design/T6POKwH2p9nWnNm9/scene.splinecode"
onLoad={initFeatureSpline}
/>
<div className={styles.textWrapper}>
<div className={styles.title}>{t('Reliable Support')}</div>
<div className={styles.description}>
Expand Down
Binary file removed packages/neuron/src/pages/home/private.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/neuron/src/pages/home/reliable.png
View file
Open in desktop
Binary file not shown.
14 changes: 8 additions & 6 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2262,7 +2262,7 @@ __metadata:
dependencies:
"@radix-ui/react-dialog": 1.0.4
"@splinetool/react-spline": 2.2.6
"@splinetool/runtime": 0.9.490
"@splinetool/runtime": 0.9.516
"@types/node": 20.8.6
"@types/react": 18.2.28
"@types/react-dom": 18.2.13
Expand Down Expand Up @@ -2294,6 +2294,8 @@ __metadata:
"@radix-ui/react-dropdown-menu": ^2.0.5
"@radix-ui/react-popover": ^1.0.6
"@radix-ui/react-tooltip": ^1.0.6
"@splinetool/react-spline": ^2.2.6
"@splinetool/runtime": ^0.9.516
"@svgr/webpack": ^8.0.1
"@tanstack/react-query": ^4.29.12
"@trpc/client": ^10.28.2
Expand Down Expand Up @@ -3416,7 +3418,7 @@ __metadata:
languageName: node
linkType: hard

"@splinetool/react-spline@npm:2.2.6":
"@splinetool/react-spline@npm:2.2.6, @splinetool/react-spline@npm:^2.2.6":
version: 2.2.6
resolution: "@splinetool/react-spline@npm:2.2.6"
dependencies:
Expand All @@ -3430,13 +3432,13 @@ __metadata:
languageName: node
linkType: hard

"@splinetool/runtime@npm:0.9.490":
version: 0.9.490
resolution: "@splinetool/runtime@npm:0.9.490"
"@splinetool/runtime@npm:0.9.516, @splinetool/runtime@npm:^0.9.516":
version: 0.9.516
resolution: "@splinetool/runtime@npm:0.9.516"
dependencies:
on-change: ^4.0.0
semver-compare: ^1.0.0
checksum: 66fdc1689e05fcf081c3f1562e92e9f8d2f0dda8f842be6ae0486e82b399d4d629ee92a847b23aea5179addf2334d123754472cef1b997c97746bb38fce93ce4
checksum: 88dff989b44aeda4faac59b3b69a2406e2ce96dd5608d21d9d3cdc67305ded33140e7d13847ef9ba7493c66e9363a3e87eafd004802cf287ca92ee5ac1b6543a
languageName: node
linkType: hard

Expand Down