From 24d06ba10405a639c5faf147c966f0a5e97d9d09 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Tue, 4 Jul 2023 23:59:17 +0800
Subject: [PATCH] feat: update hero

Signed-off-by: Innei <i@innei.in>
---
 src/app/(home)/page.tsx | 123 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 114 insertions(+), 9 deletions(-)

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index dd67c8d3c1..8f7eefc453 100644
--- a/src/app/(home)/page.tsx
+++ b/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>
   )
 }