fix: 首页出版效果

apps/user/components/main/FooterCopyright.tsx

@@ -2,6 +2,7 @@
 
 import useGlobalStore from '@/config/use-global';
 import { useTranslations } from 'next-intl';
+import Image from 'next/image';
 import Link from 'next/link';
 
 export default function FooterCopyright() {
@@ -11,15 +12,25 @@ export default function FooterCopyright() {
 
   return (
     <footer className={'fixed bottom-6 z-50 w-full'}>
-      <div className={'container pr-0 text-right'}>
-        <strong className='text-foreground'>{site.site_name}</strong> © All rights reserved.
-        <div>
-          <Link href='/tos' className='underline'>
-            {t('tos')}
-          </Link>
-          <Link href='/privacy-policy' className='ml-2 underline'>
-            {t('privacyPolicy')}
-          </Link>
+      <div className={'container relative flex justify-center text-right md:block'}>
+        <Image
+          src={'./logo.png'}
+          height={37}
+          width={28}
+          className={`h-[37px] w-[28px] flex-shrink-0 object-contain md:absolute md:left-1/2 md:-translate-x-1/2`}
+          alt='logo'
+          unoptimized
+        ></Image>
+        <div className={'ml-2.5'}>
+          <strong className='text-foreground'>{site.site_name}</strong> © All rights reserved.
+          <div>
+            <Link href='/tos' className='underline'>
+              {t('tos')}
+            </Link>
+            <Link href='/privacy-policy' className='ml-2 underline'>
+              {t('privacyPolicy')}
+            </Link>
+          </div>
         </div>
       </div>
     </footer>

apps/user/components/main/HomeContent.tsx

@@ -1,10 +1,16 @@
+'use client';
+
 import { Button } from '@workspace/ui/components/button';
+import { useRef } from 'react';
+import OfferDialog, { OfferDialogRef } from './OfferDialog/index';
 
 export default function HomeContent() {
+  const dialogRef = useRef<OfferDialogRef>(null);
+
   return (
     <div className='flex min-h-[calc(100vh-73px)] flex-col items-center justify-center pt-8'>
       {/* 大标题 */}
-      <h1 className='mb-10 text-6xl font-extrabold leading-tight text-white'>
+      <h1 className='mb-10 text-5xl font-bold !leading-tight text-white md:text-6xl'>
         连接
         <br />
         任何时间
@@ -12,19 +18,24 @@ export default function HomeContent() {
         任何地点
       </h1>
       {/* 副标题 */}
-      <div className='mb-16 text-center text-sm font-bold leading-6 text-white'>
-        <p>
-          <span className='mr-2 text-xs text-white'>
+      <div className='mb-16 text-left text-[17px] leading-normal text-white md:text-center md:font-bold'>
+        <p className={'w-[255px] md:w-full'}>
+          <span className='mr-2 text-white'>
             Airo<sup className='text-[8px]'>™</sup>Port
           </span>
           <span>提供极稳，极简，极速的网络服务</span>
         </p>
-        <p>获取订阅地址，开始顶级的私密网络体验</p>
+        <p className={'mt-1 w-[255px] md:mt-0 md:w-full'}>获取订阅地址，开始顶级的私密网络体验</p>
       </div>
       {/* 按钮 */}
-      <Button className='mb-8 h-[64px] w-[219px] rounded-full border-2 border-white bg-white/10 text-2xl font-bold text-white transition hover:bg-white/20'>
+      <Button
+        onClick={() => dialogRef.current?.show()}
+        className='mb-8 h-[64px] w-[219px] rounded-full border-2 border-white bg-white/10 text-2xl font-bold text-white transition hover:bg-white/20'
+      >
         查看订阅套餐
       </Button>
+
+      <OfferDialog ref={dialogRef} />
     </div>
   );
 }

apps/user/components/main/OfferDialog/index.tsx

@@ -0,0 +1,39 @@
+import CloseSvg from '@/components/CustomIcon/icons/close.svg';
+import { Dialog, DialogContent, DialogTitle } from '@workspace/ui/components/dialog';
+import Image from 'next/image';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+
+export interface OfferDialogRef {
+  show: () => void;
+  hide: () => void;
+}
+
+const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
+  const [open, setOpen] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    show: () => setOpen(true),
+    hide: () => setOpen(false),
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent
+        className={
+          'rounded-0 !container h-full w-full px-12 py-[4.5rem] md:h-auto md:w-[496px] md:!rounded-[50px]'
+        }
+        closeIcon={<Image src={CloseSvg} alt={'close'} />}
+        closeClassName={
+          'right-[40px] top-[30px] font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
+        }
+      >
+        <DialogTitle className={'text-center text-5xl font-bold text-[#0F2C53]'}>
+          选择套餐
+        </DialogTitle>
+        <div className={'min-h-[524px]'}>套餐内容</div>
+      </DialogContent>
+    </Dialog>
+  );
+});
+
+export default OfferDialog;

apps/user/components/main/hero.tsx

@@ -38,7 +38,7 @@ export function Hero() {
             className='*:text-muted-foreground mb-8 max-w-xl'
           />
         )}
-        <Link href={user ? '/dashboard' : '/auth'}>
+        <Link href={user ? '/dashboard' : '/'}>
           <HoverBorderGradient
             containerClassName='rounded-full'
             as='button'