style: enhance footer layout and add custom class for styling

- Refactor Footer component to use a semantic <footer> element for better accessibility.
- Update CSS to include a new class for the custom footer, allowing for relative positioning.
- Adjust layout to improve responsiveness and visual alignment of footer content.

web/src/components/layout/Footer.jsx

@@ -221,13 +221,16 @@ const FooterBar = () => {
   return (
     <div className='w-full'>
       {footer ? (
-        <div className='relative'>
+        <footer className='relative h-auto py-4 px-6 md:px-24 w-full flex items-center justify-center overflow-hidden'>
+          <div className='flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-4'>
             <div
-            className='custom-footer'
+              className='custom-footer na-cb6feafeb3990c78 text-sm !text-semi-color-text-1'
               dangerouslySetInnerHTML={{ __html: footer }}
             ></div>
-          <div className='absolute bottom-2 right-4 text-xs !text-semi-color-text-2 opacity-70'>
+            <div className='text-sm flex-shrink-0'>
-            <span>{t('设计与开发由')} </span>
+              <span className='!text-semi-color-text-1'>
+                {t('设计与开发由')}{' '}
+              </span>
               <a
                 href='https://github.com/QuantumNous/new-api'
                 target='_blank'
@@ -238,6 +241,7 @@ const FooterBar = () => {
               </a>
             </div>
           </div>
+        </footer>
       ) : (
         customFooter
       )}

web/src/index.css

@@ -469,6 +469,9 @@ html.dark .sbg-variant-green {
 .custom-footer {
   font-size: 1.1em;
 }
+.custom-footer.na-cb6feafeb3990c78 {
+  position: relative;
+}
 
 /* 卡片内容容器通用样式 */
 .card-content-container {