fix: 首页出版效果

apps/user/components/CustomIcon/icons/close.svg

@@ -0,0 +1,3 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7312 7.88871L23.124 10.2816L17.9056 15.5L23.124 20.7185L20.7312 23.1113L15.5127 17.8929L10.2688 23.1368L7.87598 20.7439L13.1199 15.5L7.87598 10.2561L10.2688 7.86325L15.5127 13.1072L20.7312 7.88871Z" fill="black"/>
+</svg>

apps/user/components/Header/NewHeader.tsx

@@ -8,44 +8,56 @@ import Image from 'next/legacy/image';
 import Link from 'next/link';
 import LanguageSwitch from '../language-switch';
 // import ThemeSwitch from '../theme-switch';
+import EmailAuthDialog, { EmailAuthDialogRef } from '@/app/auth/EmailAuthDialog/EmailAuthDialog';
+import { useRef } from 'react';
 import { UserNav } from '../user-nav';
 import ImageLogo from './image.png';
 
-export default function Header() {
+export default function Header(props) {
   const t = useTranslations('common');
 
   const { user } = useGlobalStore();
   const Logo = (
-    <Link href='/' className='flex items-center gap-2 text-lg font-bold'>
-      <Image src={ImageLogo} width={172} height={49} alt='logo' unoptimized />
+    <Link href='/' className='-mt-2.5 flex items-center gap-2 font-bold'>
+      <Image src={ImageLogo} width={102} height={49} alt='logo' unoptimized />
     </Link>
   );
+
+  const dialogRef = useRef<EmailAuthDialogRef>(null);
+
   return (
-    <header className='fixed top-10 z-50 w-full'>
-      <div className='container flex h-[73px] items-center justify-between rounded-[50px] bg-white pl-7 pr-1'>
-        <nav className='flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6'>
-          {Logo}
-        </nav>
-        <div className='flex h-full flex-1 items-center justify-end gap-2 py-1'>
-          <LanguageSwitch />
-          {/*<ThemeSwitch />*/}
-          <UserNav />
-          {!user && (
-            <Link
-              href='/auth'
-              className={cn(
-                buttonVariants({
-                  size: 'lg',
-                  variant: 'outline',
-                }),
-                'h-full rounded-[50px] border-2 border-[#0F2C53] bg-[#0F2C53] px-14 text-2xl font-bold text-white transition hover:bg-white hover:text-[#0F2C53]',
+    <>
+      <header className='fixed top-10 z-50 w-full'>
+        <div className={'container'}>
+          <div className='flex h-[73px] items-center justify-between rounded-[50px] bg-white pl-4 pr-1 md:pl-7'>
+            <nav className='flex-col gap-6 font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6'>
+              {Logo}
+            </nav>
+            <div className='flex h-full flex-1 items-center justify-end gap-2 py-1'>
+              <LanguageSwitch />
+              {/*<ThemeSwitch />*/}
+              <UserNav />
+              {!user && (
+                <Link
+                  href='#'
+                  onClick={() => dialogRef.current?.show()}
+                  className={cn(
+                    buttonVariants({
+                      size: 'lg',
+                      variant: 'outline',
+                    }),
+                    'h-full rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] px-5 text-xl font-bold text-white transition hover:bg-[#225BA9] hover:text-white md:px-14 md:text-2xl',
+                  )}
+                >
+                  {t('login')}
+                </Link>
               )}
-            >
-              {t('login')}
-            </Link>
-          )}
+            </div>
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
+      {/*  登录注册弹窗 */}
+      <EmailAuthDialog ref={dialogRef} />
+    </>
   );
 }

apps/user/components/Header/header.tsx

@@ -34,7 +34,7 @@ export default function Header() {
           <UserNav />
           {!user && (
             <Link
-              href='/auth'
+              href='/'
               className={buttonVariants({
                 size: 'sm',
               })}

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'