feat: update hero

Signed-off-by: Innei <i@innei.in>

src/app/(home)/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createElement, forwardRef } from 'react'
+import React, { createElement, forwardRef } from 'react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import type { PropsWithChildren } from 'react'
@@ -50,9 +50,8 @@ export default function Home() {
 
  <Welcome />
 
- <Screen>
- <PostBlock />
- </Screen>
+ <PostScreen />
+
  <Screen>
  <h1>
  而在这里，你会看到一个不同的我，一个在生活中发现美，感受痛苦，洞察人性的我。
@@ -71,11 +70,109 @@ export default function Home() {
  </div>
  )
 }
+const TwoColumnLayout = ({
+ children,
+}: {
+ children:
+ | [React.ReactNode, React.ReactNode]
+ | [React.ReactNode, React.ReactNode, React.ReactNode]
+}) => {
+ return (
+ <div className="relative flex h-full w-full flex-col flex-wrap items-center lg:flex-row">
+ {children.slice(0, 2).map((child, i) => {
+ return (
+ <div
+ key={i}
+ className="flex h-1/2 w-full flex-col center lg:h-auto lg:w-1/2"
+ >
+ <div className="relative max-w-xl">{child}</div>
+ </div>
+ )
+ })}
+
+ {children[2]}
+ </div>
+ )
+}
 
 const Welcome = () => {
  const { title, description } = useConfig().hero
  const siteOwner = useAggregationSelector((agg) => agg.user)
  const { avatar, socialIds } = siteOwner || {}
+
+ return (
+ <Screen className="mt-[-4.5rem]">
+ <TwoColumnLayout>
+ <>
+ <m.div
+ className="relative leading-[4] [&_*]:inline-block"
+ initial={{ opacity: 0.0001, y: 50 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={softBouncePrest}
+ >
+ {title.template.map((t, i) => {
+ const { type } = t
+ return createElement(type, { key: i, className: t.class }, t.text)
+ })}
+ </m.div>
+
+ <BottomToUpTransitionView
+ delay={300}
+ transition={softBouncePrest}
+ className="my-3"
+ >
+ <span className="opacity-80">{description}</span>
+ </BottomToUpTransitionView>
+
+ <ul className="mt-8 flex space-x-4 center lg:mt-[7rem] lg:block">
+ {Object.entries(socialIds || noopObj).map(
+ ([type, id]: any, index) => {
+ return (
+ <BottomToUpTransitionView
+ key={type}
+ delay={index * 100 + 500}
+ className="inline-block"
+ as="li"
+ >
+ <SocialIcon id={id} type={type} />
+ </BottomToUpTransitionView>
+ )
+ },
+ )}
+ </ul>
+ </>
+
+ <img
+ src={avatar}
+ alt="Site Owner Avatar"
+ className={clsxm(
+ 'aspect-square rounded-full border border-slate-200 dark:border-neutral-800',
+ 'lg:h-[300px] lg:w-[300px]',
+ 'h-[200px] w-[200px]',
+ )}
+ />
+
+ <m.div
+ initial={{ opacity: 0.0001, y: 50 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ transition={softBouncePrest}
+ viewport={{ once: true }}
+ className={clsx(
+ 'absolute bottom-0 left-0 right-0 flex flex-col center',
+
+ 'text-neutral-800/80 center dark:text-neutral-200/80',
+ )}
+ >
+ <small>
+ 欢迎，来到这个小小的宇宙，一个闪烁着光彩的星球，等待着你的探索。
+ </small>
+ <span className="mt-8 animate-bounce">
+ <i className="icon-[mingcute--right-line] rotate-90 text-2xl" />
+ </span>
+ </m.div>
+ </TwoColumnLayout>
+ </Screen>
+ )
  return (
  <Screen className="mt-[-4.5rem]">
  <div className="flex h-full w-full flex-col flex-wrap items-center lg:flex-row">
@@ -146,8 +243,9 @@ const Welcome = () => {
  >
  <m.small
  initial={{ opacity: 0.0001, y: 50 }}
- animate={{ opacity: 1, y: 0 }}
+ whileInView={{ opacity: 1, y: 0 }}
  transition={softBouncePrest}
+ viewport={{ once: true }}
  >
  欢迎，来到这个小小的宇宙，一个闪烁着光彩的星球，等待着你的探索。
  </m.small>
@@ -159,10 +257,17 @@ const Welcome = () => {
  )
 }
 
-const PostBlock = () => {
+const PostScreen = () => {
  return (
- <h1>
- 在这个矩阵中，你可以找到各种各样的代码块，它们是我在计算机科学的探索和实践的证明。
- </h1>
+ <Screen>
+ <TwoColumnLayout>
+ <h1>
+ 在这个矩阵中，你可以找到各种各样的代码块，它们是我在计算机科学的探索和实践的证明。
+ </h1>
+ <div>
+ <ul>a</ul>
+ </div>
+ </TwoColumnLayout>
+ </Screen>
  )
 }