180 lines
6.7 KiB
TypeScript
180 lines
6.7 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';
|
||
|
||
|
||
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-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]">
|
||
Flexible, efficient, and intelligent AI<br /> customer service of the new era
|
||
</h1>
|
||
<Link href="https://github.com">
|
||
<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">
|
||
Introduction to AI staff：smart AI Customer Service
|
||
</h2>
|
||
<p className="flex justify-start text-base font-normal leading-7 lg:pr-16 xl:justify-start">
|
||
This is a highly adaptable, efficiently performing, and intelligent AI customer service of the new era. It can swiftly respond to various situations, providing users with personalized and accurate responses, thus saving on enterprise labor costs.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<Line />
|
||
|
||
|
||
<div className='max-w-7xl mx-auto px-4 lg:px-0'>
|
||
<h2>AI staff</h2>
|
||
{[
|
||
{ image: aiAImage, title: "Cut down on labor expenses for the business", details: "The business is actively seeking methods to reduce its labor costs, possibly through automation, outsourcing, or restructuring. This initiative aims to optimize operational efficiency and improve the company's financial health in the long term. By implementing these strategies, the business hopes to remain competitive in its industry while ensuring sustainable growth and profitability.", order: false },
|
||
{ image: aiBImage, title: "A versatile office, administrative, and customer service professional", details: "A versatile professional skilled in office management, administration, and customer service, adept at handling diverse tasks efficiently.", order: true },
|
||
{ image: aiCImage, title: "24/7, 365 days a year", details: "Operating 24/7, 365 days a year, ensuring round-the-clock availability and support for customers and stakeholders.", order: false },
|
||
{ image: aiDImage, title: "Custom knowledge base, training, fine-tuning, and RAG, suitable for various industries", details: "Tailored knowledge base, training, refinement, and risk assessment guidance adaptable to diverse industries for enhanced performance and compliance.", order: true },
|
||
].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>
|
||
);
|
||
}
|