feat: implement home page

packages/app/src/components/Header/index.tsx

@@ -23,7 +23,9 @@ export const Header: FC<HeaderProps> = props => {
         </div>
 
         <div className={styles.right}>
-          <IconGithub />
+          <Link href="https://github.com/nervosnetwork/neuron" target="_blank" rel="noopener noreferrer">
+            <IconGithub />
+          </Link>
           <IconMenu />
         </div>
       </div>

packages/app/src/components/Page/index.tsx

@@ -11,11 +11,12 @@ type PageProps = Omit<ComponentProps<'div'>, 'children'> & {
         renderHeader: (props?: HeaderProps) => ReactNode
         renderFooter: (props?: FooterProps) => ReactNode
       }) => JSX.Element | undefined)
-  contentWrapper?: boolean
+  contentWrapper?: boolean | ComponentProps<'div'>
 }
 
 export const Page = forwardRef<HTMLDivElement, PageProps>(function Page(props, ref) {
   const { children, contentWrapper = true, className, ...divProps } = props
+  const contentWrapperProps = typeof contentWrapper === 'object' ? contentWrapper : {}
 
   const finalChildren =
     typeof children === 'function' ? (
@@ -26,7 +27,13 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(function Page(props, r
     ) : (
       <>
         <Header />
-        {contentWrapper ? <div className={styles.contentWrapper}>{children}</div> : children}
+        {contentWrapper ? (
+          <div {...contentWrapperProps} className={clsx(styles.contentWrapper, contentWrapperProps.className)}>
+            {children}
+          </div>
+        ) : (
+          children
+        )}
         <Footer />
       </>
     )

packages/app/src/pages/home/index.module.scss

@@ -0,0 +1,169 @@
+.contentWrapper {
+  position: relative;
+}
+
+.topShadow {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.text1 {
+  margin-top: 146px;
+  font-weight: 700;
+  font-size: 40px;
+  font-style: normal;
+  line-height: 72px;
+  text-align: center;
+
+  .emphasis {
+    position: relative;
+    color: #00c891;
+
+    & > svg {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+  }
+}
+
+.text2 {
+  max-width: 1058px;
+  margin: 20px auto 0;
+  font-size: 20px;
+  line-height: 40px;
+  text-align: center;
+}
+
+.neuronOverview {
+  // Some of the code here is written to exceed the width of the parent element and participate in the normal layout flow.
+  // If the situation becomes more complex in the future, the width restriction of the parent element should be removed.
+  position: relative;
+  left: 50%;
+  width: fit-content;
+  margin-top: 32px;
+  padding: 24px;
+  background: linear-gradient(180deg, rgb(54 54 54 / 40%) 0%, rgb(29 29 29 / 20%) 100%);
+  border: 1.031px solid rgb(255 255 255 / 20%);
+  border-radius: 33px;
+  transform: translateX(-50%);
+  backdrop-filter: blur(39.5px);
+
+  & > img {
+    border-radius: 32px;
+    backdrop-filter: blur(39.5px);
+  }
+}
+
+.actions {
+  display: flex;
+  gap: 48px;
+  justify-content: center;
+  margin-top: 56px;
+}
+
+.btn {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 232px;
+  min-height: 72px;
+  font-weight: 600;
+  font-size: 16px;
+  background: #000;
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+.btnDownload {
+  flex-direction: column;
+  gap: 6px;
+  color: #000;
+  background: #00c891;
+
+  .secondary {
+    font-weight: 400;
+    font-size: 14px;
+  }
+}
+
+.btnGithub {
+  gap: 8px;
+  box-sizing: border-box;
+  border: 1px solid #f5f5f5;
+}
+
+.features {
+  display: flex;
+  flex-direction: column;
+  gap: 308px;
+  margin-top: 384px;
+
+  .feature {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &:nth-child(even) {
+      img {
+        order: 2;
+      }
+    }
+
+    .textWrapper {
+      display: flex;
+      flex: 0.663;
+      flex-direction: column;
+      gap: 32px;
+
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+      }
+
+      .description {
+        color: #999;
+        font-size: 16px;
+        line-height: 32px;
+      }
+    }
+  }
+}
+
+.getNeuron {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 438px;
+  margin-bottom: 326px;
+
+  .bottomShadow {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    pointer-events: none;
+  }
+
+  .text3 {
+    margin-top: 24px;
+    font-weight: 600;
+    font-size: 24px;
+  }
+
+  .text4 {
+    margin-top: 24px;
+    line-height: 32px;
+  }
+
+  .download {
+    margin-top: 60px;
+  }
+}

packages/app/src/pages/home/index.page.tsx

@@ -0,0 +1,136 @@
+import { GetStaticProps, type NextPage } from 'next'
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import Image, { StaticImageData } from 'next/image'
+import { ComponentProps, FC } from 'react'
+import clsx from 'clsx'
+import Link from 'next/link'
+import { Page } from '../../components/Page'
+import styles from './index.module.scss'
+import TopShadow from './top-shadow.svg'
+import BottomShadow from './bottom-shadow.svg'
+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'
+
+interface PageProps {
+  locale: string
+}
+
+const Home: NextPage<PageProps> = ({ locale }) => {
+  const { t } = useTranslation('home')
+
+  const ImgNeuronOverview = getNeuronOverviewImg(locale)
+
+  return (
+    <Page className={styles.page} contentWrapper={{ className: styles.contentWrapper }}>
+      <TopShadow className={styles.topShadow} />
+
+      <div className={styles.text1}>
+        Securely Manage Your{' '}
+        <span className={styles.emphasis}>
+          CKB Assets
+          <IconOval />
+        </span>{' '}
+        with Ease
+      </div>
+
+      <div className={styles.text2}>
+        Designed specifically for the Nervos CKB blockchain, allowing users to securely store and manage their CKB
+        assets, participate in Nervos Network governance, and create and manage CKB standard or lock scripts.
+      </div>
+
+      <div className={styles.neuronOverview}>
+        <Image src={ImgNeuronOverview} alt="Neuron Overview" width={1276} height={630} />
+      </div>
+
+      <div className={styles.actions}>
+        <DownloadButton />
+
+        <Link href="https://github.com/nervosnetwork/neuron" target="_blank" rel="noopener noreferrer">
+          <button className={clsx(styles.btn, styles.btnGithub)}>
+            <IconGithub />
+            GitHub
+          </button>
+        </Link>
+      </div>
+
+      <div className={styles.features}>
+        <div className={styles.feature}>
+          <Image src={ImgEasy} width={400} height={400} alt="Easy CKB wallet concept map" />
+          <div className={styles.textWrapper}>
+            <div className={styles.title}>Easy to use</div>
+            <div className={styles.description}>
+              A friendly and clean user interface, complete with features designed to help you easily participate in
+              Nervos network activities using your wallet.
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.feature}>
+          <Image src={ImgPrivate} width={400} height={400} alt="Shields with a sci-fi feel" />
+          <div className={styles.textWrapper}>
+            <div className={styles.title}>Private and Secure</div>
+            <div className={styles.description}>
+              The code is completely open source, no registration and login is required, only you can access your
+              wallet, we do not collect any personal data.
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.feature}>
+          <Image src={ImgReliable} width={400} height={400} alt="Frosted Glass Textured Statistical Statements" />
+          <div className={styles.textWrapper}>
+            <div className={styles.title}>Reliable Support</div>
+            <div className={styles.description}>
+              Powered by the Nervos Foundation, it works closely with the Nervos CKB blockchain and is deeply involved
+              in building the community and getting a head start on supporting new features.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.getNeuron}>
+        <BottomShadow className={styles.bottomShadow} />
+        <Image src={ImgNeuronLogo} alt="Neuron Logo" width={88} height={88} />
+        <div className={styles.text3}>Get Neuron Now</div>
+        <div className={styles.text4}>Secure and reliable, you can navigate the world of Nervos CKB</div>
+        <DownloadButton className={styles.download} />
+      </div>
+    </Page>
+  )
+}
+
+const DownloadButton: FC<Partial<ComponentProps<typeof Link>>> = props => {
+  // TODO: auto detect system and auto provide download link
+  return (
+    <Link href="/download" target="_blank" rel="noopener noreferrer" {...props}>
+      <button className={clsx(styles.btn, styles.btnDownload)}>
+        <span>Download Neuron</span>
+        <span className={styles.secondary}>(Windows x64-EXE)</span>
+      </button>
+    </Link>
+  )
+}
+
+function getNeuronOverviewImg(locale: PageProps['locale']): StaticImageData {
+  switch (locale) {
+    case 'zh':
+      return ImgNeuronOverviewZH
+    default:
+      return ImgNeuronOverviewEN
+  }
+}
+
+export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => {
+  const lng = await serverSideTranslations(locale, ['common', 'home'])
+
+  return { props: { ...lng } }
+}
+
+export default Home