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,23 +221,27 @@ 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
+          <div className='flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-4'>
-            className='custom-footer'
+            <div
-            dangerouslySetInnerHTML={{ __html: footer }}
+              className='custom-footer na-cb6feafeb3990c78 text-sm !text-semi-color-text-1'
-          ></div>
+              dangerouslySetInnerHTML={{ __html: footer }}
-          <div className='absolute bottom-2 right-4 text-xs !text-semi-color-text-2 opacity-70'>
+            ></div>
-            <span>{t('设计与开发由')} </span>
+            <div className='text-sm flex-shrink-0'>
-            <a
+              <span className='!text-semi-color-text-1'>
-              href='https://github.com/QuantumNous/new-api'
+                {t('设计与开发由')}{' '}
-              target='_blank'
+              </span>
-              rel='noopener noreferrer'
+              <a
-              className='!text-semi-color-primary font-medium'
+                href='https://github.com/QuantumNous/new-api'
-            >
+                target='_blank'
-              New API
+                rel='noopener noreferrer'
-            </a>
+                className='!text-semi-color-primary font-medium'
+              >
+                New API
+              </a>
+            </div>
           </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 {