optimize: about page

packages/magickbase/package.json

@@ -22,6 +22,7 @@
     "next-i18next": "15.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-page-scroller": "^3.0.1",
     "react-use": "17.4.0",
     "tailwindcss": "3.3.5",
     "typescript": "5.2.2"

packages/magickbase/src/components/About/index.tsx

@@ -1,6 +1,9 @@
+import { useEffect, useRef } from 'react'
 import type { FC } from 'react'
 import classnames from 'classnames'
 import Spline from '@splinetool/react-spline'
+import { useScroll } from 'react-use'
+import type { Application } from '@splinetool/runtime'
 import styles from './styles.module.scss'
 
 const timelineItms = [
@@ -41,37 +44,96 @@ const timelineItms = [
         </p>
         <p>
           At Magickbase, we believe in the power of community, collaboration, and inclusivity. We&apos;re a team of
-          passionate developers who are committed to making a difference in the world, and we&apos;re always looking for ways
-          to learn from each other and grow together.
+          passionate developers who are committed to making a difference in the world, and we&apos;re always looking for
+          ways to learn from each other and grow together.
         </p>
       </>
     ),
   },
 ]
 
-export const AboutUs: FC = () => (
-  <div className={classnames(`container mx-auto`)}>
-    <h1 className="text-3xl pl-6 mb-16">About us</h1>
-    <div className="flex">
-      <div className={classnames(styles.timeline, 'flex-1')}>
-        {timelineItms.map((item, index) => (
-          <div key={index} className={styles.item}>
-            <div className={styles.index}>{(index + 1).toString().padStart(2, "0")}</div>
-            <h1>{item.title}</h1>
-            {item.description}
-          </div>
-        ))}
-      </div>
+interface AboutUsProps {
+  onScrollPositionChange?: (position: 'top' | 'middle' | 'bottom') => void
+}
+
+export const AboutUs: FC<AboutUsProps> = ({ onScrollPositionChange }) => {
+  const spline = useRef<Application>()
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const itemsRef = useRef(Array<HTMLDivElement | null>(timelineItms.length).fill(null))
+  const { y } = useScroll(scrollRef)
+
+  useEffect(() => {
+    if (!spline.current) return
+    const obj = spline.current.findObjectByName('旋转')
+    if (!obj) return
+
+    const scrollEndOffset = (scrollRef.current?.scrollHeight || 0) - (scrollRef.current?.offsetHeight || 0)
+
+    obj.rotation.x = Math.PI * 2 * (y / scrollEndOffset)
+
+  }, [y, spline, scrollRef])
+
+  const position = (() => {
+    if (y === 0) {
+      return 'top'
+    } else if (y === (scrollRef.current?.scrollHeight || 0) - (scrollRef.current?.offsetHeight || 0)) {
+      return 'bottom'
+    }
+
+    return 'middle'
+  })()
+
+  onScrollPositionChange && onScrollPositionChange(position)
+
+  const activeItemIndex = (() => {
+    let index = 0
+    const { top, height } = scrollRef.current?.getBoundingClientRect() || { top: 0, height: 0 }
+
+    const point = top + height / 2
+
+    itemsRef.current.forEach((item, i) => {
+      if (item) {
+        const { top: itemTop } = item.getBoundingClientRect()
+        if (itemTop < point) {
+          index = i
+        }
+      }
+    })
+    return index
+  })()
+
+  return (
+    <div ref={scrollRef} className={classnames(`container mx-auto h-screen overflow-y-scroll overflow-x-hidden pt-16`)}>
+      <h1 className="text-3xl pl-6 mb-16">About us</h1>
+      <div className="flex">
+        <div className={classnames(styles.timeline, 'flex-1 ml-3')}>
+          {timelineItms.map((item, index) => (
+            <div
+              ref={el => (itemsRef.current[index] = el)}
+              key={index}
+              className={classnames(styles.item, {
+                [styles.active]: activeItemIndex === index,
+              })}
+            >
+              <div className={styles.index}>{(index + 1).toString().padStart(2, '0')}</div>
+              <h1>{item.title}</h1>
+              {item.description}
+            </div>
+          ))}
+        </div>
+        <div className="h-[440px] w-[440px]" />
 
-      <div className="min-h-[400px] min-w-[400px]">
-        <Spline
-          className={styles.splineWrapper}
-          scene="https://prod.spline.design/5GlLJjUAkA5U3kVP/scene.splinecode"
-          onLoad={app => {
-            console.log(app)
-          }}
-        />
+        <div className="h-[440px] w-[440px] absolute right-0">
+          <Spline
+            className={classnames('pointer-events-none', styles.splineWrapper)}
+            scene="https://prod.spline.design/5GlLJjUAkA5U3kVP/scene.splinecode"
+            onLoad={app => {
+              app.stop()
+              spline.current = app
+            }}
+          />
+        </div>
       </div>
     </div>
-  </div>
-)
+  )
+}

packages/magickbase/src/components/About/styles.module.scss

@@ -1,19 +1,41 @@
 .timeline {
   position: relative;
-  &::after {
-    content: " ";
-    position: absolute;
-    width: 1px;
-    left: 0;
-    top: 8px;
-    bottom: 0;
-    background-color: #fff;
-  }
 
   .item {
     padding-left: 24px;
     padding-bottom: 64px;
     position: relative;
+    transition: all .3s;
+    color: #646464;
+
+    &.active {
+      color: #fff;
+
+      &:last-child::before {
+        background: linear-gradient(180deg, #fff, #000);
+      }
+      &::before {
+        background: #fff;
+      }
+      &::after {
+        background: #fff;
+      }
+    }
+
+    &:last-child::before {
+      background: linear-gradient(180deg, #646464, #000);
+    }
+
+    &::before {
+      content: " ";
+      position: absolute;
+      width: 1px;
+      left: 0;
+      top: 8px;
+      bottom: -8px;
+      transition: all .3s;
+      background: #646464;
+    }
     &::after {
       content: " ";
       width: 12px;
@@ -22,7 +44,8 @@
       top: 5px;
       left: -6px;
       border-radius: 999px;
-      background-color: #fff;
+      transition: all .3s;
+      background-color: #646464;
     }
     .index {
       font-size: 20px;
@@ -44,5 +67,8 @@
 }
 
 .splineWrapper {
-  pointer-events: none;
+  canvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
 }

packages/magickbase/src/components/ContactUs/index.tsx

@@ -1,25 +1,25 @@
 import type { FC } from 'react'
 import classnames from 'classnames'
-import logoPng from './logo.png'
-import maskTopPng from './mask_top.png'
-import maskBottomPng from './mask_bottom.png'
+import Spline from '@splinetool/react-spline'
 
 export const ContactUs: FC = () => (
-  <div className={classnames(`relative`)}>
-    <div className='absolute w-full h-full bg-right-top bg-no-repeat z-[-1]' style={{ backgroundImage: `url(${maskTopPng.src})` }} />
-    <div className='absolute w-full h-full bg-left-bottom bg-no-repeat z-[-1]' style={{ backgroundImage: `url(${maskBottomPng.src})` }} />
-
+  <div className={classnames(`relative h-screen overflow-hidden`)}>
+    <div className="absolute top-0 bottom-0 left-0 right-0">
+      <Spline
+        scene="https://prod.spline.design/PKLmTqcUNdiZ8q3F/scene.splinecode"
+      />
+    </div>
     <div className="container mx-auto py-32">
       <div className="flex">
-        <div className="h-96 flex-1 bg-contain bg-no-repeat bg-center" style={{ backgroundImage: `url(${logoPng.src})` }} />
+        <div className="h-96 flex-1" />
 
-        <div className="flex-1">
-          <h1 className='text-3xl mb-8'>Contact us</h1>
-          <p className='text-xl mb-8'>
+        <div className="flex-1 z-10">
+          <h1 className="text-3xl mb-8">Contact us</h1>
+          <p className="text-xl mb-8">
             Magickbase consistently adheres to the spirit of open source mutual benefit, and welcomes users to
             participate in the construction of the product and learn from each other to grow together.
           </p>
-          <button className='border-[1px] border-solid border-white rounded-xl py-4 px-6'>Contact Now</button>
+          <button className="border-[1px] border-solid border-white rounded-xl py-4 px-6">Contact Now</button>
         </div>
       </div>
     </div>

packages/magickbase/src/components/Header/index.module.scss

@@ -120,6 +120,9 @@ $desktopHeaderContentHeight: 88px;
     padding: 0 var(--menuIconRightOffset) 96px 96px;
     color: #f5f5f5;
     background: #111;
+    padding-right: 24px;
+    padding-left: 64px;
+    padding-bottom: 64px;
 
     &:focus-visible {
       outline: none;

packages/magickbase/src/components/Services/index.tsx

@@ -1,26 +1,32 @@
 import type { FC } from 'react'
-import neuronBg from './neuron_bg.png';
-import MoreIcon from './more.svg';
+import neuronBg from './neuron_bg.png'
+import MoreIcon from './more.svg'
 
 export const Services: FC = () => (
-  <div className='container mx-auto'>
-    <div className='flex items-start aspect-video bg-contain bg-no-repeat bg-center' style={{ backgroundImage: `url(${neuronBg.src})` }}>
+  <div className="container relative mx-auto h-screen">
+    <div
+      className="absolute top-0 bottom-0 left-0 right-0 z-[-1] bg-contain bg-no-repeat bg-center"
+      style={{ backgroundImage: `url(${neuronBg.src})` }}
+    />
 
-      <div className='backdrop-blur-xl border-[1px] border-[#ffffff66] rounded-3xl mt-32 mr-32 ml-auto w-[520px] px-10 py-12'>
-        <h1 className='text-3xl font-bold'>Neuron</h1>
-        <div className='flex items-center'>
-          <div className='text-xl'>CKB desktop wallet</div>
-          <button className='flex items-center ml-auto border-[1px] border-solid border-white rounded-xl py-4 px-6'>More <MoreIcon className='ml-2' /></button>
+    <div className='h-full flex flex-1 flex-col'>
+      <div className="backdrop-blur-xl border-[1px] border-[#ffffff66] rounded-3xl mt-32 mr-32 ml-auto w-[520px] px-10 py-12">
+        <h1 className="text-3xl font-bold">Neuron</h1>
+        <div className="flex items-center">
+          <div className="text-xl">CKB desktop wallet</div>
+          <button className="flex items-center ml-auto border-[1px] border-solid border-white rounded-xl py-4 px-6">
+            More <MoreIcon className="ml-2" />
+          </button>
         </div>
       </div>
-    </div>
 
-    <div className='bg-gradient-to-b from-[#36363699] to-[#1D1D1D99] rounded-full flex justify-between px-4 py-6'>
-      <div className='px-16'>Neuron</div>
-      <div className='px-16'>CKB Explorer</div>
-      <div className='px-16'>Godwoken Explorer</div>
-      <div className='px-16'>Axon Explorer</div>
-      <div className='px-16'>Kuai</div>
+      <div className="mt-auto mb-4 bg-gradient-to-b from-[#36363699] to-[#1D1D1D99] rounded-full flex justify-between px-4 py-6">
+        <div className="px-16">Neuron</div>
+        <div className="px-16">CKB Explorer</div>
+        <div className="px-16">Godwoken Explorer</div>
+        <div className="px-16">Axon Explorer</div>
+        <div className="px-16">Kuai</div>
+      </div>
     </div>
   </div>
 )

packages/magickbase/src/pages/index.tsx

@@ -1,22 +1,34 @@
+import { useState } from 'react'
+import ReactPageScroller from 'react-page-scroller'
 import { Footer } from '../components/Footer'
 import { Header } from '../components/Header'
 import { Branding } from '../components/Branding'
 import { AboutUs } from '../components/About'
 import { ContactUs } from '../components/ContactUs'
 import { Services } from '../components/Services'
-import styles from './page.module.css'
 
 export default function Home() {
+  const [currentPage, setCurrentPage] = useState(0)
+  const [aboutUsScrollPosition, setAboutUsScrollPosition] = useState('top')
+  const isAbout = currentPage === 1
+
   return (
-    <div className='overflow-hidden'>
+    <div className="overflow-hidden">
       <Header />
-      <Branding />
-      <div className={styles.separate}/>
-      <AboutUs />
-      <div className={styles.separate}/>
-      <Services />
-      <ContactUs />
-      <Footer />
+      <ReactPageScroller 
+        pageOnChange={page => setCurrentPage(page)}
+        blockScrollDown={isAbout && aboutUsScrollPosition !== 'bottom'}
+        blockScrollUp={isAbout && aboutUsScrollPosition !== 'top'}
+      >
+        <Branding />
+        <AboutUs 
+          onScrollPositionChange={(p) => setAboutUsScrollPosition(p)}
+        />
+        {/* <div className={styles.separate} /> */}
+        <Services />
+        <ContactUs />
+        <Footer />
+      </ReactPageScroller>
     </div>
   )
 }