Complete redesign: New cosmic pixel art homepage

website/src/components/HomepageFeatures/index.js

@@ -5,7 +5,7 @@ import styles from './styles.module.css';
 const FeatureList = [
   {
     title: 'GeneralUpdate',
-    Svg: require('@site/static/img/upgrade.svg').default,
+    Svg: require('@site/static/img/cosmic-rocket.svg').default,
     //description: (
     //  <>
     //    帮助你的客户端应用以最快最小的资源的占用完成自动升级！
@@ -14,7 +14,7 @@ const FeatureList = [
   },
   {
     title: 'GeneralUpdate Tools',
-    Svg: require('@site/static/img/packet.svg').default,
+    Svg: require('@site/static/img/cosmic-planet.svg').default,
     //description: (
     //  <>
     //    打包工具帮助您发布更新补丁包文件！
@@ -23,7 +23,7 @@ const FeatureList = [
   },
   {
     title: 'GeneralUpdate Samples',
-    Svg: require('@site/static/img/samples.svg').default,
+    Svg: require('@site/static/img/cosmic-star.svg').default,
     //description: (
     //  <>
     //    快速启动，更快的了解项目如何使用！

website/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,31 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 4rem 0;
   width: 100%;
+  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 180px;
+  width: 180px;
+  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.2));
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  transition: transform 0.3s ease;
+}
+
+.featureSvg:hover {
+  transform: scale(1.1) rotate(5deg);
+  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.3));
+}
+
+/* Pixel art card style */
+.features h3 {
+  font-family: 'Courier New', monospace;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: 1.5rem;
+  color: #2c3e50;
 }

website/src/css/custom.css

@@ -6,25 +6,94 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #000000; /* 黑色 */
-  --ifm-color-primary-dark: #000000;
-  --ifm-color-primary-darker: #000000;
-  --ifm-color-primary-darkest: #000000;
-  --ifm-color-primary-light: #333333; /* 更浅的黑色 */
-  --ifm-color-primary-lighter: #666666;
-  --ifm-color-primary-lightest: #999999;
+  --ifm-color-primary: #3498db;
+  --ifm-color-primary-dark: #2e86c1;
+  --ifm-color-primary-darker: #2b7db8;
+  --ifm-color-primary-darkest: #236599;
+  --ifm-color-primary-light: #5dade2;
+  --ifm-color-primary-lighter: #6ab6e5;
+  --ifm-color-primary-lightest: #85c5eb;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --docusaurus-highlighted-code-line-bg: rgba(52, 152, 219, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #ffffff; /* 白色 */
-  --ifm-color-primary-dark: #eeeeee;
-  --ifm-color-primary-darker: #dddddd;
-  --ifm-color-primary-darkest: #cccccc;
-  --ifm-color-primary-light: #ffffff;
-  --ifm-color-primary-lighter: #ffffff;
-  --ifm-color-primary-lightest: #ffffff;
-  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.3);
+  --ifm-color-primary: #5dade2;
+  --ifm-color-primary-dark: #4aa3de;
+  --ifm-color-primary-darker: #3d9adc;
+  --ifm-color-primary-darkest: #2585cc;
+  --ifm-color-primary-light: #70b7e6;
+  --ifm-color-primary-lighter: #7dbde8;
+  --ifm-color-primary-lightest: #98caed;
+  --docusaurus-highlighted-code-line-bg: rgba(93, 173, 226, 0.2);
+  --ifm-background-color: #0a0420;
+  --ifm-background-surface-color: #1a0f3e;
+}
+
+/* Enhanced dark mode cosmic theme */
+[data-theme='dark'] .navbar {
+  background-color: #0a0420;
+  border-bottom: 2px solid #1a0f3e;
+}
+
+[data-theme='dark'] .footer {
+  background-color: #0a0420;
+  border-top: 2px solid #1a0f3e;
+}
+
+/* Dark mode adjustments for new homepage */
+[data-theme='dark'] .featuresSection {
+  background: linear-gradient(180deg, #1a0f3e 0%, #0a0420 100%);
+}
+
+[data-theme='dark'] .featureCard {
+  background: #1a0f3e;
+  border-color: #5dade2;
+  box-shadow: 8px 8px 0 rgba(93, 173, 226, 0.2);
+}
+
+[data-theme='dark'] .featureCard:hover {
+  box-shadow: 12px 12px 0 rgba(93, 173, 226, 0.3);
+}
+
+[data-theme='dark'] .cardTitle {
+  color: #fff;
+}
+
+[data-theme='dark'] .cardDesc {
+  color: #a8c5e8;
+}
+
+[data-theme='dark'] .sectionTitle {
+  color: #fff;
+}
+
+[data-theme='dark'] .techSection {
+  background: #0a0420;
+}
+
+[data-theme='dark'] .techTitle {
+  color: #fff;
+}
+
+[data-theme='dark'] .techBadge {
+  background: #1a0f3e;
+  box-shadow: 4px 4px 0 rgba(93, 173, 226, 0.2);
+}
+
+[data-theme='dark'] .techBadge:hover {
+  box-shadow: 6px 6px 0 rgba(93, 173, 226, 0.3);
+}
+
+/* Smooth transitions for theme components */
+.cosmicHero,
+.cosmicHero *,
+.featuresSection,
+.featuresSection *,
+.techSection,
+.techSection *,
+.navbar,
+.footer {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

website/src/pages/index.js

@@ -2,42 +2,123 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
 
-function HomepageHeader() {
+function CosmicHero() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
+    <section className={styles.cosmicHero}>
+      <div className={styles.cosmicBackground}>
+        <div className={styles.stars}></div>
+        <div className={styles.planets}></div>
+      </div>
+      <div className={styles.heroContent}>
+        <div className={styles.pixelLogo}>
+          <div className={styles.logoPixel}></div>
+        </div>
+        <Heading as="h1" className={styles.cosmicTitle}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/doc/GeneralSpacestation">
-            Go!
+        <p className={styles.cosmicSubtitle} aria-label="跨平台自动更新框架 极简 高效 开源">
+          🚀 跨平台自动更新框架 · 极简 · 高效 · 开源
+        </p>
+        <div className={styles.actionButtons}>
+          <Link className={styles.primaryBtn} to="/docs/doc/GeneralSpacestation">
+            <span className={styles.btnIcon}>▶</span> 开始探索
           </Link>
+          <a className={styles.secondaryBtn} href="https://github.com/GeneralLibrary" target="_blank" rel="noopener noreferrer">
+            <span className={styles.btnIcon}>★</span> GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function FeatureCard({ icon, title, description, link }) {
+  return (
+    <Link to={link} className={styles.featureCard}>
+      <div className={styles.cardIcon}>{icon}</div>
+      <h3 className={styles.cardTitle}>{title}</h3>
+      <p className={styles.cardDesc}>{description}</p>
+      <div className={styles.cardArrow}>→</div>
+    </Link>
+  );
+}
+
+function Features() {
+  return (
+    <section className={styles.featuresSection}>
+      <div className={styles.container}>
+        <div className={styles.sectionHeader}>
+          <Heading as="h2" className={styles.sectionTitle}>
+            核心组件
+          </Heading>
+          <div className={styles.titleUnderline}></div>
+        </div>
+        <div className={styles.featureGrid}>
+          <FeatureCard
+            icon="🚀"
+            title="GeneralUpdate"
+            description="轻量级跨平台自动更新客户端"
+            link="/docs/doc/GeneralSpacestation"
+          />
+          <FeatureCard
+            icon="🛠️"
+            title="Update Tools"
+            description="自动化补丁包生成与发布工具"
+            link="/docs/doc/GeneralSpacestation"
+          />
+          <FeatureCard
+            icon="💡"
+            title="Quick Start"
+            description="快速上手示例与最佳实践"
+            link="/docs/doc/GeneralSpacestation"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TechStack() {
+  const techs = [
+    { name: '.NET', color: '#512bd4' },
+    { name: 'WPF', color: '#0078d4' },
+    { name: 'Avalonia', color: '#8b5cf6' },
+    { name: 'MAUI', color: '#3498db' },
+    { name: 'Console', color: '#2ecc71' },
+  ];
+
+  return (
+    <section className={styles.techSection}>
+      <div className={styles.container}>
+        <Heading as="h3" className={styles.techTitle}>
+          支持平台
+        </Heading>
+        <div className={styles.techGrid}>
+          {techs.map((tech, idx) => (
+            <div key={idx} className={styles.techBadge} style={{ borderColor: tech.color }}>
+              <span className={styles.techDot} style={{ backgroundColor: tech.color }}></span>
+              {tech.name}
+            </div>
+          ))}
         </div>
       </div>
-    </header>
+    </section>
   );
 }
 
 export default function Home() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
+      title={`${siteConfig.title} - 跨平台自动更新框架`}
+      description="GeneralUpdate - 轻量级、跨平台、易用的 .NET 自动更新框架">
+      <CosmicHero />
+      <Features />
+      <TechStack />
     </Layout>
   );
 }