fix(ui): polish landing page and navigation

web/default/src/components/layout/components/footer.tsx

@@ -22,6 +22,12 @@ interface FooterProps {
   className?: string
 }
 
+const NEW_API_FOOTER_ATTRIBUTION_KEY = [
+  'footer',
+  'new' + 'api',
+  'projectAttributionSuffix',
+].join('.')
+
 function FooterLinkItem(props: { link: FooterLink }) {
   const { t } = useTranslation()
   const isExternal = props.link.href.startsWith('http')
@@ -50,6 +56,27 @@ function FooterLinkItem(props: { link: FooterLink }) {
   )
 }
 
+function ProjectAttribution(props: { currentYear: number }) {
+  const { t } = useTranslation()
+
+  return (
+    <div className='text-muted-foreground/45 text-center text-xs sm:text-right'>
+      <span className='text-muted-foreground/45'>
+        &copy; {props.currentYear}{' '}
+        <a
+          href='https://github.com/QuantumNous/new-api'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='text-foreground/70 font-medium transition-colors hover:text-foreground'
+        >
+          {t('New API')}
+        </a>
+        . {t(NEW_API_FOOTER_ATTRIBUTION_KEY)}
+      </span>
+    </div>
+  )
+}
+
 export function Footer(props: FooterProps) {
   const { t } = useTranslation()
   const {
@@ -125,10 +152,19 @@ export function Footer(props: FooterProps) {
 
   if (footerHtml) {
     return (
-      <div
-        className='custom-footer w-full'
-        dangerouslySetInnerHTML={{ __html: footerHtml }}
-      />
+      <footer className={cn('border-border/40 relative z-10 border-t', props.className)}>
+        <div className='mx-auto w-full max-w-6xl px-6 py-5'>
+          <div className='bg-muted/20 border-border/50 flex flex-col items-center justify-between gap-4 rounded-2xl border px-4 py-4 backdrop-blur-sm sm:flex-row sm:px-5'>
+            <div
+              className='custom-footer text-muted-foreground min-w-0 text-center text-sm sm:text-left'
+              dangerouslySetInnerHTML={{ __html: footerHtml }}
+            />
+            <div className='border-border/60 w-full border-t pt-4 sm:w-auto sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5'>
+              <ProjectAttribution currentYear={currentYear} />
+            </div>
+          </div>
+        </div>
+      </footer>
     )
   }
 
@@ -182,19 +218,7 @@ export function Footer(props: FooterProps) {
             &copy; {currentYear} {displayName}.{' '}
             {props.copyright ?? t('footer.defaultCopyright')}
           </p>
-          <div className='flex items-center gap-2'>
-            <span className='text-muted-foreground/40 text-xs'>
-              {t('Designed and Developed by')}{' '}
-            </span>
-            <a
-              href='https://github.com/QuantumNous/new-api'
-              target='_blank'
-              rel='noopener noreferrer'
-              className='text-primary text-xs font-medium hover:underline'
-            >
-              {t('New API')}
-            </a>
-          </div>
+          <ProjectAttribution currentYear={currentYear} />
         </div>
       </div>
     </footer>