295 lines
10 KiB
TypeScript
295 lines
10 KiB
TypeScript
|
||
import { cn, nanoid } from '@/lib/utils'
|
||
import { auth } from '@/auth'
|
||
|
||
// import { Header } from '@/components/header'
|
||
// import { Web3Provider } from '@/components/providers/web3-provider'
|
||
import { Metadata } from 'next'
|
||
|
||
|
||
import { Message } from '@aigxion/isdk'
|
||
import { baseTitle, descriptionRoot } from '@/lib/metadata'
|
||
import Image from "next/image";
|
||
|
||
import aImage from '../../components/images/a.png'
|
||
import bImage from '../../components/images/b.png';
|
||
import cImage from '../../components/images/c.png';
|
||
import dImage from '../../components/images/d.png';
|
||
import aiStaffmage from '../../components/images/ai_staff.png';
|
||
import aiBGImage from '../../components/images/ai_staff_bg.png';
|
||
|
||
import aiAImage from '../../components/images/ai_a.png';
|
||
import aiBImage from '../../components/images/ai_b.png';
|
||
import aiCImage from '../../components/images/ai_c.png';
|
||
import aiDImage from '../../components/images/ai_d.png';
|
||
import kefuImage from '../../components/images/kefu.png';
|
||
|
||
|
||
export const metadata: Metadata = {
|
||
metadataBase: new URL('https://blogai.ai'),
|
||
title: {
|
||
default: baseTitle,
|
||
template: baseTitle
|
||
},
|
||
description: `${descriptionRoot}`,
|
||
icons: {
|
||
icon: '/favicon.png'
|
||
}
|
||
}
|
||
|
||
import Link from "next/link";
|
||
|
||
import { IconChevronUpDown, IconGitHub } from '@/components/ui/icons'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Frame } from '@/components/frame'
|
||
|
||
|
||
// const Line: React.FC = ({ className, IconLeft, label, IconRight }) => {
|
||
|
||
|
||
|
||
const Line: React.FC<{ className?: string }> = ({ className }) => {
|
||
|
||
return (
|
||
<div className='bg-clip-border overflow-clip border-b border-[#FFFFFF] md:border-[#FFFFFF]/15 text-[#FFD55D] rounded-lg '></div>
|
||
);
|
||
};
|
||
|
||
export default async function StaffIndexPage({ params: { locale } }: { params: { locale: string } }) {
|
||
const session = await auth()
|
||
const avatarUrl = session?.user?.image
|
||
const id = nanoid()
|
||
|
||
|
||
|
||
// const { t, resources } = await initTranslations(locale, i18nNamespaces);
|
||
|
||
return (
|
||
<div className=" lg:px-0 " id="index-target">
|
||
|
||
<div
|
||
className={cn("flex flex-col items-start relative z-1 justify-center min-h-72 mx-auto text-center overflow", `bg-[#8fbdb9]/5`)}
|
||
>
|
||
<figure
|
||
className='relative inset-x-0 z-[-1] top-[1px] pointer-events-none w-full '
|
||
><Image src={aiBGImage} className='w-full h-full py-[1rem]' alt="Hero Image" /></figure>
|
||
<div className='absolute w-full'>
|
||
<div
|
||
className=' gap-3 max-w-7xl m-auto text-left text-[#fff]'
|
||
>
|
||
<h1 className=" font-medium text-[1rem] lg:text-[4rem] text-[#fff] leading-[1.5rem] lg:leading-[5rem] text-left mb-[1rem] ">
|
||
美国移民
|
||
</h1>
|
||
<p className="my-[1.6rem]">民营企业家的首选美国移民路径</p>
|
||
<Link href="tel:19924370039">
|
||
<Button variant="ghost" className='bg-[#000] text-[#fff] gap-2 bg-transparent border border-white'>
|
||
{/* <IconGitHub /> */}
|
||
<span className=" ">联系我们</span>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Line />
|
||
<div className='flex flex-row items-start relative justify-between bg-white max-w-7xl m-auto py-[1.5rem]'>
|
||
|
||
<h4 className='text-[#17776C]'>移民咨询热线 199 2437 0039</h4>
|
||
<Link href="tel:19924370039">
|
||
<Button variant="ghost" className=' text-[#fff] gap-2 bg-transparent bg-[#17776C] hover:bg-[#26988b] border border-[#17776C] text-[#17776C]'>
|
||
{/* <IconGitHub /> */}
|
||
<span className="text-[#fff] ">立即联系</span>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className={cn("px-4 lg:px-0 text-[#08090B] flex flex-col items-center justify-center bg-[#F0F0F0]", "py-[2.5rem]", "w-full flex-1 max-w-7xl mx-auto ")}>
|
||
|
||
<div className="flex flex-col order-1 w-full xl:order-2 md:pl-12 ">
|
||
|
||
<h2 className="flex justify-start my-6 text-3xl font-medium leading-10 blog-heading-gradient sm:text-center xl:justify-start xl:text-left">
|
||
专业客服，全程服务
|
||
</h2>
|
||
<p className="flex justify-start text-base font-normal leading-7 lg:pr-16 xl:justify-start">
|
||
完善的客户体系，丰富的移民办理经验，为您和您的家人能够顺利抵达大洋彼岸保驾护航
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<div className='flex flex-col xl:flex-row w-full relative z-1 max-w-7xl m-auto'>
|
||
<Frame
|
||
className={cn(
|
||
"order-2 w-full my-auto shadow-sm xl:order-2 rounded",
|
||
{
|
||
|
||
},
|
||
)}
|
||
|
||
>
|
||
<Image src={kefuImage} alt="kefu Image" />
|
||
</Frame>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<div className={cn("grid md:grid-cols-2 xl:grid-cols-3 gap-[1rem] text-[#fff] ")}>
|
||
{[
|
||
{ image: aImage, title: "高效便捷，省时省力", p: "申请人可在中国完成申请，无需赴美。", url: "/#a" },
|
||
{ image: bImage, title: "自主控制成本与风险", p: "果冻移民的优势在于能够自主控制成本与风险，与许多民营企业家掌控全局的经营风格相契合。", url: "/#b" },
|
||
{ image: cImage, title: "直接获得永久绿卡", p: "可直接获取永久绿卡，省时省力，优于其他高成本的临时绿卡方案。", url: "/#c" },
|
||
].map((post, index) => (
|
||
// <Link href={`/blog/${post.url}`} key={index}>
|
||
<div key={index} className={cn("flex flex-col p-[6rem] m-0 gap-4 text-left min-h-[23rem] rounded-[1px] col-span-2 md:col-span-1", "bg-[#D5E8E6] text-[#17776C]")}>
|
||
<div className="rounded bg-clip-border overflow-clip">
|
||
{/* <figure
|
||
className='w-full'
|
||
><Image src={post.image} className='w-full' alt="Hero Image" /></figure> */}
|
||
</div>
|
||
|
||
<h5>优势一</h5>
|
||
<h2 className="text-3xl font-medium leading-10 sm:text-xl blog-heading-gradient">{post.title}</h2>
|
||
|
||
<p className="text-[16px] leading-10">{post.p}</p>
|
||
{/* <Link href={`/blog/${post.url}`} >
|
||
<Button variant="link" className="p-0 h-8 text-[#CCCCCC]" >Explore more</Button>
|
||
</Link> */}
|
||
|
||
</div>
|
||
// </Link>
|
||
))}
|
||
</div>
|
||
|
||
|
||
<Line />
|
||
|
||
|
||
|
||
|
||
<div className='max-w-7xl mx-auto px-4 lg:px-0'>
|
||
{[
|
||
{ image: aiAImage, title: "海外生意与移民双赢", details: "成功的移民不仅意味着在享受美国生活及公民权利，更是在这个国度打下事业的基石，为海外生活奠定坚实基础。", order: false },
|
||
].map((item, index) => (
|
||
<div className='pb-[2rem]' key={index}>
|
||
<div className={cn("flex flex-col xl:flex-row w-full relative z-1 text-[#000]", "py-[2.5rem]")}>
|
||
|
||
<div className="flex flex-col order-1 w-full xl:order-2 md:pl-12">
|
||
|
||
<h2 className="flex justify-start my-6 text-3xl font-medium leading-10 blog-heading-gradient sm:text-center xl:justify-start xl:text-left">
|
||
{item.title}
|
||
</h2>
|
||
<p className="flex justify-start text-base font-normal leading-7 lg:pr-16 xl:justify-start">
|
||
{item.details}
|
||
</p>
|
||
</div>
|
||
|
||
<Frame
|
||
|
||
className={cn(
|
||
"order-2 w-full my-auto shadow-sm xl:order-2 rounded",
|
||
{
|
||
"xl:order-1": item.order,
|
||
},
|
||
)}
|
||
|
||
>
|
||
<Image src={item.image} width={1920} height={1080} alt="Hero Image" />
|
||
</Frame>
|
||
|
||
|
||
</div>
|
||
|
||
<Line />
|
||
|
||
</div>
|
||
|
||
))}
|
||
</div>
|
||
|
||
<div className={cn("px-4 lg:px-0 text-[#08090B] relative z-1 bg-[#F0F0F0]", "py-[2.5rem]", "w-full flex-1 max-w-7xl mx-auto ")}>
|
||
|
||
<div className='flex flex-col xl:flex-row w-full relative z-1 max-w-7xl m-auto'>
|
||
<Frame
|
||
className={cn(
|
||
"order-2 w-full my-auto shadow-sm xl:order-2 rounded",
|
||
{
|
||
|
||
},
|
||
)}
|
||
|
||
>
|
||
<Image src={aiStaffmage} alt="Hero Image" />
|
||
</Frame>
|
||
|
||
<div className='w-2/5'></div>
|
||
|
||
<div className="flex flex-col order-1 w-full xl:order-2 md:pl-12 ">
|
||
|
||
<h2 className="flex justify-start my-6 text-3xl font-medium leading-10 blog-heading-gradient sm:text-center xl:justify-start xl:text-left">
|
||
无移民配额限制
|
||
</h2>
|
||
<p className="flex justify-start text-base font-normal leading-7 lg:pr-16 xl:justify-start">
|
||
符合基本条件，全家可迅速登陆美国，尽情享受工作、生活和学习的福利。
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div className={cn("px-4 lg:px-0 text-[#08090B] relative z-1 bg-[#E1E8EE]", "py-[2.5rem]", "max-w-7xl mx-auto flex-1 ")}>
|
||
|
||
<div className='flex flex-col xl:flex-row w-full relative z-1 max-w-7xl m-auto'>
|
||
{/* <Frame
|
||
className={cn(
|
||
"order-2 w-full my-auto shadow-sm xl:order-2 rounded",
|
||
{
|
||
|
||
},
|
||
)}
|
||
|
||
>
|
||
<Image src={aiStaffmage} alt="Hero Image" />
|
||
</Frame> */}
|
||
|
||
<div className='w-2/5'></div>
|
||
|
||
<div className="flex flex-col order-1 w-full xl:order-2 md:pl-12 ">
|
||
|
||
<h2 className="flex justify-start my-6 text-3xl font-medium leading-10 blog-heading-gradient sm:text-center xl:justify-start xl:text-left">
|
||
现在就开启您的移民之旅吧！
|
||
</h2>
|
||
<p className="flex justify-start text-base font-normal leading-7 lg:pr-16 xl:justify-start">
|
||
感谢您访问我们的移民网站！我们真诚地感谢您对我们的关注和支持。我们致力于为您提供最专业、最优质的移民服务，帮助您顺利实现移民梦想。如果您有任何疑问或需要进一步了解，欢迎随时与我们联系。再次感谢您的光临！
|
||
</p>
|
||
|
||
<span>联系我们——果冻移民咨询</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
);
|
||
}
|