docs: unify homepage footer layout (#487)

Author: chenjiahan

website/theme/components/Copyright.module.scss

@@ -1,28 +1,16 @@
 .copyRight {
-  bottom: 0;
-  width: 100%;
-  margin-top: 3rem;
-  padding: 2rem 1.5rem;
-  border-top: 1px solid var(--rp-c-divider-light);
-
-  @media (min-width: 640px) {
-    padding: 2rem;
-  }
-}
-
-.copyRightInner {
-  width: 100%;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.copyRightText {
+  margin: 0;
   color: var(--rp-c-text-2);
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.8;
 
-  p {
-    margin: 0;
+  a {
+    color: inherit;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }

website/theme/components/Copyright.tsx

@@ -2,16 +2,15 @@ import styles from './Copyright.module.scss';
 
 export const CopyRight = () => {
   return (
-    <footer className={styles.copyRight}>
-      <div className={styles.copyRightInner}>
-        <div className={styles.copyRightText}>
-          <p>
-            Rstack CLI is free and open source software released under the MIT
-            license.
-          </p>
-          <p>© 2026 Rstack contributors.</p>
-        </div>
-      </div>
-    </footer>
+    <p className={styles.copyRight}>
+      © 2026 Rstack contributors ·{' '}
+      <a
+        href="https://github.com/rstackjs/rstack-cli/blob/main/LICENSE"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        MIT License
+      </a>
+    </p>
   );
 };

website/theme/components/HomeFooter.module.scss

@@ -1,23 +1,22 @@
 .footer {
-  display: none;
-  flex-direction: column;
-  align-items: center;
+  width: 100%;
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 5rem 2rem 3rem;
 
-  @media (min-width: 640px) {
-    display: flex;
+  @media (max-width: 640px) {
+    padding-inline: 1.25rem;
   }
 }
 
-.container {
-  display: flex;
+.links {
+  display: none;
   justify-content: space-between;
   gap: 2rem;
-  width: 100%;
-  max-width: 72rem;
-  padding: 3rem 2rem 1rem;
+  margin-bottom: 5rem;
 
-  @media (max-width: 640px) {
-    padding-inline: 1.25rem;
+  @media (min-width: 640px) {
+    display: flex;
   }
 }
 
@@ -27,7 +26,7 @@
   align-items: flex-start;
 
   h2 {
-    margin: 1rem 0;
+    margin: 0 0 1rem;
     font-size: 1.125rem;
     font-weight: 600;
     line-height: 1.75rem;

website/theme/components/HomeFooter.tsx

@@ -1,6 +1,7 @@
 import { useI18n, useLang } from '@rspress/core/runtime';
 import { Link } from '@rspress/core/theme-original';
 import { memo } from 'react';
+import { CopyRight } from './Copyright';
 import styles from './HomeFooter.module.scss';
 
 function useFooterData() {
@@ -116,8 +117,8 @@ export const HomeFooter = memo(() => {
   const footerData = useFooterData();
 
   return (
-    <div className={styles.footer}>
-      <div className={styles.container}>
+    <footer className={styles.footer}>
+      <div className={styles.links}>
         {footerData.map((item) => (
           <div key={item.title} className={styles.column}>
             <h2>{item.title}</h2>
@@ -133,6 +134,7 @@ export const HomeFooter = memo(() => {
           </div>
         ))}
       </div>
-    </div>
+      <CopyRight />
+    </footer>
   );
 });

website/theme/pages/index.tsx

@@ -1,5 +1,4 @@
 import { Commands } from '../components/Commands';
-import { CopyRight } from '../components/Copyright';
 import { GetStarted } from '../components/GetStarted';
 import { Hero } from '../components/Hero';
 import { HomeFooter } from '../components/HomeFooter';
@@ -11,7 +10,6 @@ export function HomeLayout() {
       <Commands />
       <GetStarted />
       <HomeFooter />
-      <CopyRight />
     </>
   );
 }