186 lines
7.2 KiB
TypeScript
186 lines
7.2 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 aiEImage from '../../../components/images/ai_e.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 IndexPage({ 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-center relative z-1 justify-center min-h-72 mx-auto text-center overflow", ``)}
|
|
>
|
|
<figure
|
|
className='relative inset-x-0 z-[-1] top-[-80px] pointer-events-none w-full'
|
|
><Image src={aiBGImage} className='w-full' alt="Hero Image" /></figure>
|
|
<div className='absolute w-full'>
|
|
<div
|
|
className='max-w-7xl m-auto'
|
|
>
|
|
<h1 className=" font-medium text-[1rem] lg:text-[4rem] text-[#fff] leading-[1.5rem] lg:leading-[5rem] text-center mb-[1rem]">
|
|
|
|
Anywhere, anytime, AI Staff makes<br /> every interaction more efficient.
|
|
</h1>
|
|
<Link href="/auth/sign-in/">
|
|
<Button variant="outline" className='bg-[#000] text-[#fff] gap-2'>
|
|
{/* <IconGitHub /> */}
|
|
<span className=" ">Try on web</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Line />
|
|
|
|
<div className={cn("px-4 lg:px-0 text-[#08090B] relative z-1 bg-[#E1E8EE]", "py-[2.5rem]", "w-full flex-1 mt-[-80px]")}>
|
|
|
|
<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} width={1920} height={1080} alt="Hero Image" />
|
|
</Frame>
|
|
|
|
<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">
|
|
Overview
|
|
</h2>
|
|
<p className="flex justify-start text-base font-normal leading-7 lg:pr-16 xl:justify-start">
|
|
AI Staff is an intelligent customer service platform built using advanced large language model technology, dedicated to providing seamless, efficient customer service. Supporting multiple interaction modes, including text and voice, it learns from enterprise-specific data to offer around-the-clock personalized customer service solutions, significantly reducing reliance on traditional human support.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<Line />
|
|
|
|
|
|
<div className='max-w-7xl mx-auto px-4 lg:px-0'>
|
|
<h2 className='text-[3rem] font-bold leading-[8rem] text-white text-center'>AI staff</h2>
|
|
{[
|
|
{ image: aiAImage, title: "Deep Learning Understanding", details: "AI Staff utilizes large language models to deeply understand user needs and intentions, significantly surpassing traditional keyword matching techniques, enhancing the accuracy and efficiency of problem-solving.", order: false },
|
|
{ image: aiBImage, title: "Private Domain Knowledge Learning", details: "Users can upload proprietary company documents, enabling AI Staff to learn from this data, thus precisely adapting to specific industry needs and enhancing customer service relevance and professionalism.", order: true },
|
|
{ image: aiCImage, title: "24/7 Service", details: "AI Staff provides services around the clock, day and night, always online, greatly reducing dependence on traditional customer service teams, helping businesses save on manpower costs and improve service continuity.", order: false },
|
|
{ image: aiDImage, title: "Multimodal Support", details: "The system supports text and voice inputs to meet different user preferences, offering a more natural and convenient interaction mode. Whether typing or speaking, users receive swift responses.", order: true },
|
|
|
|
{ image: aiEImage, title: "Customizable Services", details: "Services can be customized according to specific business needs, including employee personality, response length, and service methods, ensuring the service experience maximally aligns with corporate culture and customer expectations, enhancing customer satisfaction and loyalty.", 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-[#fff]", "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 text-white/60 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>
|
|
);
|
|
}
|