fix: fix theme

Author: wkylin

src/components/stateless/Footer/index.jsx

@@ -3,11 +3,11 @@ import { motion } from 'motion/react'
 import { ArrowUpRight } from 'lucide-react'
 import SongPng from '@assets/images/song.png'
 
-const Footer = () => {
+const FixFooter = () => {
   return (
-    <footer className="sticky bottom-0 left-0 z-0 w-full bg-[#0a192f] py-16 text-white">
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4">
+    <footer className="sticky bottom-0 left-0 z-0 w-full bg-[#0a192f] py-12 text-white">
+      <div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4">
           <div className="space-y-6">
             <motion.h2
               className="bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-4xl font-bold text-transparent"
@@ -17,15 +17,15 @@ const Footer = () => {
             >
               <img src={SongPng} width="40" height="40" alt="Logo" />
             </motion.h2>
-            <p className="">Shaping the future of web development</p>
+            <p className="text-sm leading-relaxed sm:text-base">Shaping the future of web development</p>
             <div className="relative">
               <input
                 type="email"
                 placeholder="Your email"
-                className="w-full rounded-full border-2 px-4 py-2 transition-all duration-300 outline-none"
+                className="w-full rounded-full border-2 px-4 py-2 pr-12 text-sm transition-all duration-300 outline-none sm:text-base"
               />
-              <button className="absolute top-2 right-1 rounded-full p-1 transition-colors duration-300">
-                <ArrowUpRight className="size-4" />
+              <button className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full p-2 transition-colors duration-300">
+                <ArrowUpRight className="h-4 w-4" />
               </button>
             </div>
           </div>
@@ -37,7 +37,7 @@ const Footer = () => {
                 <motion.li key={item} whileHover={{ x: 5 }} transition={{ type: 'spring', stiffness: 300 }}>
                   <a
                     href={`#${item.toLowerCase()}`}
-                    className="text-black transition-colors duration-300 dark:text-white"
+                    className="text-sm text-black transition-colors duration-300 sm:text-base dark:text-white"
                   >
                     {item}
                   </a>
@@ -60,7 +60,7 @@ const Footer = () => {
                     href={item.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex items-center text-black transition-colors duration-300 dark:text-white"
+                    className="flex items-center text-sm text-black transition-colors duration-300 sm:text-base dark:text-white"
                   >
                     {item.name}
                     <ArrowUpRight className="ml-1 h-4 w-4" />
@@ -72,7 +72,7 @@ const Footer = () => {
 
           <div className="space-y-4">
             <h3 className="text-xl font-semibold">Our Vision</h3>
-            <p className="">
+            <p className="text-sm leading-relaxed sm:text-base">
               Pioneering the next generation of web experiences through innovative code and cutting-edge design.
             </p>
             <div className="flex space-x-4">
@@ -95,16 +95,16 @@ const Footer = () => {
           </div>
         </div>
 
-        <div className="mt-12 flex flex-col items-center justify-between border-t border-white/10 pt-8 md:flex-row">
-          <p className="text-sm">&copy; {new Date().getFullYear()}. All rights reserved.</p>
-          <div className="mt-4 flex space-x-4 md:mt-0">
-            <a className="text-sm transition-colors duration-300 hover:text-white">Privacy Policy</a>
-            <a className="text-sm transition-colors duration-300 hover:text-white">Terms of Service</a>
+        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 md:flex-row">
+          <p className="text-center text-xs sm:text-sm">&copy; {new Date().getFullYear()}. All rights reserved.</p>
+          <div className="flex flex-wrap justify-center gap-3 text-xs sm:text-sm">
+            <a className="transition-colors duration-300 hover:text-white">Privacy Policy</a>
+            <a className="transition-colors duration-300 hover:text-white">Terms of Service</a>
           </div>
         </div>
       </div>
     </footer>
   )
 }
 
-export default Footer
+export default FixFooter

src/pages/layout/primaryNav/index.jsx

@@ -49,12 +49,12 @@ export const usePrimaryNavItems = () => {
   return items.filter((item) => item.show).map(({ show, ...rest }) => rest)
 }
 
-const PrimaryNav = () => {
+const PrimaryNav = ({ layout = '' }) => {
   const items = usePrimaryNavItems()
-
+  const filterItems = layout === 'top' ? items.filter((item) => item.key !== 'home') : items
   return (
     <Space style={{ marginRight: 16 }}>
-      {items.map((item) => (
+      {filterItems.map((item) => (
         <Button key={item.key} type="link" icon={item.icon} onClick={item.onClick}>
           {item.label}
         </Button>

src/pages/layout/proHeader/index.jsx

@@ -242,7 +242,7 @@ const ProHeader = ({ layout, onSettingClick, children, isMobile, onMobileMenuCli
       <div className={styles.headerMeta} style={isMobile ? { justifyContent: 'flex-end' } : {}}>
         {!isMobile && (
           <div className={styles.headerMenu} style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
-            <PrimaryNav />
+            <PrimaryNav layout={layout} />
             {layout === 'top' && <div style={{ flex: 1, minWidth: 0 }}>{children}</div>}
           </div>
         )}