20260608160402

code/docusaurus/src/pages/index.tsx

@@ -1,42 +1,92 @@
 import type { ReactNode } from 'react'
-import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-import HomepageFeatures from '@site/src/components/HomepageFeatures'
 import Heading from '@theme/Heading'
 import Layout from '@theme/Layout'
-import clsx from 'clsx'
-
 import styles from './index.module.css'
 
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext()
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          {/* <Link className="button button--secondary button--lg" to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link> */}
-        </div>
-      </div>
-    </header>
-  )
-}
+const topics = ['Clean', 'Focused', 'Reusable', 'Long-term']
 
 export default function Home(): ReactNode {
   const { siteConfig } = useDocusaurusContext()
+
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      title={siteConfig.title}
+      description="oneao 的个人技术笔记和资料整理。"
     >
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
+      <main className={styles.page}>
+        <section className={styles.hero}>
+          <div className="container">
+            <div className={styles.heroInner}>
+              <div className={styles.copy}>
+                <div className={styles.brandLine}>
+                  <img src="/img/logo.png" alt="" className={styles.logo} />
+                  <span>oneao notes</span>
+                </div>
+                <Heading as="h1" className={styles.title}>
+                  {siteConfig.title}
+                </Heading>
+                <p className={styles.subtitle}>
+                  技术 · 笔记 · 记录
+                </p>
+                <p className={styles.description}>
+                  一个保持简洁、方便回看的个人站点，用来沉淀日常记录、长期维护的资料和可复用的信息。
+                </p>
+                <div className={styles.topicRow} aria-label="笔记主题">
+                  {topics.map(topic => (
+                    <span key={topic}>{topic}</span>
+                  ))}
+                </div>
+                <div className={styles.statusLine}>
+                  <span />
+                  <p>保持内容克制、结构清晰，方便之后快速回看。</p>
+                </div>
+              </div>
+
+              <div className={styles.previewWrap}>
+                <div className={styles.previewShadow} />
+                <div className={styles.preview} aria-label="笔记预览">
+                  <div className={styles.previewHeader}>
+                    <span />
+                    <span />
+                    <span />
+                    <strong>oneao.cn</strong>
+                  </div>
+                  <div className={styles.previewBody}>
+                    <span className={styles.kicker}>Personal Archive</span>
+                    <h2>整理、沉淀、回看</h2>
+                    <p>
+                      把零散信息收束成清晰页面，让每次查找都更直接。
+                    </p>
+                    <div className={styles.codeBlock}>
+                      <span>clear structure</span>
+                      <span>quiet interface</span>
+                      <span>steady updates</span>
+                    </div>
+                    <div className={styles.noteLines}>
+                      <span />
+                      <span />
+                      <span />
+                      <span />
+                    </div>
+                    <div className={styles.noteFooter}>
+                      <span>Notes</span>
+                      <span>Archive</span>
+                      <span>Review</span>
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.miniCard}>
+                  <strong>Simple Index</strong>
+                  <div>
+                    <span />
+                    <span />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
       </main>
     </Layout>
   )