42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
'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-5xl font-bold !leading-tight text-white md:text-6xl'>
|
||
连接
|
||
<br />
|
||
任何时间
|
||
<br />
|
||
任何地点
|
||
</h1>
|
||
{/* 副标题 */}
|
||
<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 className={'mt-1 w-[255px] md:mt-0 md:w-full'}>获取订阅地址，开始顶级的私密网络体验</p>
|
||
</div>
|
||
{/* 按钮 */}
|
||
<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>
|
||
);
|
||
}
|